@gravity-ui/charts 1.6.6 → 1.7.0

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

@@ -8,7 +8,7 @@ export function useChartInnerProps(props) {
     const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
-    const { chart, title, tooltip } = useChartOptions({ data });
+    const { chart, title, tooltip, colors } = useChartOptions({ data });
     const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
     const yAxis = React.useMemo(() => getPreparedYAxis({
         series: data.series.data,
@@ -22,6 +22,7 @@ export function useChartInnerProps(props) {
         series: data.series,
         legend: data.legend,
         preparedYAxis: yAxis,
+        colors,
     });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,

package/dist/cjs/hooks/useChartOptions/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { DEFAULT_PALETTE } from '../../constants';
 import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip }, } = args;
+    const { data: { chart, title, tooltip, colors }, } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
@@ -15,7 +16,8 @@ export const useChartOptions = (args) => {
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
+            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, title, tooltip]);
+    }, [chart, colors, title, tooltip]);
     return options;
 };

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

@@ -56,5 +56,6 @@ export type ChartOptions = {
     chart: PreparedChart;
     tooltip: PreparedTooltip;
     title?: PreparedTitle;
+    colors: string[];
 };
 export {};

package/dist/cjs/hooks/useSeries/index.d.ts

@@ -8,6 +8,7 @@ type Args = {
     legend: ChartData['legend'];
     series: ChartData['series'];
     preparedYAxis: PreparedAxis[];
+    colors: string[];
 };
 export declare const useSeries: (args: Args) => {
     legendItems: import("./types").LegendItem[][];

package/dist/cjs/hooks/useSeries/index.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { group, scaleOrdinal } from 'd3';
-import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
 import { getLegendComponents, getPreparedLegend } from './prepare-legend';
 import { getPreparedOptions } from './prepare-options';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
 export const useSeries = (args) => {
-    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, } = args;
+    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, colors, } = args;
     const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);
     const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
-        const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
+        const colorScale = scaleOrdinal(seriesNames, colors);
         const groupedSeries = group(series, (item) => item.type);
         return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
             acc.push(...prepareSeries({
@@ -20,6 +19,7 @@ export const useSeries = (args) => {
                 seriesOptions,
                 legend: preparedLegend,
                 colorScale,
+                colors,
             }));
             return acc;
         }, []);

package/dist/cjs/hooks/useSeries/prepare-pie.d.ts

