@gravity-ui/chartkit 5.17.1 → 5.18.0

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

@@ -1,65 +0,0 @@
-import { ChartKitError } from '../../../../../libs';
-import { prepareArea } from './prepare-area';
-import { prepareBarXSeries } from './prepare-bar-x';
-import { prepareBarYSeries } from './prepare-bar-y';
-import { prepareLineSeries } from './prepare-line';
-import { preparePieSeries } from './prepare-pie';
-import { prepareScatterSeries } from './prepare-scatter';
-import { prepareTreemap } from './prepare-treemap';
-import { prepareWaterfallSeries } from './prepare-waterfall';
-export function prepareSeries(args) {
-    const { type, series, seriesOptions, legend, colorScale } = args;
-    switch (type) {
-        case 'pie': {
-            return series.reduce((acc, singleSeries) => {
-                acc.push(...preparePieSeries({ series: singleSeries, seriesOptions, legend }));
-                return acc;
-            }, []);
-        }
-        case 'bar-x': {
-            return prepareBarXSeries({ series: series, legend, colorScale });
-        }
-        case 'bar-y': {
-            return prepareBarYSeries({ series: series, legend, colorScale });
-        }
-        case 'scatter': {
-            return prepareScatterSeries({ series: series, legend, colorScale });
-        }
-        case 'line': {
-            return prepareLineSeries({
-                series: series,
-                seriesOptions,
-                legend,
-                colorScale,
-            });
-        }
-        case 'area': {
-            return prepareArea({
-                series: series,
-                seriesOptions,
-                legend,
-                colorScale,
-            });
-        }
-        case 'treemap': {
-            return prepareTreemap({
-                series: series,
-                seriesOptions,
-                legend,
-                colorScale,
-            });
-        }
-        case 'waterfall': {
-            return prepareWaterfallSeries({
-                series: series,
-                legend,
-                colorScale,
-            });
-        }
-        default: {
-            throw new ChartKitError({
-                message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,
-            });
-        }
-    }
-}

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

@@ -1,254 +0,0 @@
-import { DashStyle, LayoutAlgorithm, LineCap, SymbolType } from '../../../../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartKitWidgetLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../../../../types';
-import type { SeriesOptionsDefaults } from '../../constants';
-export type RectLegendSymbol = {
-    shape: 'rect';
-} & Required<RectLegendSymbolOptions>;
-export type PathLegendSymbol = {
-    shape: 'path';
-    strokeWidth: number;
-} & Required<PathLegendSymbolOptions>;
-export type SymbolLegendSymbol = {
-    shape: 'symbol';
-    symbolType: `${SymbolType}`;
-} & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
-export type PreparedLegend = Required<Omit<ChartKitWidgetLegend, 'title' | 'colorScale'>> & {
-    height: number;
-    lineHeight: number;
-    title: {
-        enable: boolean;
-        text: string;
-        margin: number;
-        style: BaseTextStyle;
-        height: number;
-    };
-    ticks: {
-        labelsMargin: number;
-        labelsLineHeight: number;
-    };
-    colorScale: {
-        colors: string[];
-        domain: number[];
-        stops: number[];
-    };
-};
-export type OnLegendItemClick = (data: {
-    name: string;
-    metaKey: boolean;
-}) => void;
-export type LegendItem = {
-    color: string;
-    name: string;
-    symbol: PreparedLegendSymbol;
-    textWidth: number;
-    visible?: boolean;
-    dashStyle?: DashStyle;
-};
-export type LegendConfig = {
-    offset: {
-        left: number;
-        top: number;
-    };
-    pagination?: {
-        limit: number;
-        maxPage: number;
-    };
-};
-export type PreparedHaloOptions = {
-    enabled: boolean;
-    opacity: number;
-    size: number;
-};
-type BasePreparedSeries = {
-    color: string;
-    name: string;
-    id: string;
-    visible: boolean;
-    legend: {
-        enabled: boolean;
-        symbol: PreparedLegendSymbol;
-    };
-    cursor: string | null;
-};
-export type PreparedScatterSeries = {
-    type: ScatterSeries['type'];
-    data: ScatterSeriesData[];
-    marker: {
-        states: {
-            normal: {
-                symbol: `${SymbolType}`;
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-            };
-            hover: {
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-                halo: PreparedHaloOptions;
-            };
-        };
-    };
-    yAxis: number;
-} & BasePreparedSeries;
-export type PreparedBarXSeries = {
-    type: BarXSeries['type'];
-    data: BarXSeriesData[];
-    stackId: string;
-    stacking: BarXSeries['stacking'];
-    dataLabels: {
-        enabled: boolean;
-        inside: boolean;
-        style: BaseTextStyle;
-        allowOverlap: boolean;
-        padding: number;
-        html: boolean;
-    };
-    yAxis: number;
-} & BasePreparedSeries;
-export type PreparedBarYSeries = {
-    type: BarYSeries['type'];
-    data: BarYSeriesData[];
-    stackId: string;
-    stacking: BarYSeries['stacking'];
-    dataLabels: {
-        enabled: boolean;
-        inside: boolean;
-        style: BaseTextStyle;
-        maxHeight: number;
-        maxWidth: number;
-        html: boolean;
-    };
-} & BasePreparedSeries;
-export type PreparedPieSeries = {
-    type: PieSeries['type'];
-    data: PieSeriesData;
-    value: PieSeriesData['value'];
-    borderColor: string;
-    borderWidth: number;
-    borderRadius: number;
-    center?: [string | number | null, string | number | null];
-    radius?: string | number;
-    innerRadius?: string | number;
-    stackId: string;
-    label?: PieSeriesData['label'];
-    dataLabels: {
-        enabled: boolean;
-        padding: number;
-        style: BaseTextStyle;
-        allowOverlap: boolean;
-        connectorPadding: number;
-        connectorShape: ConnectorShape;
-        distance: number;
-        connectorCurve: ConnectorCurve;
-        html: boolean;
-    };
-    states: {
-        hover: {
-            halo: PreparedHaloOptions;
-        };
-    };
-    renderCustomShape?: PieSeries['renderCustomShape'];
-    opacity: number | null;
-} & BasePreparedSeries;
-export type PreparedLineSeries = {
-    type: LineSeries['type'];
-    data: LineSeriesData[];
-    lineWidth: number;
-    dataLabels: {
-        enabled: boolean;
-        style: BaseTextStyle;
-        padding: number;
-        allowOverlap: boolean;
-        html: boolean;
-    };
-    marker: {
-        states: {
-            normal: {
-                symbol: `${SymbolType}`;
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-            };
-            hover: {
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-                halo: PreparedHaloOptions;
-            };
-        };
-    };
-    dashStyle: DashStyle;
-    linecap: LineCap;
-    opacity: number | null;
-    yAxis: number;
-} & BasePreparedSeries;
-export type PreparedAreaSeries = {
-    type: AreaSeries['type'];
-    data: AreaSeriesData[];
-    stacking: AreaSeries['stacking'];
-    stackId: string;
-    lineWidth: number;
-    opacity: number;
-    dataLabels: {
-        enabled: boolean;
-        style: BaseTextStyle;
-        padding: number;
-        allowOverlap: boolean;
-        html: boolean;
-    };
-    marker: {
-        states: {
-            normal: {
-                symbol: `${SymbolType}`;
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-            };
-            hover: {
-                enabled: boolean;
-                radius: number;
-                borderWidth: number;
-                borderColor: string;
-                halo: PreparedHaloOptions;
-            };
-        };
-    };
-    yAxis: number;
-} & BasePreparedSeries;
-export type PreparedTreemapSeries = {
-    type: TreemapSeries['type'];
-    data: TreemapSeriesData[];
-    dataLabels: {
-        enabled: boolean;
-        style: BaseTextStyle;
-        padding: number;
-        allowOverlap: boolean;
-        html: boolean;
-        align: Required<Required<TreemapSeries>['dataLabels']>['align'];
-    };
-    layoutAlgorithm: `${LayoutAlgorithm}`;
-} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
-export type PreparedWaterfallSeries = {
-    type: WaterfallSeries['type'];
-    data: WaterfallSeriesData[];
-    dataLabels: {
-        enabled: boolean;
-        style: BaseTextStyle;
-        allowOverlap: boolean;
-        padding: number;
-        html: boolean;
-    };
-    positiveColor: string;
-    negativeColor: string;
-} & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries;
-export type PreparedSeriesOptions = SeriesOptionsDefaults;
-export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
-export {};

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

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

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

