@gravity-ui/charts 1.46.0 → 1.47.0

package/dist/esm/core/shapes/utils.js

@@ -0,0 +1,186 @@
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../utils';
+const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
+export function getXValue(args) {
+    const { point, points, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const categories = get(xAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
+        return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
+    }
+    let xLinearScale = xScale;
+    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
+    if (Number(xMinDomain) === Number(xMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const x1 = Number(points[0].x);
+        const xTarget = Number(points[1].x);
+        const x3 = Number(points[2].x);
+        if (!Number.isNaN(x1) && !Number.isNaN(xTarget) && !Number.isNaN(x3)) {
+            const xMin = Math.min(x1, xTarget, x3);
+            const xMax = Math.max(x1, xTarget, x3);
+            xLinearScale = xLinearScale
+                .copy()
+                .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+        }
+    }
+    return point.x === null ? null : xLinearScale(point.x);
+}
+export function getYValue(args) {
+    const { point, points, yAxis, yScale } = args;
+    if (yAxis.type === 'category') {
+        const yBandScale = yScale;
+        const categories = get(yAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
+        return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
+    }
+    let yLinearScale = yScale;
+    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
+    if (Number(yMinDomain) === Number(yMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const y1 = Number(points[0].y);
+        const yTarget = Number(points[1].y);
+        const y3 = Number(points[2].y);
+        if (!Number.isNaN(y1) && !Number.isNaN(yTarget) && !Number.isNaN(y3)) {
+            const yMin = Math.min(y1, yTarget, y3);
+            const yMax = Math.max(y1, yTarget, y3);
+            yLinearScale = yLinearScale
+                .copy()
+                .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+        }
+    }
+    return point.y === null ? null : yLinearScale(point.y);
+}
+// Slack for d3 scale rounding (a `500` edge can come back as `499.9999`).
+// Half a pixel matches the ±0.5 of a 1px centered stroke and far exceeds any
+// plausible float error.
+const Y_RANGE_PIXEL_TOLERANCE = 0.5;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export function markHiddenPointsOutOfYRange(args) {
+    const { points, yScale, yAxisTop, axisMin, axisMax, getDataY } = args;
+    const [yRangeA, yRangeB] = yScale.range();
+    const yMinPx = yAxisTop + Math.min(yRangeA, yRangeB);
+    const yMaxPx = yAxisTop + Math.max(yRangeA, yRangeB);
+    const hasDataBoundsCheck = Boolean(getDataY) && (typeof axisMin === 'number' || typeof axisMax === 'number');
+    const isInRange = (point) => {
+        if (point.y === null) {
+            return false;
+        }
+        if (hasDataBoundsCheck) {
+            const dataY = getDataY === null || getDataY === void 0 ? void 0 : getDataY(point);
+            if (typeof dataY === 'number') {
+                if (typeof axisMin === 'number' && dataY < axisMin) {
+                    return false;
+                }
+                if (typeof axisMax === 'number' && dataY > axisMax) {
+                    return false;
+                }
+            }
+        }
+        return (point.y >= yMinPx - Y_RANGE_PIXEL_TOLERANCE &&
+            point.y <= yMaxPx + Y_RANGE_PIXEL_TOLERANCE);
+    };
+    const inRange = points.map(isInRange);
+    for (let idx = 0; idx < points.length; idx++) {
+        if (!inRange[idx] && !inRange[idx - 1] && !inRange[idx + 1]) {
+            points[idx].hiddenInLine = true;
+        }
+    }
+}
+export function shapeKey(d) {
+    return d.id || -1;
+}
+export function setActiveState(args) {
+    const { element, datum, state, active } = args;
+    const elementSelection = select(element);
+    if (datum.active !== active) {
+        datum.active = active;
+        const opacity = datum.active ? null : state === null || state === void 0 ? void 0 : state.opacity;
+        elementSelection.attr('opacity', opacity || null);
+    }
+    return datum;
+}
+export function getRectPath(args) {
+    const { x, y, width, height, borderRadius = 0 } = args;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const p = path();
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(x + width - borderRadiusTopRight, y + borderRadiusTopRight, borderRadiusTopRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(x + width - borderRadiusBottomRight, y + height - borderRadiusBottomRight, borderRadiusBottomRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(x + borderRadiusBottomLeft, y + height - borderRadiusBottomLeft, borderRadiusBottomLeft, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(x + borderRadiusTopLeft, y + borderRadiusTopLeft, borderRadiusTopLeft, startAngle, startAngle + angle);
+    p.closePath();
+    return p;
+}
+export function getRectBorderPath(args) {
+    const { x, y, width, height, borderWidth, borderRadius = 0 } = args;
+    if (!borderWidth) {
+        return '';
+    }
+    const halfWidth = borderWidth / 2;
+    const expandedWidth = width + borderWidth;
+    const expandedHeight = height + borderWidth;
+    const innerWidth = width - borderWidth;
+    const innerHeight = height - borderWidth;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const adjustOuterRadius = (radius) => (radius ? radius + halfWidth : 0);
+    const outerBorderRadius = [
+        adjustOuterRadius(borderRadiusTopLeft),
+        adjustOuterRadius(borderRadiusTopRight),
+        adjustOuterRadius(borderRadiusBottomRight),
+        adjustOuterRadius(borderRadiusBottomLeft),
+    ];
+    const outerPath = getRectPath({
+        x: x - halfWidth,
+        y: y - halfWidth,
+        width: expandedWidth,
+        height: expandedHeight,
+        borderRadius: outerBorderRadius,
+    }).toString();
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return outerPath;
+    }
+    const innerBorderRadius = [
+        Math.max(borderRadiusTopLeft - halfWidth, 0),
+        Math.max(borderRadiusTopRight - halfWidth, 0),
+        Math.max(borderRadiusBottomRight - halfWidth, 0),
+        Math.max(borderRadiusBottomLeft - halfWidth, 0),
+    ];
+    const innerPath = getRectPath({
+        x: x + halfWidth,
+        y: y + halfWidth,
+        width: innerWidth,
+        height: innerHeight,
+        borderRadius: innerBorderRadius,
+    }).toString();
+    return `${outerPath} ${innerPath}`;
+}
+export function getClipPathIdByBounds(args) {
+    const { bounds, clipPathId } = args;
+    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
+}

package/dist/esm/{hooks/useShapes → core/shapes}/waterfall/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../series/types';
 import type { PreparedWaterfallData } from './types';
 export declare const prepareWaterfallData: (args: {
     series: PreparedWaterfallSeries[];

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/waterfall/prepare-data.js

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
-import { getLabelsSize } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../constants';
-import { getXValue, getYValue } from '../utils';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
+import { getXValue, getYValue } from '../../shapes/utils';
+import { getLabelsSize } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 async function getLabelData(d, plotHeight) {
     var _a, _b;
     if (!d.series.dataLabels.enabled) {

package/dist/esm/core/shapes/waterfall/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedWaterfallData } from './types';
+export declare function renderWaterfall(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedWaterfallData[], seriesOptions: PreparedSeriesOptions, allowOverlapDataLabels: boolean, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/waterfall/renderer.js

@@ -0,0 +1,109 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { DASH_STYLE } from '../../constants';
+import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('waterfall');
+export function renderWaterfall(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
+    const svgElement = select(elements.plot);
+    const connectorSelector = `.${b('connector')}`;
+    const hoverOptions = get(seriesOptions, 'waterfall.states.hover');
+    const inactiveOptions = get(seriesOptions, 'waterfall.states.inactive');
+    svgElement.selectAll('*').remove();
+    const rectSelection = svgElement
+        .selectAll('allRects')
+        .data(preparedData)
+        .join('rect')
+        .attr('class', b('segment'))
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .attr('height', (d) => d.height)
+        .attr('width', (d) => d.width)
+        .attr('fill', (d) => getWaterfallPointColor(d.data, d.series))
+        .attr('opacity', (d) => d.opacity)
+        .attr('cursor', (d) => d.series.cursor);
+    let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
+    if (!allowOverlapDataLabels) {
+        dataLabels = filterOverlappingLabels(dataLabels);
+    }
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
+    // Add the connector line between bars
+    svgElement
+        .selectAll(connectorSelector)
+        .data(preparedData)
+        .join('path')
+        .attr('class', b('connector'))
+        .attr('d', (d, index) => {
+        const line = lineGenerator();
+        const prev = preparedData[index - 1];
+        if (!prev) {
+            return null;
+        }
+        const points = [];
+        if (Number(prev.data.y) > 0) {
+            points.push([prev.x, prev.y]);
+        }
+        else {
+            points.push([prev.x, prev.y + prev.height]);
+        }
+        if (Number(d.data.y) > 0 && !d.data.total) {
+            points.push([d.x + d.width, d.y + d.height]);
+        }
+        else {
+            points.push([d.x + d.width, d.y]);
+        }
+        return line(points);
+    })
+        .attr('stroke-width', 1)
+        .attr('stroke-dasharray', () => getLineDashArray(DASH_STYLE.Dash, 1));
+    function handleShapeHover(data) {
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        if (!data) {
+            if (hoverEnabled) {
+                rectSelection.attr('fill', (d) => getWaterfallPointColor(d.data, d.series));
+            }
+            if (inactiveEnabled) {
+                rectSelection.attr('opacity', null);
+                labelSelection.attr('opacity', null);
+            }
+            return;
+        }
+        if (hoverEnabled) {
+            const hoveredValues = data.map((d) => d.data.x);
+            rectSelection.attr('fill', (d) => {
+                var _a;
+                const fillColor = getWaterfallPointColor(d.data, d.series);
+                if (hoveredValues.includes(d.data.x)) {
+                    const brightness = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness;
+                    return ((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(brightness).toString()) || fillColor;
+                }
+                return fillColor;
+            });
+        }
+        if (inactiveEnabled) {
+            const hoveredSeries = data.map((d) => d.series.id);
+            rectSelection.attr('opacity', (d) => {
+                return hoveredSeries.includes(d.series.id)
+                    ? null
+                    : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+            });
+            labelSelection.attr('opacity', (d) => {
+                return hoveredSeries.includes(d.series.id)
+                    ? null
+                    : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+            });
+        }
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/waterfall/types.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
-import type { PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedWaterfallSeries } from '../../series/types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;

package/dist/esm/core/shapes/waterfall/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{hooks/useShapes → core/shapes}/x-range/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedXRangeSeries } from '../../series/types';
 import type { PreparedXRangeData } from './types';
 type PrepareXRangeDataArgs = {
     series: PreparedXRangeSeries[];

package/dist/esm/{hooks/useShapes → core/shapes}/x-range/prepare-data.js

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { MIN_BAR_WIDTH } from '../../constants';
-import { getBandSize } from '../../utils/get-band-size';
+import { MIN_BAR_WIDTH } from '../../shapes/bar-constants';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../utils';
+import { getBandSize } from '../../utils/band-size';
+import { getFormattedValue } from '../../utils/format';
 const DEFAULT_BAR_PADDING = 0.2;
 export async function prepareXRangeData(args) {
     var _a;

package/dist/esm/core/shapes/x-range/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedXRangeData } from './types';
+export declare function renderXRange(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedXRangeData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/x-range/renderer.js

@@ -0,0 +1,88 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { getRectPath } from '../../shapes/utils';
+import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('x-range');
+export function renderXRange(elements, preparedData, seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    svgElement.selectAll('*').remove();
+    const segmentSelection = svgElement
+        .selectAll(`path.${b('segment')}`)
+        .data(preparedData)
+        .join('path')
+        .attr('d', (d) => {
+        const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+        return getRectPath({
+            x: d.x,
+            y: d.y,
+            width: d.width,
+            height: d.height,
+            borderRadius,
+        }).toString();
+    })
+        .attr('class', b('segment'))
+        .attr('fill', (d) => d.color)
+        .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+        .attr('cursor', (d) => d.series.cursor);
+    svgElement
+        .selectAll(`path.${b('segment-border')}`)
+        .data(preparedData.filter((d) => d.series.borderWidth > 0))
+        .join('path')
+        .attr('d', (d) => {
+        const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+        return getRectPath({
+            x: d.x,
+            y: d.y,
+            width: d.width,
+            height: d.height,
+            borderRadius,
+        }).toString();
+    })
+        .attr('class', b('segment-border'))
+        .attr('fill', 'none')
+        .attr('stroke', (d) => d.series.borderColor)
+        .attr('stroke-width', (d) => d.series.borderWidth)
+        .attr('stroke-dasharray', (d) => getLineDashArray(d.series.borderDashStyle, d.series.borderWidth))
+        .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+        .attr('pointer-events', 'none');
+    const svgLabels = preparedData.flatMap((d) => d.svgLabels);
+    renderDataLabels({
+        container: svgElement,
+        data: svgLabels,
+        className: b('label'),
+    })
+        .attr('dominant-baseline', 'central')
+        .attr('pointer-events', 'none');
+    const hoverOptions = get(seriesOptions, 'x-range.states.hover');
+    const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
+    function handleShapeHover(data) {
+        if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
+            const hoveredSet = new Set(data === null || data === void 0 ? void 0 : data.map((d) => d.data));
+            segmentSelection.attr('fill', (d) => {
+                var _a;
+                const fillColor = d.color;
+                if (hoveredSet.has(d.data)) {
+                    return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) || fillColor);
+                }
+                return fillColor;
+            });
+        }
+        if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
+            const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
+            segmentSelection.attr('opacity', (d) => {
+                var _a, _b;
+                if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
+                    return inactiveOptions.opacity || null;
+                }
+                return (_b = (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity) !== null && _b !== void 0 ? _b : null;
+            });
+        }
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', null);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/x-range/types.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
-import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXRangeSeries } from '../../series/types';
 export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     x: number;
     y: number;

package/dist/esm/core/shapes/x-range/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/types/chart/area.d.ts

@@ -87,7 +87,6 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
      * - `'connect'`: Connect points across null values (skip nulls in rendering). **Not supported with `stacking`.**
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit the data point (creates gap in area)
-     *
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';

package/dist/esm/core/types/chart/axis.d.ts

@@ -298,7 +298,6 @@ export interface AxisPlotShape extends AxisPlot {
      * Called with the pixel coordinates of the shape and the plot area dimensions.
      * Must return a string of valid SVG markup that will be inserted inside a `<g>` container
      * positioned at the shape's axis value.
-     *
      * @example
      * ```
      * renderer: ({plotHeight}) =>

package/dist/esm/core/types/chart/base.d.ts

@@ -12,29 +12,40 @@ export type CustomFormat = {
     type: 'custom';
     formatter: (args: {
         value: unknown;
-        formattedValue?: string;
     }) => string;
 };
 /**
  * Specifies how a value should be formatted for display.
  *
  * - `{ type: 'number' }` — numeric formatting with optional precision, units, percent display, etc.
- *   See [FormatNumberOptions](https://gravity-ui.github.io/charts/pages/api/Utilities/interfaces/FormatNumberOptions.html) for all available options.
- * - `{ type: 'date' }` — date/time formatting
- *
+ * See [FormatNumberOptions](https://gravity-ui.github.io/charts/pages/api/Utilities/interfaces/FormatNumberOptions.html) for all available options.
+ * - `{ type: 'date' }` — date/time formatting.
+ * - `{ type: 'custom' }` — user-defined formatter function. Receives the raw `value`
+ *   and returns the display string. Use it when the built-in number/date formatters
+ *   are not enough (e.g. bytes → KB/MB/GB, currency with locale, etc.).
  * @example
  * // Two decimal places, shown as percent
  * { type: 'number', precision: 2, format: 'percent' }
- *
  * @example
  * // Compact thousands: 1 500 000 → "1.5M"
  * { type: 'number', unit: 'auto', precision: 1 }
- *
  * @example
  * // Date value (Unix ms) formatted as "17 October 2025"
  * { type: 'date', format: 'DD MMMM YYYY' }
+ * @example
+ * // Bytes → human-readable size
+ * {
+ *   type: 'custom',
+ *   formatter: ({value}) => {
+ *     const bytes = Number(value);
+ *     if (!Number.isFinite(bytes)) return String(value);
+ *     const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+ *     const i = Math.min(units.length - 1, Math.floor(Math.log(Math.abs(bytes) || 1) / Math.log(1024)));
+ *     return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
+ *   },
+ * }
  */
-export type ValueFormat = NumberFormat | DateFormat;
+export type ValueFormat = NumberFormat | DateFormat | CustomFormat;
 export interface BaseDataLabels {
     /**
      * Enable or disable the data labels

package/dist/esm/core/types/chart/tooltip.d.ts

@@ -5,7 +5,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { CustomFormat, ValueFormat } from './base';
+import type { ValueFormat } from './base';
 import type { FunnelSeries, FunnelSeriesData } from './funnel';
 import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
@@ -107,7 +107,7 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     /** Formatting settings for tooltip header row (includes computed default). */
-    headerFormat?: ValueFormat | CustomFormat;
+    headerFormat?: ValueFormat;
 }
 export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends ChartTooltipRendererArgs<T> {
 }
@@ -167,7 +167,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /** Formatting settings for tooltip value. */
     valueFormat?: ValueFormat;
     /** Formatting settings for tooltip header row. */
-    headerFormat?: ValueFormat | CustomFormat;
+    headerFormat?: ValueFormat;
     /** Settings for totals block in tooltip */
     totals?: {
         /**

package/dist/esm/core/types/formatter.d.ts

@@ -1,40 +1 @@
-export interface FormatOptions {
-    /**
-     * Number of decimal places to display.
-     * Use `'auto'` to determine precision automatically based on the value magnitude.
-     */
-    precision?: number | 'auto';
-    /** When `true`, inserts a thousands separator (e.g. `1 500 000`). */
-    showRankDelimiter?: boolean;
-    /**
-     * BCP 47 language tag used for locale-aware formatting (e.g. `'en'`, `'ru'`).
-     * Defaults to the application locale when omitted.
-     */
-    lang?: string;
-    /** Internal rendering hint for axis label layout. Not intended for public use. */
-    labelMode?: string;
-}
-export interface FormatNumberOptions extends FormatOptions {
-    /**
-     * Display mode for the numeric value.
-     * - `'number'` — plain number (default).
-     * - `'percent'` — value is multiplied by 100 and rendered with a `%` suffix.
-     */
-    format?: 'number' | 'percent';
-    /** Factor applied to the value before formatting. For example, `multiplier: 1000` converts seconds to milliseconds. */
-    multiplier?: number;
-    /** String prepended to the formatted value (e.g. `'$'`). */
-    prefix?: string;
-    /** String appended to the formatted value (e.g. `' USD'`). */
-    postfix?: string;
-    /**
-     * Compact unit suffix applied to large numbers.
-     * - `'auto'` — picks the most appropriate unit automatically (`k`, `m`, `b`, `t`).
-     * - `'k'` — thousands (÷ 1 000).
-     * - `'m'` — millions (÷ 1 000 000).
-     * - `'b'` — billions (÷ 1 000 000 000).
-     * - `'t'` — trillions (÷ 1 000 000 000 000).
-     * - `null` — no unit suffix.
-     */
-    unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
-}
+export type { FormatNumberOptions, FormatOptions, FormatUnitScale, FormatUnitScaleEntry, } from '../../libs/format-number/types';

package/dist/{cjs/hooks/utils/get-band-size.js → esm/core/utils/band-size.js}

@@ -1,4 +1,4 @@
-import { isBandScale } from '../../core/utils';
+import { isBandScale } from '../utils';
 export function getBandSize({ domain, scale, }) {
     if (!scale || !domain.length) {
         return 0;

package/dist/esm/{hooks → core}/utils/bar-y.d.ts

@@ -1,7 +1,7 @@
-import type { ChartScale } from '../../core/scales/types';
 import type { BarYSeries, BarYSeriesData } from '../../types';
-import type { PreparedYAxis } from '../useAxis/types';
-import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
+import type { PreparedYAxis } from '../axes/types';
+import type { ChartScale } from '../scales/types';
+import type { PreparedBarYSeries, PreparedSeriesOptions } from '../series/types';
 /**
  * BarY always filters out data with null or replace null by zero.
  */

package/dist/{cjs/hooks → esm/core}/utils/bar-y.js

@@ -1,9 +1,9 @@
 import { max } from 'd3-array';
 import get from 'lodash/get';
-import { getDataCategoryValue } from '../../core/utils';
-import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
-import { getSeriesStackId } from '../useSeries/utils';
-import { getBandSize } from './get-band-size';
+import { getSeriesStackId } from '../series/utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../shapes/bar-constants';
+import { getDataCategoryValue } from '../utils';
+import { getBandSize } from './band-size';
 const isSeriesDataValid = (d) => d.x !== null;
 export function groupBarYDataByYValue(series, yAxis) {
     const data = {};