@gravity-ui/chartkit 4.5.0 → 4.6.1

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

@@ -3,9 +3,11 @@ import { group, scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
+import { getPreparedLegend, getLegendComponents } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 export const useSeries = (args) => {
-    const { series: { data: series }, legend, } = args;
+    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series }, } = args;
+    const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);
     const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
@@ -14,12 +16,12 @@ export const useSeries = (args) => {
             acc.push(...prepareSeries({
                 type: seriesType,
                 series: seriesList,
-                legend,
+                legend: preparedLegend,
                 colorScale,
             }));
             return acc;
         }, []);
-    }, [series, legend]);
+    }, [series, preparedLegend]);
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     const chartSeries = React.useMemo(() => {
         return preparedSeries.map((singleSeries) => {
@@ -29,10 +31,16 @@ export const useSeries = (args) => {
             return singleSeries;
         });
     }, [preparedSeries, activeLegendItems]);
-    // FIXME: remove effect. It initiates extra rerender
-    React.useEffect(() => {
-        setActiveLegendItems(getActiveLegendItems(preparedSeries));
-    }, [preparedSeries]);
+    const { legendConfig, legendItems } = React.useMemo(() => {
+        return getLegendComponents({
+            chartHeight,
+            chartMargin,
+            chartWidth,
+            series: chartSeries,
+            preparedLegend,
+            preparedYAxis,
+        });
+    }, [chartWidth, chartHeight, chartMargin, chartSeries, preparedLegend, preparedYAxis]);
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
         let nextActiveLegendItems;
@@ -50,5 +58,15 @@ export const useSeries = (args) => {
         }
         setActiveLegendItems(nextActiveLegendItems);
     }, [preparedSeries, activeLegendItems]);
-    return { preparedSeries: chartSeries, handleLegendItemClick };
+    // FIXME: remove effect. It initiates extra rerender
+    React.useEffect(() => {
+        setActiveLegendItems(getActiveLegendItems(preparedSeries));
+    }, [preparedSeries]);
+    return {
+        legendItems,
+        legendConfig,
+        preparedLegend,
+        preparedSeries: chartSeries,
+        handleLegendItemClick,
+    };
 };

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.d.ts

@@ -0,0 +1,27 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedLegend, PreparedSeries, LegendItem } from './types';
+export declare const getPreparedLegend: (args: {
+    legend: ChartKitWidgetData['legend'];
+    series: ChartKitWidgetData['series']['data'];
+}) => PreparedLegend;
+export declare const getLegendComponents: (args: {
+    chartWidth: number;
+    chartHeight: number;
+    chartMargin: PreparedChart['margin'];
+    series: PreparedSeries[];
+    preparedLegend: PreparedLegend;
+    preparedYAxis: PreparedAxis[];
+}) => {
+    legendConfig: {
+        offset: {
+            left: number;
+            top: number;
+        };
+        pagination: {
+            limit: number;
+            maxPage: number;
+        } | undefined;
+    };
+    legendItems: LegendItem[][];
+};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.js

