From 306a56ee7257044125c3f3cb0dd71599add56bfb Mon Sep 17 00:00:00 2001 From: bydooweedoo Date: Wed, 27 Jul 2016 07:48:22 +0800 Subject: [PATCH 01/10] Add dataPoints to tooltip model --- src/core/core.tooltip.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 6ab623886ed..d255ee5a073 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -142,7 +142,9 @@ module.exports = function(Chart) { xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '', yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '', index: index, - datasetIndex: datasetIndex + datasetIndex: datasetIndex, + pointX: element._model.x, + pointY: element._model.y, }; } @@ -312,7 +314,8 @@ module.exports = function(Chart) { x: Math.round(tooltipPosition.x), y: Math.round(tooltipPosition.y), caretPadding: helpers.getValueOrDefault(tooltipPosition.padding, 2), - labelColors: labelColors + labelColors: labelColors, + dataPoints: tooltipItems, }); // We need to determine alignment of From 9ad1db9b1a0524e4a74a3bbe7701727d3e54f818 Mon Sep 17 00:00:00 2001 From: bydooweedoo Date: Wed, 24 Aug 2016 11:57:45 +0800 Subject: [PATCH 02/10] add testing for tooltip dataPoints --- test/core.tooltip.tests.js | 60 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js index c2497b8c3f1..5883addddc2 100755 --- a/test/core.tooltip.tests.js +++ b/test/core.tooltip.tests.js @@ -458,4 +458,64 @@ describe('tooltip tests', function() { expect(tooltip._view.x).toBeCloseToPixel(269); expect(tooltip._view.y).toBeCloseToPixel(155); }); + + it('Should have dataPoints', function() { + var chartInstance = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + label: 'Dataset 1', + data: [10, 20, 30], + pointHoverBorderColor: 'rgb(255, 0, 0)', + pointHoverBackgroundColor: 'rgb(0, 255, 0)' + }, { + label: 'Dataset 2', + data: [40, 40, 40], + pointHoverBorderColor: 'rgb(0, 0, 255)', + pointHoverBackgroundColor: 'rgb(0, 255, 255)' + }], + labels: ['Point 1', 'Point 2', 'Point 3'] + }, + options: { + tooltips: { + mode: 'single' + } + } + }); + + // Trigger an event over top of the + var pointIndex = 1; + var datasetIndex = 0; + var meta = chartInstance.getDatasetMeta(datasetIndex); + var point = meta.data[pointIndex]; + var node = chartInstance.chart.canvas; + var rect = node.getBoundingClientRect(); + var evt = new MouseEvent('mousemove', { + view: window, + bubbles: true, + cancelable: true, + clientX: rect.left + point._model.x, + clientY: rect.top + point._model.y + }); + + // Manully trigger rather than having an async test + node.dispatchEvent(evt); + + // Check and see if tooltip was displayed + var tooltip = chartInstance.tooltip; + + expect(tooltip._view instanceof Object).toBe(true); + expect(tooltip._view.dataPoints instanceof Array).toBe(true); + expect(tooltip._view.dataPoints.length).toEqual(1); + expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex); + expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex); + expect(tooltip._view.dataPoints[0].xLabel).toEqual( + chartInstance.config.data.labels[pointIndex] + ); + expect(tooltip._view.dataPoints[0].yLabel).toEqual( + chartInstance.config.data.datasets[datasetIndex].data[pointIndex] + ); + expect(tooltip._view.dataPoints[0].pointX).toBeCloseToPixel(point._model.x); + expect(tooltip._view.dataPoints[0].pointY).toBeCloseToPixel(point._model.y); + }); }); From 683910beca5f861a44d4a7b6bf50f1351f3fb923 Mon Sep 17 00:00:00 2001 From: bydooweedoo Date: Wed, 24 Aug 2016 12:13:24 +0800 Subject: [PATCH 03/10] add documentation for custom tooltip datapoints --- docs/09-Advanced.md | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md index 58dd50da996..f1de7933f77 100644 --- a/docs/09-Advanced.md +++ b/docs/09-Advanced.md @@ -159,6 +159,19 @@ var myPieChart = new Chart(ctx, { }); ``` +In addition to all tooltip properties, a `dataPoints` property is added containing an `array[CustomTooltipDataPoint]`. + +#### CustomTooltipDataPoint + +Name | Type | Description +--- | --- | --- +index | Number | Matching point index. +datasetIndex | Number | Matching dataset index. +xLabel | String | Matching label on X axis. +yLabel | String | Matching label on Y axis. +pointX | Number | X position of matching point. +pointY | Number | Y position of matching point. + See `sample/line-customTooltips.html` for examples on how to get started. ### Writing New Scale Types @@ -203,12 +216,12 @@ Scale instances are given the following properties during the fitting process. { left: Number, // left edge of the scale bounding box right: Number, // right edge of the bounding box' - top: Number, + top: Number, bottom: Number, width: Number, // the same as right - left height: Number, // the same as bottom - top - // Margin on each side. Like css, this is outside the bounding box. + // Margin on each side. Like css, this is outside the bounding box. margins: { left: Number, right: Number, @@ -225,7 +238,7 @@ Scale instances are given the following properties during the fitting process. ``` #### Scale Interface -To work with Chart.js, custom scale types must implement the following interface. +To work with Chart.js, custom scale types must implement the following interface. ```javascript { @@ -260,10 +273,10 @@ To work with Chart.js, custom scale types must implement the following interface Optionally, the following methods may also be overwritten, but an implementation is already provided by the `Chart.Scale` base class. ```javascript - // Transform the ticks array of the scale instance into strings. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks); + // Transform the ticks array of the scale instance into strings. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks); convertTicksToLabels: function() {}, - // Determine how much the labels will rotate by. The default implementation will only rotate labels if the scale is horizontal. + // Determine how much the labels will rotate by. The default implementation will only rotate labels if the scale is horizontal. calculateTickRotation: function() {}, // Fits the scale into the canvas. @@ -280,7 +293,7 @@ Optionally, the following methods may also be overwritten, but an implementation The Core.Scale base class also has some utility functions that you may find useful. ```javascript -{ +{ // Returns true if the scale instance is horizontal isHorizontal: function() {}, @@ -350,7 +363,7 @@ The following methods may optionally be overridden by derived dataset controller // chart types using a single scale linkScales: function() {}, - // Called by the main chart controller when an update is triggered. The default implementation handles the number of data points changing and creating elements appropriately. + // Called by the main chart controller when an update is triggered. The default implementation handles the number of data points changing and creating elements appropriately. buildOrUpdateElements: function() {} } ``` @@ -419,7 +432,7 @@ Plugins should derive from Chart.PluginBase and implement the following interfac ### Building Chart.js -Chart.js uses gulp to build the library into a single JavaScript file. +Chart.js uses gulp to build the library into a single JavaScript file. Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following: From e05be4c4aa3a14222b29c8fa47c6f943ea9f5574 Mon Sep 17 00:00:00 2001 From: bydooweedoo Date: Mon, 5 Sep 2016 10:35:48 +0800 Subject: [PATCH 04/10] Add example using dataPoints from custom tooltip --- samples/dataPoints-customTooltips.html | 104 +++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 samples/dataPoints-customTooltips.html diff --git a/samples/dataPoints-customTooltips.html b/samples/dataPoints-customTooltips.html new file mode 100644 index 00000000000..c096a4c5697 --- /dev/null +++ b/samples/dataPoints-customTooltips.html @@ -0,0 +1,104 @@ + + + + + Line Chart with Custom Tooltips + + + + + + +
+ +
+
+
+ + + + From 53c4aaab39e045933d7df4182a239f8b4f790958 Mon Sep 17 00:00:00 2001 From: bydooweedoo Date: Mon, 5 Sep 2016 10:39:00 +0800 Subject: [PATCH 05/10] Custom tooltip dataPoints: Update example file title --- samples/dataPoints-customTooltips.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/dataPoints-customTooltips.html b/samples/dataPoints-customTooltips.html index c096a4c5697..0e1d83f7c91 100644 --- a/samples/dataPoints-customTooltips.html +++ b/samples/dataPoints-customTooltips.html @@ -2,7 +2,7 @@ - Line Chart with Custom Tooltips + Custom Tooltips using Data Points