add option hitPadding

sgratzl · sgratzl · commit 1fee14c2c3f1 · 2018-11-13T09:25:53.000+01:00
closes #21 add hitPadding option to increase the hit area for small boxes
diff --git a/README.md b/README.md
@@ -73,6 +73,12 @@ interface IBaseStyling {
    * @default see rectangle backgroundColor
    */
   itemBorderColor: string;
+
+  /**
+   * padding thst is added around the bounding box when computing a mouse hit
+   * @default 1
+   */
+  hitPadding: number;
 }
 
 interface IBoxPlotStyling extends IBaseStyling {
diff --git a/samples/minmax.html b/samples/minmax.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Box Plot Chart</title>
+  <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+  <script src="../build/Chart.BoxPlot.js" type="text/javascript"></script>
+  <script src="https://unpkg.com/d3-random"></script>
+  <script src="./utils.js"></script>
+  <style>
+  canvas {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
+  </style>
+</head>
+
+<body>
+  <div id="container" style="width: 75%;">
+    <canvas id="canvas"></canvas>
+  </div>
+  <script>
+    var boxplotData = {
+      labels: ['A', 'B'],
+      datasets: [{
+        label: 'Min = Max',
+        data: [
+          [10, 20, 30, 40, 60, 80, 100],
+          [20, 20, 20]
+        ]
+      }]
+
+    };
+
+    window.onload = function() {
+      var ctx = document.getElementById("canvas").getContext("2d");
+      window.myBar = new Chart(ctx, {
+        type: 'boxplot',
+        data: boxplotData,
+        options: {
+          responsive: true,
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Box Plot Chart'
+          },
+          scales: {
+            xAxes: [{
+              // Specific to Bar Controller
+              categoryPercentage: 0.9,
+              barPercentage: 0.8
+            }]
+          }
+        }
+      });
+    };
+  </script>
+</body>
+
+</html>
diff --git a/src/controllers/base.js b/src/controllers/base.js
@@ -27,7 +27,7 @@ const array = {
     const options = this._elementOptions();
 
     Chart.controllers.bar.prototype.updateElement.call(this, elem, index, reset);
-    ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor'].forEach((item) => {
+    ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'hitPadding'].forEach((item) => {
       elem._model[item] = custom[item] !== undefined ? custom[item] : Chart.helpers.valueAtIndexOrDefault(dataset[item], index, options[item]);
     });
   },
diff --git a/src/elements/base.js b/src/elements/base.js
@@ -10,7 +10,8 @@ export const defaults = Object.assign({}, Chart.defaults.global.elements.rectang
   itemRadius: 0,
   itemStyle: 'circle',
   itemBackgroundColor: Chart.defaults.global.elements.rectangle.backgroundColor,
-  itemBorderColor: Chart.defaults.global.elements.rectangle.borderColor
+  itemBorderColor: Chart.defaults.global.elements.rectangle.borderColor,
+  hitPadding: 2
 });
 
 const ArrayElementBase = Chart.Element.extend({
@@ -70,32 +71,42 @@ const ArrayElementBase = Chart.Element.extend({
       bottom: 0
     };
   },
+  _getHitBounds() {
+    const padding = this._view.hitPadding;
+    const b = this._getBounds();
+    return {
+      left: b.left - padding,
+      top: b.top - padding,
+      right: b.right + padding,
+      bottom: b.bottom + padding
+    };
+  },
   height() {
     return 0; // abstract
   },
   inRange(mouseX, mouseY) {
     if (!this._view) {
       return false;
     }
-    const bounds = this._getBounds();
+    const bounds = this._getHitBounds();
     return mouseX >= bounds.left && mouseX <= bounds.right && mouseY >= bounds.top && mouseY <= bounds.bottom;
   },
   inLabelRange(mouseX, mouseY) {
     if (!this._view) {
       return false;
     }
-    const bounds = this._getBounds();
+    const bounds = this._getHitBounds();
     if (this.isVertical()) {
       return mouseX >= bounds.left && mouseX <= bounds.right;
     }
     return mouseY >= bounds.top && mouseY <= bounds.bottom;
   },
   inXRange(mouseX) {
-    const bounds = this._getBounds();
+    const bounds = this._getHitBounds();
     return mouseX >= bounds.left && mouseX <= bounds.right;
   },
   inYRange(mouseY) {
-    const bounds = this._getBounds();
+    const bounds = this._getHitBounds();
     return mouseY >= bounds.top && mouseY <= bounds.bottom;
   },
   getCenterPoint() {
