@gravity-ui/charts 1.1.0 → 1.3.0

package/dist/cjs/components/Axis/AxisX.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { line, select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { block, formatAxisTickLabel, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('axis');
@@ -114,14 +114,51 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
+        // add plot bands
+        if (plotContainer && axis.plotBands.length > 0) {
+            const plotBandClassName = b('plot-x-band');
+            const plotBandsSelection = plotContainer
+                .selectAll(`.${plotBandClassName}-x`)
+                .data(axis.plotBands)
+                .join('g')
+                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+            plotBandsSelection
+                .append('rect')
+                .attr('x', (band) => {
+                var _a, _b;
+                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                const startPos = halfBandwidth + Math.min(from, to);
+                return Math.max(0, startPos);
+            })
+                .attr('width', (band) => {
+                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                const startPos = width - Math.min(from, to);
+                const endPos = Math.min(Math.abs(to - from), startPos);
+                return Math.min(endPos, width);
+            })
+                .attr('y', 0)
+                .attr('height', totalHeight)
+                .attr('fill', (band) => band.color)
+                .attr('opacity', (band) => band.opacity);
+            plotBandsSelection.each((plotBandData, i, nodes) => {
+                const plotLineSelection = select(nodes[i]);
+                if (plotBandData.layerPlacement === 'before') {
+                    plotLineSelection.lower();
+                }
+                else {
+                    plotLineSelection.raise();
+                }
+            });
+        }
         // add plot lines
         if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plotLine');
+            const plotLineClassName = b('plot-x-line');
             const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}-x`)
+                .selectAll(`.${plotLineClassName}`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}-x`);
+                .attr('class', `${plotClassName} ${plotLineClassName}`);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')
@@ -148,6 +185,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split, plotRef]);
+    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
     return React.createElement("g", { ref: ref });
 });

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -8,7 +8,7 @@ type Props = {
     height: number;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
-    lowerLimit?: number;
+    bottomLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
@@ -85,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, lowerLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -118,6 +118,12 @@ export const AxisY = (props) => {
             }
             return acc;
         }, []);
