@gravity-ui/charts 0.1.0

package/dist/esm/hooks/useShapes/index.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { group } from 'd3';
+import { getOnlyVisibleSeries } from '../../utils';
+import { AreaSeriesShapes } from './area';
+import { prepareAreaData } from './area/prepare-data';
+import { BarXSeriesShapes, prepareBarXData } from './bar-x';
+import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { LineSeriesShapes } from './line';
+import { prepareLineData } from './line/prepare-data';
+import { PieSeriesShapes } from './pie';
+import { preparePieData } from './pie/prepare-data';
+import { ScatterSeriesShape, prepareScatterData } from './scatter';
+import { TreemapSeriesShape } from './treemap';
+import { prepareTreemapData } from './treemap/prepare-data';
+import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import './styles.css';
+export const useShapes = (args) => {
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, } = args;
+    const shapesComponents = React.useMemo(() => {
+        const visibleSeries = getOnlyVisibleSeries(series);
+        const groupedSeries = group(visibleSeries, (item) => item.type);
+        const shapesData = [];
+        // eslint-disable-next-line complexity
+        const shapes = Array.from(groupedSeries).reduce((acc, item) => {
+            const [seriesType, chartSeries] = item;
+            switch (seriesType) {
+                case 'bar-x': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareBarXData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            boundsHeight,
+                        });
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'bar-y': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareBarYData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'waterfall': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareWaterfallData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'line': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareLineData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            split,
+                        });
+                        acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'area': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareAreaData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            boundsHeight,
+                        });
+                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'scatter': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareScatterData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'pie': {
+                    const preparedData = preparePieData({
+                        series: chartSeries,
+                        boundsWidth,
+                        boundsHeight,
+                    });
+                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.push(...preparedData);
+                    break;
+                }
+                case 'treemap': {
+                    const preparedData = prepareTreemapData({
+                        // We should have exactly one series with "treemap" type
+                        // Otherwise data validation should emit an error
+                        series: chartSeries[0],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                    });
+                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.push(preparedData);
+                }
+            }
+            return acc;
+        }, []);
+        return { shapes, shapesData };
+    }, [
+        boundsWidth,
+        boundsHeight,
+        dispatcher,
+        series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    ]);
+    return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
+};

package/dist/esm/hooks/useShapes/line/index.d.ts

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

package/dist/esm/hooks/useShapes/line/index.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { color, line as lineGenerator, select } from 'd3';
+import get from 'lodash/get';
+import { block, filterOverlappingLabels } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { getLineDashArray, setActiveState } from '../utils';
+const b = block('d3-line');
+export const LineSeriesShapes = (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, 'line.states.hover');
+        const inactiveOptions = get(seriesOptions, 'line.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const lineSelection = svgElement
+            .selectAll('path')
+            .data(preparedData)
+            .join('path')
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', (d) => d.linecap)
+            .attr('stroke-linecap', (d) => d.linecap)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
+        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.line', (data) => {
+            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
+            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; });
+            lineSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('stroke', (d) => {
+                        var _a;
+                        const initialColor = d.color || '';
+                        if (d.hovered) {
+                            return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                        }
+                        return initialColor;
+                    });
+                }
+                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.line', 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/dist/esm/hooks/useShapes/line/prepare-data.d.ts

