feat(Tooltip): add customTotalCalculation function (#2043)

Author: theiliad

packages/core/src/components/axes/ruler-binned.ts

@@ -99,14 +99,30 @@ export class BinnedRuler extends Ruler {
 							? [
 									{
 										label:
-											get(options, 'locale.translations.total') ||
 											get(options, 'tooltip.totalLabel') ||
+											get(options, 'locale.translations.total') ||
 											'Total',
-										value: activeDataGroupNames.reduce(
-											(accum: number, currentValue: any) =>
-												accum + parseFloat(get(sampleMatchData, `data.${currentValue}`)),
-											0
-										)
+										value: (() => {
+											const customTotalCalculation = getProperty(
+												options,
+												'tooltip',
+												'customTotalCalculation'
+											)
+											if (customTotalCalculation) {
+												const dataForCalculation = activeDataGroupNames.map(
+													(groupName: string) => ({
+														[groupName]: parseFloat(get(sampleMatchData, `data.${groupName}`))
+													})
+												)
+												return customTotalCalculation(dataForCalculation)
+											} else {
+												return activeDataGroupNames.reduce(
+													(accum: number, currentValue: string) =>
+														accum + parseFloat(get(sampleMatchData, `data.${currentValue}`)),
+													0
+												)
+											}
+										})()
 									}
 								]
 							: [])

packages/core/src/components/essentials/tooltip-axis.ts

@@ -112,15 +112,24 @@ export class AxisChartsTooltip extends Tooltip {
 			if (!dualAxes && getProperty(options, 'tooltip', 'showTotal') === true) {
 				// use the primary/only range id
 				const rangeIdentifier = cartesianScales.getRangeIdentifier()
+				const customTotalCalculation = getProperty(options, 'tooltip', 'customTotalCalculation')
+
+				let totalValue: number
+				if (customTotalCalculation) {
+					totalValue = customTotalCalculation(data)
+				} else {
+					totalValue = data.reduce(
+						(accumulator: number, datum: any) => accumulator + datum[rangeIdentifier],
+						0
+					)
+				}
+
 				items.push({
 					label:
-						get(options, 'locale.translations.total') ||
 						get(options, 'tooltip.totalLabel') ||
+						get(options, 'locale.translations.total') ||
 						'Total',
-					value: data.reduce(
-						(accumulator: number, datum: any) => accumulator + datum[rangeIdentifier],
-						0
-					),
+					value: totalValue,
 					bold: true
 				})
 			}

packages/core/src/interfaces/components.ts

@@ -175,6 +175,11 @@ export interface TooltipOptions {
 	 * customizes the `Total` label shown inside tooltips
 	 */
 	totalLabel?: string
+	/**
+	 * custom function for calculating the total value
+	 * receives all the data corresponding to the tooltip
+	 */
+	customTotalCalculation?: (data: any[]) => number
 	/**
 	 * when true, always shows ruler tooltip instead of individual point tooltips
 	 */

packages/docs/src/lib/area/examplesStacked.ts

@@ -105,6 +105,32 @@ const areaStackedToolbarChanges: StackedAreaChartOptions = {
 	height: '400px'
 }
 
+const optionsDelta: StackedAreaChartOptions = {
+	title: 'Area chart with Delta Tooltip',
+	axes: {
+		left: {
+			stacked: true,
+			scaleType: ScaleTypes.LINEAR,
+			mapsTo: 'value'
+		},
+		bottom: {
+			scaleType: ScaleTypes.TIME,
+			mapsTo: 'date'
+		}
+	},
+	tooltip: {
+		showTotal: true,
+		totalLabel: 'Delta',
+		customTotalCalculation: data => {
+			const values = data.map(d => d.value).filter(v => v != null)
+			if (values.length === 0) return 0
+			return Math.max(...values) - Math.min(...values)
+		}
+	},
+	curve: 'curveMonotoneX',
+	height: '400px'
+}
+
 const areaStackedToolbarChangesData: ChartTabularData = [
 	{
 		group: 'Dataset 1',
@@ -226,6 +252,19 @@ const data: ChartTabularData = [
 	{ group: 'Dataset 3', date: '2023-01-17', value: 25213 }
 ]
 
+const dataDelta: ChartTabularData = [
+	{ group: 'Dataset 1', date: '2023-01-01', value: 10000 },
+	{ group: 'Dataset 1', date: '2023-01-05', value: 65000 },
+	{ group: 'Dataset 1', date: '2023-01-08', value: 10000 },
+	{ group: 'Dataset 1', date: '2023-01-13', value: 49213 },
+	{ group: 'Dataset 1', date: '2023-01-17', value: 51213 },
+	{ group: 'Dataset 2', date: '2023-01-01', value: 20000 },
+	{ group: 'Dataset 2', date: '2023-01-05', value: 25000 },
+	{ group: 'Dataset 2', date: '2023-01-08', value: 60000 },
+	{ group: 'Dataset 2', date: '2023-01-13', value: 30213 },
+	{ group: 'Dataset 2', date: '2023-01-17', value: 55213 }
+]
+
 const dataUneven: ChartTabularData = [
 	{ group: 'Dataset 1', date: '2023-01-01', value: 10000 },
 	{ group: 'Dataset 1', date: '2023-01-08', value: 10000 },
@@ -257,6 +296,11 @@ export const examplesStacked: Example[] = [
 		options: optionsUneven,
 		tags: ['test']
 	},
+	{
+		data: dataDelta,
+		options: optionsDelta,
+		tags: ['test', 'tooltip', 'delta']
+	},
 	{
 		data: areaStackedToolbarChangesData,
 		options: areaStackedToolbarChanges,