@gravity-ui/chartkit 5.17.1 → 5.18.0

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

@@ -1,158 +0,0 @@
-import { group, sort } from 'd3';
-import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
-import { getXValue, getYValue } 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, html: series.dataLabels.html });
-    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 - (right - xMax);
-        }
-    }
-    return labelData;
-}
-function getXValues(series, xAxis, xScale) {
-    const categories = xAxis.categories || [];
-    const xValues = series.reduce((acc, s) => {
-        s.data.forEach((d) => {
-            const key = String(xAxis.type === 'category'
-                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
-                : d.x);
-            if (!acc.has(key)) {
-                acc.set(key, getXValue({ point: d, xAxis, xScale }));
-            }
-        });
-        return acc;
-    }, new Map());
-    if (xAxis.type === 'category') {
-        return 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, yAxis, yScale, boundsHeight: plotHeight } = args;
-    const [_xMin, xRangeMax] = xScale.range();
-    const xMax = xRangeMax / (1 - xAxis.maxPadding);
-    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 yAxisIndex = s.yAxis;
-            const seriesYAxis = yAxis[yAxisIndex];
-            const seriesYScale = yScale[yAxisIndex];
-            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
-            const seriesData = s.data.reduce((m, d) => {
-                const key = String(xAxis.type === 'category'
-                    ? getDataCategoryValue({
-                        axisDirection: 'x',
-                        categories: xAxis.categories || [],
-                        data: d,
-                    })
-                    : d.x);
-                return m.set(key, 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: seriesYAxis, yScale: seriesYScale }) -
-                    accumulatedYValue;
-                accumulatedYValues.set(x, yMin - yValue);
-                pointsAcc.push({
-                    y0: yMin - accumulatedYValue,
-                    x: xValue,
-                    y: yValue,
-                    data: d,
-                    series: s,
-                });
-                return pointsAcc;
-            }, []);
-            let labels = [];
-            const htmlElements = [];
-            if (s.dataLabels.enabled) {
-                const labelItems = points.map((p) => getLabelData(p, s, xMax));
-                if (s.dataLabels.html) {
-                    const htmlLabels = labelItems.map((l) => {
-                        return {
-                            x: l.x - l.size.width / 2,
-                            y: l.y,
-                            content: l.text,
-                        };
-                    });
-                    htmlElements.push(...htmlLabels);
-                }
-                else {
-                    labels = labelItems;
-                }
-            }
-            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,
-                htmlElements,
-            });
-            return acc;
-        }, []);
-        if (series.some((s) => s.stacking === 'percent')) {
-            xValues.forEach(([x], index) => {
-                const stackHeight = accumulatedYValues.get(x) || 0;
-                let acc = 0;
-                const ratio = plotHeight / stackHeight;
-                seriesStackData.forEach((item) => {
-                    const point = item.points[index];
-                    if (point) {
-                        const height = (point.y0 - point.y) * ratio;
-                        point.y0 = plotHeight - height - acc;
-                        point.y = point.y0 + height;
-                        acc += height;
-                    }
-                });
-            });
-        }
-        return result.concat(seriesStackData);
-    }, []);
-};

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

