diff --git a/src/plugins/highcharts/__stories__/pie/WithTotals.stories.tsx b/src/plugins/highcharts/__stories__/pie/WithTotals.stories.tsx new file mode 100644 index 00000000..2e621d27 --- /dev/null +++ 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 = () => { + return ; +}; + +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 new file mode 100644 index 00000000..3fbd04b6 --- /dev/null +++ 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 index 74049935..e0f4c186 100644 --- 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 index 76c99979..e0e7091b 100644 --- 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[];