@gravity-ui/charts 1.15.0 → 1.17.0

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

@@ -1,416 +0,0 @@
-import React from 'react';
-import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
-import './styles.css';
-const b = block('axis');
-const AXIS_LEFT_HTML_LABELS_DATA_ATTR = 'data-axis-left-html-labels';
-const AXIS_RIGHT_HTML_LABELS_DATA_ATTR = 'data-axis-right-html-labels';
-function transformLabel(args) {
-    const { node, axis, startTopOffset } = args;
-    let topOffset = startTopOffset !== null && startTopOffset !== void 0 ? startTopOffset : 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 || preparedAxis.labels.html) {
-            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 };
-    }
-    let x = axis.title.height -
-        axis.title.height / rowCount +
-        axis.title.margin +
-        axis.labels.margin +
-        axis.labels.width;
-    if (axis.position === 'left') {
-        x = x * -1;
-    }
-    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: allAxes, bottomLimit = 0, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, plotAfterRef, plotBeforeRef, scale, split, topLimit = 0, width, } = props;
-    const height = getAxisHeight({ split, boundsHeight: totalHeight });
-    const ref = React.useRef(null);
-    const lineGenerator = line();
-    React.useEffect(() => {
-        if (!ref.current || !htmlLayout) {
-            return;
-        }
-        const axes = allAxes.filter((a) => a.visible);
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const htmlSelection = select(htmlLayout);
-        htmlSelection.selectAll(`[${AXIS_LEFT_HTML_LABELS_DATA_ATTR}]`).remove();
-        htmlSelection.selectAll(`[${AXIS_RIGHT_HTML_LABELS_DATA_ATTR}]`).remove();
-        let plotBeforeContainer = null;
-        let plotAfterContainer = null;
-        const plotDataAttr = 'data-plot-y';
-        if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
-            plotBeforeContainer = select(plotBeforeRef.current);
-            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
-        }
-        if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
-            plotAfterContainer = select(plotAfterRef.current);
-            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
-        }
-        const axisSelection = svgElement
-            .selectAll('axis')
-            .data(axes)
-            .join('g')
-            .attr('class', b())
-            .style('transform', (d) => getAxisPlotsPosition(d, split, width));
-        axisSelection.each((d, index, node) => {
-            var _a, _b;
-            const seriesScale = scale[index];
-            const axisItem = select(node[index]);
-            const axisScale = seriesScale;
-            const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left' ? axisLeft(axisScale) : axisRight(axisScale),
-                preparedAxis: d,
-                height,
-                width,
-                scale: seriesScale,
-            });
-            yAxisGenerator(axisItem);
-            // because the standard generator interrupts the desired font
-            // https://github.com/d3/d3-axis/blob/main/src/axis.js#L110
-            axisItem.attr('font-family', null);
-            if (d.labels.enabled && d.labels.html) {
-                const offsetTop = ((_a = svgElement.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
-                const offsetLeft = ((_b = svgElement.node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left) || 0;
-                const htmlLabelsData = [];
-                axisItem
-                    .selectAll('.tick')
-                    .data(axisScale.domain())
-                    .each(function (tickContent) {
-                    const rect = this.getBoundingClientRect();
-                    htmlLabelsData.push({
-                        content: tickContent,
-                        right: rect.right,
-                        top: rect.top,
-                    });
-                });
-                const dataAttr = d.position === 'left'
-                    ? AXIS_LEFT_HTML_LABELS_DATA_ATTR
-                    : AXIS_RIGHT_HTML_LABELS_DATA_ATTR;
-                htmlSelection.append('div').attr(dataAttr, 1).style('position', 'absolute');
-                htmlLabelsData.forEach((labelData) => {
-                    htmlSelection
-                        .selectAll(`[${dataAttr}]`)
-                        .data([labelData])
-                        .append('div')
-                        .html(function (l) {
-                        return l.content;
-                    })
-                        .style('font-size', d.labels.style.fontSize || '')
-                        .style('position', 'absolute')
-                        .style('white-space', 'nowrap')
-                        .style('color', 'var(--g-color-text-secondary)')
-                        .style('overflow', 'hidden')
-                        .style('text-overflow', 'ellipsis')
-                        .style('height', `${d.labels.height}px`)
-                        .style('display', 'inline-flex')
-                        .style('align-items', 'center')
-                        .style('left', function (l) {
-                        if (d.position === 'right') {
-                            return `${l.right - offsetLeft + d.labels.margin + boundsOffsetLeft}px`;
-                        }
-                        const rect = this.getBoundingClientRect();
-                        return `${boundsOffsetLeft - rect.width - d.labels.margin}px`;
-                    })
-                        .style('top', function (l) {
-                        const rect = this.getBoundingClientRect();
-                        return `${l.top + boundsOffsetTop - offsetTop - rect.height / 2}px`;
-                    });
-                });
-            }
-            else if (d.labels.enabled) {
-                const labels = axisItem.selectAll('.tick text');
-                const tickTexts = labels
-                    // 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 });
-                });
-                labels.each(function (_d, i, nodes) {
-                    const isFirstNode = i === 0;
-                    const isLastNode = i === nodes.length - 1;
-                    if (isFirstNode || isLastNode) {
-                        const labelNode = this;
-                        const labelNodeRect = labelNode.getBoundingClientRect();
-                        const shouldBeTransformed = (isFirstNode && labelNodeRect.bottom > bottomLimit) ||
-                            (isLastNode && labelNodeRect.top < topLimit);
-                        if (shouldBeTransformed) {
-                            const text = select(labelNode);
-                            const transform = transformLabel({
-                                node: this,
-                                axis: d,
-                                startTopOffset: isLastNode ? labelNodeRect.height : 0,
-                            });
-                            text.style('transform', transform);
-                            if (d.labels.rotation) {
-                                text.attr('text-anchor', () => {
-                                    return d.labels.rotation < 0 ? 'start' : 'end';
-                                });
-                            }
-                        }
-                    }
-                });
-                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')
-                    .nodes()
-                    .map((element) => {
-                    const r = element.getBoundingClientRect();
-                    return {
-                        top: r.top,
-                        bottom: r.bottom,
-                        node: element,
-                    };
-                }, {})
-                    .sort((item1, item2) => {
-                    return item2.top - item1.top;
-                })
-                    .filter(function ({ top, bottom }, tickIndex) {
-                    if (bottom > elementY && tickIndex !== 0) {
-                        return true;
-                    }
-                    elementY = top - d.labels.padding;
-                    return false;
-                })
-                    .forEach((item) => {
-                    item.node.remove();
-                });
-            }
-            if (d.plotBands.length > 0) {
-                const plotBandDataAttr = `data-plot-y-band-${index}`;
-                const setPlotBands = (plotContainer, plotBands) => {
-                    if (!plotContainer || !plotBands.length) {
-                        return;
-                    }
-                    const plotBandsSelection = plotContainer
-                        .selectAll(`[${plotBandDataAttr}]`)
-                        .remove()
-                        .data(plotBands)
-                        .join('g')
-                        .attr(plotDataAttr, 1)
-                        .attr(plotBandDataAttr, 1)
-                        .style('transform', getAxisPlotsPosition(d, split));
-                    plotBandsSelection.each(function () {
-                        var _a, _b, _c, _e;
-                        const plotBandSelection = select(this);
-                        const band = plotBandSelection.datum();
-                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                        const startPos = halfBandwidth + Math.min(from, to);
-                        const endPos = Math.min(Math.abs(to - from), height - Math.min(from, to));
-                        const y = Math.max(0, startPos);
-                        plotBandSelection
-                            .append('rect')
-                            .attr('x', 0)
-                            .attr('width', width)
-                            .attr('y', y)
-                            .attr('height', Math.min(endPos, height))
-                            .attr('fill', () => band.color)
-                            .attr('opacity', () => band.opacity);
-                        if (band.label.text) {
-                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
-                            plotBandSelection
-                                .append('text')
-                                .text(band.label.text)
-                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
-                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
-                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
-                                .style('dominant-baseline', 'text-before-edge')
-                                .attr('x', labelPadding)
-                                .attr('y', y + labelPadding);
-                        }
-                    });
-                };
-                setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
-                setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
-            }
-            if (d.plotLines.length > 0) {
-                const plotLineDataAttr = `data-plot-y-line-${index}`;
-                const setPlotLines = (plotContainer, plotLines) => {
-                    if (!plotContainer || !plotLines.length) {
-                        return;
-                    }
-                    const plotLinesSelection = plotContainer
-                        .selectAll(`[${plotLineDataAttr}]`)
-                        .remove()
-                        .data(plotLines)
-                        .join('g')
-                        .attr(plotDataAttr, 1)
-                        .attr(plotLineDataAttr, 1)
-                        .style('transform', getAxisPlotsPosition(d, split));
-                    plotLinesSelection.each(function () {
-                        const itemSelection = select(this);
-                        const plotLine = itemSelection.datum();
-                        const plotLineValue = Number(axisScale(plotLine.value));
-                        const points = [
-                            [0, plotLineValue],
-                            [width, plotLineValue],
-                        ];
-                        itemSelection
-                            .append('path')
-                            .attr('d', lineGenerator(points))
-                            .attr('stroke', plotLine.color)
-                            .attr('stroke-width', plotLine.width)
-                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
-                            .attr('opacity', plotLine.opacity);
-                        if (plotLine.label.text) {
-                            itemSelection
-                                .append('text')
-                                .text(plotLine.label.text)
-                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
-                                .attr('font-size', plotLine.label.style.fontSize)
-                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
-                                .attr('x', plotLine.label.padding)
-                                .attr('y', plotLineValue - plotLine.label.padding);
-                        }
-                    });
-                };
-                setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
-                setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
-            }
-            return axisItem;
-        });
-        axisSelection
-            .select('.domain')
-            .attr('d', () => {
-            const points = [
-                [0, 0],
-                [0, height],
-            ];
-            return lineGenerator(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)
-            .call(async (s) => {
-            s.each(async function prepareAxisTitle(d) {
-                if (!this) {
-                    return;
-                }
-                const selection = select(this);
-                const titleRows = await 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;
-                selection.attr('transform', `translate(${x}, ${y}) rotate(${angle})`);
-                const axisTitleRows = await getAxisTitleRows({ axis: d, textMaxWidth: height });
-                selection
-                    .selectAll('tspan')
-                    .data(axisTitleRows)
-                    .join('tspan')
-                    .attr('x', 0)
-                    .attr('y', (titleRow) => titleRow.y)
-                    .text((titleRow) => titleRow.text)
-                    .each((_d, index, nodes) => {
-                    if (index === nodes.length - 1) {
-                        handleOverflowingText(nodes[index], height);
-                    }
-                });
-            });
-            return s;
-        });
-    }, [
-        allAxes,
-        bottomLimit,
-        boundsOffsetLeft,
-        boundsOffsetTop,
-        height,
-        htmlLayout,
-        lineGenerator,
-        plotAfterRef,
-        plotBeforeRef,
-        scale,
-        split,
-        topLimit,
-        width,
-    ]);
-    return React.createElement("g", { ref: ref, className: b('container') });
-};

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

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

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

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

