add story for bar-x series

src/plugins/d3/__stories__/bar-x/GradientLegend.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import type {StoryObj} from '@storybook/react';
+import {groups} from 'd3';
+
+import {ChartKit} from '../../../../components/ChartKit';
+import {Loader} from '../../../../components/Loader/Loader';
+import {settings} from '../../../../libs';
+import type {BarXSeriesData, ChartKitWidgetData} from '../../../../types';
+import {ExampleWrapper} from '../../examples/ExampleWrapper';
+import nintendoGames from '../../examples/nintendoGames';
+import {D3Plugin} from '../../index';
+import {getContinuesColorFn} from '../../renderer/utils';
+
+const BarXWithGradientLegend = () => {
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+        settings.set({plugins: [D3Plugin]});
+        setLoading(false);
+    }, []);
+
+    if (loading) {
+        return <Loader />;
+    }
+
+    const colors = ['rgb(255, 61, 100)', 'rgb(255, 198, 54)', 'rgb(84, 165, 32)'];
+    const stops = [0, 0.5, 1];
+
+    const gamesByPlatform = groups(nintendoGames, (item) => item.platform);
+    const categories = gamesByPlatform.map(([platform, _games]) => platform);
+    const data: BarXSeriesData[] = gamesByPlatform.map(([platform, games], index) => ({
+        x: index,
+        y: games.length,
+        label: `${platform}(${games.length})`,
+    }));
+    const getColor = getContinuesColorFn({colors, stops, values: data.map((d) => Number(d.y))});
+    data.forEach((d) => {
+        d.color = getColor(Number(d.y));
+    });
+
+    const widgetData: ChartKitWidgetData = {
+        series: {
+            data: [
+                {
+                    type: 'bar-x',
+                    name: 'Series 1',
+                    data,
+                },
+            ],
+        },
+        xAxis: {
+            type: 'category',
+            categories,
+        },
+        title: {text: 'Bar-x with gradient legend'},
+        legend: {
+            enabled: true,
+            type: 'continuous',
+            title: {text: 'Games by platform'},
+            colorScale: {
+                colors: colors,
+                stops,
+            },
+        },
+    };
+
+    return (
+        <ExampleWrapper styles={{minHeight: '400px'}}>
+            <ChartKit type="d3" data={widgetData} />
+        </ExampleWrapper>
+    );
+};
+
+export const BarXWithGradientLegendStory: StoryObj<typeof BarXWithGradientLegend> = {
+    name: 'Gradient colored bar-x chart',
+};
+
+export default {
+    title: 'Plugins/D3/Bar-x',
+    component: BarXWithGradientLegend,
+};

src/plugins/d3/renderer/components/Legend.tsx

@@ -265,10 +265,9 @@ export const Legend = (props: Props) => {
                 const {left} = getLegendPosition({
                     align: legend.align,
                     width: boundsWidth,
-                    offsetWidth: 0, //config.offset.left,
+                    offsetWidth: 0,
                     contentWidth,
                 });
-                // const left = 0;
                 const top = legend.lineHeight * lineIndex;
 
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);

src/plugins/d3/renderer/hooks/useSeries/prepare-legend.ts

@@ -66,7 +66,8 @@ export const getPreparedLegend = (args: {
             colorScale.colors = legend?.colorScale?.colors ?? [];
             colorScale.stops =
                 legend?.colorScale?.stops ?? getDefaultColorStops(colorScale.colors.length);
-            colorScale.domain = getDomainForContinuousColorScale({series});
+            colorScale.domain =
+                legend?.colorScale?.domain ?? getDomainForContinuousColorScale({series});
         } else {
             height += lineHeight;
         }

src/plugins/d3/renderer/utils/color.ts

@@ -10,6 +10,19 @@ export function getDomainForContinuousColorScale(args: {
         switch (s.type) {
             case 'pie': {
                 acc.push(...s.data.map((d) => d.value));
+                break;
+            }
+            case 'bar-y': {
+                acc.push(...s.data.map((d) => Number(d.x)));
+                break;
+            }
+            case 'scatter':
+            case 'bar-x':
+            case 'waterfall':
+            case 'line':
+            case 'area': {
+                acc.push(...s.data.map((d) => Number(d.y)));
+                break;
             }
         }
 

src/types/widget-data/legend.ts

@@ -49,6 +49,11 @@ export type ChartKitWidgetLegend = {
         stops?: number[];
         /* The colors that form the gradient */
         colors: string[];
+        /* Data that is displayed as ticks.
+         * It can be useful when the points are colored according to additional dimensions that are not involved in the chart display.
+         * By default, it is formed depending on the type of series ("y" for bar-x or "value" for pie series, for example).
+         **/
+        domain?: number[];
     };
     /* Width of the legend */
     width?: number;