docs(charts): improve documentation & add tooltipConfig stories

.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'
         },
         {

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/**'
       ]
     }
   },

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 />

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
+};

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 />

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
+};

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 />

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
+};

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

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 />

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
+};

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 />

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
+};

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 />

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
+};

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 />

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
+};

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 />

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
+};

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 />

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
+};

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',