add story

gravity-ui · Dec 23, 2024 · feea634 · feea634
1 parent c3d7430
commit feea634
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 3 deletions.
diff --git a/src/plugins/highcharts/__stories__/UnsafeTooltip.stories.tsx b/src/plugins/highcharts/__stories__/UnsafeTooltip.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {Meta, Story} from '@storybook/react';
+
+import {ChartKit} from '../../../components/ChartKit';
+import {data} from '../mocks/unsafe-tooltip';
+
+import {ChartStory} from './components/ChartStory';
+
+export default {
+    title: 'Plugins/Highcharts/UnsafeTooltip',
+    component: ChartKit,
+} as Meta;
+
+const Template: Story<any> = () => {
+    return <ChartStory data={data} />;
+};
+
+export const UnsafeTooltip = Template.bind({});
diff --git a/src/plugins/highcharts/mocks/unsafe-tooltip.ts b/src/plugins/highcharts/mocks/unsafe-tooltip.ts
@@ -0,0 +1,139 @@
+import type {HighchartsWidgetData} from '../types';
+
+export const data: HighchartsWidgetData = {
+    data: {
+        graphs: [
+            {
+                title: '<i>Profit</i>',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 2,
+                    unsafe: true,
+                },
+                data: [
+                    {
+                        y: 18451.2728,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                    {
+                        y: 122490.80080000011,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                    {
+                        y: 145454.9480999999,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                ],
+                legendTitle: 'Profit',
+                colorKey: 'Profit',
+                colorGuid: null,
+                connectNulls: false,
+                yAxis: 0,
+                colorValue: 'Profit',
+                color: '#4DA2F1',
+                dashStyle: 'Solid',
+                name: '<i>Profit</i>',
+            },
+            {
+                title: 'Sales',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 2,
+                },
+                data: [
+                    {
+                        y: 741999.7952999998,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                    {
+                        y: 719047.0320000029,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                    {
+                        y: 836154.0329999966,
+                        dataLabels: {
+                            enabled: false,
+                        },
+                        label: '',
+                    },
+                ],
+                legendTitle: 'Sales',
+                colorKey: 'Sales',
+                colorGuid: null,
+                connectNulls: false,
+                yAxis: 0,
+                colorValue: 'Sales',
+                color: '#FF3D64',
+                dashStyle: 'Solid',
+                name: 'Sales',
+            },
+        ],
+        categories: ['Furniture', 'Office Supplies', 'Technology'],
+    },
+    config: {
+        precision: 2,
+        hideHolidaysBands: true,
+        enableSum: true,
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+        manageTooltipConfig: (config) => {
+            config.lines.forEach((line, index) => {
+                line.commentText = `Some comment ${index + 1}`;
+            });
+
+            return config;
+        },
+        unsafe: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'line',
+            zoomType: 'xy',
+        },
+        legend: {
+            symbolWidth: 38,
+        },
+        xAxis: {
+            endOnTick: false,
+        },
+        yAxis: {
+            opposite: false,
+            labels: {
+                y: 3,
+            },
+            type: 'linear',
+        },
+        tooltip: {},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false,
+                },
+                dataLabels: {
+                    allowOverlap: false,
+                },
+            },
+        },
+        axesFormatting: {
+            xAxis: [],
+            yAxis: [],
+        },
+        enableSum: true,
+    },
+};
diff --git a/src/plugins/highcharts/renderer/helpers/tooltip/index.ts b/src/plugins/highcharts/renderer/helpers/tooltip/index.ts
@@ -118,6 +118,7 @@ const renderRow = (
         allowComment,
         withDarkBackground,
         rowIndex,
+        unsafe,
     }: RowRenderingConfig,
 ) => {
     const hasComment = line.commentText || line.xyCommentText;
@@ -188,7 +189,7 @@ const renderRow = (
                             ? line.insertCellAt[index]
                             : line.insertCellAt[index](line);
                     } else {
-                        return render(line);
+                        return render(line, {unsafe});
                     }
                 })
                 .join('')}
@@ -238,7 +239,7 @@ export const formatTooltip = (
     }
 
     if (data.shared) {
-        cellsRenderers.push(renderNameCell, {unsafe});
+        cellsRenderers.push(renderNameCell);
     }
 
     if (data.withPercent) {
@@ -254,6 +255,7 @@ export const formatTooltip = (
     const rowRenderingConfig = {
         isSingleLine: lines.length === 1,
         cellsRenderers,
+        unsafe,
     };
 
     const rowRenderingConfigForSelectedLine = {

diff --git a/src/plugins/highcharts/renderer/helpers/tooltip/types.ts b/src/plugins/highcharts/renderer/helpers/tooltip/types.ts
@@ -80,10 +80,11 @@ export type TooltipLine = {
 };
 
 export type RowRenderingConfig = {
-    cellsRenderers: Array<(line: TooltipLine) => string>;
+    cellsRenderers: Array<(line: TooltipLine, options?: {unsafe?: boolean}) => string>;
     isSelectedLine?: boolean;
     allowComment?: boolean;
     withDarkBackground?: boolean;
     isSingleLine?: boolean;
     rowIndex?: number;
+    unsafe?: boolean;
 };