@@ -4,6 +4,7 @@ type PreparePieSeriesArgs = {
     series: PieSeries;
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare function preparePieSeries(args: PreparePieSeriesArgs): PreparedSeries[];
 export {};

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

@@ -1,13 +1,13 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function preparePieSeries(args) {
-    const { series, seriesOptions, legend } = args;
+    const { series, seriesOptions, legend, colors } = args;
     const dataNames = series.data.map((d) => d.name);
-    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    const colorScale = scaleOrdinal(dataNames, colors);
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem, i) => {

package/dist/cjs/hooks/useSeries/prepare-radar.d.ts

@@ -4,6 +4,7 @@ type PrepareRadarSeriesArgs = {
     series: RadarSeries[];
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare const DEFAULT_MARKER: {
     enabled: boolean;

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

@@ -1,7 +1,7 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { prepareLegendSymbol } from './utils';
@@ -26,8 +26,8 @@ function prepareMarker(series, seriesOptions) {
 }
 export function prepareRadarSeries(args) {
     var _a, _b;
-    const { series: radarSeries, seriesOptions, legend } = args;
-    const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), DEFAULT_PALETTE);
+    const { series: radarSeries, seriesOptions, legend, colors } = args;
+    const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), colors);
     const categories = (_b = (_a = radarSeries.find((s) => s.categories)) === null || _a === void 0 ? void 0 : _a.categories) !== null && _b !== void 0 ? _b : [];
     return radarSeries.map((series, index) => {
         var _a, _b, _c, _d, _e, _f;

package/dist/cjs/hooks/useSeries/prepare-waterfall.d.ts

@@ -5,6 +5,7 @@ type PrepareWaterfallSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: WaterfallSeries[];
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare function prepareWaterfallSeries(args: PrepareWaterfallSeriesArgs): PreparedSeries[];
 export {};

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

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } 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;
+    const { colorScale, series: seriesList, legend, colors } = args;
+    const [, negativeColor, positiveColor] = colors;
     const series = seriesList[0];
     const common = {
         id: '',

package/dist/cjs/hooks/useSeries/prepareSeries.d.ts

@@ -6,5 +6,6 @@ export declare function prepareSeries(args: {
     series: ChartSeries[];
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
     colorScale: ScaleOrdinal<string, string>;
 }): PreparedSeries[];

package/dist/cjs/hooks/useSeries/prepareSeries.js

@@ -10,11 +10,16 @@ import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
 export function prepareSeries(args) {
-    const { type, series, seriesOptions, legend, colorScale } = args;
+    const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {
         case 'pie': {
             return series.reduce((acc, singleSeries) => {
-                acc.push(...preparePieSeries({ series: singleSeries, seriesOptions, legend }));
+                acc.push(...preparePieSeries({
+                    series: singleSeries,
+                    seriesOptions,
+                    legend,
+                    colors,
+                }));
                 return acc;
             }, []);
         }
@@ -66,6 +71,7 @@ export function prepareSeries(args) {
                 series: series,
                 legend,
                 colorScale,
+                colors,
             });
         }
         case 'sankey': {
@@ -81,6 +87,7 @@ export function prepareSeries(args) {
                 series: series,
                 seriesOptions,
                 legend,
+                colors,
             });
         }
         default: {

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

@@ -1,7 +1,7 @@
-import { arc, group, line as lineGenerator } from 'd3';
+import { arc, group, line as lineGenerator, max } from 'd3';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../../constants';
-import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
@@ -31,7 +31,8 @@ export function preparePieData(args) {
     const minRadius = typeof propsMinRadius === 'number' ? propsMinRadius : maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     const dataLabelsStyle = merge({}, DEFAULT_DATALABELS_STYLE, (_b = (_a = preparedSeries[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.style);
-    const prepareItem = (stackId, items) => {
+    const prepareItem = ({ stackId, items, labels, }) => {
+        var _a;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, dataLabels } = series;
         const data = {
@@ -53,15 +54,13 @@ export function preparePieData(args) {
                 size: series.states.hover.halo.size,
             },
         };
-        const { maxHeight: labelHeight } = getLabelsSize({
-            labels: ['Some Label'],
-            style: dataLabelsStyle,
-        });
+        const labelMaxHeight = (_a = max(Object.values(labels).map((l) => { var _a, _b; return (_b = (_a = l.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; }))) !== null && _a !== void 0 ? _a : 0;
         const segments = items.map((item) => {
             var _a;
             let maxSegmentRadius = maxRadius;
             if (dataLabels.enabled) {
-                maxSegmentRadius -= dataLabels.distance + dataLabels.connectorPadding + labelHeight;
+                maxSegmentRadius -=
+                    dataLabels.distance + dataLabels.connectorPadding + labelMaxHeight;
             }
             const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
             return {
@@ -78,8 +77,40 @@ export function preparePieData(args) {
         data.segments = pieGenerator(segments);
         return data;
     };
+    const getLabels = ({ series }) => {
+        const { dataLabels } = series[0];
+        if (!dataLabels.enabled) {
+            return {};
+        }
+        const getTextSize = getTextSizeFn({ style: dataLabelsStyle });
+        return series.reduce((acc, d) => {
+            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
+            let labelWidth = 0;
+            let labelHeight = 0;
+            if (dataLabels.html) {
+                const size = getLabelsSize({
+                    labels: [text],
+                    style: dataLabelsStyle,
+                    html: true,
+                });
+                labelWidth = size.maxWidth;
+                labelHeight = size.maxHeight;
+            }
+            else {
+                const size = getTextSize(text);
+                labelWidth = size.width;
+                labelHeight = size.height;
+            }
+            const label = {
+                text,
+                size: { width: labelWidth, height: labelHeight },
+            };
+            acc[d.id] = label;
+            return acc;
+        }, {});
+    };
     const prepareLabels = (prepareLabelsArgs) => {
-        const { data, series, allowOverlow = true } = prepareLabelsArgs;
+        const { data, series, labels: labelsData, allowOverlow = true } = prepareLabelsArgs;
         const { dataLabels } = series[0];
         const labels = [];
         const htmlLabels = [];
@@ -93,12 +124,7 @@ export function preparePieData(args) {
         if (curveFactory) {
             line = line.curve(curveFactory);
         }
-        const { style, connectorPadding, distance } = dataLabels;
-        const { maxHeight: labelHeight } = getLabelsSize({
-            labels: ['Some Label'],
-            style: dataLabelsStyle,
-            html: shouldUseHtml,
-        });
+        const { connectorPadding, distance } = dataLabels;
         const connectorStartPointGenerator = arc()
             .innerRadius((d) => d.data.radius)
             .outerRadius((d) => d.data.radius);
@@ -114,14 +140,11 @@ export function preparePieData(args) {
         let shouldStopLabelPlacement = false;
         // eslint-disable-next-line complexity
         series.forEach((d, index) => {
+            var _a, _b;
             const prevLabel = labels[labels.length - 1];
-            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
-            const labelSize = getLabelsSize({
-                labels: [text],
-                style: dataLabelsStyle,
-                html: shouldUseHtml,
-            });
-            const labelWidth = labelSize.maxWidth;
+            const { text = '', size: labelSize } = labelsData[d.id];
+            const labelWidth = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _a !== void 0 ? _a : 0;
+            const labelHeight = (_b = labelSize === null || labelSize === void 0 ? void 0 : labelSize.height) !== null && _b !== void 0 ? _b : 0;
             const relatedSegment = data.segments[index];
             /**
              * Compute the label coordinates on the label arc for a given angle.
@@ -159,7 +182,7 @@ export function preparePieData(args) {
                 text,
                 x,
                 y,
-                style,
+                style: dataLabelsStyle,
                 size: { width: labelWidth, height: labelHeight },
                 maxWidth: labelWidth,
                 textAnchor: midAngle < Math.PI ? 'start' : 'end',
@@ -251,9 +274,11 @@ export function preparePieData(args) {
     };
     return Array.from(groupedPieSeries).map(([stackId, items]) => {
         var _a;
-        const data = prepareItem(stackId, items);
+        const seriesLabels = getLabels({ series: items });
+        const data = prepareItem({ stackId, items, labels: seriesLabels });
         const preparedLabels = prepareLabels({
             data,
+            labels: seriesLabels,
             series: items,
         });
         let maxLeftRightFreeSpace = Infinity;
@@ -329,6 +354,7 @@ export function preparePieData(args) {
         const { labels, htmlLabels, connectors } = prepareLabels({
             data,
             series: items,
+            labels: seriesLabels,
             allowOverlow: false,
         });
         if (typeof ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.innerRadius) !== 'undefined') {

package/dist/cjs/types/index.d.ts

@@ -71,4 +71,10 @@ export interface ChartData<T = MeaningfulAny> {
      * It can be used to visualize related information on multiple charts.
      */
     split?: ChartSplit;
+    /** The color list of palette.
+     * If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
+     *
+     * @default ['#4DA2F1', '#FF3D64', '#8AD554', '#FFC636', '#FFB9DD', '#84D1EE', '#FF91A1', '#54A520', '#DB9100', '#BA74B3', '#1F68A9', '#ED65A9', '#0FA08D', '#FF7E00', '#E8B0A4', '#52A6C5', '#BE2443', '#70C1AF', '#FFB46C', '#DCA3D7']
+     * */
+    colors?: string[];
 }

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

@@ -21,7 +21,7 @@ export function axisBottom(args) {
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
     const labelHeight = getLabelsSize({
-        labels: values,
+        labels: values.map(labelFormat),
         style: labelsStyle,
     }).maxHeight;
     return function (selection) {

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

@@ -165,11 +165,27 @@ export function wrapText(args) {
         return acc;
     }, []);
 }
+const entityMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;',
+};
+function unescapeHtml(str) {
+    return Object.entries(entityMap).reduce((result, [key, value]) => {
+        return result.replace(value, key);
+    }, str);
+}
 export function getTextSizeFn({ style }) {
     const map = {};
     const setSymbolSize = (s) => {
+        const labels = [s === ' ' ? '&nbsp;' : s];
         const size = getLabelsSize({
-            labels: [s],
+            labels,
             style,
         });
         map[s] = { width: size.maxWidth, height: size.maxHeight };
@@ -177,7 +193,7 @@ export function getTextSizeFn({ style }) {
     return (str) => {
         let width = 0;
         let height = 0;
-        [...str].forEach((s) => {
+        [...unescapeHtml(str)].forEach((s) => {
             if (!map[s]) {
                 setSymbolSize(s);
             }
@@ -187,14 +203,20 @@ export function getTextSizeFn({ style }) {
         return { width, height };
     };
 }
+// We ignore an inaccuracy of less than a pixel.
+// To do this, we round the font size down when comparing it, and the size of the allowed space up.
 export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
-    let text = originalText;
-    let textLength = getTextWidth(text);
-    while (textLength > maxWidth && text.length > 1) {
+    let textWidth = Math.floor(getTextWidth(originalText));
+    const textMaxWidth = Math.ceil(maxWidth);
+    if (textWidth <= textMaxWidth) {
+        return originalText;
+    }
+    let text = originalText + '…';
+    while (textWidth > textMaxWidth && text.length > 2) {
         text = text.slice(0, -2) + '…';
-        textLength = getTextWidth(text);
+        textWidth = Math.floor(getTextWidth(text));
     }
-    if (textLength > maxWidth) {
+    if (textWidth > maxWidth) {
         text = '';
     }
     return text;

package/dist/cjs/utils/chart-ui/pie-center-text.js

@@ -21,7 +21,8 @@ export function pieCenterText(text, options) {
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const minFontSize = (_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE;
+        fontSize = Math.max(minFontSize, Math.ceil((fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight)));
         const tempWrapper = select(document.body).append('svg');
         const container = tempWrapper.append('g');
         const textSelection = container
@@ -34,7 +35,9 @@ export function pieCenterText(text, options) {
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
             .text(text);
-        handleOverflowingText(tspan.node(), availableSpace);
+        if (fontSize <= minFontSize) {
+            handleOverflowingText(tspan.node(), availableSpace);
+        }
         const result = container.node();
         tempWrapper.remove();
         return result;

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

@@ -8,7 +8,7 @@ export function useChartInnerProps(props) {
     const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
-    const { chart, title, tooltip } = useChartOptions({ data });
+    const { chart, title, tooltip, colors } = useChartOptions({ data });
     const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
     const yAxis = React.useMemo(() => getPreparedYAxis({
         series: data.series.data,
@@ -22,6 +22,7 @@ export function useChartInnerProps(props) {
         series: data.series,
         legend: data.legend,
         preparedYAxis: yAxis,
+        colors,
     });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { DEFAULT_PALETTE } from '../../constants';
 import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip }, } = args;
+    const { data: { chart, title, tooltip, colors }, } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
@@ -15,7 +16,8 @@ export const useChartOptions = (args) => {
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
+            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, title, tooltip]);
+    }, [chart, colors, title, tooltip]);
     return options;
 };

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

@@ -56,5 +56,6 @@ export type ChartOptions = {
     chart: PreparedChart;
     tooltip: PreparedTooltip;
     title?: PreparedTitle;
+    colors: string[];
 };
 export {};

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

@@ -8,6 +8,7 @@ type Args = {
     legend: ChartData['legend'];
     series: ChartData['series'];
     preparedYAxis: PreparedAxis[];
+    colors: string[];
 };
 export declare const useSeries: (args: Args) => {
     legendItems: import("./types").LegendItem[][];

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import { group, scaleOrdinal } from 'd3';
-import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
 import { getLegendComponents, getPreparedLegend } from './prepare-legend';
 import { getPreparedOptions } from './prepare-options';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
 export const useSeries = (args) => {
-    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, } = args;
+    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, colors, } = args;
     const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);
     const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
-        const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
+        const colorScale = scaleOrdinal(seriesNames, colors);
         const groupedSeries = group(series, (item) => item.type);
         return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
             acc.push(...prepareSeries({
@@ -20,6 +19,7 @@ export const useSeries = (args) => {
                 seriesOptions,
                 legend: preparedLegend,
                 colorScale,
+                colors,
             }));
             return acc;
         }, []);

package/dist/esm/hooks/useSeries/prepare-pie.d.ts

@@ -4,6 +4,7 @@ type PreparePieSeriesArgs = {
     series: PieSeries;
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare function preparePieSeries(args: PreparePieSeriesArgs): PreparedSeries[];
 export {};

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

@@ -1,13 +1,13 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function preparePieSeries(args) {
-    const { series, seriesOptions, legend } = args;
+    const { series, seriesOptions, legend, colors } = args;
     const dataNames = series.data.map((d) => d.name);
-    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    const colorScale = scaleOrdinal(dataNames, colors);
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem, i) => {

package/dist/esm/hooks/useSeries/prepare-radar.d.ts

@@ -4,6 +4,7 @@ type PrepareRadarSeriesArgs = {
     series: RadarSeries[];
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare const DEFAULT_MARKER: {
     enabled: boolean;

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

@@ -1,7 +1,7 @@
 import { scaleOrdinal } from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { prepareLegendSymbol } from './utils';
@@ -26,8 +26,8 @@ function prepareMarker(series, seriesOptions) {
 }
 export function prepareRadarSeries(args) {
     var _a, _b;
-    const { series: radarSeries, seriesOptions, legend } = args;
-    const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), DEFAULT_PALETTE);
+    const { series: radarSeries, seriesOptions, legend, colors } = args;
+    const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), colors);
     const categories = (_b = (_a = radarSeries.find((s) => s.categories)) === null || _a === void 0 ? void 0 : _a.categories) !== null && _b !== void 0 ? _b : [];
     return radarSeries.map((series, index) => {
         var _a, _b, _c, _d, _e, _f;

package/dist/esm/hooks/useSeries/prepare-waterfall.d.ts

@@ -5,6 +5,7 @@ type PrepareWaterfallSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: WaterfallSeries[];
     legend: PreparedLegend;
+    colors: string[];
 };
 export declare function prepareWaterfallSeries(args: PrepareWaterfallSeriesArgs): PreparedSeries[];
 export {};

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

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_STYLE, DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } 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;
+    const { colorScale, series: seriesList, legend, colors } = args;
+    const [, negativeColor, positiveColor] = colors;
     const series = seriesList[0];
     const common = {
         id: '',

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

@@ -6,5 +6,6 @@ export declare function prepareSeries(args: {
     series: ChartSeries[];
     seriesOptions?: ChartSeriesOptions;
     legend: PreparedLegend;
+    colors: string[];
     colorScale: ScaleOrdinal<string, string>;
 }): PreparedSeries[];

package/dist/esm/hooks/useSeries/prepareSeries.js

@@ -10,11 +10,16 @@ import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
 export function prepareSeries(args) {
-    const { type, series, seriesOptions, legend, colorScale } = args;
+    const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {
         case 'pie': {
             return series.reduce((acc, singleSeries) => {
-                acc.push(...preparePieSeries({ series: singleSeries, seriesOptions, legend }));
+                acc.push(...preparePieSeries({
+                    series: singleSeries,
+                    seriesOptions,
+                    legend,
+                    colors,
+                }));
                 return acc;
             }, []);
         }
@@ -66,6 +71,7 @@ export function prepareSeries(args) {
                 series: series,
                 legend,
                 colorScale,
+                colors,
             });
         }
         case 'sankey': {
@@ -81,6 +87,7 @@ export function prepareSeries(args) {
                 series: series,
                 seriesOptions,
                 legend,
+                colors,
             });
         }
         default: {

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

@@ -1,7 +1,7 @@
-import { arc, group, line as lineGenerator } from 'd3';
+import { arc, group, line as lineGenerator, max } from 'd3';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../../constants';
-import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
@@ -31,7 +31,8 @@ export function preparePieData(args) {
     const minRadius = typeof propsMinRadius === 'number' ? propsMinRadius : maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     const dataLabelsStyle = merge({}, DEFAULT_DATALABELS_STYLE, (_b = (_a = preparedSeries[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.style);
-    const prepareItem = (stackId, items) => {
+    const prepareItem = ({ stackId, items, labels, }) => {
+        var _a;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, dataLabels } = series;
         const data = {
@@ -53,15 +54,13 @@ export function preparePieData(args) {
                 size: series.states.hover.halo.size,
             },
         };
-        const { maxHeight: labelHeight } = getLabelsSize({
-            labels: ['Some Label'],
-            style: dataLabelsStyle,
-        });
+        const labelMaxHeight = (_a = max(Object.values(labels).map((l) => { var _a, _b; return (_b = (_a = l.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; }))) !== null && _a !== void 0 ? _a : 0;
         const segments = items.map((item) => {
             var _a;
             let maxSegmentRadius = maxRadius;
             if (dataLabels.enabled) {
-                maxSegmentRadius -= dataLabels.distance + dataLabels.connectorPadding + labelHeight;
+                maxSegmentRadius -=
+                    dataLabels.distance + dataLabels.connectorPadding + labelMaxHeight;
             }
             const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
             return {
@@ -78,8 +77,40 @@ export function preparePieData(args) {
         data.segments = pieGenerator(segments);
         return data;
     };
+    const getLabels = ({ series }) => {
+        const { dataLabels } = series[0];
+        if (!dataLabels.enabled) {
+            return {};
+        }
+        const getTextSize = getTextSizeFn({ style: dataLabelsStyle });
+        return series.reduce((acc, d) => {
+            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
+            let labelWidth = 0;
+            let labelHeight = 0;
+            if (dataLabels.html) {
+                const size = getLabelsSize({
+                    labels: [text],
+                    style: dataLabelsStyle,
+                    html: true,
+                });
+                labelWidth = size.maxWidth;
+                labelHeight = size.maxHeight;
+            }
+            else {
+                const size = getTextSize(text);
+                labelWidth = size.width;
+                labelHeight = size.height;
+            }
+            const label = {
+                text,
+                size: { width: labelWidth, height: labelHeight },
+            };
+            acc[d.id] = label;
+            return acc;
+        }, {});
+    };
     const prepareLabels = (prepareLabelsArgs) => {
-        const { data, series, allowOverlow = true } = prepareLabelsArgs;
+        const { data, series, labels: labelsData, allowOverlow = true } = prepareLabelsArgs;
         const { dataLabels } = series[0];
         const labels = [];
         const htmlLabels = [];
@@ -93,12 +124,7 @@ export function preparePieData(args) {
         if (curveFactory) {
             line = line.curve(curveFactory);
         }
-        const { style, connectorPadding, distance } = dataLabels;
-        const { maxHeight: labelHeight } = getLabelsSize({
-            labels: ['Some Label'],
-            style: dataLabelsStyle,
-            html: shouldUseHtml,
-        });
+        const { connectorPadding, distance } = dataLabels;
         const connectorStartPointGenerator = arc()
             .innerRadius((d) => d.data.radius)
             .outerRadius((d) => d.data.radius);
@@ -114,14 +140,11 @@ export function preparePieData(args) {
         let shouldStopLabelPlacement = false;
         // eslint-disable-next-line complexity
         series.forEach((d, index) => {
+            var _a, _b;
             const prevLabel = labels[labels.length - 1];
-            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
-            const labelSize = getLabelsSize({
-                labels: [text],
-                style: dataLabelsStyle,
-                html: shouldUseHtml,
-            });
-            const labelWidth = labelSize.maxWidth;
+            const { text = '', size: labelSize } = labelsData[d.id];
+            const labelWidth = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _a !== void 0 ? _a : 0;
+            const labelHeight = (_b = labelSize === null || labelSize === void 0 ? void 0 : labelSize.height) !== null && _b !== void 0 ? _b : 0;
             const relatedSegment = data.segments[index];
             /**
              * Compute the label coordinates on the label arc for a given angle.
@@ -159,7 +182,7 @@ export function preparePieData(args) {
                 text,
                 x,
                 y,
-                style,
+                style: dataLabelsStyle,
                 size: { width: labelWidth, height: labelHeight },
                 maxWidth: labelWidth,
                 textAnchor: midAngle < Math.PI ? 'start' : 'end',
@@ -251,9 +274,11 @@ export function preparePieData(args) {
     };
     return Array.from(groupedPieSeries).map(([stackId, items]) => {
         var _a;
-        const data = prepareItem(stackId, items);
+        const seriesLabels = getLabels({ series: items });
+        const data = prepareItem({ stackId, items, labels: seriesLabels });
         const preparedLabels = prepareLabels({
             data,
+            labels: seriesLabels,
             series: items,
         });
         let maxLeftRightFreeSpace = Infinity;
@@ -329,6 +354,7 @@ export function preparePieData(args) {
         const { labels, htmlLabels, connectors } = prepareLabels({
             data,
             series: items,
+            labels: seriesLabels,
             allowOverlow: false,
         });
         if (typeof ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.innerRadius) !== 'undefined') {

package/dist/esm/types/index.d.ts

@@ -71,4 +71,10 @@ export interface ChartData<T = MeaningfulAny> {
      * It can be used to visualize related information on multiple charts.
      */
     split?: ChartSplit;
+    /** The color list of palette.
+     * If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
+     *
+     * @default ['#4DA2F1', '#FF3D64', '#8AD554', '#FFC636', '#FFB9DD', '#84D1EE', '#FF91A1', '#54A520', '#DB9100', '#BA74B3', '#1F68A9', '#ED65A9', '#0FA08D', '#FF7E00', '#E8B0A4', '#52A6C5', '#BE2443', '#70C1AF', '#FFB46C', '#DCA3D7']
+     * */
+    colors?: string[];
 }

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

@@ -21,7 +21,7 @@ export function axisBottom(args) {
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
     const labelHeight = getLabelsSize({
-        labels: values,
+        labels: values.map(labelFormat),
         style: labelsStyle,
     }).maxHeight;
     return function (selection) {

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

@@ -165,11 +165,27 @@ export function wrapText(args) {
         return acc;
     }, []);
 }
+const entityMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;',
+};
+function unescapeHtml(str) {
+    return Object.entries(entityMap).reduce((result, [key, value]) => {
+        return result.replace(value, key);
+    }, str);
+}
 export function getTextSizeFn({ style }) {
     const map = {};
     const setSymbolSize = (s) => {
+        const labels = [s === ' ' ? '&nbsp;' : s];
         const size = getLabelsSize({
-            labels: [s],
+            labels,
             style,
         });
         map[s] = { width: size.maxWidth, height: size.maxHeight };
@@ -177,7 +193,7 @@ export function getTextSizeFn({ style }) {
     return (str) => {
         let width = 0;
         let height = 0;
-        [...str].forEach((s) => {
+        [...unescapeHtml(str)].forEach((s) => {
             if (!map[s]) {
                 setSymbolSize(s);
             }
@@ -187,14 +203,20 @@ export function getTextSizeFn({ style }) {
         return { width, height };
     };
 }
+// We ignore an inaccuracy of less than a pixel.
+// To do this, we round the font size down when comparing it, and the size of the allowed space up.
 export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
-    let text = originalText;
-    let textLength = getTextWidth(text);
-    while (textLength > maxWidth && text.length > 1) {
+    let textWidth = Math.floor(getTextWidth(originalText));
+    const textMaxWidth = Math.ceil(maxWidth);
+    if (textWidth <= textMaxWidth) {
+        return originalText;
+    }
+    let text = originalText + '…';
+    while (textWidth > textMaxWidth && text.length > 2) {
         text = text.slice(0, -2) + '…';
-        textLength = getTextWidth(text);
+        textWidth = Math.floor(getTextWidth(text));
     }
-    if (textLength > maxWidth) {
+    if (textWidth > maxWidth) {
         text = '';
     }
     return text;

package/dist/esm/utils/chart-ui/pie-center-text.js

@@ -21,7 +21,8 @@ export function pieCenterText(text, options) {
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const minFontSize = (_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE;
+        fontSize = Math.max(minFontSize, Math.ceil((fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight)));
         const tempWrapper = select(document.body).append('svg');
         const container = tempWrapper.append('g');
         const textSelection = container
@@ -34,7 +35,9 @@ export function pieCenterText(text, options) {
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
             .text(text);
-        handleOverflowingText(tspan.node(), availableSpace);
+        if (fontSize <= minFontSize) {
+            handleOverflowingText(tspan.node(), availableSpace);
+        }
         const result = container.node();
         tempWrapper.remove();
         return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",