@@ -0,0 +1,13 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedLineSeries } from '../../useSeries/types';
+import type { PreparedSplit } from '../../useSplit/types';
+import type { PreparedLineData } from './types';
+export declare const prepareLineData: (args: {
+    series: PreparedLineSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
+    split: PreparedSplit;
+}) => PreparedLineData[];

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -0,0 +1,91 @@
+import { 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 });
+    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 getHtmlLabel(point, series, xMax) {
+    const content = String(point.data.label || point.data.y);
+    const size = getLabelsSize({ labels: [content], html: true });
+    return {
+        x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
+        y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
+        content,
+    };
+}
+export const prepareLineData = (args) => {
+    const { series, xAxis, yAxis, xScale, yScale, split } = args;
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    return series.reduce((acc, s) => {
+        var _a;
+        const yAxisIndex = s.yAxis;
+        const seriesYAxis = yAxis[yAxisIndex];
+        const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+        const seriesYScale = yScale[s.yAxis];
+        const points = s.data.map((d) => ({
+            x: getXValue({ point: d, xAxis, xScale }),
+            y: yAxisTop + getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+            active: true,
+            data: d,
+            series: s,
+        }));
+        const htmlElements = [];
+        let labels = [];
+        if (s.dataLabels.enabled) {
+            if (s.dataLabels.html) {
+                htmlElements.push(...points.map((p) => getHtmlLabel(p, s, xMax)));
+            }
+            else {
+                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,
+            }));
+        }
+        const result = {
+            points,
+            markers,
+            labels,
+            color: s.color,
+            width: s.lineWidth,
+            series: s,
+            hovered: false,
+            active: true,
+            id: s.id,
+            dashStyle: s.dashStyle,
+            linecap: s.linecap,
+            opacity: s.opacity,
+            htmlElements,
+        };
+        acc.push(result);
+        return acc;
+    }, []);
+};

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -0,0 +1,29 @@
+import type { DashStyle, LineCap } from '../../../constants';
+import type { HtmlItem, LabelData, LineSeriesData } from '../../../types';
+import type { PreparedLineSeries } from '../../useSeries/types';
+export type PointData = {
+    x: number;
+    y: number;
+    data: LineSeriesData;
+    series: PreparedLineSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedLineData = {
+    id: string;
+    points: PointData[];
+    markers: MarkerData[];
+    color: string;
+    width: number;
+    series: PreparedLineSeries;
+    hovered: boolean;
+    active: boolean;
+    labels: LabelData[];
+    dashStyle: DashStyle;
+    linecap: LineCap;
+    opacity: number | null;
+    htmlElements: HtmlItem[];
+};

package/dist/esm/hooks/useShapes/line/types.js

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

package/dist/esm/hooks/useShapes/marker.d.ts

@@ -0,0 +1,14 @@
+import type { BaseType, Selection } from 'd3';
+import { SymbolType } from '../../constants';
+import type { MarkerData as AreaMarkerData } from './area/types';
+import type { MarkerData as LineMarkerData } from './line/types';
+import type { MarkerData as ScatterMarkerData } from './scatter/types';
+type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData;
+export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<BaseType | SVGGElement, T, SVGGElement, unknown>;
+export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
+export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
+export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
+export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, radius: number): string | null;
+export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export {};

package/dist/esm/hooks/useShapes/marker.js

@@ -0,0 +1,75 @@
+import { symbol } from 'd3';
+import get from 'lodash/get';
+import { SymbolType } from '../../constants';
+import { block, getSymbol } from '../../utils';
+const b = block('d3-marker');
+const haloClassName = b('halo');
+const symbolClassName = b('symbol');
+export function renderMarker(selection) {
+    const markerSelection = selection
+        .attr('class', b('wrapper'))
+        .attr('visibility', getMarkerVisibility)
+        .attr('transform', (d) => {
+        return `translate(${d.point.x},${d.point.y})`;
+    });
+    markerSelection
+        .append('path')
+        .attr('class', haloClassName)
+        .attr('d', (d) => {
+        const series = d.point.series;
+        const type = series.marker.states.normal.symbol;
+        const radius = get(d.point.data, 'radius', series.marker.states.hover.radius);
+        const haloSize = series.marker.states.hover.halo.size;
+        return getMarkerSymbol(type, radius + haloSize);
+    })
+        .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', symbolClassName)
+        .call(setMarker, 'normal')
+        .attr('fill', (d) => d.point.series.color);
+    return markerSelection;
+}
+export function getMarkerVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    let enabled;
+    if (d.hovered) {
+        enabled = markerStates.hover.enabled && d.hovered;
+    }
+    else {
+        enabled =
+            markerStates.normal.enabled || get(d.point.data, 'marker.states.normal.enabled', false);
+    }
+    return enabled ? '' : 'hidden';
+}
+export function getMarkerHaloVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    const enabled = markerStates.hover.halo.enabled && d.hovered;
+    return enabled ? '' : 'hidden';
+}
+export function setMarker(selection, state) {
+    selection
+        .attr('d', (d) => {
+        const series = d.point.series;
+        const type = series.marker.states.normal.symbol;
+        const radius = get(d.point.data, 'radius', series.marker.states[state].radius);
+        const size = radius + series.marker.states[state].borderWidth;
+        return getMarkerSymbol(type, size);
+    })
+        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
+        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
+}
+export function getMarkerSymbol(type = SymbolType.Circle, radius) {
+    const symbolFn = getSymbol(type);
+    const size = Math.pow(radius, 2) * Math.PI;
+    return symbol(symbolFn, size)();
+}
+export function selectMarkerHalo(parentSelection) {
+    return parentSelection.select(`.${haloClassName}`);
+}
+export function selectMarkerSymbol(parentSelection) {
+    return parentSelection.select(`.${symbolClassName}`);
+}

package/dist/esm/hooks/useShapes/pie/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch, PieArcDatum } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedPieData, SegmentData } from './types';
+type PreparePieSeriesArgs = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedPieData[];
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
+export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;
+export {};