@@ -1,7 +0,0 @@
-import { SymbolType } from '../../../../../constants';
-import { ChartKitWidgetSeries } from '../../../../../types';
-import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
-export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
-export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
-export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
-export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -1,33 +0,0 @@
-import memoize from 'lodash/memoize';
-import { SymbolType } from '../../../../../constants';
-import { getRandomCKId } from '../../../../../utils';
-import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
-export const getActiveLegendItems = (series) => {
-    return series.reduce((acc, s) => {
-        if (s.legend.enabled && s.visible) {
-            acc.push(s.name);
-        }
-        return acc;
-    }, []);
-};
-export const getAllLegendItems = (series) => {
-    return series.map((s) => s.name);
-};
-export function prepareLegendSymbol(series, symbolType) {
-    var _a;
-    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
-    return {
-        shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
-        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 ? getCommonStackId() : getRandomCKId();
-    }
-    return stackId;
-}

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ShapeDataWithHtmlItems } from '../../types';
-type Props = {
-    htmlLayout: HTMLElement | null;
-    preparedData: ShapeDataWithHtmlItems | ShapeDataWithHtmlItems[];
-};
-export declare const HtmlLayer: (props: Props) => React.JSX.Element | null;
-export {};

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Portal } from '@gravity-ui/uikit';
-export const HtmlLayer = (props) => {
-    const { htmlLayout, preparedData } = props;
-    const items = React.useMemo(() => {
-        if (Array.isArray(preparedData)) {
-            return preparedData.reduce((result, d) => {
-                result.push(...d.htmlElements);
-                return result;
-            }, []);
-        }
-        else {
-            return preparedData.htmlElements;
-        }
-    }, [preparedData]);
-    if (!htmlLayout) {
-        return null;
-    }
-    return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
-    })));
-};

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

@@ -1,12 +0,0 @@
-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;
-    htmlLayout: HTMLElement | null;
-};
-export declare const AreaSeriesShapes: (args: Args) => React.JSX.Element;
-export {};

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

@@ -1,144 +0,0 @@
-import React from 'react';
-import { area as areaGenerator, color, line as lineGenerator, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { filterOverlappingLabels } from '../../../utils';
-import { HtmlLayer } from '../HtmlLayer';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState } from '../utils';
-const b = block('d3-area');
-export const AreaSeriesShapes = (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, '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'))
-            .attr('cursor', (d) => d.series.cursor);
-        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')
-            .call(renderMarker);
-        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) => {
-            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
-            const selectedDataItems = selected.map((d) => d.data);
-            const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.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 && selectedSeriesIds.includes(d.id));
-                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 ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.id)),
-                    datum: d,
-                });
-            });
-            labelsSelection.datum((d, index, list) => {
-                return setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.series.id)),
-                    datum: d,
-                });
-            });
-            markerSelection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    elementSelection.attr('visibility', getMarkerVisibility(d));
-                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-                }
-                if (d.point.series.marker.states.normal.enabled) {
-                    const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(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(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
-};

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

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