docs(charts): add example for normalized stacked chart (#6762)

Lukas742 · web-flow · commit a4f7d96b7db8 · 2024-12-18T12:38:02.000+01:00
diff --git a/packages/charts/src/components/BarChart/BarChart.mdx b/packages/charts/src/components/BarChart/BarChart.mdx
@@ -2,6 +2,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
+import NormalizedStackedChartStory from '../../resources/NormalizedStackedChart.mdx';
 import * as ComponentStories from './BarChart.stories';
 
 <Meta of={ComponentStories} />
@@ -37,6 +38,8 @@ import * as ComponentStories from './BarChart.stories';
 
 <Canvas of={ComponentStories.WithFormatter} />
 
+<NormalizedStackedChartStory of={ComponentStories.WithNormalizedStacks} />
+
 ### Loading Placeholder
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
diff --git a/packages/charts/src/components/BarChart/BarChart.stories.tsx b/packages/charts/src/components/BarChart/BarChart.stories.tsx
@@ -4,6 +4,7 @@ import {
   legendConfig,
   secondaryDimensionDataSet,
   simpleDataSet,
+  stackedNormalizedConfig,
   tooltipConfig
 } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
@@ -159,6 +160,10 @@ export const WithHighlightedMeasure: Story = {
   }
 };
 
+export const WithNormalizedStacks: Story = {
+  args: stackedNormalizedConfig
+};
+
 export const WithCustomTooltipConfig: Story = {
   args: tooltipConfig
 };
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -236,8 +236,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <BarChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -281,8 +281,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.mdx b/packages/charts/src/components/ColumnChart/ColumnChart.mdx
@@ -2,6 +2,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import LegendStory from '../../resources/LegendConfig.mdx';
+import NormalizedStackedChartStory from '../../resources/NormalizedStackedChart.mdx';
 import * as ComponentStories from './ColumnChart.stories';
 
 <Meta of={ComponentStories} />
@@ -32,6 +33,8 @@ import * as ComponentStories from './ColumnChart.stories';
 
 <Canvas of={ComponentStories.WithStacks} />
 
+<NormalizedStackedChartStory of={ComponentStories.WithNormalizedStacks} />
+
 ### With Formatter
 
 <Canvas of={ComponentStories.WithFormatter} />
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx
@@ -4,6 +4,7 @@ import {
   legendConfig,
   secondaryDimensionDataSet,
   simpleDataSet,
+  stackedNormalizedConfig,
   tooltipConfig
 } from '../../resources/DemoProps.js';
 import { ColumnChart } from './ColumnChart.js';
@@ -86,6 +87,10 @@ export const WithStacks: Story = {
   }
 };
 
+export const WithNormalizedStacks: Story = {
+  args: stackedNormalizedConfig
+};
+
 export const WithFormatter: Story = {
   args: {
     dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -235,8 +235,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ColumnChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -286,8 +286,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ComposedChartLib
         syncId={syncId}
         onClick={onClickInternal}
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -230,8 +230,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <LineChartLib
         syncId={syncId}
         margin={marginChart}
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -289,8 +289,6 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <PieChartLib
         onClick={onClickInternal}
         margin={chartConfig.margin}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -175,8 +175,6 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadarChartLib
         onClick={onClickInternal}
         data={dataset}
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -141,8 +141,6 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
       style={style}
       {...rest}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <RadialBarChart
         onClick={onClickInternal}
         innerRadius="90%"
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -62,7 +62,6 @@ interface IScatterChartConfig extends ICartesianChartConfig {
   referenceLineX?: {
     value?: number;
     color?: string;
-    //todo: remove "Omit" once ref type has been fixed
   } & Omit<ReferenceLineProps, 'ref'>;
 }
 
@@ -227,8 +226,6 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
       resizeDebounce={chartConfig.resizeDebounce}
       {...propsWithoutOmitted}
     >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/*// @ts-ignore:: todo not yet compatible with React19*/}
       <ScatterChartLib
         onClick={onClickInternal}
         margin={marginChart}
diff --git a/packages/charts/src/resources/DemoProps.tsx b/packages/charts/src/resources/DemoProps.tsx
@@ -602,3 +602,41 @@ export const complexBulletDataset = [
     volume: 320
   }
 ];