@@ -1,28 +0,0 @@
-import { AreaSeriesData } from '../../../../../../types';
-import { HtmlItem, LabelData } from '../../../types';
-import { PreparedAreaSeries } from '../../useSeries/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[];
-    htmlElements: HtmlItem[];
-};

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

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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarXData } from './types';
-export { prepareBarXData } from './prepare-data';
-export * from './types';
-type Args = {
-    dispatcher: Dispatch<object>;
-    preparedData: PreparedBarXData[];
-    seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-};
-export declare const BarXSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import { color, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { filterOverlappingLabels } from '../../../utils';
-import { HtmlLayer } from '../HtmlLayer';
-export { prepareBarXData } from './prepare-data';
-export * from './types';
-const b = block('d3-bar-x');
-export const BarXSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        var _a;
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'bar-x.states.hover');
-        const inactiveOptions = get(seriesOptions, 'bar-x.states.inactive');
-        svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('allRects')
-            .data(preparedData)
-            .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', (d) => d.data.color || d.series.color)
-            .attr('opacity', (d) => d.opacity)
-            .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
-        const labelSelection = 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);
-        dispatcher.on('hover-shape.bar-x', (data) => {
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            if (!data) {
-                if (hoverEnabled) {
-                    rectSelection.attr('fill', (d) => d.data.color || d.series.color);
-                }
-                if (inactiveEnabled) {
-                    rectSelection.attr('opacity', null);
-                    labelSelection.attr('opacity', null);
-                }
-                return;
-            }
-            if (hoverEnabled) {
-                const hoveredValues = data.map((d) => d.data.x);
-                rectSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.data.color || d.series.color;
-                    if (hoveredValues.includes(d.data.x)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveEnabled) {
-                const hoveredSeries = data.map((d) => d.series.id);
-                rectSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-                labelSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-            }
-        });
-        return () => {
-            dispatcher.on('hover-shape.bar-x', null);
-        };
-    }, [dispatcher, preparedData, seriesOptions]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
-};

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

@@ -1,13 +0,0 @@
-import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
-import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
-import { PreparedBarXData } from './types';
-export declare const prepareBarXData: (args: {
-    series: PreparedBarXSeries[];
-    seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis;
-    xScale: ChartScale;
-    yAxis: PreparedAxis[];
-    yScale: ChartScale[];
-    boundsHeight: number;
-}) => PreparedBarXData[];

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

@@ -1,160 +0,0 @@
-import { ascending, descending, max, sort } from 'd3';
-import get from 'lodash/get';
-import { getDataCategoryValue, getLabelsSize } from '../../../utils';
-import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
-function getLabelData(d) {
-    if (!d.series.dataLabels.enabled) {
-        return undefined;
-    }
-    const text = String(d.data.label || d.data.y);
-    const style = d.series.dataLabels.style;
-    const html = d.series.dataLabels.html;
-    const { maxHeight: height, maxWidth: width } = getLabelsSize({
-        labels: [text],
-        style,
-        html,
-    });
-    let y = Math.max(height, d.y - d.series.dataLabels.padding);
-    if (d.series.dataLabels.inside) {
-        y = d.y + d.height / 2;
-    }
-    const x = d.x + d.width / 2;
-    return {
-        text,
-        x: html ? x - width / 2 : x,
-        y: html ? y - height : y,
-        style,
-        size: { width, height },
-        textAnchor: 'middle',
-        series: d.series,
-    };
-}
-export const prepareBarXData = (args) => {
-    const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
-    const categories = get(xAxis, 'categories', []);
-    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
-    const barPadding = get(seriesOptions, 'bar-x.barPadding');
-    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
-    const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
-    const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
-    const sortKey = (() => {
-        switch (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.key) {
-            case 'y': {
-                return 'data.y';
-            }
-            case 'name': {
-                return 'series.name';
-            }
-            default: {
-                return undefined;
-            }
-        }
-    })();
-    const data = {};
-    series.forEach((s) => {
-        s.data.forEach((d) => {
-            const xValue = xAxis.type === 'category'
-                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
-                : d.x;
-            if (xValue) {
-                if (!data[xValue]) {
-                    data[xValue] = {};
-                }
-                const xGroup = data[xValue];
-                if (!xGroup[s.stackId]) {
-                    xGroup[s.stackId] = [];
-                }
-                xGroup[s.stackId].push({ data: d, series: s });
-            }
-        });
-    });
-    let bandWidth = Infinity;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        bandWidth = xBandScale.bandwidth();
-    }
-    else {
-        const xLinearScale = xScale;
-        const xValues = series.reduce((acc, s) => {
-            s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
-            return acc;
-        }, []);
-        xValues.sort().forEach((xValue, index) => {
-            if (index > 0 && xValue !== xValues[index - 1]) {
-                const dist = xLinearScale(xValue) - xLinearScale(xValues[index - 1]);
-                if (dist < bandWidth) {
-                    bandWidth = dist;
-                }
-            }
-        });
-    }
-    const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
-    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
-    const groupWidth = bandWidth - groupGap;
-    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
-    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
-    const result = [];
-    Object.entries(data).forEach(([xValue, val]) => {
-        const stacks = Object.values(val);
-        const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
-        stacks.forEach((yValues, groupItemIndex) => {
-            let stackHeight = 0;
-            const stackItems = [];
-            const sortedData = sortKey
-                ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
-                : yValues;
-            sortedData.forEach((yValue) => {
-                const yAxisIndex = yValue.series.yAxis;
-                const seriesYScale = yScale[yAxisIndex];
-                let xCenter;
-                if (xAxis.type === 'category') {
-                    const xBandScale = xScale;
-                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
-                }
-                else {
-                    const xLinearScale = xScale;
-                    xCenter = xLinearScale(Number(xValue));
-                }
-                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const yDataValue = yValue.data.y;
-                const y = seriesYScale(yDataValue);
-                const base = seriesYScale(0);
-                const height = yDataValue > 0 ? base - y : y - base;
-                const barData = {
-                    x,
-                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
-                    width: rectWidth,
-                    height,
-                    opacity: get(yValue.data, 'opacity', null),
-                    data: yValue.data,
-                    series: yValue.series,
-                    htmlElements: [],
-                };
-                const label = getLabelData(barData);
-                if (yValue.series.dataLabels.html && label) {
-                    barData.htmlElements.push({
-                        x: label.x,
-                        y: label.y,
-                        content: label.text,
-                    });
-                }
-                else {
-                    barData.label = getLabelData(barData);
-                }
-                stackItems.push(barData);
-                stackHeight += height + 1;
-            });
-            if (series.some((s) => s.stacking === 'percent')) {
-                let acc = 0;
-                const ratio = plotHeight / (stackHeight - stackItems.length);
-                stackItems.forEach((item) => {
-                    item.height = item.height * ratio;
-                    item.y = plotHeight - item.height - acc;
-                    acc += item.height + 1;
-                });
-            }
-            result.push(...stackItems);
-        });
-    });
-    return result;
-};

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

