Add raw data to context and rename dataPoint to parsed (#8318)

benmccann · web-flow · commit eb7ce4e5a00e · 2021-02-05T09:13:32.000-05:00
* Make the raw data point available in scriptable context
* Rename variables
* Update samples
diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
@@ -140,8 +140,8 @@ var chart = new Chart(ctx, {
                         if (label) {
                             label += ': ';
                         }
-                        if (!isNaN(context.dataPoint.y)) {
-                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
+                        if (!isNaN(context.parsed.y)) {
+                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                         }
                         return label;
                     }
@@ -220,7 +220,10 @@ The tooltip items passed to the tooltip callbacks implement the following interf
     label: string,
 
     // Parsed data values for the given `dataIndex` and `datasetIndex`
-    dataPoint: object,
+    parsed: object,
+
+    // Raw data values for the given `dataIndex` and `datasetIndex`
+    raw: object,
 
     // Formatted value for the tooltip
     formattedValue: string,
diff --git a/docs/docs/general/options.md b/docs/docs/general/options.md
@@ -72,7 +72,8 @@ In addition to [dataset](#dataset)
 
 - `active`: true if element is active (hovered)
 - `dataIndex`: index of the current data
-- `dataPoint`: the parsed data values for the given `dataIndex` and `datasetIndex`
+- `parsed`: the parsed data values for the given `dataIndex` and `datasetIndex`
+- `raw`: the raw data values for the given `dataIndex` and `datasetIndex`
 - `element`: the element (point, arc, bar, etc.) for this data
 - `index`: getter for `dataIndex`
 - `type`: `'data'`
diff --git a/samples/animations/delay.html b/samples/animations/delay.html
@@ -76,7 +76,7 @@
 						var delay = 0;
 						var dsIndex = context.datasetIndex;
 						var index = context.dataIndex;
-						if (context.dataPoint && !context.delayed) {
+						if (context.parsed && !context.delayed) {
 							delay = index * 300 + dsIndex * 100;
 							context.delayed = true;
 						}
diff --git a/samples/charts/multi-series-pie.html b/samples/charts/multi-series-pie.html
@@ -84,7 +84,7 @@
 						callbacks: {
 							label: function(context) {
 								var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
-								return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];
+								return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
 							}
 						}
 					}
diff --git a/samples/scales/financial.html b/samples/scales/financial.html
@@ -192,7 +192,7 @@
 								if (label) {
 									label += ': ';
 								}
-								label += context.dataPoint.y.toFixed(2);
+								label += context.parsed.y.toFixed(2);
 								return label;
 							}
 						}
diff --git a/samples/scriptable/bar.html b/samples/scriptable/bar.html
@@ -27,7 +27,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			var c = v < -50 ? '#D60000'
 				: v < 0 ? '#F46300'
 				: v < 50 ? '#0358B6'
diff --git a/samples/scriptable/bubble.html b/samples/scriptable/bubble.html
@@ -33,7 +33,7 @@
 		}
 
 		function colorize(opaque, context) {
-			var value = context.dataset.data[context.dataIndex];
+			var value = context.raw;
 			var x = value.x / 100;
 			var y = value.y / 100;
 			var r = channelValue(x, y, [250, 150, 50, 0]);
@@ -90,14 +90,12 @@
 					},
 
 					hoverBorderWidth: function(context) {
-						var value = context.dataset.data[context.dataIndex];
-						return Math.round(8 * value.v / 1000);
+						return Math.round(8 * context.raw.v / 1000);
 					},
 
 					radius: function(context) {
-						var value = context.dataset.data[context.dataIndex];
 						var size = context.chart.width;
-						var base = Math.abs(value.v) / 1000;
+						var base = Math.abs(context.raw.v) / 1000;
 						return (size / 24) * base;
 					}
 				}
diff --git a/samples/scriptable/line.html b/samples/scriptable/line.html
@@ -40,7 +40,7 @@
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			return v < 10 ? 5
 				: v < 25 ? 7
 				: v < 50 ? 9
