@gravity-ui/charts 1.9.0 → 1.10.0

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

@@ -2,12 +2,12 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 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;
+const getAxisLabelMaxWidth = async (args) => {
+    const { axis, seriesData } = args;
     if (!axis.labels.enabled) {
         return 0;
     }
-    const scale = createYScale(axis, series, 1);
+    const scale = createYScale(axis, seriesData, 1);
     const ticks = getScaleTicks(scale);
     // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
     const step = getClosestPointsRange(axis, ticks);
@@ -16,17 +16,18 @@ const getAxisLabelMaxWidth = (args) => {
         value: tick,
         step,
     }));
-    return getLabelsSize({
+    const size = await getLabelsSize({
         labels,
         style: axis.labels.style,
         rotation: axis.labels.rotation,
-    }).maxWidth;
+    });
+    return size.maxWidth;
 };
-function getAxisMin(axis, series) {
+function getAxisMin(axis, seriesData) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
     if (typeof min === 'undefined' &&
-        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
+        (seriesData === null || seriesData === void 0 ? void 0 : seriesData.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
+        return seriesData.reduce((minValue, s) => {
             switch (s.type) {
                 case 'waterfall': {
                     const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
@@ -42,14 +43,14 @@ function getAxisMin(axis, series) {
     }
     return min;
 }
-export const getPreparedYAxis = ({ series, yAxis, height, }) => {
+export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
-    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
     if (!hasAxisRelatedSeries) {
-        return [];
+        return Promise.resolve([]);
     }
-    return axisItems.map((axisItem) => {
+    return Promise.all(axisItems.map(async (axisItem) => {
         var _a;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
@@ -65,12 +66,12 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
         const titleText = get(axisItem, 'title.text', '');
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
-        const estimatedTitleRows = wrapText({
+        const estimatedTitleRows = (await wrapText({
             text: titleText,
             style: titleStyle,
             width: height,
-        }).slice(0, titleMaxRowsCount);
-        const titleSize = getLabelsSize({ labels: [titleText], style: titleStyle });
+        })).slice(0, titleMaxRowsCount);
+        const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const preparedAxis = {
             type: axisType,
@@ -103,7 +104,7 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: getAxisMin(axisItem, series),
+            min: getAxisMin(axisItem, seriesData),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
@@ -141,8 +142,11 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
             visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {
-            preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });
+            preparedAxis.labels.width = await getAxisLabelMaxWidth({
+                axis: preparedAxis,
+                seriesData,
+            });
         }
         return preparedAxis;
-    });
+    }));
 };

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

@@ -1,7 +1,7 @@
 import type { Dispatch } from 'd3';
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 type Props = {
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxes: PreparedAxis[];
     width: number;
     height: number;

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

@@ -5,7 +5,7 @@ import { useCrosshairHover } from './useCrosshairHover';
 export const useCrosshair = (props) => {
     var _a, _b;
     const { xScale, plotElement, yScale, dispatcher, xAxis, yAxes, split, width, height: totalHeight, boundsOffsetTop, boundsOffsetLeft, } = props;
-    const crosshairEnabled = xAxis.crosshair.enabled || yAxes.some((axis) => axis.crosshair.enabled);
+    const crosshairEnabled = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.crosshair.enabled) || yAxes.some((axis) => axis.crosshair.enabled);
     const { hovered, pointerPosition } = useCrosshairHover({ dispatcher, enabled: crosshairEnabled });
     const pointerXPos = (_a = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) !== null && _a !== void 0 ? _a : 0;
     const pointerYPos = (_b = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) !== null && _b !== void 0 ? _b : 0;
@@ -17,7 +17,7 @@ export const useCrosshair = (props) => {
         const svgElement = select(plotElement);
         svgElement.selectAll(`[${plotCrosshairDataAttr}]`).remove();
         const lineGenerator = line();
-        if (xAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
+        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.crosshair.enabled) && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
             const xAxisScale = xScale;
             const crosshairDataAttr = 'data-crosshair-x-line';
             const crosshairSelection = svgElement

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

@@ -1,17 +1,19 @@
 import type { ChartData } from '../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
-import type { OnLegendItemClick, PreparedSeries } from './types';
+import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from './types';
 type Args = {
     chartWidth: number;
     chartHeight: number;
     chartMargin: PreparedChart['margin'];
+    colors: string[];
     legend: ChartData['legend'];
-    series: ChartData['series'];
+    originalSeriesData: ChartData['series']['data'];
+    seriesData: ChartData['series']['data'];
+    seriesOptions: ChartData['series']['options'];
     preparedYAxis: PreparedAxis[];
-    colors: string[];
 };
 export declare const useSeries: (args: Args) => {
-    legendItems: import("./types").LegendItem[][];
+    legendItems: never[] | import("./types").LegendItem[][];
     legendConfig: {
         offset: {
             left: number;
@@ -23,8 +25,8 @@ export declare const useSeries: (args: Args) => {
                 end: number;
             }[];
         } | undefined;
-    };
-    preparedLegend: import("./types").PreparedLegend;
+    } | undefined;
+    preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     handleLegendItemClick: OnLegendItemClick;

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

@@ -1,33 +1,48 @@
 import React from 'react';
 import { group, scaleOrdinal } from 'd3';
 import { getSeriesNames } from '../../utils';
+import { usePrevious } from '../usePrevious';
 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 }, colors, } = args;
-    const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);
-    const preparedSeries = React.useMemo(() => {
-        const seriesNames = getSeriesNames(series);
-        const colorScale = scaleOrdinal(seriesNames, colors);
-        const groupedSeries = group(series, (item) => item.type);
-        return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
-            acc.push(...prepareSeries({
-                type: seriesType,
-                series: seriesList,
-                seriesOptions,
-                legend: preparedLegend,
-                colorScale,
-                colors,
-            }));
-            return acc;
-        }, []);
-    }, [series, seriesOptions, preparedLegend]);
+    const { chartWidth, chartHeight, chartMargin, legend, originalSeriesData, preparedYAxis, seriesData, seriesOptions, colors, } = args;
+    const [preparedLegend, setPreparedLegend] = React.useState(null);
+    React.useEffect(() => {
+        getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
+    }, [legend, seriesData]);
+    const [preparedSeries, setPreparedSeries] = React.useState([]);
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
+    React.useEffect(() => {
+        (async () => {
+            const seriesNames = getSeriesNames(seriesData);
+            const colorScale = scaleOrdinal(seriesNames, colors);
+            const groupedSeries = group(seriesData, (item) => item.type);
+            const acc = [];
+            if (!preparedLegend) {
+                return;
+            }
+            const list = Array.from(groupedSeries);
+            for (let i = 0; i < list.length; i++) {
+                const [seriesType, seriesList] = list[i];
+                acc.push(...(await prepareSeries({
+                    type: seriesType,
+                    series: seriesList,
+                    seriesOptions,
+                    legend: preparedLegend,
+                    colorScale,
+                    colors,
+                })));
+            }
+            setPreparedSeries(acc);
+            setActiveLegendItems(getActiveLegendItems(acc));
+        })();
+    }, [seriesData, seriesOptions, preparedLegend, colors]);
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(seriesOptions);
     }, [seriesOptions]);
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
+    const prevOriginalSeriesData = usePrevious(originalSeriesData);
     const chartSeries = React.useMemo(() => {
         return preparedSeries.map((singleSeries) => {
             if (singleSeries.legend.enabled) {
@@ -37,6 +52,9 @@ export const useSeries = (args) => {
         });
     }, [preparedSeries, activeLegendItems]);
     const { legendConfig, legendItems } = React.useMemo(() => {
+        if (!preparedLegend) {
+            return { legendConfig: undefined, legendItems: [] };
+        }
         return getLegendComponents({
             chartHeight,
             chartMargin,
@@ -67,10 +85,11 @@ export const useSeries = (args) => {
         }
         setActiveLegendItems(nextActiveLegendItems);
     }, [preparedSeries, activeLegendItems]);
-    // FIXME: remove effect. It initiates extra rerender
     React.useEffect(() => {
-        setActiveLegendItems(getActiveLegendItems(preparedSeries));
-    }, [preparedSeries]);
+        if (prevOriginalSeriesData !== originalSeriesData) {
+            setActiveLegendItems(getActiveLegendItems(preparedSeries));
+        }
+    }, [originalSeriesData, prevOriginalSeriesData, preparedSeries]);
     return {
         legendItems,
         legendConfig,

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -1,11 +1,36 @@
 import type { ScaleOrdinal } from 'd3';
 import type { BarYSeries, ChartSeriesOptions } from '../../types';
-import type { PreparedLegend, PreparedSeries } from './types';
+import type { PreparedLegend } from './types';
 type PrepareBarYSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarYSeries[];
     legend: PreparedLegend;
     seriesOptions?: ChartSeriesOptions;
 };
-export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[];
+export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<({
+    type: BarYSeries["type"];
+    data: import("../../types").BarYSeriesData[];
+    stackId: string;
+    stacking: BarYSeries["stacking"];
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: import("../../types").BaseTextStyle;
+        maxHeight: number;
+        maxWidth: number;
+        html: boolean;
+        format?: import("../../types").ValueFormat;
+    };
+    borderRadius: number;
+} & {
+    color: string;
+    name: string;
+    id: string;
+    visible: boolean;
+    legend: {
+        enabled: boolean;
+        symbol: import("./types").PreparedLegendSymbol;
+    };
+    cursor: string | null;
+})[]>;
 export {};

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -3,7 +3,7 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getLabelsSize, getUniqId } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
-function prepareDataLabels(series) {
+async function prepareDataLabels(series) {
     var _a, _b;
     const enabled = get(series, 'dataLabels.enabled', false);
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
@@ -11,7 +11,7 @@ function prepareDataLabels(series) {
     const labels = enabled
         ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
         : [];
-    const { maxHeight = 0, maxWidth = 0 } = getLabelsSize({
+    const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
         labels,
         style,
         html,
@@ -29,7 +29,7 @@ function prepareDataLabels(series) {
 }
 export function prepareBarYSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
-    return seriesList.map((series) => {
+    return Promise.all(seriesList.map(async (series) => {
         var _a, _b, _c;
         const name = series.name || '';
         const color = series.color || colorScale(name);
@@ -46,9 +46,9 @@ export function prepareBarYSeries(args) {
             data: series.data.filter((d) => d.x !== null),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
-            dataLabels: prepareDataLabels(series),
+            dataLabels: await prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
             borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
         };
-    }, []);
+    }));
 }

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

@@ -4,7 +4,7 @@ import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];
     series: ChartData['series']['data'];
-}): PreparedLegend;
+}): Promise<PreparedLegend>;
 export declare function getLegendComponents(args: {
     chartWidth: number;
     chartHeight: number;

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

@@ -6,7 +6,7 @@ import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getHorisontalSvgTextHeight, getLabelsSize, } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
 import { getYAxisWidth } from '../useChartDimensions/utils';
-export function getPreparedLegend(args) {
+export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
     const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
@@ -19,9 +19,8 @@ export function getPreparedLegend(args) {
     const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
     const titleStyle = Object.assign({ fontSize: '12px', fontWeight: 'bold' }, get(legend, 'title.style'));
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
-    const titleHeight = isTitleEnabled
-        ? getLabelsSize({ labels: [titleText], style: titleStyle }).maxHeight
-        : 0;
+    const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
+    const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
     const ticks = {
         labelsMargin: 4,
         labelsLineHeight: 12,
@@ -177,7 +176,9 @@ export function getLegendComponents(args) {
     let pagination;
     if (preparedLegend.type === 'discrete') {
         const lineHeights = items.reduce((acc, item) => {
-            acc.push(Math.max(...item.map((item) => item.height)));
+            if (item.length) {
+                acc.push(Math.max(...item.map(({ height }) => height)));
+            }
             return acc;
         }, []);
         let legendHeight = lineHeights.reduce((acc, height) => acc + height, 0);

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

@@ -8,4 +8,4 @@ export declare function prepareSeries(args: {
     legend: PreparedLegend;
     colors: string[];
     colorScale: ScaleOrdinal<string, string>;
-}): PreparedSeries[];
+}): Promise<PreparedSeries[]>;

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

@@ -9,7 +9,7 @@ import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
-export function prepareSeries(args) {
+export async function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {
         case 'pie': {
@@ -32,7 +32,7 @@ export function prepareSeries(args) {
             });
         }
         case 'bar-y': {
-            return prepareBarYSeries({
+            return await prepareBarYSeries({
                 series: series,
                 legend,
                 colorScale,

package/dist/cjs/hooks/useShapes/area/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { area as areaGenerator, color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
-import { block, filterOverlappingLabels } from '../../..//utils';
+import { block, filterOverlappingLabels } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';

package/dist/cjs/hooks/useShapes/area/prepare-data.d.ts

@@ -9,4 +9,4 @@ export declare const prepareAreaData: (args: {
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
     boundsHeight: number;
-}) => PreparedAreaData[];
+}) => Promise<PreparedAreaData[]>;

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

@@ -2,10 +2,10 @@ import { group, sort } from 'd3';
 import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
-function getLabelData(point, series, xMax) {
+async function getLabelData(point, series, xMax) {
     const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
     const style = series.dataLabels.style;
-    const size = getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
+    const size = await getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
     const labelData = {
         text,
         x: point.x,
@@ -52,21 +52,30 @@ function getXValues(series, xAxis, xScale) {
     }
     return sort(Array.from(xValues), ([_x, xValue]) => xValue);
 }
-export const prepareAreaData = (args) => {
+export const prepareAreaData = async (args) => {
     const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
-    return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
+    const result = [];
+    const list = Array.from(group(series, (s) => s.stackId));
+    for (let i = 0; i < list.length; i++) {
+        const [_stackId, seriesStack] = list[i];
         const xValues = getXValues(seriesStack, xAxis, xScale);
         const accumulatedYValues = new Map();
         xValues.forEach(([key]) => {
             accumulatedYValues.set(key, 0);
         });
-        const seriesStackData = seriesStack.reduce((acc, s) => {
+        const seriesStackData = [];
+        for (let j = 0; j < seriesStack.length; j++) {
+            const s = seriesStack[j];
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
-            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
+            const yMin = getYValue({
+                point: { y: 0 },
+                yAxis: seriesYAxis,
+                yScale: seriesYScale,
+            });
             const seriesData = s.data.reduce((m, d) => {
                 const key = String(xAxis.type === 'category'
                     ? getDataCategoryValue({
@@ -100,20 +109,27 @@ export const prepareAreaData = (args) => {
             let labels = [];
             const htmlElements = [];
             if (s.dataLabels.enabled) {
-                const labelItems = points.map((p) => getLabelData(p, s, xMax));
+                const labelItems = await Promise.all(points.map((p) => getLabelData(p, s, xMax)));
                 if (s.dataLabels.html) {
-                    const htmlLabels = labelItems.map((l) => {
+                    const htmlLabels = await Promise.all(labelItems.map(async (l) => {
                         var _a;
                         const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
-                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
+                        const labelSize = await getLabelsSize({
+                            labels: [l.text],
+                            style,
+                            html: true,
+                        });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
-                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
+                            size: {
+                                width: labelSize.maxWidth,
+                                height: labelSize.maxHeight,
+                            },
                             style,
                         };
-                    });
+                    }));
                     htmlElements.push(...htmlLabels);
                 }
                 else {
@@ -128,7 +144,7 @@ export const prepareAreaData = (args) => {
                     hovered: false,
                 }));
             }
-            acc.push({
+            seriesStackData.push({
                 points,
                 markers,
                 labels,
@@ -141,8 +157,7 @@ export const prepareAreaData = (args) => {
                 id: s.id,
                 htmlElements,
             });
-            return acc;
-        }, []);
+        }
         if (series.some((s) => s.stacking === 'percent')) {
             xValues.forEach(([x], index) => {
                 const stackHeight = accumulatedYValues.get(x) || 0;
@@ -159,6 +174,7 @@ export const prepareAreaData = (args) => {
                 });
             });
         }
-        return result.concat(seriesStackData);
-    }, []);
+        result.push(...seriesStackData);
+    }
+    return result;
 };

package/dist/cjs/hooks/useShapes/area/types.d.ts

@@ -6,6 +6,7 @@ export type PointData = {
     y: number;
     data: AreaSeriesData;
     series: PreparedAreaSeries;
+    color?: string;
 };
 export type MarkerData = {
     point: PointData;

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.d.ts

@@ -10,4 +10,4 @@ export declare const prepareBarXData: (args: {
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
     boundsHeight: number;
-}) => PreparedBarXData[];
+}) => Promise<PreparedBarXData[]>;

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

@@ -3,14 +3,14 @@ import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
-function getLabelData(d) {
+async function getLabelData(d) {
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
     const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const html = d.series.dataLabels.html;
-    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+    const { maxHeight: height, maxWidth: width } = await getLabelsSize({
         labels: [text],
         style,
         html,
@@ -30,7 +30,7 @@ function getLabelData(d) {
         series: d.series,
     };
 }
-export const prepareBarXData = (args) => {
+export const prepareBarXData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
@@ -95,28 +95,32 @@ export const prepareBarXData = (args) => {
     const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
-    Object.entries(data).forEach(([xValue, val]) => {
+    await Promise.all(Object.entries(data).map(async ([xValue, val]) => {
         const stacks = Object.values(val);
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
-        stacks.forEach((yValues, groupItemIndex) => {
+        await Promise.all(stacks.map(async (yValues, groupItemIndex) => {
             let stackHeight = 0;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
-            sortedData.forEach((yValue, yValueIndex) => {
+            await Promise.all(sortedData.map(async (yValue, yValueIndex) => {
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
-                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
+                    xCenter =
+                        (xBandScale(xValue) || 0) +
+                            xBandScale.bandwidth() / 2;
                 }
                 else {
                     const xLinearScale = xScale;
                     xCenter = xLinearScale(Number(xValue));
                 }
-                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
+                const x = xCenter -
+                    currentGroupWidth / 2 +
+                    (rectWidth + rectGap) * groupItemIndex;
                 const yDataValue = yValue.data.y;
                 const y = seriesYScale(yDataValue);
                 const base = seriesYScale(0);
@@ -132,7 +136,7 @@ export const prepareBarXData = (args) => {
                     htmlElements: [],
                     isLastStackItem: yValueIndex === sortedData.length - 1,
                 };
-                const label = getLabelData(barData);
+                const label = await getLabelData(barData);
                 if (yValue.series.dataLabels.html && label) {
                     barData.htmlElements.push({
                         x: label.x,
@@ -143,11 +147,11 @@ export const prepareBarXData = (args) => {
                     });
                 }
                 else {
-                    barData.label = getLabelData(barData);
+                    barData.label = await getLabelData(barData);
                 }
                 stackItems.push(barData);
                 stackHeight += height + 1;
-            });
+            }));
             if (series.some((s) => s.stacking === 'percent')) {
                 let acc = 0;
                 const ratio = plotHeight / (stackHeight - stackItems.length);
@@ -158,7 +162,7 @@ export const prepareBarXData = (args) => {
                 });
             }
             result.push(...stackItems);
-        });
-    });
+        }));
+    }));
     return result;
 };

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.d.ts

@@ -9,4 +9,4 @@ export declare const prepareBarYData: (args: {
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
-}) => PreparedBarYData[];
+}) => Promise<PreparedBarYData[]>;