@gravity-ui/charts 1.0.1 → 1.2.0

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
-import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 const b = block('tooltip');
@@ -12,23 +10,14 @@ const getRowData = (fieldName, data, axis) => {
             const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
         }
-        case 'datetime': {
-            const value = get(data, fieldName);
-            if (!value) {
-                return undefined;
-            }
-            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
-        }
-        case 'linear':
         default: {
-            const value = get(data, fieldName);
-            return formatNumber(value);
+            return get(data, fieldName);
         }
     }
 };
 const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
-const getMeasureValue = (data, xAxis, yAxis) => {
+const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
     var _a, _b, _c, _d;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
@@ -37,12 +26,38 @@ const getMeasureValue = (data, xAxis, yAxis) => {
         return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
+        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
+        return getFormattedValue({
+            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+            format,
+        });
     }
-    return getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis);
+    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
+    return getFormattedValue({
+        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+        format,
+    });
 };
+function getDefaultValueFormat({ axis }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
 export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
-    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
         hovered.map((seriesItem, i) => {
@@ -55,9 +70,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'line':
                 case 'area':
                 case 'bar-x': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -70,13 +86,14 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
                     const subTotalValue = getWaterfallPointSubtotal(data, series);
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const subTotal = getFormattedValue({
                         value: subTotalValue,
-                        format: valueFormat,
+                        format,
                     });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
@@ -93,9 +110,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             subTotal)));
                 }
                 case 'bar-y': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
                     const formattedValue = getFormattedValue({
                         value: getXRowData(data, xAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -110,7 +128,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
@@ -124,7 +142,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
                     const formattedValue = getFormattedValue({
                         value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
@@ -142,7 +160,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     const value = (React.createElement(React.Fragment, null,
                         React.createElement("span", null,

package/dist/esm/hooks/useChartDimensions/index.js

@@ -8,6 +8,9 @@ const getBottomOffset = (args) => {
     if (preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
+    if (!preparedXAxis.visible) {
+        return result;
+    }
     if (hasAxisRelatedSeries) {
         if (preparedXAxis.title.text) {
             result += preparedXAxis.title.height + preparedXAxis.title.margin;

package/dist/esm/hooks/useChartDimensions/utils.js

@@ -6,6 +6,9 @@ export const getBoundsWidth = (args) => {
         getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
 };
 export function getYAxisWidth(axis) {
+    if (!(axis === null || axis === void 0 ? void 0 : axis.visible)) {
+        return 0;
+    }
     let result = 0;
     if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
         result += axis.title.height + axis.title.margin;

package/dist/esm/hooks/useChartOptions/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle } from 'src/constants';
-import type { AxisPlotLine, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+import type { AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -11,15 +11,16 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
 export type PreparedChart = {
     margin: ChartMargin;
 };
+export type PreparedAxisPlotBand = Required<AxisPlotBand>;
 export type PreparedAxisPlotLine = {
     value: number;
     color: string;
     width: number;
     dashStyle: DashStyle;
     opacity: number;
-    layerPlacement: AxisPlotLine['layerPlacement'];
+    layerPlacement: PlotLayerPlacement;
 };
-export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
+export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -42,6 +43,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
+    plotBands: PreparedAxisPlotBand[];
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -110,6 +110,14 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
+        plotBands: get(xAxis, 'plotBands', []).map((d) => ({
+            color: get(d, 'color', 'var(--g-color-base-brand)'),
+            opacity: get(d, 'opacity', 1),
+            from: get(d, 'from', 0),
+            to: get(d, 'to', 0),
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+        })),
+        visible: get(xAxis, 'visible', true),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -116,6 +116,14 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
             })),
+            plotBands: get(axisItem, 'plotBands', []).map((d) => ({
+                color: get(d, 'color', 'var(--g-color-base-brand)'),
+                opacity: get(d, 'opacity', 1),
+                from: get(d, 'from', 0),
+                to: get(d, 'to', 0),
+                layerPlacement: get(d, 'layerPlacement', 'before'),
+            })),
+            visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });

package/dist/esm/hooks/useSeries/prepare-waterfall.js

@@ -4,35 +4,47 @@ import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareWaterfallSeries(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colorScale, series: seriesList, legend } = args;
     const [, negativeColor, positiveColor] = DEFAULT_PALETTE;
-    return seriesList.map((series) => {
-        var _a, _b, _c, _d;
-        const name = series.name || '';
-        const color = series.color || colorScale(name);
-        const prepared = {
-            type: series.type,
-            color,
-            positiveColor: positiveColor,
-            negativeColor: negativeColor,
-            name,
-            id: getUniqId(),
-            visible: get(series, 'visible', true),
-            legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
-            },
-            data: series.data,
-            dataLabels: {
-                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
-                allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
-                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
-                html: get(series, 'dataLabels.html', false),
-                format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
-            },
-            cursor: get(series, 'cursor', null),
-        };
-        return prepared;
+    const series = seriesList[0];
+    const common = {
+        id: '',
+        color: seriesList[0].color || colorScale(seriesList[0].name),
+        type: series.type,
+        name: series.name,
+        visible: get(series, 'visible', true),
+        legend: {
+            enabled: get(series, 'legend.enabled', legend.enabled),
+            symbol: prepareLegendSymbol(series),
+        },
+        dataLabels: {
+            enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || true,
+            style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+            allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
+            padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+            html: get(series, 'dataLabels.html', false),
+            format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
+        },
+        cursor: get(series, 'cursor', null),
+        data: [],
+    };
+    const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
+    const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
+    const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
+    series.data.forEach((d, index) => {
+        var _a;
+        const value = (_a = d === null || d === void 0 ? void 0 : d.y) !== null && _a !== void 0 ? _a : 0;
+        const dataItem = Object.assign(Object.assign({}, d), { index });
+        if (d === null || d === void 0 ? void 0 : d.total) {
+            totals.data.push(dataItem);
+        }
+        else if (value > 0) {
+            positive.data.push(dataItem);
+        }
+        else if (value < 0) {
+            negative.data.push(dataItem);
+        }
     }, []);
+    return [positive, negative, totals];
 }

package/dist/esm/hooks/useSeries/types.d.ts

@@ -243,9 +243,12 @@ export type PreparedTreemapSeries = {
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
+    index: number;
+};
 export type PreparedWaterfallSeries = {
     type: WaterfallSeries['type'];
-    data: WaterfallSeriesData[];
+    data: PreparedWaterfallSeriesData[];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
@@ -254,8 +257,6 @@ export type PreparedWaterfallSeries = {
         html: boolean;
         format?: ValueFormat;
     };
-    positiveColor: string;
-    negativeColor: string;
 } & BasePreparedSeries;
 export type PreparedSankeySeries = {
     type: SankeySeries['type'];

package/dist/esm/hooks/useShapes/HtmlLayer.js

@@ -17,6 +17,7 @@ export const HtmlLayer = (props) => {
         return null;
     }
     return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
+        const style = Object.assign(Object.assign({}, item.style), { position: 'absolute', left: item.x, top: item.y });
+        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
     })));
 };

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -111,6 +111,7 @@ export const prepareAreaData = (args) => {
                             y: l.y,
                             content: l.text,
                             size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
+                            style,
                         };
                     });
                     htmlElements.push(...htmlLabels);

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -139,6 +139,7 @@ export const prepareBarXData = (args) => {
                         y: label.y,
                         content: label.text,
                         size: label.size,
+                        style: label.style,
                     });
                 }
                 else {

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -71,6 +71,7 @@ function setLabel(prepared) {
             y: y - height / 2,
             content,
             size: { width, height },
+            style: dataLabels.style,
         });
     }
     else {

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -35,6 +35,7 @@ function getHtmlLabel(point, series, xMax) {
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
         size: { width: size.maxWidth, height: size.maxHeight },
+        style: series.dataLabels.style,
     };
 }
 export const prepareLineData = (args) => {

package/dist/esm/hooks/useShapes/pie/index.js

@@ -75,7 +75,7 @@ export function PieSeriesShapes(args) {
             .selectAll('text')
             .data((pieData) => pieData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -184,6 +184,7 @@ export function preparePieData(args) {
                         y: Math.max(0, data.center[1] + label.y),
                         content: label.text,
                         size: label.size,
+                        style: label.style,
                     });
                 }
                 else {

package/dist/esm/hooks/useShapes/radar/prepare-data.js

@@ -146,6 +146,7 @@ export function prepareRadarData(args) {
                     y: label.y,
                     content: label.text,
                     size: label.size,
+                    style: label.style,
                 }));
             }
         }