@@ -1,13 +0,0 @@
-import { TooltipDataChunkBarX } from '../../../../../../types';
-import { HtmlItem, LabelData } from '../../../types';
-import { PreparedBarXSeries } from '../../useSeries/types';
-export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    opacity: number | null;
-    series: PreparedBarXSeries;
-    label?: LabelData;
-    htmlElements: HtmlItem[];
-};

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

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
-export { prepareBarYData } from './prepare-data';
-type Args = {
-    dispatcher: Dispatch<object>;
-    preparedData: PreparedBarYData[];
-    seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-};
-export declare const BarYSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { color, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { HtmlLayer } from '../HtmlLayer';
-export { prepareBarYData } from './prepare-data';
-const b = block('d3-bar-y');
-export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('rect')
-            .data(preparedData)
-            .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', (d) => d.color)
-            .attr('opacity', (d) => d.data.opacity || null)
-            .attr('cursor', (d) => d.series.cursor);
-        const dataLabels = preparedData.reduce((acc, d) => {
-            if (d.label) {
-                acc.push(d.label);
-            }
-            return acc;
-        }, []);
-        const labelSelection = 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 hoverOptions = get(seriesOptions, 'bar-y.states.hover');
-        const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
-        dispatcher.on('hover-shape.bar-y', (data) => {
-            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data.y);
-                    return acc;
-                }, new Set());
-                rectSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data.y)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
-                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
-                const newOpacity = (d) => {
-                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
-                        return inactiveOptions.opacity || null;
-                    }
-                    return null;
-                };
-                rectSelection.attr('opacity', newOpacity);
-                labelSelection.attr('opacity', newOpacity);
-            }
-        });
-        return () => {
-            dispatcher.on('hover-shape.bar-y', null);
-        };
-    }, [dispatcher, preparedData, seriesOptions]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
-};

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

@@ -1,12 +0,0 @@
-import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
-import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
-export declare const prepareBarYData: (args: {
-    series: PreparedBarYSeries[];
-    seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis;
-    xScale: ChartScale;
-    yAxis: PreparedAxis[];
-    yScale: ChartScale[];
-}) => PreparedBarYData[];