diff --git a/samples/scriptable/pie.html b/samples/scriptable/pie.html
@@ -27,7 +27,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, hover, ctx) {
-			var v = ctx.dataPoint;
+			var v = ctx.parsed;
 			var c = v < -50 ? '#D60000'
 				: v < 0 ? '#F46300'
 				: v < 50 ? '#0358B6'
diff --git a/samples/scriptable/polar.html b/samples/scriptable/polar.html
@@ -26,7 +26,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, hover, ctx) {
-			var v = ctx.dataset.data[ctx.dataIndex];
+			var v = ctx.raw;
 			var c = v < 35 ? '#D60000'
 				: v < 55 ? '#F46300'
 				: v < 75 ? '#0358B6'
diff --git a/samples/scriptable/radar.html b/samples/scriptable/radar.html
@@ -44,7 +44,7 @@
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			return v < 10 ? 5
 				: v < 25 ? 7
 				: v < 50 ? 9
diff --git a/samples/tooltips/callbacks.html b/samples/tooltips/callbacks.html
@@ -68,7 +68,7 @@
 								var sum = 0;
 
 								tooltipItems.forEach(function(tooltipItem) {
-									sum += tooltipItem.dataPoint.y;
+									sum += tooltipItem.parsed.y;
 								});
 								return 'Sum: ' + sum;
 							},
diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
@@ -171,7 +171,7 @@ function createDatasetContext(parent, index, dataset) {
 	});
 }
 
-function createDataContext(parent, index, point, element) {
+function createDataContext(parent, index, point, raw, element) {
 	return Object.create(parent, {
 		active: {
 			writable: true,
@@ -180,9 +180,12 @@ function createDataContext(parent, index, point, element) {
 		dataIndex: {
 			value: index
 		},
-		dataPoint: {
+		parsed: {
 			value: point
 		},
+		raw: {
+			value: raw
+		},
 		element: {
 			value: element
 		},
@@ -757,13 +760,14 @@ export default class DatasetController {
 	 */
 	getContext(index, active) {
 		const me = this;
+		const dataset = me.getDataset();
 		let context;
 		if (index >= 0 && index < me._cachedMeta.data.length) {
 			const element = me._cachedMeta.data[index];
 			context = element.$context ||
-				(element.$context = createDataContext(me.getContext(), index, me.getParsed(index), element));
+				(element.$context = createDataContext(me.getContext(), index, me.getParsed(index), dataset.data[index], element));
 		} else {
-			context = me.$context || (me.$context = createDatasetContext(me.chart.getContext(), me.index, me.getDataset()));
+			context = me.$context || (me.$context = createDatasetContext(me.chart.getContext(), me.index, dataset));
 		}
 
 		context.active = !!active;
diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
@@ -122,7 +122,8 @@ function createTooltipItem(chart, item) {
 	return {
 		chart,
 		label,
-		dataPoint: controller.getParsed(index),
+		parsed: controller.getParsed(index),
+		raw: chart.data.datasets[datasetIndex].data[index],
 		formattedValue: value,
 		dataset: controller.getDataset(),
 		dataIndex: index,
diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
@@ -506,7 +506,7 @@ describe('Plugin.Tooltip', function() {
 						mode: 'index',
 						callbacks: {
 							beforeLabel: function(ctx) {
-								return ctx.dataPoint.x + ',' + ctx.dataPoint.y;
+								return ctx.parsed.x + ',' + ctx.parsed.y;
 							}
 						}
 					}

Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@`
`76`	`76`	`var delay = 0;`
`77`	`77`	`var dsIndex = context.datasetIndex;`
`78`	`78`	`var index = context.dataIndex;`
`79`		`- if (context.dataPoint && !context.delayed) {`
	`79`	`+ if (context.parsed && !context.delayed) {`
`80`	`80`	`delay = index * 300 + dsIndex * 100;`
`81`	`81`	`context.delayed = true;`
`82`	`82`	`}`
Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@`
`84`	`84`	`callbacks: {`
`85`	`85`	`label: function(context) {`
`86`	`86`	`var labelIndex = (context.datasetIndex * 2) + context.dataIndex;`
`87`		`- return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];`
	`87`	`+ return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;`
`88`	`88`	`}`
`89`	`89`	`}`
`90`	`90`	`}`
Original file line number	Diff line number	Diff line change
`@@ -192,7 +192,7 @@`
`192`	`192`	`if (label) {`
`193`	`193`	`label += ': ';`
`194`	`194`	`}`
`195`		`- label += context.dataPoint.y.toFixed(2);`
	`195`	`+ label += context.parsed.y.toFixed(2);`
`196`	`196`	`return label;`
`197`	`197`	`}`
`198`	`198`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`function adjustRadiusBasedOnData(ctx) {`
`43`		`- var v = ctx.dataPoint.y;`
	`43`	`+ var v = ctx.parsed.y;`
`44`	`44`	`return v < 10 ? 5`
`45`	`45`	`: v < 25 ? 7`
`46`	`46`	`: v < 50 ? 9`