package/dist/esm/hooks/useShapes/treemap/index.js

@@ -38,7 +38,7 @@ export const TreemapSeriesShape = (props) => {
             .selectAll('tspan')
             .data(labelData)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -94,10 +94,11 @@ export function prepareTreemapData(args) {
     let labelData = [];
     const htmlElements = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
-        const { html } = series.dataLabels;
+        const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            htmlElements.push(...labels);
+            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            htmlElements.push(...htmlItems);
         }
         else {
             labelData = labels;

package/dist/esm/hooks/useShapes/waterfall/prepare-data.js

@@ -5,10 +5,12 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(d, plotHeight) {
+    var _a, _b;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.subTotal }, d.series.dataLabels));
+    const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
+    const text = getFormattedValue(Object.assign({ value: labelValue }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
     let y;
@@ -60,7 +62,7 @@ export const prepareWaterfallData = (args) => {
         acc.push(...s.data.map((d) => ({ data: d, series: s })));
         return acc;
     }, []);
-    const data = sortBy(flattenData, (d) => d.data.x);
+    const data = sortBy(flattenData, (d) => d.data.index);
     const bandWidth = getBandWidth({
         series,
         xAxis,

package/dist/esm/i18n/keysets/en.json

@@ -11,6 +11,8 @@
     "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}].",
     "label_invalid-treemap-redundant-value": "It seems you are trying to set \"value\" for container node. Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
-    "label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\""
+    "label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\"",
+    "label_invalid-axis-plot-band-option": "It seems you are trying to use inappropriate type for \"{{axis}}\" axis plot band option: \"{{option}}\"",
+    "label_axis-plot-band-options-not-equal": "It seems you are trying to use different type for \"{{axis}}\" axis plot band options"
   }
 }

package/dist/esm/i18n/keysets/ru.json

@@ -11,6 +11,8 @@
     "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}].",
     "label_invalid-treemap-redundant-value": "Похоже, что вы пытаетесь установить значение \"value\" для узла, используемого в качестве контейнера. Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
-    "label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\""
+    "label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\"",
+    "label_invalid-axis-plot-band-option": "Похоже, что вы пытаетесь использовать некорректный тип для параметра полосы: \"{{option}}\" для оси \"{{axis}}\"",
+    "label_axis-plot-band-options-not-equal": "Похоже, что вы пытаетесь использовать разные типы для для параметра полосы для оси \"{{axis}}\""
   }
 }

