@gravity-ui/chartkit 5.17.1 → 5.18.0

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

@@ -1,31 +0,0 @@
-import get from 'lodash/get';
-import { getXValue, getYValue } from '../utils';
-const getFilteredLinearScatterData = (data) => {
-    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
-};
-export const prepareScatterData = (args) => {
-    const { series, xAxis, xScale, yAxis, yScale } = args;
-    return series.reduce((acc, s) => {
-        const yAxisIndex = get(s, 'yAxis', 0);
-        const seriesYAxis = yAxis[yAxisIndex];
-        const seriesYScale = yScale[yAxisIndex];
-        const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
-            ? s.data
-            : getFilteredLinearScatterData(s.data);
-        filteredData.forEach((d) => {
-            acc.push({
-                point: {
-                    data: d,
-                    series: s,
-                    x: getXValue({ point: d, xAxis, xScale }),
-                    y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
-                    opacity: get(d, 'opacity', null),
-                },
-                hovered: false,
-                active: true,
-                htmlElements: [],
-            });
-        });
-        return acc;
-    }, []);
-};

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

@@ -1,18 +0,0 @@
-import { ScatterSeriesData } from '../../../../../../types';
-import { HtmlItem } from '../../../types';
-import { PreparedScatterSeries } from '../../useSeries/types';
-type PointData = {
-    x: number;
-    y: number;
-    opacity: number | null;
-    data: ScatterSeriesData;
-    series: PreparedScatterSeries;
-};
-export type MarkerData = {
-    point: PointData;
-    active: boolean;
-    hovered: boolean;
-    htmlElements: HtmlItem[];
-};
-export type PreparedScatterData = MarkerData;
-export {};

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

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

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

@@ -1,36 +0,0 @@
-.chartkit-d3-scatter__point {
-  stroke-width: 1px;
-}
-
-.chartkit-d3-pie__segment {
-  stroke: var(--g-color-base-background);
-}
-
-.chartkit-d3-pie__label {
-  fill: var(--g-color-text-complementary);
-  font-size: 11px;
-  font-weight: bold;
-  alignment-baseline: before-edge;
-}
-
-.chartkit-d3-bar-x__label {
-  fill: var(--g-color-text-complementary);
-  user-select: none;
-}
-
-.chartkit-d3-bar-y__label {
-  fill: var(--g-color-text-complementary);
-  user-select: none;
-  alignment-baseline: after-edge;
-}
-
-.chartkit-d3-treemap__label {
-  fill: var(--g-color-text-complementary);
-  alignment-baseline: text-before-edge;
-  user-select: none;
-  pointer-events: none;
-}
-
-.chartkit-d3-waterfall__connector {
-  stroke: var(--g-color-line-generic-active);
-}

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedTreemapData } from './types';
-type ShapeProps = {
-    dispatcher: Dispatch<object>;
-    preparedData: PreparedTreemapData;
-    seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-};
-export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
-export {};

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

