feat(D3 plugin): bar-x dataLabels option

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

@@ -29,16 +29,19 @@ const Template: Story = () => {
                     data: [
                         {
                             category: 'A',
-                            x: 10,
+                            label: 10,
                             y: 100,
                         },
                         {
                             category: 'B',
-                            x: 12,
+                            label: 12,
                             y: 80,
                         },
                     ],
                     name: 'AB',
+                    dataLabels: {
+                        enabled: true,
+                    },
                 },
                 {
                     type: 'bar-x',

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

@@ -48,6 +48,14 @@ const Template: Story = () => {
                         },
                     ],
                     name: 'Sales',
+                    dataLabels: {
+                        enabled: true,
+                        inside: true,
+                        style: {
+                            fontWeight: 'normal',
+                            fontColor: '#fff',
+                        },
+                    },
                 },
                 {
                     type: 'bar-x',
@@ -62,12 +70,11 @@ const Template: Story = () => {
                             category: 'B',
                             y: 25,
                         },
-                        {
-                            category: 'C',
-                            y: 0,
-                        },
                     ],
                     name: 'Discount',
+                    dataLabels: {
+                        enabled: true,
+                    },
                 },
             ],
         },

src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts

@@ -18,6 +18,12 @@ import get from 'lodash/get';
 import {DEFAULT_PALETTE} from '../../constants';
 import {DEFAULT_LEGEND_SYMBOL_SIZE} from './constants';
 import {getRandomCKId} from '../../../../../utils';
+import {BaseTextStyle} from '../../../../../types/widget-data';
+
+const DEFAULT_DATALABELS_STYLE: BaseTextStyle = {
+    fontSize: '11px',
+    fontWeight: 'bold',
+};
 
 function prepareLegendSymbol(series: ChartKitWidgetSeries): PreparedLegendSymbol {
     switch (series.type) {
@@ -84,6 +90,14 @@ function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[] {
             data: singleSeries.data,
             stacking: singleSeries.stacking,
             stackId: singleSeries.stacking === 'normal' ? commonStackId : getRandomCKId(),
+            dataLabels: {
+                enabled: singleSeries.dataLabels?.enabled || false,
+                inside:
+                    typeof singleSeries.dataLabels?.inside === 'boolean'
+                        ? singleSeries.dataLabels?.inside
+                        : false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, singleSeries.dataLabels?.style),
+            },
         };
     }, []);
 }

src/plugins/d3/renderer/hooks/useSeries/types.ts

@@ -1,6 +1,7 @@
 import {
     BarXSeries,
     BarXSeriesData,
+    BaseTextStyle,
     PieSeries,
     PieSeriesData,
     RectLegendSymbolOptions,
@@ -33,6 +34,11 @@ export type PreparedBarXSeries = {
     type: BarXSeries['type'];
     data: BarXSeriesData[];
     stackId: string;
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+    };
 } & BasePreparedSeries;
 
 export type PreparedPieSeries = BasePreparedSeries &

src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx

@@ -4,14 +4,15 @@ import {ChartScale} from '../useAxisScales';
 import {OnSeriesMouseLeave, OnSeriesMouseMove} from '../useTooltip/types';
 import {BarXSeriesData} from '../../../../../types/widget-data';
 import {block} from '../../../../../utils/cn';
-import {group, pointer, ScaleBand, ScaleLinear, ScaleTime} from 'd3';
+import {group, pointer, ScaleBand, ScaleLinear, ScaleTime, select} from 'd3';
 import {PreparedBarXSeries} from '../useSeries/types';
 
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
+const DEFAULT_LABEL_PADDING = 7;
 
