@gravity-ui/chartkit 3.6.0 → 3.7.0

package/build/plugins/d3/renderer/hooks/useSeries/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { scaleOrdinal } from 'd3';
+import { group, scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
@@ -9,9 +9,11 @@ export const useSeries = (args) => {
     const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
-        return series.reduce((acc, singleSeries) => {
+        const groupedSeries = group(series, (item) => item.type);
+        return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
             acc.push(...prepareSeries({
-                series: singleSeries,
+                type: seriesType,
+                series: seriesList,
                 legend,
                 colorScale,
             }));

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.d.ts

@@ -3,7 +3,8 @@ import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
 import type { PreparedLegend } from '../useChartOptions/types';
 import type { PreparedSeries } from './types';
 export declare function prepareSeries(args: {
-    series: ChartKitWidgetSeries;
+    type: ChartKitWidgetSeries['type'];
+    series: ChartKitWidgetSeries[];
     legend: PreparedLegend;
     colorScale: ScaleOrdinal<string, string>;
 }): PreparedSeries[];

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -4,6 +4,10 @@ import get from 'lodash/get';
 import { DEFAULT_PALETTE } from '../../constants';
 import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+const DEFAULT_DATALABELS_STYLE = {
+    fontSize: '11px',
+    fontWeight: 'bold',
+};
 function prepareLegendSymbol(series) {
     var _a;
     switch (series.type) {
@@ -34,6 +38,35 @@ function prepareAxisRelatedSeries(args) {
     };
     return [preparedSeries];
 }
+function prepareBarXSeries(args) {
+    const { colorScale, series, legend } = args;
+    const commonStackId = getRandomCKId();
+    return series.map((singleSeries) => {
+        var _a, _b, _c, _d;
+        const name = singleSeries.name || '';
+        const color = singleSeries.color || colorScale(name);
+        return {
+            type: singleSeries.type,
+            color: color,
+            name: name,
+            visible: get(singleSeries, 'visible', true),
+            legend: {
+                enabled: get(singleSeries, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(singleSeries),
+            },
+            data: singleSeries.data,
+            stacking: singleSeries.stacking,
+            stackId: singleSeries.stacking === 'normal' ? commonStackId : getRandomCKId(),
+            dataLabels: {
+                enabled: ((_a = singleSeries.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                inside: typeof ((_b = singleSeries.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
+                    ? (_c = singleSeries.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
+                    : false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = singleSeries.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
+            },
+        };
+    }, []);
+}
 function preparePieSeries(args) {
     const { series, legend } = args;
     const dataNames = series.data.map((d) => d.name);
@@ -68,14 +101,22 @@ function preparePieSeries(args) {
     return preparedSeries;
 }
 export function prepareSeries(args) {
-    const { series, legend, colorScale } = args;
-    switch (series.type) {
+    const { type, series, legend, colorScale } = args;
+    switch (type) {
         case 'pie': {
-            return preparePieSeries({ series, legend });
+            return series.reduce((acc, singleSeries) => {
+                acc.push(...preparePieSeries({ series: singleSeries, legend }));
+                return acc;
+            }, []);
         }
-        case 'scatter':
         case 'bar-x': {
-            return prepareAxisRelatedSeries({ series, legend, colorScale });
+            return prepareBarXSeries({ series: series, legend, colorScale });
+        }
+        case 'scatter': {
+            return series.reduce((acc, singleSeries) => {
+                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale }));
+                return acc;
+            }, []);
         }
         default: {
             const seriesType = get(series, 'type');

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -1,4 +1,4 @@
-import { BarXSeries, BarXSeriesData, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -19,6 +19,12 @@ export type PreparedScatterSeries = {
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
     data: BarXSeriesData[];
+    stackId: string;
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+    };
 } & BasePreparedSeries;
 export type PreparedPieSeries = BasePreparedSeries & Required<Omit<PieSeries, 'data'>> & {
     data: PieSeriesData['value'];

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
 import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import { BarXSeries } from '../../../../../types/widget-data';
+import { PreparedBarXSeries } from '../useSeries/types';
 type Args = {
     top: number;
     left: number;
-    series: BarXSeries[];
+    series: PreparedBarXSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
@@ -15,5 +15,5 @@ type Args = {
     onSeriesMouseLeave?: OnSeriesMouseLeave;
     svgContainer: SVGSVGElement | null;
 };
-export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function BarXSeriesShapes(args: Args): React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { block } from '../../../../../utils/cn';
-import { pointer } from 'd3';
-import { getRandomCKId } from '../../../../../utils';
+import { group, pointer, select } from 'd3';
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
-const b = block('d3-bar');
+const DEFAULT_LABEL_PADDING = 7;
+const b = block('d3-bar-x');
 const getRectProperties = (args) => {
     const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
     let cx;
@@ -48,32 +48,103 @@ function minDiff(arr) {
     }
     return result;
 }
-export function prepareBarXSeries(args) {
+export function BarXSeriesShapes(args) {
     const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
-    const seriesData = series.map(({ data }) => data).flat(2);
-    const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
-    return series.reduce((result, item) => {
-        const randomKey = getRandomCKId();
-        item.data.forEach((point, i) => {
-            const rectProps = getRectProperties({
-                point,
-                xAxis,
-                xScale,
-                yAxis,
-                yScale,
-                minPointDistance,
-            });
-            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function (e) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const xValues = xAxis.type === 'category'
+            ? []
+            : series.reduce((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 = {};
+            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 Object.assign(Object.assign({}, rectProps), { y: rectY, data: dataItem });
+                });
+                svgElement
+                    .selectAll('allRects')
+                    .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)
+                    .attr('fill', item.color)
+                    .on('mousemove', (e, point) => {
                     const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
                         hovered: {
-                            data: point,
+                            data: point.data,
                             series: item,
                         },
                         pointerPosition: [x - left, y - top],
                     });
-                }, onMouseLeave: onSeriesMouseLeave })));
+                })
+                    .on('mouseleave', () => {
+                    if (onSeriesMouseLeave) {
+                        onSeriesMouseLeave();
+                    }
+                });
+                if (item.dataLabels.enabled) {
+                    const selection = svgElement
+                        .selectAll('allLabels')
+                        .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')
+                        .style('font-size', item.dataLabels.style.fontSize);
+                    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);
+                    }
+                }
+            });
         });
-        return result;
-    }, []);
+    }, [
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+        svgContainer,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        series,
+        left,
+        top,
+    ]);
+    return React.createElement("g", { ref: ref, className: b() });
 }

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
-import { prepareBarXSeries } from './bar-x';
+import { BarXSeriesShapes } from './bar-x';
 import { prepareScatterSeries } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
@@ -15,18 +15,7 @@ export const useShapes = (args) => {
             switch (seriesType) {
                 case 'bar-x': {
                     if (xScale && yScale) {
-                        acc.push(...prepareBarXSeries({
-                            top,
-                            left,
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            onSeriesMouseMove,
-                            onSeriesMouseLeave,
-                            svgContainer,
-                        }));
+                        acc.push(React.createElement(BarXSeriesShapes, Object.assign({}, args, { key: "bar-x", series: chartSeries, xScale: xScale, yScale: yScale })));
                     }
                     break;
                 }

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -19,4 +19,8 @@
   fill: var(--g-color-text-complementary);
   font-size: 11px;
   font-weight: bold;
+}
+
+.chartkit-d3-bar-x__label {
+  fill: var(--g-color-text-complementary);
 }

package/build/plugins/d3/renderer/utils/index.js

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { group, select } from 'd3';
 import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
@@ -32,8 +32,35 @@ export const getDomainDataXBySeries = (series) => {
     }, []);
 };
 export const getDomainDataYBySeries = (series) => {
-    return series.filter(isSeriesWithNumericalYValues).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => d.y));
+    const groupedSeries = group(series, (item) => item.type);
+    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+        switch (type) {
+            case 'bar-x': {
+                const barXSeries = seriesList;
+                const stackedSeries = group(barXSeries, (item) => item.stackId);
+                Array.from(stackedSeries).forEach(([, stack]) => {
+                    const values = {};
+                    stack.forEach((singleSeries) => {
+                        singleSeries.data.forEach((point) => {
+                            const key = String(point.x || point.category);
+                            if (typeof values[key] === 'undefined') {
+                                values[key] = 0;
+                            }
+                            if (point.y) {
+                                values[key] += point.y;
+                            }
+                        });
+                    });
+                    acc.push(...Object.values(values));
+                });
+                break;
+            }
+            default: {
+                seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
+                    acc.push(...s.data.map((d) => d.y));
+                });
+            }
+        }
         return acc;
     }, []);
 };

package/build/types/widget-data/bar-x.d.ts

@@ -8,6 +8,8 @@ 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 & {
     type: 'bar-x';
@@ -16,6 +18,11 @@ export type BarXSeries<T = any> = BaseSeries & {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /** Whether to stack the values of each series on top of each other.
+     * Possible values are undefined to disable, "normal" to stack by value or "percent"
+     *
+     * @default undefined
+     * */
     stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
@@ -26,7 +33,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;
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */

package/build/types/widget-data/base.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",