@@ -0,0 +1,92 @@
+import clone from 'lodash/clone';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { select } from 'd3';
+import { legendDefaults } from '../../constants';
+import { getHorisontalSvgTextHeight } from '../../utils';
+import { getBoundsWidth } from '../useChartDimensions';
+export const getPreparedLegend = (args) => {
+    const { legend, series } = args;
+    const enabled = typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1;
+    const defaultItemStyle = clone(legendDefaults.itemStyle);
+    const itemStyle = get(legend, 'itemStyle');
+    const computedItemStyle = merge(defaultItemStyle, itemStyle);
+    const lineHeight = getHorisontalSvgTextHeight({ text: 'Tmp', style: computedItemStyle });
+    const height = enabled ? lineHeight : 0;
+    return {
+        align: get(legend, 'align', legendDefaults.align),
+        enabled,
+        height,
+        itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),
+        itemStyle: computedItemStyle,
+        lineHeight,
+        margin: get(legend, 'margin', legendDefaults.margin),
+    };
+};
+const getFlattenLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const legendEnabled = get(s, 'legend.enabled', true);
+        if (legendEnabled) {
+            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
+        }
+        return acc;
+    }, []);
+};
+const getGroupedLegendItems = (args) => {
+    const { maxLegendWidth, items, preparedLegend } = args;
+    const result = [[]];
+    let textWidthsInLine = [0];
+    let lineIndex = 0;
+    items.forEach((item) => {
+        select(document.body)
+            .append('text')
+            .text(item.name)
+            .style('font-size', preparedLegend.itemStyle.fontSize)
+            .each(function () {
+            const resultItem = clone(item);
+            const textWidth = this.getBoundingClientRect().width;
+            resultItem.textWidth = textWidth;
+            textWidthsInLine.push(textWidth);
+            const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
+            result[lineIndex].push(resultItem);
+            const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
+                return acc + symbol.width + symbol.padding;
+            }, 0);
+            const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
+            const isOverfilled = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
+            if (isOverfilled) {
+                result[lineIndex].pop();
+                lineIndex += 1;
+                textWidthsInLine = [textWidth];
+                const nextLineIndex = lineIndex;
+                result[nextLineIndex] = [];
+                result[nextLineIndex].push(resultItem);
+            }
+        })
+            .remove();
+    });
+    return result;
+};
+export const getLegendComponents = (args) => {
+    const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
+    const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
+    const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
+    const flattenLegendItems = getFlattenLegendItems(series);
+    const items = getGroupedLegendItems({
+        maxLegendWidth,
+        items: flattenLegendItems,
+        preparedLegend,
+    });
+    let legendHeight = preparedLegend.lineHeight * items.length;
+    let pagination;
+    if (maxLegendHeight < legendHeight) {
+        const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight);
+        const maxPage = Math.ceil(items.length / limit);
+        pagination = { limit, maxPage };
+        legendHeight = maxLegendHeight;
+    }
+    preparedLegend.height = legendHeight;
+    const top = chartHeight - chartMargin.bottom - preparedLegend.height + preparedLegend.lineHeight / 2;
+    const offset = { left: chartMargin.left, top };
+    return { legendConfig: { offset, pagination }, legendItems: items };
+};

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

@@ -1,7 +1,6 @@
 import type { ScaleOrdinal } from 'd3';
 import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-import type { PreparedLegend } from '../useChartOptions/types';
