@gravity-ui/chartkit 4.13.0 → 4.14.0

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

@@ -1,4 +1,6 @@
+import memoize from 'lodash/memoize';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { getRandomCKId } from '../../../../../utils';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -22,3 +24,11 @@ export function prepareLegendSymbol(series) {
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }
+const getCommonStackId = memoize(getRandomCKId);
+export function getSeriesStackId(series) {
+    let stackId = series.stackId;
+    if (!stackId) {
+        stackId = series.stacking === 'normal' ? getCommonStackId() : getRandomCKId();
+    }
+    return stackId;
+}

package/build/plugins/d3/renderer/hooks/useShapes/area/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedAreaData } from './types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedAreaData[];
+    seriesOptions: PreparedSeriesOptions;
+};
+export declare const AreaSeriesShapes: (args: Args) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import { color, line as lineGenerator, area as areaGenerator, select, symbol, symbolCircle, symbolSquare, } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../../../../utils/cn';
+import { filterOverlappingLabels } from '../../../utils';
+import { setActiveState } from '../utils';
+const b = block('d3-area');
+function setMarker(selection, state) {
+    selection
+        .attr('d', (d) => {
+        const radius = d.point.series.marker.states[state].radius +
+            d.point.series.marker.states[state].borderWidth;
+        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
+    })
+        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
+        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
+}
+function getMarkerSymbol(type, radius) {
+    switch (type) {
+        case 'square': {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolSquare, size)();
+        }
+        case 'circle':
+        default: {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolCircle, size)();
+        }
+    }
+}
+const getMarkerVisibility = (d) => {
+    const markerStates = d.point.series.marker.states;
+    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    return enabled ? '' : 'hidden';
+};
+const getMarkerHaloVisibility = (d) => {
+    const markerStates = d.point.series.marker.states;
+    const enabled = markerStates.hover.halo.enabled && d.hovered;
+    return enabled ? '' : 'hidden';
+};
+export const AreaSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'area.states.hover');
+        const inactiveOptions = get(seriesOptions, 'area.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const shapeSelection = svgElement
+            .selectAll('shape')
+            .data(preparedData)
+            .join('g')
+            .attr('class', b('series'));
+        shapeSelection
+            .append('path')
+            .attr('class', b('line'))
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round');
+        const area = areaGenerator()
+            .x((d) => d.x)
+            .y0((d) => d.y0)
+            .y1((d) => d.y);
+        shapeSelection
+            .append('path')
+            .attr('class', b('region'))
+            .attr('d', (d) => area(d.points))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.opacity);
+        let dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.labels);
+        }, []);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelsSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
+        const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+        const markerSelection = svgElement
+            .selectAll('marker')
+            .data(markers)
+            .join('g')
+            .attr('class', b('marker'))
+            .attr('visibility', getMarkerVisibility)
+            .attr('transform', (d) => {
+            return `translate(${d.point.x},${d.point.y})`;
+        });
+        markerSelection
+            .append('path')
+            .attr('class', b('marker-halo'))
+            .attr('d', (d) => {
+            const type = d.point.series.marker.states.normal.symbol;
+            const radius = d.point.series.marker.states.hover.halo.radius;
+            return getMarkerSymbol(type, radius);
+        })
+            .attr('fill', (d) => d.point.series.color)
+            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
+            .attr('z-index', -1)
+            .attr('visibility', getMarkerHaloVisibility);
+        markerSelection
+            .append('path')
+            .attr('class', b('marker-symbol'))
+            .call(setMarker, 'normal')
+            .attr('fill', (d) => d.point.series.color);
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        dispatcher.on('hover-shape.area', (data) => {
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'area');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            shapeSelection.datum((d, index, list) => {
+                var _a;
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    let strokeColor = d.color || '';
+                    if (d.hovered) {
+                        strokeColor =
+                            ((_a = color(strokeColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                                strokeColor;
+                    }
+                    elementSelection.selectAll(`.${b('line')}`).attr('stroke', strokeColor);
+                    elementSelection.selectAll(`.${b('region')}`).attr('fill', strokeColor);
+                }
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    datum: d,
+                });
+            });
+            labelsSelection.datum((d, index, list) => {
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    datum: d,
+                });
+            });
+            markerSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('visibility', getMarkerVisibility(d));
+                    elementSelection
+                        .select(`.${b('marker-halo')}`)
+                        .attr('visibility', getMarkerHaloVisibility);
+                    elementSelection
+                        .select(`.${b('marker-symbol')}`)
+                        .call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on('hover-shape.area', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

package/build/plugins/d3/renderer/hooks/useShapes/area/prepare-data.d.ts

@@ -0,0 +1,11 @@
+import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAreaData } from './types';
+export declare const prepareAreaData: (args: {
+    series: PreparedAreaSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedAreaData[];

package/build/plugins/d3/renderer/hooks/useShapes/area/prepare-data.js

@@ -0,0 +1,114 @@
+import { group, sort } from 'd3';
+import { getXValue, getYValue } from '../utils';
+import { getLabelsSize, getLeftPosition } from '../../../utils';
+function getLabelData(point, series, xMax) {
+    const text = String(point.data.label || point.data.y);
+    const style = series.dataLabels.style;
+    const size = getLabelsSize({ labels: [text], style });
+    const labelData = {
+        text,
+        x: point.x,
+        y: point.y - series.dataLabels.padding,
+        style,
+        size: { width: size.maxWidth, height: size.maxHeight },
+        textAnchor: 'middle',
+        series: series,
+        active: true,
+    };
+    const left = getLeftPosition(labelData);
+    if (left < 0) {
+        labelData.x = labelData.x + Math.abs(left);
+    }
+    else {
+        const right = left + labelData.size.width;
+        if (right > xMax) {
+            labelData.x = labelData.x - xMax - right;
+        }
+    }
+    return labelData;
+}
+function getXValues(series, xAxis, xScale) {
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((d) => {
+            const key = String(d.x);
+            if (!acc.has(key)) {
+                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+            }
+        });
+        return acc;
+    }, new Map());
+    if (xAxis.type === 'category') {
+        return (xAxis.categories || []).reduce((acc, category) => {
+            const xValue = xValues.get(category);
+            if (typeof xValue === 'number') {
+                acc.push([category, xValue]);
+            }
+            return acc;
+        }, []);
+    }
+    return sort(Array.from(xValues), ([_x, xValue]) => xValue);
+}
+export const prepareAreaData = (args) => {
+    const { series, xAxis, xScale, yScale } = args;
+    const yAxis = args.yAxis[0];
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const [yMin, _yMax] = yScale.range();
+    return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
+        const xValues = getXValues(seriesStack, xAxis, xScale);
+        const accumulatedYValues = new Map();
+        xValues.forEach(([key]) => {
+            accumulatedYValues.set(key, 0);
+        });
+        const seriesStackData = seriesStack.reduce((acc, s) => {
+            const seriesData = s.data.reduce((m, d) => {
+                return m.set(String(d.x), d);
+            }, new Map());
+            const points = xValues.reduce((pointsAcc, [x, xValue]) => {
+                const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                const d = seriesData.get(x) ||
+                    {
+                        x,
+                        // FIXME: think about how to break the series into separate areas(null Y values)
+                        y: 0,
+                    };
+                const yValue = getYValue({ point: d, yAxis, yScale }) - accumulatedYValue;
+                accumulatedYValues.set(x, yMin - yValue);
+                pointsAcc.push({
+                    y0: yMin - accumulatedYValue,
+                    x: xValue,
+                    y: yValue,
+                    data: d,
+                    series: s,
+                });
+                return pointsAcc;
+            }, []);
+            let labels = [];
+            if (s.dataLabels.enabled) {
+                labels = points.map((p) => getLabelData(p, s, xMax));
+            }
+            let markers = [];
+            if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                markers = points.map((p) => ({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                }));
+            }
+            acc.push({
+                points,
+                markers,
+                labels,
+                color: s.color,
+                opacity: s.opacity,
+                width: s.lineWidth,
+                series: s,
+                hovered: false,
+                active: true,
+                id: s.id,
+            });
+            return acc;
+        }, []);
+        return result.concat(seriesStackData);
+    }, []);
+};

