From 37c6d7215b3cd8803d07d0206c8f4664187196cc Mon Sep 17 00:00:00 2001 From: Sudhakar Date: Mon, 4 May 2015 15:20:32 +0530 Subject: [PATCH] Sudhakar, Hemanth | Added a config called 'sensitivity' for the point so that click sensitivity can be configured. Right now, the click area of a point is hard coded in the code and in high pixel density devices (iPad) this is not enough. Have modified the data.js (c3_chart_internal_fn.dist) function to calculate the distance between the two points and compare it with the configured value (which is passed to c3.generate method along with other config) Example point: { show: true, r: 5, sensitivity: 20 }, --- c3.js | 12 +++++------- src/config.js | 1 + src/data.js | 4 ++-- src/interaction.js | 7 ++----- 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/c3.js b/c3.js index 233d1b5..20b53aa 100644 --- a/c3.js +++ b/c3.js @@ -1158,6 +1158,7 @@ // point - point of each data point_show: true, point_r: 2.5, + point_sensitivity: 10, point_focus_expand_enabled: true, point_focus_expand_r: undefined, point_select_r: undefined, @@ -1875,7 +1876,7 @@ return $$.findClosest(candidates, pos); }; c3_chart_internal_fn.findClosest = function (values, pos) { - var $$ = this, minDist = 100, closest; + var $$ = this, minDist = $$.config.point_sensitivity, closest; // find mouseovering bar values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) { @@ -1902,7 +1903,7 @@ yIndex = config.axis_rotated ? 0 : 1, y = $$.circleY(data, data.index), x = $$.x(data.x); - return Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2); + return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2)); }; c3_chart_internal_fn.convertValuesToStep = function (values) { var converted = [].concat(values), i; @@ -2514,7 +2515,7 @@ $$.showXGridFocus(selectedData); // Show cursor as pointer if point is close to mouse position - if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) { + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer'); if (!$$.mouseover) { config.data_onmouseover.call($$.api, closest); @@ -2525,16 +2526,13 @@ .on('click', function () { var targetsToShow = $$.filterTargetsToShow($$.data.targets); var mouse, closest; - if ($$.hasArcType(targetsToShow)) { return; } mouse = d3.mouse(this); closest = $$.findClosestFromTargets(targetsToShow, mouse); - if (! closest) { return; } - // select if selection enabled - if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) { + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () { if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { $$.toggleShape(this, closest, closest.index); diff --git a/src/config.js b/src/config.js index 737ce1b..bb1af9e 100644 --- a/src/config.js +++ b/src/config.js @@ -144,6 +144,7 @@ c3_chart_internal_fn.getDefaultConfig = function () { // point - point of each data point_show: true, point_r: 2.5, + point_sensitivity: 10, point_focus_expand_enabled: true, point_focus_expand_r: undefined, point_select_r: undefined, diff --git a/src/data.js b/src/data.js index b29bd63..b0c3cbc 100644 --- a/src/data.js +++ b/src/data.js @@ -305,7 +305,7 @@ c3_chart_internal_fn.findClosestFromTargets = function (targets, pos) { return $$.findClosest(candidates, pos); }; c3_chart_internal_fn.findClosest = function (values, pos) { - var $$ = this, minDist = 100, closest; + var $$ = this, minDist = $$.config.point_sensitivity, closest; // find mouseovering bar values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) { @@ -332,7 +332,7 @@ c3_chart_internal_fn.dist = function (data, pos) { yIndex = config.axis_rotated ? 0 : 1, y = $$.circleY(data, data.index), x = $$.x(data.x); - return Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2); + return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2)); }; c3_chart_internal_fn.convertValuesToStep = function (values) { var converted = [].concat(values), i; diff --git a/src/interaction.js b/src/interaction.js index d7d4c41..c6203d9 100644 --- a/src/interaction.js +++ b/src/interaction.js @@ -288,7 +288,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) $$.showXGridFocus(selectedData); // Show cursor as pointer if point is close to mouse position - if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) { + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer'); if (!$$.mouseover) { config.data_onmouseover.call($$.api, closest); @@ -299,16 +299,13 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) .on('click', function () { var targetsToShow = $$.filterTargetsToShow($$.data.targets); var mouse, closest; - if ($$.hasArcType(targetsToShow)) { return; } mouse = d3.mouse(this); closest = $$.findClosestFromTargets(targetsToShow, mouse); - if (! closest) { return; } - // select if selection enabled - if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) { + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () { if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { $$.toggleShape(this, closest, closest.index);