+        const plotBands = axes.reduce((acc, axis) => {
+            if (axis.plotBands.length) {
+                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
@@ -153,7 +159,7 @@ export const AxisY = (props) => {
                         const currentElement = this;
                         const currentElementPosition = currentElement.getBoundingClientRect();
                         const text = select(currentElement);
-                        if (currentElementPosition.bottom > lowerLimit) {
+                        if (currentElementPosition.bottom > bottomLimit) {
                             const transform = transformLabel({
                                 node: this,
                                 axis: d,
@@ -190,8 +196,45 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            if (plotContainer && d.plotBands.length > 0) {
+                const plotBandClassName = b('plot-y-band');
+                const plotBandsSelection = plotContainer
+                    .selectAll(`.${plotBandClassName}`)
+                    .data(plotBands)
+                    .join('g')
+                    .attr('class', `${plotClassName} ${plotBandClassName}`)
+                    .style('transform', (plotBand) => plotBand.transform);
+                plotBandsSelection
+                    .append('rect')
+                    .attr('x', 0)
+                    .attr('width', width)
+                    .attr('y', (band) => {
+                    var _a, _b;
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                    const startPos = halfBandwidth + Math.min(from, to);
+                    return Math.max(0, startPos);
+                })
+                    .attr('height', (band) => {
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const startPos = height - Math.min(from, to);
+                    const endPos = Math.min(Math.abs(to - from), startPos);
+                    return Math.min(endPos, height);
+                })
+                    .attr('fill', (band) => band.color)
+                    .attr('opacity', (band) => band.opacity);
+                plotBandsSelection.each((plotBandData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotBandData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
             if (plotContainer && d.plotLines.length > 0) {
-                const plotLineClassName = b('plotLine');
+                const plotLineClassName = b('plot-y-line');
                 const plotLinesSelection = plotContainer
                     .selectAll(`.${plotLineClassName}`)
                     .data(plotLines)
@@ -268,6 +311,6 @@ export const AxisY = (props) => {
                 handleOverflowingText(nodes[index], height);
             }
         });
-    }, [allAxes, width, height, scale, split]);
+    }, [allAxes, width, height, scale, split, bottomLimit]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -67,7 +67,7 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { lowerLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),

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

@@ -1,6 +1,8 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 .gcharts-chart__html-layer {
   display: contents;

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -58,9 +58,9 @@ export function useChartInnerProps(props) {
     // We need to calculate the width of each axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
-            const width = getYAxisWidth(axis);
-            if (acc < width) {
-                acc = width;
+            const axisWidth = getYAxisWidth(axis);
+            if (acc < axisWidth) {
+                acc = axisWidth;
             }
             return acc;
         }, 0);

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

@@ -114,6 +114,7 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const y = legend.lineHeight / 2;
+                const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => {
@@ -123,7 +124,7 @@ function renderLegendSymbol(args) {
                     return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
                 })
                     .attr('transform', () => {
-                    return 'translate(' + x + ',' + y + ')';
+                    return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
                     .style('fill', color);
@@ -185,21 +186,32 @@ export const Legend = (props) => {
                     const mods = { selected: d.visible, unselected: !d.visible };
                     return b('item-text', mods);
                 })
-                    .text(function (d) {
+                    .html(function (d) {
                     return ('name' in d && d.name);
                 })
                     .style('font-size', legend.itemStyle.fontSize);
                 const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-                const { left } = getLegendPosition({
-                    align: legend.align,
-                    width: boundsWidth,
-                    offsetWidth: 0,
-                    contentWidth,
-                });
+                let left = 0;
+                switch (legend.justifyContent) {
+                    case 'center': {
+                        const legendLinePostion = getLegendPosition({
+                            align: legend.align,
+                            width: boundsWidth,
+                            offsetWidth: 0,
+                            contentWidth,
+                        });
+                        left = legendLinePostion.left;
+                        legendWidth = boundsWidth;
+                        break;
+                    }
+                    case 'start': {
+                        legendWidth = Math.max(legendWidth, contentWidth);
+                        break;
+                    }
+                }
                 const top = legend.lineHeight * lineIndex;
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
             });
-            legendWidth = boundsWidth;
             if (config.pagination) {
                 const transform = `translate(${[
                     0,
@@ -283,7 +295,7 @@ export const Legend = (props) => {
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
                 .style('alignment-baseline', 'before-edge')
-                .text(legend.title.text);
+                .html(legend.title.text);
         }
         const { left } = getLegendPosition({
             align: legend.align,

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

@@ -5,5 +5,5 @@ const b = block('title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
-        React.createElement("tspan", null, text)));
+        React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
 };

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

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;
     itemStyle: {

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

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    justifyContent: 'center',
     itemDistance: 20,
     margin: 15,
     itemStyle: {

package/dist/cjs/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/cjs/hooks/useChartOptions/x-axis.js

@@ -110,6 +110,13 @@ 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({

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -45,6 +45,10 @@ function getAxisMin(axis, series) {
 export const getPreparedYAxis = ({ series, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
+    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    if (!hasAxisRelatedSeries) {
+        return [];
+    }
     return axisItems.map((axisItem) => {
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
@@ -116,6 +120,13 @@ 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) {

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -50,6 +50,7 @@ export const getPreparedLegend = (args) => {
     const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
+        justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
         height,
         itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/hooks/useShapes/pie/prepare-data.js

@@ -17,7 +17,10 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
 };
 export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
-    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const haloSize = preparedSeries[0].states.hover.halo.enabled
+        ? preparedSeries[0].states.hover.halo.size
+        : 0;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     const prepareItem = (stackId, items) => {
         var _a;
@@ -184,6 +187,7 @@ export function preparePieData(args) {
                         y: Math.max(0, data.center[1] + label.y),
                         content: label.text,
                         size: label.size,
+                        style: label.style,
                     });
                 }
                 else {
@@ -209,19 +213,20 @@ export function preparePieData(args) {
             series: items,
         });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
-        const top = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
+        const topAdjustment = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
         const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
-        const topAdjustment = Math.floor(top - data.halo.size);
         if (topAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += topAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + topAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] -= topAdjustment / 2;
         }
-        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        const bottomAdjustment = Math.floor(boundsHeight - bottom);
         if (bottomAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += bottomAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + bottomAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] += bottomAdjustment / 2;
         }

package/dist/cjs/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/cjs/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/cjs/hooks/useShapes/treemap/prepare-data.js

@@ -10,23 +10,28 @@ function getLabels(args) {
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
-            const width = Math.max(0, right - left);
+            const spaceWidth = Math.max(0, right - left);
+            const spaceHeight = Math.max(0, d.y1 - d.y0 - padding);
             let x = left;
             const y = index * lineHeight + d.y0 + padding;
+            const labelWidth = Math.min(labelMaxWidth, spaceWidth);
+            if (!labelWidth || lineHeight > spaceHeight) {
+                return;
+            }
             switch (align) {
                 case 'left': {
                     x = left;
                     break;
                 }
                 case 'center': {
-                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    x = Math.max(left, left + (spaceWidth - labelMaxWidth) / 2);
                     break;
                 }
                 case 'right': {
-                    x = Math.max(left, right - labelWidth);
+                    x = Math.max(left, right - labelMaxWidth);
                     break;
                 }
             }
@@ -35,13 +40,13 @@ function getLabels(args) {
                     content: label,
                     x,
                     y,
-                    size: { width, height: lineHeight },
+                    size: { width: labelWidth, height: lineHeight },
                 }
                 : {
                     text: label,
                     x,
                     y,
-                    width,
+                    width: labelWidth,
                     nodeData: d.data,
                 };
             acc.push(item);
@@ -94,10 +99,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/cjs/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/cjs/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/cjs/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/cjs/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 } = {}) {