package/dist/esm/libs/chart-error/index.d.ts

@@ -7,6 +7,7 @@ export declare const CHART_ERROR_CODE: {
     NO_DATA: string;
     INVALID_DATA: string;
     UNKNOWN: string;
+    INVALID_OPTION_TYPE: string;
 };
 export declare class ChartError extends Error {
     readonly code: number | string;

package/dist/esm/libs/chart-error/index.js

@@ -2,6 +2,7 @@ export const CHART_ERROR_CODE = {
     NO_DATA: 'ERR.CK.NO_DATA',
     INVALID_DATA: 'ERR.CK.INVALID_DATA',
     UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
+    INVALID_OPTION_TYPE: 'ERR.CK.INVALID_OPTION_TYPE',
 };
 export class ChartError extends Error {
     constructor({ originalError, message, code = CHART_ERROR_CODE.UNKNOWN } = {}) {

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

@@ -75,10 +75,27 @@ export interface ChartAxis {
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
+    /** An array of colored bands stretching across the plot area marking an interval on the axis. */
+    plotBands?: AxisPlotBand[];
+    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    visible?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
 }
-export interface AxisPlotLine {
+export type PlotLayerPlacement = 'before' | 'after';
+export interface AxisPlot {
+    /** Place the line behind or above the chart. */
+    layerPlacement?: PlotLayerPlacement;
+    /** The color of the plot line (hex, rgba). */
+    color?: string;
+    /**
+     * Individual opacity for the line.
+     *
+     * @default 1
+     * */
+    opacity?: number;
+}
+export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
     value?: number;
     /** The color of the plot line (hex, rgba). */
@@ -90,14 +107,22 @@ export interface AxisPlotLine {
     width?: number;
     /** Option for line stroke style. */
     dashStyle?: `${DashStyle}`;
+}
+export interface AxisPlotBand extends AxisPlot {
     /**
-     * Individual opacity for the line.
+     * The start position of the plot band in axis units.
      *
-     * @default 1
-     * */
-    opacity?: number;
-    /** Place the line behind or above the chart. */
-    layerPlacement?: 'before' | 'after';
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    from: number | string;
+    /**
+     * The end position of the plot band in axis units.
+     *
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    to: number | string;
 }
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.

package/dist/esm/types/chart/waterfall.d.ts

@@ -36,5 +36,14 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** Individual series legend options. Has higher priority than legend options in widget data. */
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
+        /** The legend item text for positive, negative values and totals. */
+        itemText?: {
+            /** The legend item text for positive values. */
+            positive?: string;
+            /** The legend item text for negative values. */
+            negative?: string;
+            /** The legend item text for totals. */
+            totals?: string;
+        };
     };
 }

package/dist/esm/types/chart-ui.d.ts

@@ -22,6 +22,7 @@ export interface HtmlItem {
         width: number;
         height: number;
     };
+    style?: BaseTextStyle;
 }
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];

package/dist/esm/utils/chart/axis-generators/bottom.d.ts

@@ -19,6 +19,7 @@ type AxisBottomArgs = {
         size: number;
         color?: string;
     };
+    leftmostLimit?: number;
 };
 export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
 export {};

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -103,6 +103,21 @@ export function axisBottom(args) {
                 .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             labels.each(function (_d, i, nodes) {
+                if (i === 0) {
+                    const currentElement = this;
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const nextElement = nodes[i + 1];
+                    const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
+                    if (currentElementPosition.left < leftmostLimit) {
+                        const remainSpace = nextElementPosition.left -
+                            currentElementPosition.right +
+                            x -
+                            labelsMargin;
+                        text.attr('text-anchor', 'start');
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
                 if (i === nodes.length - 1) {
                     const currentElement = this;
                     const prevElement = nodes[i - 1];