-import type { PreparedSeries } from './types';
+import type { PreparedLegend, PreparedSeries } from './types';
 export declare function prepareSeries(args: {
     type: ChartKitWidgetSeries['type'];
     series: ChartKitWidgetSeries[];

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

@@ -1,8 +1,33 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
 export type PreparedLegendSymbol = RectLegendSymbol;
+export type PreparedLegend = Required<ChartKitWidgetLegend> & {
+    height: number;
+    lineHeight: number;
+};
+export type OnLegendItemClick = (data: {
+    name: string;
+    metaKey: boolean;
+}) => void;
+export type LegendItem = {
+    color: string;
+    name: string;
+    symbol: PreparedLegendSymbol;
+    textWidth: number;
+    visible?: boolean;
+};
+export type LegendConfig = {
+    offset: {
+        left: number;
+        top: number;
+    };
+    pagination?: {
+        limit: number;
+        maxPage: number;
+    };
+};
 type BasePreparedSeries = {
     color: string;
     name: string;

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
 import { getDataCategoryValue } from '../../utils';
 import { DEFAULT_BAR_X_SERIES_OPTIONS } from './defaults';
+const MIN_RECT_WIDTH = 1;
 const MIN_RECT_GAP = 1;
 const MIN_GROUP_GAP = 1;
 const DEFAULT_LABEL_PADDING = 7;
@@ -72,7 +73,7 @@ function prepareData(args) {
     const groupGap = Math.max(bandWidth * groupPadding, MIN_GROUP_GAP);
     const groupWidth = bandWidth - groupGap;
     const rectGap = Math.max(bandWidth * barPadding, MIN_RECT_GAP);
-    const rectWidth = Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth);
+    const rectWidth = Math.max(MIN_RECT_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
     Object.entries(data).forEach(([xValue, val]) => {
         const stacks = Object.values(val);

package/build/plugins/d3/renderer/utils/axis-generators/bottom.d.ts

@@ -0,0 +1,21 @@
+import type { AxisDomain, AxisScale, Selection } from 'd3';
+import { BaseTextStyle } from '../../../../../types';
+type AxisBottomArgs = {
+    scale: AxisScale<AxisDomain>;
+    ticks: {
+        count?: number;
+        maxTickCount: number;
+        labelFormat: (value: any) => string;
+        labelsPaddings?: number;
+        labelsMargin?: number;
+        labelsStyle?: BaseTextStyle;
+        size: number;
+        autoRotation?: boolean;
+    };
+    domain: {
+        size: number;
+        color?: string;
+    };
+};
+export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
+export {};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -0,0 +1,104 @@
+import { select } from 'd3';
+import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
+import { hasOverlappingLabels, setEllipsisForOverflowText } from '../text';
+function addDomain(selection, options) {
+    const { size, color } = options;
+    selection
+        .selectAll('.domain')
+        .data([null])
+        .enter()
+        .insert('path', '.tick')
+        .attr('class', 'domain')
+        .attr('stroke', color || 'currentColor')
+        .attr('d', `M0,0V0H${size}`);
+}
+export function axisBottom(args) {
+    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsStyle, size: tickSize, count: ticksCount, maxTickCount, autoRotation = true, }, domain: { size: domainSize, color: domainColor }, } = args;
+    const offset = getXAxisOffset();
+    const spacing = Math.max(tickSize, 0) + labelsMargin;
+    const position = getXTickPosition({ scale, offset });
+    const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
+    return function (selection) {
+        var _a, _b, _c, _e;
+        const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;
+        const right = x + domainSize;
+        selection
+            .selectAll('.tick')
+            .data(values)
+            .order()
+            .join((el) => {
+            const tick = el.append('g').attr('class', 'tick');
+            tick.append('line').attr('stroke', 'currentColor').attr('y2', tickSize);
+            tick.append('text')
+                .attr('fill', 'currentColor')
+                .attr('y', spacing)
+                .attr('dy', '0.71em')
+                .text(labelFormat);
+            return tick;
+        })
+            .attr('transform', function (d) {
+            return `translate(${position(d) + offset},0)`;
+        });
+        // Remove tick that has the same x coordinate like domain
+        selection
+            .select('.tick')
+            .filter((d) => {
+            return position(d) === 0;
+        })
+            .select('line')
+            .remove();
+        const labels = selection.selectAll('.tick text');
+        const labelNodes = labels.nodes();
+        const overlapping = hasOverlappingLabels({
+            width: domainSize,
+            labels: values.map(labelFormat),
+            padding: labelsPaddings,
+            style: labelsStyle,
+        });
+        const rotationAngle = overlapping && autoRotation ? '-45' : undefined;
+        if (rotationAngle) {
+            const labelHeight = (_e = (_c = labelNodes[0]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height;
+            const labelOffset = (labelHeight / 2 + labelsMargin) / 2;
+            labels
+                .attr('text-anchor', 'end')
+                .attr('transform', `rotate(${rotationAngle}) translate(-${labelOffset}, -${labelOffset})`);
+        }
+        else {
+            // remove overlapping labels
+            let elementX = 0;
+            selection
+                .selectAll('.tick')
+                .filter(function () {
+                const node = this;
+                const r = node.getBoundingClientRect();
+                if (r.left < elementX) {
+                    return true;
+                }
+                elementX = r.right + labelsPaddings;
+                return false;
+            })
+                .remove();
+            // add an ellipsis to the labels that go beyond the boundaries of the chart
+            labels.each(function (_d, i, nodes) {
+                if (i === nodes.length - 1) {
+                    const currentElement = this;
+                    const prevElement = nodes[i - 1];
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                    if (lackingSpace) {
+                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                        const translateX = currentElementPosition.width / 2 - lackingSpace;
+                        text.attr('text-anchor', 'end').attr('transform', `translate(${translateX},0)`);
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
+            });
+        }
+        selection
+            .call(addDomain, { size: domainSize, color: domainColor })
+            .attr('text-anchor', 'middle')
+            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');
+    };
+}

package/build/plugins/d3/renderer/utils/axis-generators/index.d.ts

@@ -0,0 +1 @@
+export * from './bottom';

package/build/plugins/d3/renderer/utils/axis-generators/index.js

@@ -0,0 +1 @@
+export * from './bottom';

package/build/plugins/d3/renderer/utils/axis.d.ts

@@ -0,0 +1,22 @@
+import { PreparedAxis } from '../hooks';
+import { AxisDomain, AxisScale, ScaleBand } from 'd3';
+export declare function getTicksCount({ axis, range }: {
+    axis: PreparedAxis;
+    range: number;
+}): number | undefined;
+export declare function isBandScale(scale: AxisScale<AxisDomain>): scale is ScaleBand<AxisDomain>;
+export declare function getScaleTicks(scale: AxisScale<AxisDomain>, ticksCount?: number): any;
+export declare function getXAxisOffset(): 0 | 0.5;
+export declare function getXTickPosition({ scale, offset }: {
+    scale: AxisScale<AxisDomain>;
+    offset: number;
+}): (d: AxisDomain) => number;
+export declare function getXAxisItems({ scale, count, maxCount, }: {
+    scale: AxisScale<AxisDomain>;
+    count?: number;
+    maxCount: number;
+}): any;
+export declare function getMaxTickCount({ axis, width }: {
+    axis: PreparedAxis;
+    width: number;
+}): number;

package/build/plugins/d3/renderer/utils/axis.js

@@ -0,0 +1,43 @@
+export function getTicksCount({ axis, range }) {
+    let ticksCount;
+    if (axis.ticks.pixelInterval) {
+        ticksCount = Math.ceil(range / axis.ticks.pixelInterval);
+    }
+    return ticksCount;
+}
+export function isBandScale(scale) {
+    return 'bandwidth' in scale && typeof scale.bandwidth === 'function';
+}
+export function getScaleTicks(scale, ticksCount) {
+    return 'ticks' in scale && typeof scale.ticks === 'function'
+        ? scale.ticks(ticksCount)
+        : scale.domain();
+}
+export function getXAxisOffset() {
+    return typeof window !== 'undefined' && window.devicePixelRatio > 1 ? 0 : 0.5;
+}
+function number(scale) {
+    return (d) => Number(scale(d));
+}
+function center(scale, offset) {
+    offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+    if (scale.round()) {
+        offset = Math.round(offset);
+    }
+    return (d) => Number(scale(d)) + offset;
+}
+export function getXTickPosition({ scale, offset }) {
+    return isBandScale(scale) ? center(scale.copy(), offset) : number(scale.copy());
+}
+export function getXAxisItems({ scale, count, maxCount, }) {
+    let values = getScaleTicks(scale, count);
+    if (values.length > maxCount) {
+        const step = Math.ceil(values.length / maxCount);
+        values = values.filter((_, i) => i % step === 0);
+    }
+    return values;
+}
+export function getMaxTickCount({ axis, width }) {
+    const minTickWidth = parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+    return Math.floor(width / minTickWidth);
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -1,7 +1,10 @@
 import { AxisDomain } from 'd3';
-import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData } from '../../../../types/widget-data';
+import { PreparedAxis } from '../hooks';
 export * from './math';
 export * from './text';
+export * from './time';
+export * from './axis';
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
@@ -43,10 +46,9 @@ export declare const parseTransformStyle: (style: string | null) => {
     y?: number | undefined;
 };
 export declare const formatAxisTickLabel: (args: {
-    axisType: ChartKitWidgetAxisType;
+    axis: PreparedAxis;
     value: AxisDomain;
-    dateFormat?: ChartKitWidgetAxisLabels['dateFormat'];
-    numberFormat?: ChartKitWidgetAxisLabels['numberFormat'];
+    step?: number;
 }) => string;
 /**
  * Calculates the height of a text element in a horizontal SVG layout.
@@ -65,3 +67,4 @@ export declare const getDataCategoryValue: (args: {
     categories: string[];
     data: ChartKitWidgetSeriesData;
 }) => string;
+export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;

package/build/plugins/d3/renderer/utils/index.js

@@ -4,8 +4,12 @@ import isNil from 'lodash/isNil';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
+import { getNumberUnitRate } from '../../../shared/format-number/format-number';
+import { getDefaultDateFormat } from './time';
 export * from './math';
 export * from './text';
+export * from './time';
+export * from './axis';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
  * Checks whether the series should be drawn with axes.
@@ -89,20 +93,20 @@ export const parseTransformStyle = (style) => {
     const y = Number.isNaN(Number(yString)) ? undefined : Number(yString);
     return { x, y };
 };
-const defaultFormatNumberOptions = {
-    precision: 0,
-};
 export const formatAxisTickLabel = (args) => {
-    const { axisType, value, dateFormat = 'DD.MM.YY', numberFormat = defaultFormatNumberOptions, } = args;
-    switch (axisType) {
+    const { axis, value, step } = args;
+    switch (axis.type) {
         case 'category': {
             return value;
         }
         case 'datetime': {
-            return dateTime({ input: value }).format(dateFormat);
+            const date = value;
+            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
+            return dateTime({ input: date }).format(format);
         }
         case 'linear':
         default: {
+            const numberFormat = Object.assign({ unitRate: value && step ? getNumberUnitRate(step) : undefined }, axis.labels.numberFormat);
             return formatNumber(value, numberFormat);
         }
     }
@@ -153,3 +157,9 @@ export const getDataCategoryValue = (args) => {
     const categoryValue = extractCategoryValue({ axisDirection, categories, data });
     return categoryValue;
 };
+export function getClosestPointsRange(axis, points) {
+    if (axis.type === 'category') {
+        return undefined;
+    }
+    return points[1] - points[0];
+}

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -1,2 +1,20 @@
-import { Selection } from 'd3-selection';
-export declare function setEllipsisForOverflowText(selection: Selection<SVGTextElement, any, null, undefined>, maxWidth: number): void;
+import type { Selection } from 'd3';
+import { BaseTextStyle } from '../../../../types';
+export declare function setEllipsisForOverflowText(selection: Selection<SVGTextElement, unknown, null, unknown>, maxWidth: number): void;
+export declare function setEllipsisForOverflowTexts(selection: Selection<SVGTextElement, string, any, unknown>, maxWidth: number): void;
+export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
+    width: number;
+    labels: string[];
+    style?: BaseTextStyle;
+    padding?: number;
+}): boolean;
+export declare function getLabelsMaxWidth({ labels, style, transform, }: {
+    labels: string[];
+    style?: BaseTextStyle;
+    transform?: string;
+}): number;
+export declare function getLabelsMaxHeight({ labels, style, transform, }: {
+    labels: string[];
+    style?: BaseTextStyle;
+    transform?: string;
+}): number;

package/build/plugins/d3/renderer/utils/text.js

@@ -1,7 +1,8 @@
+import { select } from 'd3';
 export function setEllipsisForOverflowText(selection, maxWidth) {
     var _a, _b;
     let text = selection.text();
-    selection.text(null).attr('text-anchor', 'left').append('title').text(text);
+    selection.text(null).append('title').text(text);
     const tSpan = selection.append('tspan').text(text);
     let textLength = ((_a = tSpan.node()) === null || _a === void 0 ? void 0 : _a.getComputedTextLength()) || 0;
     while (textLength > maxWidth && text.length > 1) {
@@ -10,3 +11,52 @@ export function setEllipsisForOverflowText(selection, maxWidth) {
         textLength = ((_b = tSpan.node()) === null || _b === void 0 ? void 0 : _b.getComputedTextLength()) || 0;
     }
 }
+export function setEllipsisForOverflowTexts(selection, maxWidth) {
+    selection.each(function () {
+        setEllipsisForOverflowText(select(this), maxWidth);
+    });
+}
+export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
+    const maxWidth = (width - padding * (labels.length - 1)) / labels.length;
+    const textElement = select(document.body)
+        .append('text')
+        .style('font-size', (style === null || style === void 0 ? void 0 : style.fontSize) || '');
+    const result = labels.some((label) => {
+        var _a, _b;
+        const textWidth = ((_b = (_a = textElement.text(label).node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+        return textWidth > maxWidth;
+    });
+    textElement.remove();
+    return result;
+}
+function renderLabels(selection, { labels, style, transform, }) {
+    const text = selection
+        .append('g')
+        .append('text')
+        .attr('transform', transform || '')
+        .style('font-size', (style === null || style === void 0 ? void 0 : style.fontSize) || '');
+    text.selectAll('tspan')
+        .data(labels)
+        .enter()
+        .append('tspan')
+        .attr('x', 0)
+        .attr('dy', 0)
+        .text((d) => d);
+    return text;
+}
+export function getLabelsMaxWidth({ labels, style, transform, }) {
+    var _a, _b;
+    const svg = select(document.body).append('svg');
+    svg.call(renderLabels, { labels, style, transform });
+    const maxWidth = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+    svg.remove();
+    return maxWidth;
+}
+export function getLabelsMaxHeight({ labels, style, transform, }) {
+    var _a, _b;
+    const svg = select(document.body).append('svg');
+    svg.call(renderLabels, { labels, style, transform });
+    const maxHeight = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0;
+    svg.remove();
+    return maxHeight;
+}

package/build/plugins/d3/renderer/utils/time.d.ts

@@ -0,0 +1,3 @@
+export declare const TIME_UNITS: Record<string, number>;
+export declare const DATETIME_LABEL_FORMATS: Record<keyof typeof TIME_UNITS, string>;
+export declare function getDefaultDateFormat(range?: number): string;

package/build/plugins/d3/renderer/utils/time.js

@@ -0,0 +1,34 @@
+export const TIME_UNITS = {
+    millisecond: 1,
+    second: 1000,
+    minute: 60000,
+    hour: 3600000,
+    day: 24 * 3600000,
+    week: 7 * 24 * 3600000,
+    month: 28 * 24 * 3600000,
+    year: 364 * 24 * 3600000,
+};
+export const DATETIME_LABEL_FORMATS = {
+    millisecond: 'DD.MM.YY HH:mm:ss.SSS',
+    second: 'DD.MM.YY HH:mm:ss',
+    minute: 'DD.MM.YY HH:mm',
+    hour: 'DD.MM.YY HH:mm',
+    day: 'DD.MM.YY',
+    week: 'DD.MM.YY',
+    month: "MMM 'YY",
+    year: 'YYYY',
+};
+function getTimeUnit(range) {
+    const units = Object.keys(TIME_UNITS);
+    const index = units.findIndex((unit) => range < TIME_UNITS[unit]);
+    return index === -1 ? 'year' : units[index - 1];
+}
+export function getDefaultDateFormat(range) {
+    if (range) {
+        const unit = getTimeUnit(range);
+        if (unit in DATETIME_LABEL_FORMATS) {
+            return DATETIME_LABEL_FORMATS[unit];
+        }
+    }
+    return DATETIME_LABEL_FORMATS.day;
+}