-const b = block('d3-bar');
+const b = block('d3-bar-x');
 
 type Args = {
     top: number;
@@ -82,7 +83,7 @@ function minDiff(arr: number[]) {
     return result;
 }
 
-export function prepareBarXSeries(args: Args) {
+export function BarXSeriesShapes(args: Args) {
     const {
         top,
         left,
@@ -96,60 +97,121 @@ export function prepareBarXSeries(args: Args) {
         svgContainer,
     } = args;
 
-    const stackedSeriesMap = group(series, (item) => item.stackId);
+    const ref = React.useRef<SVGGElement>(null);
 
-    const seriesData = series.map(({data}) => data).flat(2);
-    const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
-
-    const result: React.ReactElement[] = [];
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
 
-    Array.from(stackedSeriesMap).forEach(([stackId, stackedSeries]) => {
-        const stackHeights: Record<string, number> = {};
-        stackedSeries.forEach((item, seriesIndex) => {
-            item.data.forEach((point, i) => {
-                const rectProps = getRectProperties({
-                    point,
-                    xAxis,
-                    xScale,
-                    yAxis,
-                    yScale,
-                    minPointDistance,
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+
+        const xValues =
+            xAxis.type === 'category'
+                ? []
+                : series.reduce<number[]>((acc, {data}) => {
+                      data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+                      return acc;
+                  }, []);
+        const minPointDistance = minDiff(xValues);
+
+        const stackedSeriesMap = group(series, (item) => item.stackId);
+        Array.from(stackedSeriesMap).forEach(([, stackedSeries]) => {
+            const stackHeights: Record<string, number> = {};
+            stackedSeries.forEach((item) => {
+                const shapes = item.data.map((dataItem) => {
+                    const rectProps = getRectProperties({
+                        point: dataItem,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        minPointDistance,
+                    });
+
+                    if (!stackHeights[rectProps.x]) {
+                        stackHeights[rectProps.x] = 0;
+                    }
+
+                    const rectY = rectProps.y - stackHeights[rectProps.x];
+                    stackHeights[rectProps.x] += rectProps.height + 1;
+
+                    return {
+                        ...rectProps,
+                        y: rectY,
+                        data: dataItem,
+                    };
                 });
 
-                if (!stackHeights[rectProps.x]) {
-                    stackHeights[rectProps.x] = 0;
-                }
-
-                const rectY = rectProps.y - stackHeights[rectProps.x];
-                stackHeights[rectProps.x] += rectProps.height + 1;
-
-                if (!rectProps.height) {
-                    return;
+                svgElement
+                    .append('g')
+                    .attr('fill', item.color)
+                    .selectAll('rect')
+                    .data(shapes)
+                    .join('rect')
+                    .attr('class', b('segment'))
+                    .attr('x', (d) => d.x)
+                    .attr('y', (d) => d.y)
+                    .attr('height', (d) => d.height)
+                    .attr('width', (d) => d.width)
+                    .on('mousemove', (e, point) => {
+                        const [x, y] = pointer(e, svgContainer);
+                        onSeriesMouseMove?.({
+                            hovered: {
+                                data: point.data,
+                                series: item,
+                            },
+                            pointerPosition: [x - left, y - top],
+                        });
+                    })
+                    .on('mouseleave', () => {
+                        if (onSeriesMouseLeave) {
+                            onSeriesMouseLeave();
+                        }
+                    });
+
+                if (item.dataLabels.enabled) {
+                    const selection = svgElement
+                        .append('g')
+                        .style('font-size', item.dataLabels.style.fontSize)
+                        .selectAll('text')
+                        .data(shapes)
+                        .join('text')
+                        .text((d) => String(d.data.label || d.data.y))
+                        .attr('class', b('label'))
+                        .attr('x', (d) => d.x + d.width / 2)
+                        .attr('y', (d) => {
+                            if (item.dataLabels.inside) {
+                                return d.y + d.height / 2;
+                            }
+
+                            return d.y - DEFAULT_LABEL_PADDING;
+                        })
+                        .attr('text-anchor', 'middle');
+
+                    if (item.dataLabels.style.fontWeight) {
+                        selection.style('font-weight', item.dataLabels.style.fontWeight);
+                    }
+
+                    if (item.dataLabels.style.fontColor) {
+                        selection.style('fill', item.dataLabels.style.fontColor);
+                    }
                 }
-
-                result.push(
-                    <rect
-                        key={`${i}-${seriesIndex}-${stackId}`}
-                        className={b('rect')}
-                        fill={item.color}
-                        {...rectProps}
-                        y={rectY}
-                        onMouseMove={function (e) {
-                            const [x, y] = pointer(e, svgContainer);
-                            onSeriesMouseMove?.({
-                                hovered: {
-                                    data: point,
-                                    series: item,
-                                },
-                                pointerPosition: [x - left, y - top],
-                            });
-                        }}
-                        onMouseLeave={onSeriesMouseLeave}
-                    />,
-                );
             });
         });
-    });
+    }, [
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+        svgContainer,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        series,
+        left,
+        top,
+    ]);
 
-    return result;
+    return <g ref={ref} className={b()} />;
 }

src/plugins/d3/renderer/hooks/useShapes/index.tsx

@@ -8,7 +8,7 @@ import type {ChartOptions} from '../useChartOptions/types';
 import type {ChartScale} from '../useAxisScales';
 import type {PreparedBarXSeries, PreparedPieSeries, PreparedSeries} from '../';
 import type {OnSeriesMouseMove, OnSeriesMouseLeave} from '../useTooltip/types';
-import {prepareBarXSeries} from './bar-x';
+import {BarXSeriesShapes} from './bar-x';
 import {prepareScatterSeries} from './scatter';
 import {PieSeriesComponent} from './pie';
 
@@ -55,18 +55,13 @@ export const useShapes = (args: Args) => {
                 case 'bar-x': {
                     if (xScale && yScale) {
                         acc.push(
-                            ...prepareBarXSeries({
-                                top,
-                                left,
-                                series: chartSeries as PreparedBarXSeries[],
-                                xAxis,
-                                xScale,
-                                yAxis,
-                                yScale,
-                                onSeriesMouseMove,
-                                onSeriesMouseLeave,
-                                svgContainer,
-                            }),
+                            <BarXSeriesShapes
+                                {...args}
+                                key="bar-x"
+                                series={chartSeries as PreparedBarXSeries[]}
+                                xScale={xScale}
+                                yScale={yScale}
+                            />,
                         );
                     }
                     break;

src/plugins/d3/renderer/hooks/useShapes/styles.scss

@@ -24,3 +24,9 @@
         font-weight: bold;
     }
 }
+
+.chartkit-d3-bar-x {
+    &__label {
+        fill: var(--g-color-text-complementary);
+    }
+}

src/types/widget-data/bar-x.ts

@@ -9,6 +9,9 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     y?: number;
     /** Corresponding value of axis category */
     category?: string;
+
+    /** Data label value of the bar-x column. If not specified, the y value is used. */
+    label?: string | number;
 };
 
 export type BarXSeries<T = any> = BaseSeries & {
@@ -42,7 +45,11 @@ export type BarXSeries<T = any> = BaseSeries & {
     grouping?: boolean;
 
     dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
-        /** Whether to align the data label inside the box or to the actual value point */
+        /**
+         * Whether to align the data label inside or outside the box
+         *
+         * @default false
+         * */
         inside?: boolean;
     };
 

src/types/widget-data/base.ts

@@ -12,6 +12,8 @@ export type BaseSeries = {
          * @default true
          */
         enabled?: boolean;
+
+        style?: Partial<BaseTextStyle>;
     };
 };
 
@@ -26,4 +28,6 @@ export type BaseSeriesData<T = any> = {
 
 export type BaseTextStyle = {
     fontSize: string;
+    fontWeight?: string;
+    fontColor?: string;
 };