fix(Highcharts plugin): show totals of selected series on legend click (

#176)
gravity-ui · Jun 19, 2023 · ac7fe22 · ac7fe22
1 parent 9d6d482
commit ac7fe22
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 6 deletions.
diff --git a/src/plugins/highcharts/__stories__/pie/WithTotals.stories.tsx b/src/plugins/highcharts/__stories__/pie/WithTotals.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {ChartKit} from '../../../../components/ChartKit';
+import {data} from '../../mocks/pie-with-totals';
+import {ChartStory} from '../components/ChartStory';
+
+export default {
+    title: 'Plugins/Highcharts/Pie',
+    component: ChartKit,
+} as Meta;
+
+const Template: Story<any> = () => {
+    return <ChartStory data={data} />;
+};
+
+export const WithTotals = Template.bind({});
diff --git a/src/plugins/highcharts/mocks/pie-with-totals.ts b/src/plugins/highcharts/mocks/pie-with-totals.ts
@@ -0,0 +1,45 @@
+import {HighchartsWidgetData} from '../types';
+
+export const data: HighchartsWidgetData = {
+    data: {
+        graphs: [
+            {
+                name: 'Number of requests',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                },
+                dataLabels: {
+                    format: null,
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                    chartKitPrefix: '',
+                    chartKitPostfix: '',
+                    chartKitLabelMode: 'absolute',
+                    chartKitFormat: 'number',
+                    chartKitShowRankDelimiter: true,
+                },
+                data: [
+                    {name: 'Furniture', y: 14344, label: 14344},
+                    {name: 'Domestic chemistry', y: 14244, label: 14244},
+                    {name: 'Household goods', y: 14181, label: 14181},
+                ],
+            },
+        ],
+        categories: ['Furniture', 'Domestic chemistry', 'Household goods'],
+        totals: 42769,
+    },
+    config: {
+        showPercentInTooltip: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'pie',
+        },
+        plotOptions: {
+            pie: {
+                innerSize: '50%',
+            },
+        },
+    },
+};
diff --git a/src/plugins/highcharts/renderer/helpers/config/config.js b/src/plugins/highcharts/renderer/helpers/config/config.js
@@ -1622,13 +1622,12 @@ export function prepareConfig(data, options, isMobile, holidays) {
                             const chart = this;
                             const chartSeries = chart.series[0];
                             const innerWidth = chartSeries?.center[3];
+                            const formatOptions = chartSeries?.userOptions?.tooltip;
+                            const value =
+                                formatDonutTotals(chartSeries?.total, formatOptions) || totals;
+
                             if (innerWidth) {
-                                debouncedAdjustDonutFontSize(
-                                    chart,
-                                    chartSeries,
-                                    innerWidth,
-                                    totals,
-                                );
+                                debouncedAdjustDonutFontSize(chart, chartSeries, innerWidth, value);
                             }
                         },
                     }),

diff --git a/src/plugins/highcharts/types/widget.ts b/src/plugins/highcharts/types/widget.ts
@@ -44,6 +44,7 @@ export type HighchartsWidgetData = {
         | {
               graphs: CkHighchartsSeriesOptionsType[];
               categories: string[];
+              totals?: number | string;
           }
         | {
               graphs: CkHighchartsSeriesOptionsType[];