package/dist/cjs/components/Tooltip/utils.d.ts

@@ -1,30 +0,0 @@
-import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
-export type HoveredValue = string | number | null | undefined;
-export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
-export declare function getDefaultValueFormat({ axis, }: {
-    axis?: ChartXAxis | ChartYAxis | null;
-}): ValueFormat | undefined;
-export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
-    data: TooltipDataChunk[];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
-    valueFormat?: ValueFormat;
-}) => string | null;
-export declare function getHoveredValues(args: {
-    hovered: TooltipDataChunk[];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
-}): HoveredValue[];
-export declare function getBuiltInAggregatedValue(args: {
-    aggregation: ChartTooltipTotalsBuiltInAggregation;
-    values: HoveredValue[];
-}): number | undefined;
-export declare function getBuiltInAggregationLabel(args: {
-    aggregation: ChartTooltipTotalsBuiltInAggregation;
-}): string;
-export declare function getPreparedAggregation(args: {
-    hovered: TooltipDataChunk[];
-    totals?: ChartTooltip['totals'];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
-}): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);

package/dist/cjs/components/Tooltip/utils.js

@@ -1,126 +0,0 @@
-import get from 'lodash/get';
-import { i18n } from '../../i18n';
-import { getDataCategoryValue } from '../../utils';
-import { getFormattedValue } from '../../utils/chart/format';
-const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-function getRowData(fieldName, data, axis) {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'category': {
-            const categories = get(axis, 'categories', []);
-            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
-        }
-        default: {
-            return get(data, fieldName);
-        }
-    }
-}
-export function getXRowData(data, xAxis) {
-    return getRowData('x', data, xAxis);
-}
-function getYRowData(data, yAxis) {
-    return getRowData('y', data, yAxis);
-}
-export function getDefaultValueFormat({ axis, }) {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'linear':
-        case 'logarithmic': {
-            return {
-                type: 'number',
-            };
-        }
-        case 'datetime': {
-            return {
-                type: 'date',
-                format: DEFAULT_DATE_FORMAT,
-            };
-        }
-        default:
-            return undefined;
-    }
-}
-export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
-    var _a, _b, _c, _d;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
-        return null;
-    }
-    if (data.some((item) => item.series.type === 'radar')) {
-        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
-    }
-    if (data.some((item) => item.series.type === 'bar-y')) {
-        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-        return getFormattedValue({
-            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
-            format,
-        });
-    }
-    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-    return getFormattedValue({
-        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
-        format,
-    });
-};
-export function getHoveredValues(args) {
-    const { hovered, xAxis, yAxis } = args;
-    return hovered.map((seriesItem) => {
-        var _a;
-        const { data, series } = seriesItem;
-        switch (series.type) {
-            case 'area':
-            case 'line':
-            case 'bar-x':
-            case 'scatter': {
-                return getYRowData(data, yAxis);
-            }
-            case 'bar-y': {
-                return getXRowData(data, xAxis);
-            }
-            case 'pie':
-            case 'radar':
-            case 'treemap': {
-                const seriesData = data;
-                return seriesData.value;
-            }
-            case 'sankey': {
-                const { target, data: source } = seriesItem;
-                return (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
-            }
-            case 'waterfall': {
-                return getYRowData(data, yAxis);
-            }
-            default: {
-                return undefined;
-            }
-        }
-    });
-}
-export function getBuiltInAggregatedValue(args) {
-    const { aggregation, values } = args;
-    switch (aggregation) {
-        case 'sum':
-            return values.reduce((acc, value) => {
-                return acc + (typeof value === 'number' ? value : 0);
-            }, 0);
-        default:
-            return undefined;
-    }
-}
-export function getBuiltInAggregationLabel(args) {
-    const { aggregation } = args;
-    switch (aggregation) {
-        case 'sum':
-            return i18n('tooltip', 'label_totals_sum');
-        default:
-            return '';
-    }
-}
-export function getPreparedAggregation(args) {
-    const { hovered, totals, xAxis, yAxis } = args;
-    const aggregation = totals === null || totals === void 0 ? void 0 : totals.aggregation;
-    if (typeof aggregation === 'string') {
-        return aggregation;
-    }
-    if (typeof aggregation === 'function') {
-        return () => aggregation({ hovered, xAxis, yAxis });
-    }
-    return 'sum';
-}