@gravity-ui/charts 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @gravity-ui/charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+
+## Install
+
+```shell
+npm install --save-dev @gravity-ui/uikit @gravity-ui/charts
+```
+
+## Development
+
+To start the development server with storybook run the following:
+
+```shell
+npm run start
+```

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import './styles.css';
+type Props = {
+    axis: PreparedAxis;
+    width: number;
+    height: number;
+    scale: ChartScale;
+    split: PreparedSplit;
+};
+export declare function getTitlePosition(args: {
+    axis: PreparedAxis;
+    width: number;
+    rowCount: number;
+}): {
+    x: number;
+    y: number;
+};
+export declare const AxisX: React.NamedExoticComponent<Props>;
+export {};

package/dist/cjs/components/Axis/AxisX.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { select } from 'd3';
+import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { axisBottom } from '../../utils/chart/axis-generators';
+import './styles.css';
+const b = block('d3-axis');
+function getLabelFormatter({ axis, scale }) {
+    const ticks = getScaleTicks(scale);
+    const tickStep = getClosestPointsRange(axis, ticks);
+    return (value) => {
+        if (!axis.labels.enabled) {
+            return '';
+        }
+        return formatAxisTickLabel({
+            axis,
+            value,
+            step: tickStep,
+        });
+    };
+}
+export function getTitlePosition(args) {
+    const { axis, width, rowCount } = args;
+    if (rowCount < 1) {
+        return { x: 0, y: 0 };
+    }
+    let x;
+    const y = axis.title.height / rowCount + axis.title.margin + axis.labels.height + axis.labels.margin;
+    switch (axis.title.align) {
+        case 'left': {
+            x = axis.title.width / 2;
+            break;
+        }
+        case 'right': {
+            x = width - axis.title.width / 2;
+            break;
+        }
+        case 'center': {
+            x = width / 2;
+            break;
+        }
+    }
+    return { x, y };
+}
+export const AxisX = React.memo(function AxisX(props) {
+    const { axis, width, height: totalHeight, scale, split } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        let tickItems = [];
+        if (axis.grid.enabled) {
+            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                var _a, _b;
+                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                return [-top, -(top + height)];
+            });
+        }
+        const xAxisGenerator = axisBottom({
+            scale: scale,
+            ticks: {
+                items: tickItems,
+                labelFormat: getLabelFormatter({ axis, scale }),
+                labelsPaddings: axis.labels.padding,
+                labelsMargin: axis.labels.margin,
+                labelsStyle: axis.labels.style,
+                labelsMaxWidth: axis.labels.maxWidth,
+                labelsLineHeight: axis.labels.lineHeight,
+                count: getTicksCount({ axis, range: width }),
+                maxTickCount: getMaxTickCount({ axis, width }),
+                rotation: axis.labels.rotation,
+            },
+            domain: {
+                size: width,
+                color: axis.lineColor,
+            },
+        });
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        svgElement.call(xAxisGenerator).attr('class', b());
+        // add an axis header if necessary
+        if (axis.title.text) {
+            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('transform', () => {
+                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
+                return `translate(${x}, ${y})`;
+            })
+                .attr('font-size', axis.title.style.fontSize)
+                .attr('text-anchor', 'middle')
+                .selectAll('tspan')
+                .data(titleRows)
+                .join('tspan')
+                .attr('x', 0)
+                .attr('y', (d) => d.y)
+                .text((d) => d.text)
+                .each((_d, index, nodes) => {
+                if (index === axis.title.maxRowCount - 1) {
+                    handleOverflowingText(nodes[index], width);
+                }
+            });
+        }
+    }, [axis, width, totalHeight, scale, split]);
+    return React.createElement("g", { ref: ref });
+});

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import './styles.css';
+type Props = {
+    axes: PreparedAxis[];
+    scale: ChartScale[];
+    width: number;
+    height: number;
+    split: PreparedSplit;
+};
+export declare const AxisY: (props: Props) => React.JSX.Element;
+export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { axisLeft, axisRight, line, select } from 'd3';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import './styles.css';
+const b = block('d3-axis');
+function transformLabel(args) {
+    const { node, axis } = args;
+    let topOffset = axis.labels.lineHeight / 2;
+    let leftOffset = axis.labels.margin;
+    if (axis.position === 'left') {
+        leftOffset = leftOffset * -1;
+    }
+    if (axis.labels.rotation) {
+        if (axis.labels.rotation > 0) {
+            leftOffset -= axis.labels.lineHeight * calculateSin(axis.labels.rotation);
+            topOffset = axis.labels.lineHeight * calculateCos(axis.labels.rotation);
+            if (axis.labels.rotation % 360 === 90) {
+                topOffset = ((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
+            }
+        }
+        else {
+            topOffset = 0;
+            if (axis.labels.rotation % 360 === -90) {
+                topOffset = -((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
+            }
+        }
+        return `translate(${leftOffset}px, ${topOffset}px) rotate(${axis.labels.rotation}deg)`;
+    }
+    return `translate(${leftOffset}px, ${topOffset}px)`;
+}
+function getAxisGenerator(args) {
+    const { preparedAxis, axisGenerator: generator, width, height, scale } = args;
+    const tickSize = preparedAxis.grid.enabled ? width * -1 : 0;
+    const step = getClosestPointsRange(preparedAxis, getScaleTicks(scale));
+    let axisGenerator = generator
+        .tickSize(tickSize)
+        .tickPadding(preparedAxis.labels.margin)
+        .tickFormat((value) => {
+        if (!preparedAxis.labels.enabled) {
+            return '';
+        }
+        return formatAxisTickLabel({
+            axis: preparedAxis,
+            value,
+            step,
+        });
+    });
+    const ticksCount = getTicksCount({ axis: preparedAxis, range: height });
+    if (ticksCount) {
+        axisGenerator = axisGenerator.ticks(ticksCount);
+    }
+    return axisGenerator;
+}
+function getTitlePosition(args) {
+    const { axis, axisHeight, rowCount } = args;
+    if (rowCount < 1) {
+        return { x: 0, y: 0 };
+    }
+    const x = -(axis.title.height -
+        axis.title.height / rowCount +
+        axis.title.margin +
+        axis.labels.margin +
+        axis.labels.width);
+    let y;
+    switch (axis.title.align) {
+        case 'left': {
+            y = axisHeight - axis.title.width / 2;
+            break;
+        }
+        case 'right': {
+            y = axis.title.width / 2;
+            break;
+        }
+        case 'center': {
+            y = axisHeight / 2;
+            break;
+        }
+    }
+    return { x, y };
+}
+export const AxisY = (props) => {
+    const { axes, width, height: totalHeight, scale, split } = props;
+    const height = getAxisHeight({ split, boundsHeight: totalHeight });
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const axisSelection = svgElement
+            .selectAll('axis')
+            .data(axes)
+            .join('g')
+            .attr('class', b())
+            .style('transform', (d) => {
+            var _a;
+            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (d.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        });
+        axisSelection.each((d, index, node) => {
+            const seriesScale = scale[index];
+            const axisItem = select(node[index]);
+            const yAxisGenerator = getAxisGenerator({
+                axisGenerator: d.position === 'left'
+                    ? axisLeft(seriesScale)
+                    : axisRight(seriesScale),
+                preparedAxis: d,
+                height,
+                width,
+                scale: seriesScale,
+            });
+            yAxisGenerator(axisItem);
+            if (d.labels.enabled) {
+                const tickTexts = axisItem
+                    .selectAll('.tick text')
+                    // The offset must be applied before the labels are rotated.
+                    // Therefore, we reset the values and make an offset in transform  attribute.
+                    // FIXME: give up axisLeft(d3) and switch to our own generation method
+                    .attr('x', null)
+                    .attr('dy', null)
+                    .style('font-size', d.labels.style.fontSize)
+                    .style('transform', function () {
+                    return transformLabel({ node: this, axis: d });
+                });
+                const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
+                    ? d.labels.maxWidth
+                    : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
+                tickTexts.call(setEllipsisForOverflowTexts, textMaxWidth);
+            }
+            // remove overlapping ticks
+            // Note: this method do not prepared for rotated labels
+            if (!d.labels.rotation) {
+                let elementY = 0;
+                axisItem
+                    .selectAll('.tick')
+                    .filter(function (_d, tickIndex) {
+                    const tickNode = this;
+                    const r = tickNode.getBoundingClientRect();
+                    if (r.bottom > elementY && tickIndex !== 0) {
+                        return true;
+                    }
+                    elementY = r.top - d.labels.padding;
+                    return false;
+                })
+                    .remove();
+            }
+            return axisItem;
+        });
+        axisSelection
+            .select('.domain')
+            .attr('d', () => {
+            const points = [
+                [0, 0],
+                [0, height],
+            ];
+            return line()(points);
+        })
+            .style('stroke', (d) => d.lineColor || '');
+        svgElement.selectAll('.tick').each((_d, index, nodes) => {
+            const tickNode = select(nodes[index]);
+            if (parseTransformStyle(tickNode.attr('transform')).y === height) {
+                // Remove stroke from tick that has the same y coordinate like domain
+                tickNode.select('line').style('stroke', 'none');
+            }
+        });
+        axisSelection
+            .append('text')
+            .attr('class', b('title'))
+            .attr('text-anchor', 'middle')
+            .attr('font-size', (d) => d.title.style.fontSize)
+            .attr('transform', (d) => {
+            const titleRows = wrapText({
+                text: d.title.text,
+                style: d.title.style,
+                width: height,
+            });
+            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
+            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
+            const angle = d.position === 'left' ? -90 : 90;
+            return `translate(${x}, ${y}) rotate(${angle})`;
+        })
+            .selectAll('tspan')
+            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
+            .join('tspan')
+            .attr('x', 0)
+            .attr('y', (d) => d.y)
+            .text((d) => d.text)
+            .each((_d, index, nodes) => {
+            if (index === nodes.length - 1) {
+                handleOverflowingText(nodes[index], height);
+            }
+        });
+    }, [axes, width, height, scale, split]);
+    return React.createElement("g", { ref: ref, className: b('container') });
+};

package/dist/cjs/components/Axis/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AxisX';
+export * from './AxisY';

package/dist/cjs/components/Axis/index.js

@@ -0,0 +1,2 @@
+export * from './AxisX';
+export * from './AxisY';

package/dist/cjs/components/Axis/styles.css

@@ -0,0 +1,17 @@
+.gcharts-d3-axis .domain {
+  stroke: var(--g-color-line-generic-active);
+}
+.gcharts-d3-axis .tick text {
+  color: var(--g-color-text-secondary);
+  alignment-baseline: after-edge;
+}
+.gcharts-d3-axis .tick line, .gcharts-d3-axis .tick path {
+  stroke: var(--g-color-line-generic);
+}
+.gcharts-d3-axis__title {
+  alignment-baseline: after-edge;
+  fill: var(--g-color-text-secondary);
+}
+.gcharts-d3-axis__title tspan {
+  alignment-baseline: after-edge;
+}

package/dist/cjs/components/ChartInner/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartData } from '../../types';
+import './styles.css';
+type Props = {
+    width: number;
+    height: number;
+    data: ChartData;
+};
+export declare const ChartInner: (props: Props) => React.JSX.Element;
+export {};

package/dist/cjs/components/ChartInner/index.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { pointer } from 'd3';
+import throttle from 'lodash/throttle';
+import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, } from '../../hooks';
+import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
+import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
+import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
+import { useSplit } from '../../hooks/useSplit';
+import { block, getD3Dispatcher } from '../../utils';
+import { getClosestPoints } from '../../utils/chart/get-closest-data';
+import { AxisX, AxisY } from '../Axis';
+import { Legend } from '../Legend';
+import { PlotTitle } from '../PlotTitle';
+import { Title } from '../Title';
+import { Tooltip } from '../Tooltip';
+import './styles.css';
+const b = block('d3');
+const THROTTLE_DELAY = 50;
+export const ChartInner = (props) => {
+    var _a, _b;
+    const { width, height, data } = props;
+    const svgRef = React.useRef(null);
+    const htmlLayerRef = React.useRef(null);
+    const dispatcher = React.useMemo(() => {
+        return getD3Dispatcher();
+    }, []);
+    const { chart, title, tooltip } = useChartOptions({
+        data,
+    });
+    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({
+        series: data.series.data,
+        yAxis: data.yAxis,
+        height,
+    }), [data, height]);
+    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
+        chartWidth: width,
+        chartHeight: height,
+        chartMargin: chart.margin,
+        series: data.series,
+        legend: data.legend,
+        preparedYAxis: yAxis,
+    });
+    const { boundsWidth, boundsHeight } = useChartDimensions({
+        width,
+        height,
+        margin: chart.margin,
+        preparedLegend,
+        preparedXAxis: xAxis,
+        preparedYAxis: yAxis,
+        preparedSeries: preparedSeries,
+    });
+    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
+    const { xScale, yScale } = useAxisScales({
+        boundsWidth,
+        boundsHeight,
+        series: preparedSeries,
+        xAxis,
+        yAxis,
+        split: preparedSplit,
+    });
+    const { shapes, shapesData } = useShapes({
+        boundsWidth,
+        boundsHeight,
+        dispatcher,
+        series: preparedSeries,
+        seriesOptions: preparedSeriesOptions,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        split: preparedSplit,
+        htmlLayout: htmlLayerRef.current,
+    });
+    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    React.useEffect(() => {
+        if (clickHandler) {
+            dispatcher.on('click-chart', clickHandler);
+        }
+        return () => {
+            dispatcher.on('click-chart', null);
+        };
+    }, [dispatcher, clickHandler]);
+    const boundsOffsetTop = chart.margin.top;
+    // We only need to consider the width of the first left axis
+    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
+    const handleMouseMove = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgRef.current);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            dispatcher.call('hover-shape', {}, undefined);
+            return;
+        }
+        const closest = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+    };
+    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = () => {
+        throttledHandleMouseMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined);
+    };
+    const handleChartClick = React.useCallback((event) => {
+        const [pointerX, pointerY] = pointer(event, svgRef.current);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            return;
+        }
+        const items = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
+        if (!selected) {
+            return;
+        }
+        dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
+    }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
+            title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+            React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
+                return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
+            })),
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
+                xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
+                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
+                shapes),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
+        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
+                transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
+            } }),
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
+};

package/dist/cjs/components/ChartInner/styles.css

@@ -0,0 +1,10 @@
+.gcharts-d3 {
+  --d3-data-labels: var(--g-color-text-secondary);
+  position: absolute;
+}
+.gcharts-d3__html-layer {
+  display: contents;
+}
+.gcharts-d3__html-layer > * {
+  transform: inherit;
+}

package/dist/cjs/components/Legend/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
+import './styles.css';
+type Props = {
+    boundsWidth: number;
+    chartSeries: PreparedSeries[];
+    legend: PreparedLegend;
+    items: LegendItem[][];
+    config: LegendConfig;
+    onItemClick: OnLegendItemClick;
+};
+export declare const Legend: (props: Props) => React.JSX.Element;
+export {};