@gravity-ui/charts 1.15.0 → 1.17.0

package/dist/cjs/utils/chart/format.d.ts

@@ -1,5 +1,12 @@
-import type { ValueFormat } from '../../types';
+import type { AxisDomain } from 'd3';
+import type { PreparedAxis } from '../../hooks';
+import type { CustomFormat, ValueFormat } from '../../types';
 export declare function getFormattedValue(args: {
     value: string | number | undefined | null;
-    format?: ValueFormat;
+    format?: ValueFormat | CustomFormat;
+}): string;
+export declare function formatAxisTickLabel(args: {
+    axis: PreparedAxis;
+    value: AxisDomain;
+    step?: number;
 }): string;

package/dist/cjs/utils/chart/format.js

@@ -1,17 +1,52 @@
 import { dateTime } from '@gravity-ui/date-utils';
-import { formatNumber } from '../../libs';
+import capitalize from 'lodash/capitalize';
+import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { formatNumber, getDefaultUnit } from '../../libs';
+import { getDefaultDateFormat } from './time';
+const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
+function getFormattedDate(args) {
+    const { value, format = DEFAULT_DATE_FORMAT } = args;
+    const date = dateTime({ input: value });
+    if (date === null || date === void 0 ? void 0 : date.isValid()) {
+        const formattedDate = date.format(format);
+        if (LETTER_MOUNTH_AT_START_FORMAT_REGEXP.test(format)) {
+            return capitalize(formattedDate);
+        }
+        return formattedDate;
+    }
+    return String(value);
+}
 export function getFormattedValue(args) {
+    var _a;
     const { value, format } = args;
     switch (format === null || format === void 0 ? void 0 : format.type) {
         case 'number': {
             return formatNumber(Number(value), format);
         }
         case 'date': {
-            const date = dateTime({ input: value });
-            if (date === null || date === void 0 ? void 0 : date.isValid()) {
-                return date.format(format.format);
-            }
+            return getFormattedDate({ value, format: format.format });
+        }
+        case 'custom': {
+            return (_a = format.formatter) === null || _a === void 0 ? void 0 : _a.call(format, { value });
         }
     }
     return String(value);
 }
+export function formatAxisTickLabel(args) {
+    const { axis, value, step } = args;
+    switch (axis.type) {
+        case 'category': {
+            return value;
+        }
+        case 'datetime': {
+            const date = value;
+            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
+            return getFormattedDate({ value: date, format });
+        }
+        case 'linear':
+        default: {
+            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
+            return formatNumber(value, numberFormat);
+        }
+    }
+}

package/dist/cjs/utils/chart/index.d.ts

@@ -1,16 +1,15 @@
-import type { AxisDomain } from 'd3';
-import type { PreparedAxis } from '../../hooks';
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
 import type { AxisDirection } from './types';
-export * from './math';
-export * from './text';
-export * from './time';
 export * from './axis';
+export * from './color';
+export * from './format';
 export * from './labels';
 export * from './legend';
-export * from './symbol';
+export * from './math';
 export * from './series';
-export * from './color';
+export * from './symbol';
+export * from './text';
+export * from './time';
 export * from './zoom';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