+
+const percentFormatter = (val) => `${val.toFixed(1)}%`;
+function normalizeData(data: Record<string, number | string>[]) {
+  return data.map((item) => {
+    const total = Object.values(item).reduce((acc: number, cur) => {
+      return typeof cur === 'number' ? acc + cur : acc;
+    }, 0) as number;
+
+    const normalizedItem = Object.entries(item).map(([key, val]) => {
+      if (typeof val === 'number') {
+        return [key, total ? (val / total) * 100 : 0];
+      }
+      return [key, val];
+    });
+
+    return Object.fromEntries(normalizedItem);
+  });
+}
+export const stackedNormalizedConfig = {
+  measures: [
+    {
+      accessor: 'users',
+      stackId: 'A',
+      formatter: percentFormatter
+    },
+    {
+      accessor: 'sessions',
+      stackId: 'A',
+      formatter: percentFormatter
+    },
+    {
+      accessor: 'volume',
+      stackId: 'A',
+      formatter: percentFormatter
+    }
+  ],
+  dataset: normalizeData(complexDataSet)
+};
diff --git a/packages/charts/src/resources/NormalizedStackedChart.mdx b/packages/charts/src/resources/NormalizedStackedChart.mdx
@@ -0,0 +1,28 @@
+import { Canvas } from '@storybook/addon-docs';
+
+### Normalized stacked chart
+
+By transforming the `dataset`, a stacked chart can be normalized.
+
+<Canvas of={props.of} />
+
+#### Example normalize function
+
+```ts
+function normalizeData(data: Record<string, number | string>[]) {
+  return data.map((item) => {
+    const total = Object.values(item).reduce((acc: number, cur) => {
+      return typeof cur === 'number' ? acc + cur : acc;
+    }, 0);
+
+    const normalizedItem = Object.entries(item).map(([key, val]) => {
+      if (typeof val === 'number') {
+        return [key, total ? (val / total) * 100 : 0];
+      }
+      return [key, val];
+    });
+
+    return Object.fromEntries(normalizedItem);
+  });
+}
+```

Original file line number	Diff line number	Diff line change
`@@ -236,8 +236,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {`
`236`	`236`	`resizeDebounce={chartConfig.resizeDebounce}`
`237`	`237`	`{...propsWithoutOmitted}`
`238`	`238`	`>`
`239`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`240`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`241`	`239`	`<BarChartLib`
`242`	`240`	`syncId={syncId}`
`243`	`241`	`onClick={onClickInternal}`
Original file line number	Diff line number	Diff line change
`@@ -281,8 +281,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>`
`281`	`281`	`resizeDebounce={chartConfig.resizeDebounce}`
`282`	`282`	`{...propsWithoutOmitted}`
`283`	`283`	`>`
`284`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`285`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`286`	`284`	`<ComposedChartLib`
`287`	`285`	`syncId={syncId}`
`288`	`286`	`onClick={onClickInternal}`
Original file line number	Diff line number	Diff line change
`@@ -235,8 +235,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>`
`235`	`235`	`resizeDebounce={chartConfig.resizeDebounce}`
`236`	`236`	`{...propsWithoutOmitted}`
`237`	`237`	`>`
`238`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`239`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`240`	`238`	`<ColumnChartLib`
`241`	`239`	`syncId={syncId}`
`242`	`240`	`onClick={onClickInternal}`
Original file line number	Diff line number	Diff line change
`@@ -286,8 +286,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref`
`286`	`286`	`resizeDebounce={chartConfig.resizeDebounce}`
`287`	`287`	`{...propsWithoutOmitted}`
`288`	`288`	`>`
`289`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`290`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`291`	`289`	`<ComposedChartLib`
`292`	`290`	`syncId={syncId}`
`293`	`291`	`onClick={onClickInternal}`
Original file line number	Diff line number	Diff line change
`@@ -230,8 +230,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {`
`230`	`230`	`resizeDebounce={chartConfig.resizeDebounce}`
`231`	`231`	`{...propsWithoutOmitted}`
`232`	`232`	`>`
`233`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`234`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`235`	`233`	`<LineChartLib`
`236`	`234`	`syncId={syncId}`
`237`	`235`	`margin={marginChart}`
Original file line number	Diff line number	Diff line change
`@@ -289,8 +289,6 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {`
`289`	`289`	`resizeDebounce={chartConfig.resizeDebounce}`
`290`	`290`	`{...propsWithoutOmitted}`
`291`	`291`	`>`
`292`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`293`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`294`	`292`	`<PieChartLib`
`295`	`293`	`onClick={onClickInternal}`
`296`	`294`	`margin={chartConfig.margin}`
Original file line number	Diff line number	Diff line change
`@@ -175,8 +175,6 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {`
`175`	`175`	`resizeDebounce={chartConfig.resizeDebounce}`
`176`	`176`	`{...propsWithoutOmitted}`
`177`	`177`	`>`
`178`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`179`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`180`	`178`	`<RadarChartLib`
`181`	`179`	`onClick={onClickInternal}`
`182`	`180`	`data={dataset}`
Original file line number	Diff line number	Diff line change
`@@ -141,8 +141,6 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>`
`141`	`141`	`style={style}`
`142`	`142`	`{...rest}`
`143`	`143`	`>`
`144`		`- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}`
`145`		`- {/// @ts-ignore:: todo not yet compatible with React19/}`
`146`	`144`	`<RadialBarChart`
`147`	`145`	`onClick={onClickInternal}`
`148`	`146`	`innerRadius="90%"`