docs(charts): add example for normalized stacked chart

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

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

packages/charts/src/components/BarChart/BarChart.tsx

@@ -76,7 +76,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -186,7 +186,7 @@
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const labelFormatter = useLabelFormatter(primaryDimension);
@@ -236,8 +236,6 @@
       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}

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -66,7 +66,7 @@
    * @param measure {IChartMeasure} Current measure object
    * @param dataElement {object} Current data element
    */
   highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -146,7 +146,7 @@
     ...rest
   } = props;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const chartConfig: BulletChartProps['chartConfig'] = {
     yAxisVisible: false,
@@ -225,7 +225,7 @@
           );
         } else {
           onDataPointClick(
             enrichEventWithDetails({} as any, {
               value: eventOrIndex.value,
               dataKey: eventOrIndex.dataKey,
               dataIndex: eventOrIndex.index,
@@ -281,8 +281,6 @@
       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}
@@ -303,7 +301,7 @@
         {chartConfig.xAxisVisible &&
           dimensions.map((dimension, index) => {
             let AxisComponent;
             const axisProps: any = {
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStartEnd' : 0),
               tickLine: index < 1,
@@ -444,7 +442,7 @@
           />
         )}
         {sortedMeasures?.map((element, index) => {
           const chartElementProps: any = {
             isAnimationActive: !noAnimation
           };
           let labelPosition = 'top';

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

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) }],

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}

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}

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}

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}

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}

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%"

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}

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

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