@@ -1,99 +0,0 @@
-import React from 'react';
-import { color, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { setEllipsisForOverflowTexts } from '../../../utils';
-import { HtmlLayer } from '../HtmlLayer';
-const b = block('d3-treemap');
-export const TreemapSeriesShape = (props) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const { labelData, leaves, series } = preparedData;
-        const leaf = svgElement
-            .selectAll('g')
-            .data(leaves)
-            .join('g')
-            .attr('transform', (d) => `translate(${d.x0},${d.y0})`)
-            .attr('cursor', series.cursor);
-        const rectSelection = leaf
-            .append('rect')
-            .attr('id', (d) => d.id || d.name)
-            .attr('fill', (d) => {
-            var _a;
-            if (d.data.color) {
-                return d.data.color;
-            }
-            const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth);
-            return (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || series.color;
-        })
-            .attr('width', (d) => d.x1 - d.x0)
-            .attr('height', (d) => d.y1 - d.y0);
-        const labelSelection = svgElement
-            .selectAll('tspan')
-            .data(labelData)
-            .join('text')
-            .text((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .style('font-size', () => series.dataLabels.style.fontSize)
-            .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
-            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
-            .call(setEllipsisForOverflowTexts, (d) => d.width);
-        const eventName = `hover-shape.treemap`;
-        const hoverOptions = get(seriesOptions, 'treemap.states.hover');
-        const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        dispatcher.on(eventName, (data) => {
-            var _a;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
-            rectSelection.datum((d, index, list) => {
-                const currentRect = select(list[index]);
-                const hovered = Boolean(hoverEnabled && hoveredData === d.data);
-                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
-                currentRect
-                    .attr('fill', (currentD) => {
-                    var _a, _b;
-                    const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === currentD.depth);
-                    const initialColor = (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || d.data.color || series.color;
-                    if (hovered) {
-                        return (((_b = color(initialColor)) === null || _b === void 0 ? void 0 : _b.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                    }
-                    return initialColor;
-                })
-                    .attr('opacity', () => {
-                    if (inactive) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
-                });
-                return d;
-            });
-            labelSelection.datum((d, index, list) => {
-                const currentLabel = select(list[index]);
-                const hovered = Boolean(hoverEnabled && hoveredData === d.nodeData);
-                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
-                currentLabel.attr('opacity', () => {
-                    if (inactive) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
-                });
-                return d;
-            });
-        });
-        return () => {
-            dispatcher.on(eventName, 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/treemap/prepare-data.d.ts

@@ -1,7 +0,0 @@
-import type { PreparedTreemapSeries } from '../../useSeries/types';
-import type { PreparedTreemapData } from './types';
-export declare function prepareTreemapData(args: {
-    series: PreparedTreemapSeries;
-    width: number;
-    height: number;
-}): PreparedTreemapData;

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

@@ -1,114 +0,0 @@
-import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
-import { LayoutAlgorithm } from '../../../../../../constants';
-import { getLabelsSize } from '../../../utils';
-const DEFAULT_PADDING = 1;
-function getLabels(args) {
-    const { data, html, padding, align } = args;
-    return data.reduce((acc, d) => {
-        const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
-        texts.forEach((text, index) => {
-            var _a;
-            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [text], html })) !== null && _a !== void 0 ? _a : {};
-            const left = d.x0 + padding;
-            const right = d.x1 - padding;
-            const width = Math.max(0, right - left);
-            let x = left;
-            const y = index * lineHeight + d.y0 + padding;
-            switch (align) {
-                case 'left': {
-                    x = left;
-                    break;
-                }
-                case 'center': {
-                    x = Math.max(left, left + (width - labelWidth) / 2);
-                    break;
-                }
-                case 'right': {
-                    x = Math.max(left, right - labelWidth);
-                    break;
-                }
-            }
-            const item = html
-                ? {
-                    content: text,
-                    x,
-                    y,
-                }
-                : {
-                    text,
-                    x,
-                    y,
-                    width,
-                    nodeData: d.data,
-                };
-            acc.push(item);
-        });
-        return acc;
-    }, []);
-}
-export function prepareTreemapData(args) {
-    var _a;
-    const { series, width, height } = args;
-    const dataWithRootNode = getSeriesDataWithRootNode(series);
-    const hierarchy = stratify()
-        .id((d) => {
-        if (d.id) {
-            return d.id;
-        }
-        return Array.isArray(d.name) ? d.name.join() : d.name;
-    })
-        .parentId((d) => d.parentId)(dataWithRootNode)
-        .sum((d) => d.value || 0);
-    const treemapInstance = treemap();
-    switch (series.layoutAlgorithm) {
-        case LayoutAlgorithm.Binary: {
-            treemapInstance.tile(treemapBinary);
-            break;
-        }
-        case LayoutAlgorithm.Dice: {
-            treemapInstance.tile(treemapDice);
-            break;
-        }
-        case LayoutAlgorithm.Slice: {
-            treemapInstance.tile(treemapSlice);
-            break;
-        }
-        case LayoutAlgorithm.SliceDice: {
-            treemapInstance.tile(treemapSliceDice);
-            break;
-        }
-        case LayoutAlgorithm.Squarify: {
-            treemapInstance.tile(treemapSquarify);
-            break;
-        }
-    }
-    const root = treemapInstance.size([width, height]).paddingInner((d) => {
-        var _a, _b;
-        const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth + 1);
-        return (_b = levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.padding) !== null && _b !== void 0 ? _b : DEFAULT_PADDING;
-    })(hierarchy);
-    const leaves = root.leaves();
-    let labelData = [];
-    const htmlElements = [];
-    if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
-        const { html, padding, align } = series.dataLabels;
-        const labels = getLabels({ html, padding, align, data: leaves });
-        if (html) {
-            htmlElements.push(...labels);
-        }
-        else {
-            labelData = labels;
-        }
-    }
-    return { labelData, leaves, series, htmlElements };
-}
-function getSeriesDataWithRootNode(series) {
-    return series.data.reduce((acc, d) => {
-        const dataChunk = Object.assign({}, d);
-        if (!dataChunk.parentId) {
-            dataChunk.parentId = series.id;
-        }
-        acc.push(dataChunk);
-        return acc;
-    }, [{ name: series.name, id: series.id }]);
-}

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

@@ -1,17 +0,0 @@
-import type { HierarchyRectangularNode } from 'd3';
-import type { TreemapSeriesData } from '../../../../../../types';
-import { HtmlItem } from '../../../types';
-import type { PreparedTreemapSeries } from '../../useSeries/types';
-export type TreemapLabelData = {
-    text: string;
-    x: number;
-    y: number;
-    width: number;
-    nodeData: TreemapSeriesData;
-};
-export type PreparedTreemapData = {
-    labelData: TreemapLabelData[];
-    leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
-    series: PreparedTreemapSeries;
-    htmlElements: HtmlItem[];
-};

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

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

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

@@ -1,29 +0,0 @@
-import type { BaseType } from 'd3';
-import { DashStyle } from '../../../../../constants';
-import type { BasicInactiveState } from '../../../../../types';
-import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
-export declare function getXValue(args: {
-    point: {
-        x?: number | string;
-    };
-    xAxis: PreparedAxis;
-    xScale: ChartScale;
-}): number;
-export declare function getYValue(args: {
-    point: {
-        y?: number | string;
-    };
-    yAxis: PreparedAxis;
-    yScale: ChartScale;
-}): number;
-export declare const shapeKey: (d: unknown) => string | -1;
-export declare function setActiveState<T extends {
-    active?: boolean;
-}>(args: {
-    element: BaseType;
-    datum: T;
-    state: BasicInactiveState | undefined;
-    active: boolean;
-}): T;
-export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;

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

@@ -1,53 +0,0 @@
-import { select } from 'd3';
-import get from 'lodash/get';
-import { getDataCategoryValue } from '../../utils';
-export function getXValue(args) {
-    const { point, xAxis, xScale } = args;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        const categories = get(xAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
-        return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
-    }
-    const xLinearScale = xScale;
-    return xLinearScale(point.x);
-}
-export function getYValue(args) {
-    const { point, yAxis, yScale } = args;
-    if (yAxis.type === 'category') {
-        const yBandScale = yScale;
-        const categories = get(yAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
-        return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
-    }
-    const yLinearScale = yScale;
-    return yLinearScale(point.y);
-}
-export const shapeKey = (d) => d.id || -1;
-export function setActiveState(args) {
-    const { element, datum, state, active } = args;
-    const elementSelection = select(element);
-    if (datum.active !== active) {
-        datum.active = active;
-        const opacity = datum.active ? null : state === null || state === void 0 ? void 0 : state.opacity;
-        elementSelection.attr('opacity', opacity || null);
-    }
-    return datum;
-}
-export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
-    const value = dashStyle.toLowerCase();
-    const arrayValue = value
-        .replace('shortdashdotdot', '3,1,1,1,1,1,')
-        .replace('shortdashdot', '3,1,1,1')
-        .replace('shortdot', '1,1,')
-        .replace('shortdash', '3,1,')
-        .replace('longdash', '8,3,')
-        .replace(/dot/g, '1,3,')
-        .replace('dash', '4,3,')
-        .replace(/,$/, '')
-        .split(',')
-        .map((part) => {
-        return `${parseInt(part, 10) * strokeWidth}`;
-    });
-    return arrayValue.join(',').replace(/NaN/g, 'none');
-};

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

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

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

@@ -1,128 +0,0 @@
-import React from 'react';
-import { color, line as lineGenerator, select } from 'd3';
-import get from 'lodash/get';
-import { DashStyle } from '../../../../../../constants';
-import { block } from '../../../../../../utils/cn';
-import { filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
-import { HtmlLayer } from '../HtmlLayer';
-import { getLineDashArray } from '../utils';
-export { prepareWaterfallData } from './prepare-data';
-export * from './types';
-const b = block('d3-waterfall');
-export const WaterfallSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const ref = React.useRef(null);
-    const connectorSelector = `.${b('connector')}`;
-    React.useEffect(() => {
-        var _a;
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'waterfall.states.hover');
-        const inactiveOptions = get(seriesOptions, 'waterfall.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) => getWaterfallPointColor(d.data, d.series))
-            .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);
-        // Add the connector line between bars
-        svgElement
-            .selectAll(connectorSelector)
-            .data(preparedData)
-            .join('path')
-            .attr('class', b('connector'))
-            .attr('d', (d, index) => {
-            const line = lineGenerator();
-            const prev = preparedData[index - 1];
-            if (!prev) {
-                return null;
-            }
-            const points = [];
-            if (Number(prev.data.y) > 0) {
-                points.push([prev.x, prev.y]);
-            }
-            else {
-                points.push([prev.x, prev.y + prev.height]);
-            }
-            if (Number(d.data.y) > 0 && !d.data.total) {
-                points.push([d.x + d.width, d.y + d.height]);
-            }
-            else {
-                points.push([d.x + d.width, d.y]);
-            }
-            return line(points);
-        })
-            .attr('stroke-width', 1)
-            .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 1));
-        dispatcher.on('hover-shape.waterfall', (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) => getWaterfallPointColor(d.data, d.series));
-                }
-                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 = getWaterfallPointColor(d.data, d.series);
-                    if (hoveredValues.includes(d.data.x)) {
-                        const brightness = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness;
-                        return ((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(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.waterfall', 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/waterfall/prepare-data.d.ts

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