@gravity-ui/charts 1.8.0 → 1.10.0

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
@@ -142,212 +142,223 @@ export const Legend = (props) => {
         setPageIndex(0);
     }, [boundsWidth]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!ref.current || !htmlLayout) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const htmlElement = select(htmlLayout);
-        htmlElement.selectAll('[data-legend]').remove();
-        const htmlContainer = legend.html
-            ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
-            : null;
-        let legendWidth = 0;
-        if (legend.type === 'discrete') {
-            const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-            const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
-            const pageItems = typeof start === 'number' && typeof end === 'number'
-                ? items.slice(start, end)
-                : items;
-            const legendLineHeights = [];
-            pageItems.forEach((line) => {
-                var _a;
-                const legendLine = svgElement.append('g').attr('class', b('line'));
-                const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
-                const legendItemTemplate = legendLine
-                    .selectAll('legend-history')
-                    .data(line)
-                    .enter()
-                    .append('g')
-                    .attr('class', b('item'))
-                    .on('click', function (e, d) {
-                    onItemClick({ name: d.name, metaKey: e.metaKey });
-                    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
-                });
-                const getXPosition = (i) => {
-                    return line.slice(0, i).reduce((acc, legendItem) => {
-                        return (acc +
-                            legendItem.symbol.width +
-                            legendItem.symbol.padding +
-                            legendItem.textWidth +
-                            legend.itemDistance);
-                    }, 0);
-                };
-                const legendLineHeight = Math.max(...line.map((l) => l.height));
-                renderLegendSymbol({ selection: legendItemTemplate, legend, legendLineHeight });
-                if (htmlLegendLine) {
-                    htmlLegendLine
-                        .selectAll('legend-item')
+        async function prepareLegend() {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (!ref.current || !htmlLayout) {
+                return;
+            }
+            const svgElement = select(ref.current);
+            svgElement.selectAll('*').remove();
+            const htmlElement = select(htmlLayout);
+            htmlElement.selectAll('[data-legend]').remove();
+            const htmlContainer = legend.html
+                ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
+                : null;
+            let legendWidth = 0;
+            if (legend.type === 'discrete') {
+                const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
+                const pageItems = typeof start === 'number' && typeof end === 'number'
+                    ? items.slice(start, end)
+                    : items;
+                const legendLineHeights = [];
+                pageItems.forEach((line) => {
+                    var _a;
+                    const legendLine = svgElement.append('g').attr('class', b('line'));
+                    const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
+                    const legendItemTemplate = legendLine
+                        .selectAll('legend-history')
                         .data(line)
                         .enter()
-                        .append('div')
-                        .attr('class', function (d) {
-                        const mods = { selected: d.visible, unselected: !d.visible };
-                        return b('item-text-html', mods);
-                    })
-                        .style('font-size', legend.itemStyle.fontSize)
-                        .style('position', 'absolute')
-                        .style('left', function (d, i) {
-                        return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
-                    })
-                        .style('top', function (d) {
-                        if (d.height < legendLineHeight) {
-                            return `${(legendLineHeight - d.height) / 2}px`;
-                        }
-                        return '0px';
-                    })
+                        .append('g')
+                        .attr('class', b('item'))
                         .on('click', function (e, d) {
                         onItemClick({ name: d.name, metaKey: e.metaKey });
                         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
-                    })[legend.html ? 'html' : 'text'](function (d) {
-                        return d.name;
+                    });
+                    const getXPosition = (i) => {
+                        return line.slice(0, i).reduce((acc, legendItem) => {
+                            return (acc +
+                                legendItem.symbol.width +
+                                legendItem.symbol.padding +
+                                legendItem.textWidth +
+                                legend.itemDistance);
+                        }, 0);
+                    };
+                    const legendLineHeight = Math.max(...line.map((l) => l.height));
+                    renderLegendSymbol({ selection: legendItemTemplate, legend, legendLineHeight });
+                    if (htmlLegendLine) {
+                        htmlLegendLine
+                            .selectAll('legend-item')
+                            .data(line)
+                            .enter()
+                            .append('div')
+                            .attr('class', function (d) {
+                            const mods = { selected: d.visible, unselected: !d.visible };
+                            return b('item-text-html', mods);
+                        })
+                            .style('font-size', legend.itemStyle.fontSize)
+                            .style('position', 'absolute')
+                            .style('max-width', function (d) {
+                            return `${d.textWidth}px`;
+                        })
+                            .style('left', function (d, i) {
+                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                        })
+                            .style('top', function (d) {
+                            if (d.height < legendLineHeight) {
+                                return `${(legendLineHeight - d.height) / 2}px`;
+                            }
+                            return '0px';
+                        })
+                            .on('click', function (e, d) {
+                            onItemClick({ name: d.name, metaKey: e.metaKey });
+                            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
+                        })[legend.html ? 'html' : 'text'](function (d) {
+                            return d.name;
+                        });
+                    }
+                    else {
+                        legendItemTemplate
+                            .append('text')
+                            .attr('x', function (legendItem, i) {
+                            return (getXPosition(i) +
+                                legendItem.symbol.width +
+                                legendItem.symbol.padding);
+                        })
+                            .attr('height', legend.height)
+                            .attr('class', function (d) {
+                            const mods = { selected: d.visible, unselected: !d.visible };
+                            return b('item-text', mods);
+                        })
+                            .html(function (d) {
+                            return ('name' in d && d.name);
+                        })
+                            .style('font-size', legend.itemStyle.fontSize)
+                            .each((d, index, nodes) => {
+                            if (d.overflowed) {
+                                handleOverflowingText(nodes[index], d.textWidth);
+                            }
+                        });
+                    }
+                    const contentWidth = (legend.html
+                        ? getXPosition(line.length) - legend.itemDistance
+                        : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+                    let left = 0;
+                    switch (legend.justifyContent) {
+                        case 'center': {
+                            const legendLinePostion = getLegendPosition({
+                                align: legend.align,
+                                width: boundsWidth,
+                                offsetWidth: 0,
+                                contentWidth,
+                            });
+                            left = legendLinePostion.left;
+                            legendWidth = boundsWidth;
+                            break;
+                        }
+                        case 'start': {
+                            legendWidth = Math.max(legendWidth, contentWidth);
+                            break;
+                        }
+                    }
+                    const top = legendLineHeights.reduce((acc, h) => acc + h, 0);
+                    legendLineHeights.push(legendLineHeight);
+                    legendLine.attr('transform', `translate(${[left, top].join(',')})`);
+                    htmlLegendLine === null || htmlLegendLine === void 0 ? void 0 : htmlLegendLine.style('transform', `translate(${left}px, ${top}px)`);
+                });
+                if (config.pagination) {
+                    const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
+                    appendPaginator({
+                        container: svgElement,
+                        pageIndex: pageIndex,
+                        legend,
+                        transform,
+                        pages: config.pagination.pages,
+                        onArrowClick: setPageIndex,
                     });
                 }
-                else {
-                    legendItemTemplate
-                        .append('text')
-                        .attr('x', function (legendItem, i) {
-                        return (getXPosition(i) +
-                            legendItem.symbol.width +
-                            legendItem.symbol.padding);
-                    })
-                        .attr('height', legend.height)
-                        .attr('class', function (d) {
-                        const mods = { selected: d.visible, unselected: !d.visible };
-                        return b('item-text', mods);
-                    })
-                        .html(function (d) {
-                        return ('name' in d && d.name);
-                    })
-                        .style('font-size', legend.itemStyle.fontSize);
-                }
-                const contentWidth = (legend.html
-                    ? getXPosition(line.length) - legend.itemDistance
-                    : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-                let left = 0;
-                switch (legend.justifyContent) {
+            }
+            else {
+                // gradient rect
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
+                const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
+                svgElement.call(createGradientRect, {
+                    y: legend.title.height + legend.title.margin,
+                    height: rectHeight,
+                    width: legend.width,
+                    interpolator: getContinuesColorFn({
+                        values: [0, 1],
+                        colors: legend.colorScale.colors,
+                        stops: legend.colorScale.stops,
+                    }),
+                });
+                // ticks
+                const scale = scaleLinear(domain, [0, legend.width]);
+                const xAxisGenerator = await axisBottom({
+                    scale,
+                    ticks: {
+                        items: [[0, -rectHeight]],
+                        labelsMargin: legend.ticks.labelsMargin,
+                        labelsLineHeight: legend.ticks.labelsLineHeight,
+                        maxTickCount: 4,
+                        tickColor: '#fff',
+                        labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
+                    },
+                    domain: {
+                        size: legend.width,
+                        color: 'transparent',
+                    },
+                });
+                const tickTop = legend.title.height + legend.title.margin + rectHeight;
+                svgElement
+                    .append('g')
+                    .attr('transform', `translate(0, ${tickTop})`)
+                    .call(xAxisGenerator);
+                legendWidth = legend.width;
+            }
+            if (legend.title.enable) {
+                const { maxWidth: titleWidth } = await getLabelsSize({
+                    labels: [legend.title.text],
+                    style: legend.title.style,
+                });
+                let dx = 0;
+                switch (legend.title.align) {
                     case 'center': {
-                        const legendLinePostion = getLegendPosition({
-                            align: legend.align,
-                            width: boundsWidth,
-                            offsetWidth: 0,
-                            contentWidth,
-                        });
-                        left = legendLinePostion.left;
-                        legendWidth = boundsWidth;
+                        dx = legend.width / 2 - titleWidth / 2;
                         break;
                     }
-                    case 'start': {
-                        legendWidth = Math.max(legendWidth, contentWidth);
+                    case 'right': {
+                        dx = legend.width - titleWidth;
+                        break;
+                    }
+                    case 'left':
+                    default: {
+                        dx = 0;
                         break;
                     }
                 }
-                const top = legendLineHeights.reduce((acc, h) => acc + h, 0);
-                legendLineHeights.push(legendLineHeight);
-                legendLine.attr('transform', `translate(${[left, top].join(',')})`);
-                htmlLegendLine === null || htmlLegendLine === void 0 ? void 0 : htmlLegendLine.style('transform', `translate(${left}px, ${top}px)`);
-            });
-            if (config.pagination) {
-                const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
-                appendPaginator({
-                    container: svgElement,
-                    pageIndex: pageIndex,
-                    legend,
-                    transform,
-                    pages: config.pagination.pages,
-                    onArrowClick: setPageIndex,
-                });
+                svgElement
+                    .append('g')
+                    .attr('class', b('title'))
+                    .append('text')
+                    .attr('dx', dx)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
+                    .style('dominant-baseline', 'text-before-edge')
+                    .html(legend.title.text);
             }
-        }
-        else {
-            // gradient rect
-            const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
-            const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
-            svgElement.call(createGradientRect, {
-                y: legend.title.height + legend.title.margin,
-                height: rectHeight,
-                width: legend.width,
-                interpolator: getContinuesColorFn({
-                    values: [0, 1],
-                    colors: legend.colorScale.colors,
-                    stops: legend.colorScale.stops,
-                }),
-            });
-            // ticks
-            const scale = scaleLinear(domain, [0, legend.width]);
-            const xAxisGenerator = axisBottom({
-                scale,
-                ticks: {
-                    items: [[0, -rectHeight]],
-                    labelsMargin: legend.ticks.labelsMargin,
-                    labelsLineHeight: legend.ticks.labelsLineHeight,
-                    maxTickCount: 4,
-                    tickColor: '#fff',
-                    labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
-                },
-                domain: {
-                    size: legend.width,
-                    color: 'transparent',
-                },
-            });
-            const tickTop = legend.title.height + legend.title.margin + rectHeight;
-            svgElement
-                .append('g')
-                .attr('transform', `translate(0, ${tickTop})`)
-                .call(xAxisGenerator);
-            legendWidth = legend.width;
-        }
-        if (legend.title.enable) {
-            const { maxWidth: titleWidth } = getLabelsSize({
-                labels: [legend.title.text],
-                style: legend.title.style,
+            const { left } = getLegendPosition({
+                align: legend.align,
+                width: boundsWidth,
+                offsetWidth: config.offset.left,
+                contentWidth: legendWidth,
             });
-            let dx = 0;
-            switch (legend.title.align) {
-                case 'center': {
-                    dx = legend.width / 2 - titleWidth / 2;
-                    break;
-                }
-                case 'right': {
-                    dx = legend.width - titleWidth;
-                    break;
-                }
-                case 'left':
-                default: {
-                    dx = 0;
-                    break;
-                }
-            }
-            svgElement
-                .append('g')
-                .attr('class', b('title'))
-                .append('text')
-                .attr('dx', dx)
-                .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
-                .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
-                .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
-                .style('dominant-baseline', 'text-before-edge')
-                .html(legend.title.text);
+            svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
+            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
         }
-        const { left } = getLegendPosition({
-            align: legend.align,
-            width: boundsWidth,
-            offsetWidth: config.offset.left,
-            contentWidth: legendWidth,
-        });
-        svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-        htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+        prepareLegend();
     }, [
         boundsWidth,
         chartSeries,

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

@@ -28,9 +28,11 @@
   fill: var(--g-color-text-complementary);
 }
 .gcharts-legend__item-text-html {
+  overflow: hidden;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .gcharts-legend__item-text-html_unselected {
   color: var(--g-color-text-hint);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
 export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
-    xAxis?: ChartXAxis;
+    xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
     valueFormat?: ChartTooltip['valueFormat'];

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
 type Props = {
     hovered: TooltipDataChunk[];
-    xAxis?: ChartXAxis;
+    xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     valueFormat?: ValueFormat;
 };

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

@@ -38,7 +38,7 @@ const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
         format,
     });
 };
-function getDefaultValueFormat({ axis }) {
+function getDefaultValueFormat({ axis, }) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'linear':
         case 'logarithmic': {

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

@@ -6,7 +6,7 @@ type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     svgContainer: SVGSVGElement | null;
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis;
     tooltipPinned: boolean;
     onOutsideClick?: () => void;

package/dist/cjs/constants/chart-types.d.ts

@@ -0,0 +1,12 @@
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+    readonly Treemap: "treemap";
+    readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
+    readonly Radar: "radar";
+};

package/dist/cjs/constants/chart-types.js

@@ -0,0 +1,12 @@
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+    Treemap: 'treemap',
+    Waterfall: 'waterfall',
+    Sankey: 'sankey',
+    Radar: 'radar',
+};

package/dist/cjs/constants/defaults/axis.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
+import type { AxisCrosshair, BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
 export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
@@ -8,6 +8,8 @@ export declare const axisLabelsDefaults: {
 type AxisTitleDefaults = Required<ChartAxis['title']> & {
     style: BaseTextStyle;
 };
+type AxisCrosshairDefaults = Required<AxisCrosshair>;
+export declare const axisCrosshairDefaults: AxisCrosshairDefaults;
 export declare const xAxisTitleDefaults: AxisTitleDefaults;
 export declare const yAxisTitleDefaults: AxisTitleDefaults;
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;

package/dist/cjs/constants/defaults/axis.js

@@ -1,3 +1,4 @@
+import { DASH_STYLE } from '../line-styles';
 export const axisLabelsDefaults = {
     margin: 10,
     padding: 10,
@@ -13,6 +14,15 @@ const axisTitleDefaults = {
     align: 'center',
     maxRowCount: 1,
 };
+export const axisCrosshairDefaults = {
+    enabled: false,
+    color: 'var(--g-color-line-generic)',
+    width: 1,
+    snap: true,
+    dashStyle: DASH_STYLE.Solid,
+    opacity: 1,
+    layerPlacement: 'after',
+};
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
 export const DEFAULT_AXIS_TYPE = 'linear';

package/dist/cjs/constants/index.d.ts

@@ -1,49 +1,8 @@
 export * from './defaults';
 export * from './misc';
-export declare const SeriesType: {
-    readonly Area: "area";
-    readonly BarX: "bar-x";
-    readonly BarY: "bar-y";
-    readonly Line: "line";
-    readonly Pie: "pie";
-    readonly Scatter: "scatter";
-    readonly Treemap: "treemap";
-    readonly Waterfall: "waterfall";
-    readonly Sankey: "sankey";
-    readonly Radar: "radar";
-};
-export declare enum DashStyle {
-    Dash = "Dash",
-    DashDot = "DashDot",
-    Dot = "Dot",
-    LongDash = "LongDash",
-    LongDashDot = "LongDashDot",
-    LongDashDotDot = "LongDashDotDot",
-    ShortDash = "ShortDash",
-    ShortDashDot = "ShortDashDot",
-    ShortDashDotDot = "ShortDashDotDot",
-    ShortDot = "ShortDot",
-    Solid = "Solid"
-}
-export declare enum SymbolType {
-    Circle = "circle",
-    Diamond = "diamond",
-    Square = "square",
-    Triangle = "triangle",
-    TriangleDown = "triangle-down"
-}
-export declare enum LineCap {
-    Butt = "butt",
-    Round = "round",
-    Square = "square",
-    None = "none"
-}
-export declare enum LayoutAlgorithm {
-    Binary = "binary",
-    Dice = "dice",
-    Slice = "slice",
-    SliceDice = "slice-dice",
-    Squarify = "squarify"
-}
-export declare const DEFAULT_PALETTE: string[];
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';