docs(charts): improve documentation & add tooltipConfig stories (#6410)

Lukas742 · web-flow · commit f9541153d880 · 2024-09-26T16:43:32.000+02:00
Fixes #6335
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -44,8 +44,8 @@ const config: StorybookConfig = {
           titlePrefix: 'Knowledge Base'
         },
         {
-          directory: '../packages/charts',
-          files: '**/*@(.stories.tsx)',
+          directory: '../packages/charts/src/components',
+          files: '**/*.@(mdx|stories.@(mdx|tsx))',
           titlePrefix: 'Charts'
         },
         {
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -13,7 +13,8 @@ export default defineConfig({
         '**/node_modules/**',
         'packages/*/src/index.ts',
         'packages/main/src/components/AnalyticalTable/types/*',
-        'packages/main/src/webComponents/**'
+        'packages/main/src/webComponents/**',
+        'packages/charts/src/resources/**'
       ]
     }
   },
diff --git a/packages/charts/src/components/BarChart/BarChart.mdx b/packages/charts/src/components/BarChart/BarChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './BarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -62,4 +63,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.WithHighlightedMeasure} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/BarChart/BarChart.stories.tsx b/packages/charts/src/components/BarChart/BarChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
 
 const meta = {
@@ -152,3 +152,7 @@ export const WithHighlightedMeasure: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/BulletChart/BulletChart.mdx b/packages/charts/src/components/BulletChart/BulletChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './BulletChart.stories';
 
 <Meta of={ComponentStories} />
@@ -64,4 +65,6 @@ You can do this via the `measures` array:
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/BulletChart/BulletChart.stories.tsx b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexBulletDataset } from '../../resources/DemoProps.js';
+import { complexBulletDataset, tooltipConfig } from '../../resources/DemoProps.js';
 import { BulletChart } from './BulletChart.js';
 
 const meta = {
@@ -116,3 +116,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.mdx b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ColumnChart.stories';
 
 <Meta of={ComponentStories} />
@@ -61,4 +62,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.WithHighlightedMeasure} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />;
+
 <Footer />
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
 
 const meta = {
@@ -143,3 +143,7 @@ export const WithHighlightedMeasure: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx b/packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx
@@ -49,7 +49,10 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface ColumnChartWithTrendProps
-  extends Omit<IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>, 'syncId'> {
+  extends Omit<
+    IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>,
+    'syncId' | 'tooltipConfig'
+  > {
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -59,7 +62,7 @@ export interface ColumnChartWithTrendProps
    *
    * **Optional Properties**
    * - `formatter`: function will be called for each data label and allows you to format it according to your needs
-   * - `interval`: number that controls how many ticks are rendered on the x axis
+   * - `interval`: number that controls how many ticks are rendered on the x-axis
    *
    */
   dimensions: DimensionConfig[];
@@ -160,7 +163,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     }
   } as TooltipProps<any, any>;
 
-  const { chartConfig: _0, dimensions: _1, measures: _2, tooltipConfig: _3, ...propsWithoutOmitted } = rest;
+  const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;
 
   return (
     <div
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.mdx b/packages/charts/src/components/ComposedChart/ComposedChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ComposedChart.stories';
 
 <Meta of={ComponentStories} />
@@ -62,4 +63,6 @@ You can set a reference line to any value by using the `referenceLine` `chartCon
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { bigDataSet, complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { bigDataSet, complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ComposedChart } from './index.js';
 
 const meta = {
@@ -203,3 +203,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
 
 <Meta of={ComponentStories} />
@@ -47,4 +48,6 @@ import * as ComponentStories from './DonutChart.stories';
 
 <Canvas of={ComponentStories.HideLabels} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/DonutChart/DonutChart.stories.tsx b/packages/charts/src/components/DonutChart/DonutChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { simpleDataSet, simpleDataSetWithSmallValues } from '../../resources/DemoProps.js';
+import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
 import { DonutChart } from './DonutChart.js';
 
 const meta = {
@@ -95,3 +95,7 @@ export const HideLabels: Story = {
     dataset: simpleDataSetWithSmallValues
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/LineChart/LineChart.mdx b/packages/charts/src/components/LineChart/LineChart.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs';
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './LineChart.stories';
 
 <Meta of={ComponentStories} />
@@ -89,4 +90,6 @@ export const LineChartWithLinearGradient = () => {
 };
 ```
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx
@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import {
+  bigDataSet,
+  complexDataSet,
+  secondaryDimensionDataSet,
+  simpleDataSet,
+  tooltipConfig
+} from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 
 const meta = {
@@ -151,3 +157,7 @@ export const WithLinearGradient: Story = {
     ]
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/PieChart/PieChart.mdx b/packages/charts/src/components/PieChart/PieChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './PieChart.stories';
 
 <Meta of={ComponentStories} />
@@ -35,4 +36,6 @@ import * as ComponentStories from './PieChart.stories';
 
 <Canvas of={ComponentStories.HideLabels} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/PieChart/PieChart.stories.tsx b/packages/charts/src/components/PieChart/PieChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { simpleDataSet, simpleDataSetWithSmallValues } from '../../resources/DemoProps.js';
+import { simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
 import { PieChart } from './PieChart.js';
 
 const meta = {
@@ -67,3 +67,7 @@ export const HideLabels: Story = {
     dataset: simpleDataSetWithSmallValues
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './RadarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -35,4 +36,6 @@ import * as ComponentStories from './RadarChart.stories';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/RadarChart/RadarChart.stories.tsx b/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { complexDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { RadarChart } from './RadarChart.js';
 
 const meta = {
@@ -93,3 +93,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.mdx b/packages/charts/src/components/ScatterChart/ScatterChart.mdx
@@ -1,5 +1,6 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './ScatterChart.stories';
 
 <Meta of={ComponentStories} />
@@ -27,4 +28,6 @@ import * as ComponentStories from './ScatterChart.stories';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} />
+
 <Footer />
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
+import { scatterColorDataSet, scatterComplexDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { ScatterChart } from './ScatterChart.js';
 
 const meta = {
@@ -64,3 +64,7 @@ export const LoadingPlaceholder: Story = {
     dataset: []
   }
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig
+};
diff --git a/packages/charts/src/resources/DemoProps.ts b/packages/charts/src/resources/DemoProps.ts
@@ -1,3 +1,47 @@
+import type { IChartBaseProps } from '@/interfaces/IChartBaseProps.js';
+
+export const tooltipConfig: IChartBaseProps = {
+  tooltipConfig: {
+    wrapperStyle: {
+      border: '5px solid',
+      borderImage: 'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1',
+      padding: '5px',
+      borderRadius: '8px'
+    },
+    itemStyle: {
+      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.15)',
+      backgroundColor: 'white',
+      borderRadius: '8px',
+      padding: '10px',
+      marginBlockStart: '2px'
+    },
+    contentStyle: {
+      background: 'black'
+    },
+    labelStyle: {
+      fontFamily: 'var(--sapFontBoldFamily)',
+      color: 'white'
+    },
+    cursor: { stroke: 'red', strokeWidth: 2, fill: 'transparent' },
+    separator: ':~:',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    formatter: (value, name, props) => {
+      if (name === 'Users') {
+        return [`${value}👨‍💻`, 'Custom Name in Tooltip!'];
+      }
+      return `${value}k`;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    labelFormatter: (label, payload) => {
+      return `${label}🗓️`;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    itemSorter: (item) => {
+      return -1;
+    }
+  }
+};
+
 export const singleData = [
   {
     name: 'January',
diff --git a/packages/charts/src/resources/TooltipConfig.mdx b/packages/charts/src/resources/TooltipConfig.mdx

Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,8 @@ const config: StorybookConfig = {`
`44`	`44`	`titlePrefix: 'Knowledge Base'`
`45`	`45`	`},`
`46`	`46`	`{`
`47`		`- directory: '../packages/charts',`
`48`		`- files: '*/@(.stories.tsx)',`
	`47`	`+ directory: '../packages/charts/src/components',`
	`48`	`+ files: '*/.@(mdx\|stories.@(mdx\|tsx))',`
`49`	`49`	`titlePrefix: 'Charts'`
`50`	`50`	`},`
`51`	`51`	`{`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@ export default defineConfig({`
`13`	`13`	`'/node_modules/',`
`14`	`14`	`'packages/*/src/index.ts',`
`15`	`15`	`'packages/main/src/components/AnalyticalTable/types/*',`
`16`		`- 'packages/main/src/webComponents/**'`
	`16`	`+ 'packages/main/src/webComponents/**',`
	`17`	`+ 'packages/charts/src/resources/**'`
`17`	`18`	`]`
`18`	`19`	`}`
`19`	`20`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import type { Meta, StoryObj } from '@storybook/react';`
`2`		`-import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';`
	`2`	`+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';`
`3`	`3`	`import { BarChart } from './BarChart.js';`
`4`	`4`
`5`	`5`	`const meta = {`
`@@ -152,3 +152,7 @@ export const WithHighlightedMeasure: Story = {`
`152`	`152`	`]`
`153`	`153`	`}`
`154`	`154`	`};`
	`155`	`+`
	`156`	`+export const WithCustomTooltipConfig: Story = {`
	`157`	`+ args: tooltipConfig`
	`158`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,10 @@ interface DimensionConfig extends IChartDimension {`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`export interface ColumnChartWithTrendProps`
`52`		`- extends Omit<IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' \| 'secondYAxisConfig'>>, 'syncId'> {`
	`52`	`+ extends Omit<`
	`53`	`+ IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' \| 'secondYAxisConfig'>>,`
	`54`	`+ 'syncId' \| 'tooltipConfig'`
	`55`	`+ > {`
`53`	`56`	`/**`
`54`	`57`	`* An array of config objects. Each object will define one dimension of the chart.`
`55`	`58`	`*`
`@@ -59,7 +62,7 @@ export interface ColumnChartWithTrendProps`
`59`	`62`	`*`
`60`	`63`	`* Optional Properties`
`61`	`64`	* - `formatter`: function will be called for each data label and allows you to format it according to your needs
`62`		- * - `interval`: number that controls how many ticks are rendered on the x axis
	`65`	+ * - `interval`: number that controls how many ticks are rendered on the x-axis
`63`	`66`	`*`
`64`	`67`	`*/`
`65`	`68`	`dimensions: DimensionConfig[];`
`@@ -160,7 +163,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp`
`160`	`163`	`}`
`161`	`164`	`} as TooltipProps<any, any>;`
`162`	`165`
`163`		`- const { chartConfig: _0, dimensions: _1, measures: _2, tooltipConfig: _3, ...propsWithoutOmitted } = rest;`
	`166`	`+ const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;`
`164`	`167`
`165`	`168`	`return (`
`166`	`169`	`<div`