package/build/plugins/d3/renderer/hooks/useShapes/area/types.d.ts

@@ -0,0 +1,27 @@
+import { PreparedAreaSeries } from '../../useSeries/types';
+import { AreaSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
+export type PointData = {
+    y0: number;
+    x: number;
+    y: number;
+    data: AreaSeriesData;
+    series: PreparedAreaSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedAreaData = {
+    id: string;
+    points: PointData[];
+    markers: MarkerData[];
+    color: string;
+    opacity: number;
+    width: number;
+    series: PreparedAreaSeries;
+    hovered: boolean;
+    active: boolean;
+    labels: LabelData[];
+};

package/build/plugins/d3/renderer/hooks/useShapes/area/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -10,8 +10,9 @@ import type { PreparedLineData } from './line/types';
 import type { PreparedBarYData } from './bar-y/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter';
+import type { PreparedAreaData } from './area/types';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -8,6 +8,8 @@ import { preparePieData } from './pie/prepare-data';
 import { prepareLineData } from './line/prepare-data';
 import { LineSeriesShapes } from './line';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { AreaSeriesShapes } from './area';
+import { prepareAreaData } from './area/prepare-data';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
@@ -62,6 +64,20 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'area': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareAreaData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
                 case 'scatter': {
                     if (xScale && yScale) {
                         const preparedData = prepareScatterData({

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { AxisDomain } from 'd3';
-import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData } from '../../../../types/widget-data';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData } from '../../../../types';
 import { PreparedAxis } from '../hooks';
 export * from './math';
 export * from './text';

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

@@ -6,6 +6,7 @@ import { formatNumber } from '../../../shared';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 import { getNumberUnitRate } from '../../../shared/format-number/format-number';
 import { getDefaultDateFormat } from './time';
+import { getSeriesStackId } from '../hooks/useSeries/utils';
 export * from './math';
 export * from './text';
 export * from './time';
@@ -42,20 +43,26 @@ export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
+            case 'area':
             case 'bar-x': {
-                const barXSeries = seriesList;
-                const stackedSeries = group(barXSeries, (item) => item.stackId);
-                Array.from(stackedSeries).forEach(([, stack]) => {
+                const stackedSeries = group(seriesList, getSeriesStackId);
+                Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
                     const values = {};
-                    stack.forEach((singleSeries) => {
+                    seriesStack.forEach((singleSeries) => {
+                        const data = new Map();
                         singleSeries.data.forEach((point) => {
-                            const key = String(point.x || point.category);
-                            if (typeof values[key] === 'undefined') {
-                                values[key] = 0;
-                            }
+                            const key = String(point.x);
+                            let value = 0;
                             if (point.y && typeof point.y === 'number') {
-                                values[key] += point.y;
+                                value = point.y;
+                            }
+                            if (data.has(key)) {
+                                value = Math.max(value, data.get(key));
                             }
+                            data.set(key, value);
+                        });
+                        Array.from(data).forEach(([key, value]) => {
+                            values[key] = (values[key] || 0) + value;
                         });
                     });
                     acc.push(...Object.values(values));

package/build/plugins/d3/renderer/validation/__mocks__/index.d.ts

@@ -0,0 +1,3 @@
+import { ChartKitWidgetData } from '../../../../../types';
+export declare const XY_SERIES: Record<string, ChartKitWidgetData>;
+export declare const PIE_SERIES: Record<string, ChartKitWidgetData>;

package/build/plugins/d3/renderer/validation/__mocks__/index.js

@@ -0,0 +1,44 @@
+export const XY_SERIES = {
+    INVALID_CATEGORY_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        xAxis: { type: 'category' },
+    },
+    INVALID_CATEGORY_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 1, y: undefined }], name: 'Series' }],
+        },
+        yAxis: [{ type: 'category' }],
+    },
+    INVALID_DATETIME_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        xAxis: { type: 'datetime' },
+    },
+    INVALID_DATETIME_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        yAxis: [{ type: 'datetime' }],
+    },
+    INVALID_LINEAR_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 'str', y: 1 }], name: 'Series' }],
+        },
+    },
+    INVALID_LINEAR_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 1, y: 'str' }], name: 'Series' }],
+        },
+    },
+};
+export const PIE_SERIES = {
+    INVALID_VALUE: {
+        series: {
+            // @ts-expect-error
+            data: [{ type: 'pie', data: [{ value: undefined, name: 'Series' }] }],
+        },
+    },
+};

package/build/plugins/d3/renderer/validation/index.d.ts

@@ -0,0 +1,2 @@
+import { ChartKitWidgetData } from '../../../../types';
+export declare const validateData: (data?: ChartKitWidgetData) => void;