@@ -52,15 +51,6 @@ export declare const getSeriesNames: (series: ChartSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends {
     visible: boolean;
 }>(series: T[]) => T[];
-export declare const parseTransformStyle: (style: string | null) => {
-    x?: number;
-    y?: number;
-};
-export declare const formatAxisTickLabel: (args: {
-    axis: PreparedAxis;
-    value: AxisDomain;
-    step?: number;
-}) => string;
 export declare const getHorizontalHtmlTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;
@@ -74,5 +64,4 @@ export declare const getDataCategoryValue: (args: {
     categories: string[];
     data: ChartSeriesData;
 }) => string;
-export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
 export { AxisDirection };

package/dist/cjs/utils/chart/index.js

@@ -1,22 +1,20 @@
-import { dateTime } from '@gravity-ui/date-utils';
 import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
-import { formatNumber, getDefaultUnit } from '../../libs/format-number';
 import { getWaterfallPointSubtotal } from './series/waterfall';
-import { getDefaultDateFormat } from './time';
-export * from './math';
-export * from './text';
-export * from './time';
 export * from './axis';
+export * from './color';
+export * from './format';
 export * from './labels';
 export * from './legend';
-export * from './symbol';
+export * from './math';
 export * from './series';
-export * from './color';
+export * from './symbol';
+export * from './text';
+export * from './time';
 export * from './zoom';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
@@ -166,35 +164,6 @@ export const getSeriesNames = (series) => {
 export const getOnlyVisibleSeries = (series) => {
     return series.filter((s) => s.visible);
 };
-export const parseTransformStyle = (style) => {
-    var _a;
-    if (!style) {
-        return {};
-    }
-    const stringifiedValue = ((_a = style.match(/\((.*?)\)/)) === null || _a === void 0 ? void 0 : _a[1]) || '';
-    const [xString, yString] = stringifiedValue.split(',');
-    const x = Number.isNaN(Number(xString)) ? undefined : Number(xString);
-    const y = Number.isNaN(Number(yString)) ? undefined : Number(yString);
-    return { x, y };
-};
-export const formatAxisTickLabel = (args) => {
-    const { axis, value, step } = args;
-    switch (axis.type) {
-        case 'category': {
-            return value;
-        }
-        case 'datetime': {
-            const date = value;
-            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
-            return dateTime({ input: date }).format(format);
-        }
-        case 'linear':
-        default: {
-            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
-            return formatNumber(value, numberFormat);
-        }
-    }
-};
 export const getHorizontalHtmlTextHeight = (args) => {
     var _a;
     const { text, style } = args;
@@ -248,9 +217,3 @@ export const getDataCategoryValue = (args) => {
     const categoryValue = extractCategoryValue({ axisDirection, categories, data });
     return categoryValue;
 };
-export function getClosestPointsRange(axis, points) {
-    if (axis.type === 'category') {
-        return undefined;
-    }
-    return Math.abs(points[1] - points[0]);
-}

package/dist/cjs/utils/chart/text.d.ts

@@ -26,9 +26,10 @@ export declare function wrapText(args: {
     text: string;
     style?: BaseTextStyle;
     width: number;
+    getTextSize?: ReturnType<typeof getTextSizeFn>;
 }): Promise<TextRow[]>;
 export declare function getTextSizeFn({ style }: {
-    style: BaseTextStyle;
+    style?: BaseTextStyle;
 }): (str: string) => Promise<{
     width: number;
     height: number;

package/dist/cjs/utils/chart/text.js

@@ -144,11 +144,8 @@ export async function getLabelsSize({ labels, style, rotation, html, }) {
     return result;
 }
 export async function wrapText(args) {
-    const { text, style, width } = args;
-    const height = (await getLabelsSize({
-        labels: [text],
-        style: style,
-    })).maxHeight;
+    const { text, style, width, getTextSize = getTextSizeFn({ style }) } = args;
+    const height = (await getTextSize(text)).height;
     // @ts-ignore
     const segmenter = new Intl.Segmenter([], { granularity: 'word' });
     const segments = Array.from(segmenter.segment(text));
@@ -163,11 +160,7 @@ export async function wrapText(args) {
             });
         }
         let lastRow = acc[acc.length - 1];
-        if (item.isWordLike &&
-            (await getLabelsSize({
-                labels: [lastRow.text + item.segment],
-                style,
-            })).maxWidth > width) {
+        if (item.isWordLike && (await getTextSize(lastRow.text + item.segment)).width > width) {
             lastRow = {
                 text: '',
                 y: acc.length * height,

package/dist/cjs/utils/misc.d.ts

@@ -11,3 +11,4 @@ export declare function isMacintosh(): boolean;
 export declare function measurePerformance(): {
     end(): number;
 };
+export declare function hasVerticalScrollbar(node: HTMLElement | null): boolean;

package/dist/cjs/utils/misc.js

@@ -26,3 +26,9 @@ export function measurePerformance() {
         },
     };
 }
+export function hasVerticalScrollbar(node) {
+    if (!node) {
+        return false;
+    }
+    return node.scrollHeight > node.clientHeight;
+}

package/dist/{cjs/components/Axis → esm/components/AxisX}/AxisX.js

@@ -1,23 +1,9 @@
 import React from 'react';
 import { line, select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { block, getAxisTitleRows, getBandsPosition, getLabelFormatter, getLineDashArray, getMaxTickCount, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('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) {

package/dist/esm/components/{Axis → AxisY}/AxisY.d.ts

@@ -1,19 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { AxisYData } from './types';
 import './styles.css';
 interface Props {
-    axes: PreparedAxis[];
-    boundsOffsetTop: number;
-    boundsOffsetLeft: number;
-    scale: ChartScale[];
-    width: number;
-    height: number;
+    preparedAxisData: AxisYData;
     htmlLayout: HTMLElement | null;
-    split: PreparedSplit;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
-    bottomLimit?: number;
-    topLimit?: number;
 }
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/esm/components/AxisY/AxisY.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { line, select } from 'd3';
+import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
+import { block, getLineDashArray } from '../../utils';
+import './styles.css';
+const b = block('y-axis');
+export const AxisY = (props) => {
+    const { htmlLayout, plotBeforeRef, plotAfterRef, preparedAxisData } = props;
+    const ref = React.useRef(null);
+    const lineGenerator = line();
+    const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').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();
+        }
+        if (preparedAxisData.title) {
+            svgElement
+                .append('g')
+                .attr('class', b('title'))
+                .append('text')
+                .attr('text-anchor', 'start')
+                .style('dominant-baseline', 'text-after-edge')
+                .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
+                .attr('font-size', preparedAxisData.title.style.fontSize)
+                .selectAll('tspan')
+                .data(preparedAxisData.title.content)
+                .join('tspan')
+                .html((d) => d.text)
+                .attr('x', (d) => d.x)
+                .attr('y', (d) => d.y)
+                .attr('text-anchor', 'start');
+        }
+        svgElement
+            .append('path')
+            .attr('class', b('domain'))
+            .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
+            .style('stroke', preparedAxisData.domain.lineColor);
+        const tickClassName = b('tick');
+        const ticks = svgElement
+            .selectAll(`.${tickClassName}`)
+            .remove()
+            .data(preparedAxisData.ticks)
+            .join('g')
+            .attr('class', tickClassName);
+        const labelClassName = b('label');
+        ticks.each(function () {
+            var _a;
+            const tickSelection = select(this);
+            const tickData = tickSelection.datum();
+            if (tickData.line) {
+                tickSelection.append('path').attr('d', lineGenerator(tickData.line.points));
+            }
+            if (tickData.svgLabel) {
+                const label = tickData.svgLabel;
+                const textSelection = tickSelection.append('text');
+                if (label.title) {
+                    textSelection.append('title').html(label.title);
+                }
+                textSelection
+                    .selectAll('tspan')
+                    .data(label.content)
+                    .join('tspan')
+                    .html((d) => d.text)
+                    .attr('x', (d) => d.x)
+                    .attr('y', (d) => d.y)
+                    .attr('text-anchor', 'start')
+                    .attr('class', labelClassName)
+                    .style('dominant-baseline', 'text-before-edge')
+                    .style('font-size', label.style.fontSize)
+                    .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '');
+            }
+        });
+        if (preparedAxisData.plotBands.length > 0) {
+            const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
+            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', (d) => `translate(${d.x}px, ${d.y}px)`);
+                plotBandsSelection
+                    .append('rect')
+                    .attr('width', (d) => d.width)
+                    .attr('height', (d) => d.height)
+                    .attr('fill', (d) => d.color)
+                    .attr('opacity', (d) => d.opacity);
+                plotBandsSelection.each(function () {
+                    var _a, _b;
+                    const plotBandSelection = select(this);
+                    const band = plotBandSelection.datum();
+                    const label = band.label;
+                    if (label) {
+                        plotBandSelection
+                            .append('text')
+                            .html(label.text)
+                            .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
+                            .style('font-size', label.style.fontSize)
+                            .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
+                            .style('dominant-baseline', 'text-before-edge')
+                            .attr('x', label.x)
+                            .attr('y', label.y);
+                    }
+                });
+            };
+            setPlotBands(plotBeforeContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'before'));
+            setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
+        }
+        if (preparedAxisData.plotLines.length > 0) {
+            const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
+            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', (d) => `translate(${d.x}px, ${d.y}px)`);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (d) => lineGenerator(d.points))
+                    .attr('stroke', (d) => d.color)
+                    .attr('stroke-width', (d) => d.lineWidth)
+                    .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
+                    .attr('opacity', (d) => d.opacity);
+                plotLinesSelection.each(function () {
+                    var _a, _b;
+                    const itemSelection = select(this);
+                    const plotLine = itemSelection.datum();
+                    const label = plotLine.label;
+                    if (label) {
+                        itemSelection
+                            .append('text')
+                            .text(label.text)
+                            .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
+                            .style('font-size', label.style.fontSize)
+                            .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
+                            .style('dominant-baseline', 'text-before-edge')
+                            .attr('x', label.x)
+                            .attr('y', label.y);
+                    }
+                });
+            };
+            setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
+            setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
+        }
+    }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),
+        React.createElement("g", { ref: ref, className: b() })));
+};

package/dist/esm/components/AxisY/prepare-axis-data.d.ts

@@ -0,0 +1,9 @@
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { AxisYData } from './types';
+export declare function prepareAxisData({ axis, split, scale, width, height, }: {
+    axis: PreparedAxis;
+    split: PreparedSplit;
+    scale: ChartScale;
+    width: number;
+    height: number;
+}): Promise<AxisYData>;