@gravity-ui/charts 1.9.0 → 1.10.0

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

@@ -49,14 +49,14 @@ function getBandWidth(series, yAxis, yScale) {
     }
     return bandWidth;
 }
-function setLabel(prepared) {
+async function setLabel(prepared) {
     const dataLabels = prepared.series.dataLabels;
     if (!dataLabels.enabled) {
         return;
     }
     const data = prepared.data;
     const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
-    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+    const { maxHeight: height, maxWidth: width } = await getLabelsSize({
         labels: [content],
         style: dataLabels.style,
         html: dataLabels.html,
@@ -86,7 +86,7 @@ function setLabel(prepared) {
         };
     }
 }
-export const prepareBarYData = (args) => {
+export const prepareBarYData = async (args) => {
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
     const plotWidth = xLinearScale(xLinearScale.domain()[1]);
@@ -166,8 +166,8 @@ export const prepareBarYData = (args) => {
             result.push(...stackItems);
         });
     });
-    result.forEach((d) => {
-        setLabel(d);
-    });
+    await Promise.all(result.map(async (d) => {
+        await setLabel(d);
+    }));
     return result;
 };

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

@@ -22,7 +22,7 @@ type Args = {
     dispatcher: Dispatch<object>;
     series: PreparedSeries[];
     seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
     yScale?: ChartScale[];

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

@@ -21,17 +21,21 @@ import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, } = args;
-    const shapesComponents = React.useMemo(() => {
+    const [shapesElemens, setShapesElements] = React.useState([]);
+    const [shapesElemensData, setShapesElemensData] = React.useState([]);
+    const setShapes = React.useCallback(async () => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
         const shapesData = [];
+        const shapes = [];
+        await Promise.all(
         // eslint-disable-next-line complexity
-        const shapes = Array.from(groupedSeries).reduce((acc, item) => {
+        Array.from(groupedSeries).map(async (item) => {
             const [seriesType, chartSeries] = item;
             switch (seriesType) {
                 case 'bar-x': {
-                    if (xScale && yScale) {
-                        const preparedData = prepareBarXData({
+                    if (xAxis && xScale && yScale) {
+                        const preparedData = await prepareBarXData({
                             series: chartSeries,
                             seriesOptions,
                             xAxis,
@@ -40,14 +44,14 @@ export const useShapes = (args) => {
                             yScale,
                             boundsHeight,
                         });
-                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'bar-y': {
-                    if (xScale && yScale) {
-                        const preparedData = prepareBarYData({
+                    if (xAxis && xScale && yScale) {
+                        const preparedData = await prepareBarYData({
                             series: chartSeries,
                             seriesOptions,
                             xAxis,
@@ -55,14 +59,14 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'waterfall': {
-                    if (xScale && yScale) {
-                        const preparedData = prepareWaterfallData({
+                    if (xAxis && xScale && yScale) {
+                        const preparedData = await prepareWaterfallData({
                             series: chartSeries,
                             seriesOptions,
                             xAxis,
@@ -70,14 +74,14 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'line': {
-                    if (xScale && yScale) {
-                        const preparedData = prepareLineData({
+                    if (xAxis && xScale && yScale) {
+                        const preparedData = await prepareLineData({
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -85,14 +89,14 @@ export const useShapes = (args) => {
                             yScale,
                             split,
                         });
-                        acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'area': {
-                    if (xScale && yScale) {
-                        const preparedData = prepareAreaData({
+                    if (xAxis && xScale && yScale) {
+                        const preparedData = await prepareAreaData({
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -100,13 +104,13 @@ export const useShapes = (args) => {
                             yScale,
                             boundsHeight,
                         });
-                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'scatter': {
-                    if (xScale && yScale) {
+                    if (xAxis && xScale && yScale) {
                         const preparedData = prepareScatterData({
                             series: chartSeries,
                             xAxis,
@@ -114,30 +118,30 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'pie': {
-                    const preparedData = preparePieData({
+                    const preparedData = await preparePieData({
                         series: chartSeries,
                         boundsWidth,
                         boundsHeight,
                     });
-                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(...preparedData);
                     break;
                 }
                 case 'treemap': {
-                    const preparedData = prepareTreemapData({
+                    const preparedData = await prepareTreemapData({
                         // We should have exactly one series with "treemap" type
                         // Otherwise data validation should emit an error
                         series: chartSeries[0],
                         width: boundsWidth,
                         height: boundsHeight,
                     });
-                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(preparedData);
                     break;
                 }
@@ -147,17 +151,17 @@ export const useShapes = (args) => {
                         width: boundsWidth,
                         height: boundsHeight,
                     });
-                    acc.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(preparedData);
                     break;
                 }
                 case 'radar': {
-                    const preparedData = prepareRadarData({
+                    const preparedData = await prepareRadarData({
                         series: chartSeries,
                         boundsWidth,
                         boundsHeight,
                     });
-                    acc.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(...preparedData);
                     break;
                 }
@@ -167,19 +171,24 @@ export const useShapes = (args) => {
                     });
                 }
             }
-            return acc;
-        }, []);
-        return { shapes, shapesData };
+        }));
+        setShapesElements(shapes);
+        setShapesElemensData(shapesData);
     }, [
-        boundsWidth,
         boundsHeight,
+        boundsWidth,
         dispatcher,
+        htmlLayout,
         series,
         seriesOptions,
+        split,
         xAxis,
         xScale,
         yAxis,
         yScale,
     ]);
-    return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
+    React.useEffect(() => {
+        setShapes();
+    }, [setShapes]);
+    return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -10,4 +10,4 @@ export declare const prepareLineData: (args: {
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
     split: PreparedSplit;
-}) => PreparedLineData[];
+}) => Promise<PreparedLineData[]>;

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

@@ -1,10 +1,10 @@
 import { 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 });
+    const size = await getLabelsSize({ labels: [text], style });
     const labelData = {
         text,
         x: point.x,
@@ -27,9 +27,9 @@ function getLabelData(point, series, xMax) {
     }
     return labelData;
 }
-function getHtmlLabel(point, series, xMax) {
+async function getHtmlLabel(point, series, xMax) {
     const content = String(point.data.label || point.data.y);
-    const size = getLabelsSize({ labels: [content], html: true });
+    const size = await getLabelsSize({ labels: [content], html: true });
     return {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
@@ -38,12 +38,14 @@ function getHtmlLabel(point, series, xMax) {
         style: series.dataLabels.style,
     };
 }
-export const prepareLineData = (args) => {
+export const prepareLineData = async (args) => {
+    var _a;
     const { series, xAxis, yAxis, xScale, yScale, split } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
-    return series.reduce((acc, s) => {
-        var _a;
+    const acc = [];
+    for (let i = 0; i < series.length; i++) {
+        const s = series[i];
         const yAxisIndex = s.yAxis;
         const seriesYAxis = yAxis[yAxisIndex];
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
@@ -59,10 +61,11 @@ export const prepareLineData = (args) => {
         let labels = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
-                htmlElements.push(...points.map((p) => getHtmlLabel(p, s, xMax)));
+                const list = await Promise.all(points.map((p) => getHtmlLabel(p, s, xMax)));
+                htmlElements.push(...list);
             }
             else {
-                labels = points.map((p) => getLabelData(p, s, xMax));
+                labels = await Promise.all(points.map((p) => getLabelData(p, s, xMax)));
             }
         }
         let markers = [];
@@ -89,6 +92,6 @@ export const prepareLineData = (args) => {
             htmlElements,
         };
         acc.push(result);
-        return acc;
-    }, []);
+    }
+    return acc;
 };

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

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

package/dist/cjs/hooks/useShapes/marker.js

@@ -22,7 +22,7 @@ export function renderMarker(selection) {
         const haloSize = series.marker.states.hover.halo.size;
         return getMarkerSymbol(type, radius + haloSize);
     })
-        .attr('fill', (d) => d.point.series.color)
+        .attr('fill', (d) => { var _a; return (_a = d.point.color) !== null && _a !== void 0 ? _a : d.point.series.color; })
         .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
         .attr('z-index', -1)
         .attr('visibility', getMarkerHaloVisibility);
@@ -30,7 +30,7 @@ export function renderMarker(selection) {
         .append('path')
         .attr('class', symbolClassName)
         .call(setMarker, 'normal')
-        .attr('fill', (d) => d.point.series.color);
+        .attr('fill', (d) => { var _a; return (_a = d.point.color) !== null && _a !== void 0 ? _a : d.point.series.color; });
     return markerSelection;
 }
 export function getMarkerVisibility(d) {

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

@@ -98,13 +98,13 @@ export function PieSeriesShapes(args) {
             .attr('stroke-linecap', 'round')
             .style('fill', 'none');
         // Render custom shapes if defined
-        shapesSelection.each(function (d, index, nodes) {
+        shapesSelection.each(async function (d, index, nodes) {
             var _a, _b;
-            const customShape = (_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            const customShape = await ((_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
                 series: {
                     innerRadius: d.innerRadius,
                 },
-            });
+            }));
             if (customShape) {
                 nodes[index].append(customShape);
             }

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

@@ -5,5 +5,5 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
 };
-export declare function preparePieData(args: Args): PreparedPieData[];
+export declare function preparePieData(args: Args): Promise<PreparedPieData[]>;
 export {};

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

@@ -77,18 +77,20 @@ export function preparePieData(args) {
         data.segments = pieGenerator(segments);
         return data;
     };
-    const getLabels = ({ series }) => {
+    const getLabels = async ({ series }) => {
         const { dataLabels } = series[0];
         if (!dataLabels.enabled) {
             return {};
         }
         const getTextSize = getTextSizeFn({ style: dataLabelsStyle });
-        return series.reduce((acc, d) => {
+        const acc = {};
+        for (let i = 0; i < series.length; i++) {
+            const d = series[i];
             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({
+                const size = await getLabelsSize({
                     labels: [text],
                     style: dataLabelsStyle,
                     html: true,
@@ -97,7 +99,7 @@ export function preparePieData(args) {
                 labelHeight = size.maxHeight;
             }
             else {
-                const size = getTextSize(text);
+                const size = await getTextSize(text);
                 labelWidth = size.width;
                 labelHeight = size.height;
             }
@@ -106,8 +108,8 @@ export function preparePieData(args) {
                 size: { width: labelWidth, height: labelHeight },
             };
             acc[d.id] = label;
-            return acc;
-        }, {});
+        }
+        return acc;
     };
     const prepareLabels = (prepareLabelsArgs) => {
         const { data, series, labels: labelsData, allowOverlow = true } = prepareLabelsArgs;
@@ -272,9 +274,9 @@ export function preparePieData(args) {
             connectors,
         };
     };
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+    return Promise.all(Array.from(groupedPieSeries).map(async ([stackId, items]) => {
         var _a;
-        const seriesLabels = getLabels({ series: items });
+        const seriesLabels = await getLabels({ series: items });
         const data = prepareItem({ stackId, items, labels: seriesLabels });
         const preparedLabels = prepareLabels({
             data,
@@ -293,7 +295,8 @@ export function preparePieData(args) {
                 freeSpace = boundsWidth / 2 - (left + label.size.width);
             }
             maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
-            labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
+            labelsOverflow =
+                freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
         });
         preparedLabels.htmlLabels.forEach((label) => {
             let freeSpace = 0;
@@ -304,7 +307,8 @@ export function preparePieData(args) {
                 freeSpace = boundsWidth - label.x - label.size.width;
             }
             maxLeftRightFreeSpace = Math.max(0, Math.min(maxLeftRightFreeSpace, freeSpace));
-            labelsOverflow = freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
+            labelsOverflow =
+                freeSpace < 0 ? Math.max(labelsOverflow, -freeSpace) : labelsOverflow;
         });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
         if (labelsOverflow) {
@@ -369,5 +373,5 @@ export function preparePieData(args) {
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;
         return data;
-    });
+    }));
 }

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

@@ -5,5 +5,5 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
 };
-export declare function prepareRadarData(args: Args): PreparedRadarData[];
+export declare function prepareRadarData(args: Args): Promise<PreparedRadarData[]>;
 export {};

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

@@ -1,7 +1,7 @@
 import { curveLinearClosed, line, range, scaleLinear } from 'd3';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-export function prepareRadarData(args) {
+export async function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const center = [boundsWidth / 2, boundsHeight / 2];
@@ -62,7 +62,7 @@ export function prepareRadarData(args) {
         data.grid.push(gridLines);
     });
     const radarAreaLine = line().curve(curveLinearClosed);
-    preparedSeries.forEach((series) => {
+    await Promise.all(preparedSeries.map(async (series) => {
         var _a;
         const { dataLabels } = series;
         const markers = [];
@@ -112,9 +112,9 @@ export function prepareRadarData(args) {
         if (dataLabels.enabled) {
             const { style } = dataLabels;
             const shouldUseHtml = dataLabels.html;
-            data.labels = categories.map((category, index) => {
+            data.labels = await Promise.all(categories.map(async (category, index) => {
                 const text = getFormattedValue(Object.assign({ value: category.key }, dataLabels));
-                const labelSize = getLabelsSize({ labels: [text], style });
+                const labelSize = await getLabelsSize({ labels: [text], style });
                 const angle = index * angleStep - Math.PI / 2;
                 // Position label slightly outside the point
                 const labelRadius = data.radius + 10;
@@ -138,7 +138,7 @@ export function prepareRadarData(args) {
                     textAnchor: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'end' : 'start',
                     series: { id: series.id },
                 };
-            });
+            }));
             // Create HTML labels if needed
             if (dataLabels.html) {
                 data.htmlLabels = data.labels.map((label) => ({
@@ -150,8 +150,7 @@ export function prepareRadarData(args) {
                 }));
             }
         }
-        return data;
-    });
+    }));
     result.push(data);
     return result;
 }

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

@@ -20,6 +20,7 @@ export type PointData = {
     y: number;
     data: RadarSeriesData;
     series: PreparedRadarSeries;
+    color?: string;
 };
 export type RadarMarkerData = {
     point: PointData;

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

@@ -24,7 +24,6 @@ export function ScatterSeriesShape(props) {
             .data(preparedData, shapeKey)
             .join('g')
             .call(renderMarker)
-            .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
             .attr('opacity', (d) => d.point.opacity)
             .attr('cursor', (d) => d.point.series.cursor);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;

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

@@ -13,6 +13,7 @@ export const prepareScatterData = (args) => {
             ? s.data
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
+            var _a;
             acc.push({
                 point: {
                     data: d,
@@ -20,6 +21,7 @@ export const prepareScatterData = (args) => {
                     x: getXValue({ point: d, xAxis, xScale }),
                     y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
                     opacity: get(d, 'opacity', null),
+                    color: (_a = d.color) !== null && _a !== void 0 ? _a : s.color,
                 },
                 hovered: false,
                 active: true,

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

@@ -6,6 +6,7 @@ type PointData = {
     opacity: number | null;
     data: ScatterSeriesData;
     series: PreparedScatterSeries;
+    color: string;
 };
 export type MarkerData = {
     point: PointData;

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

@@ -4,4 +4,4 @@ export declare function prepareTreemapData(args: {
     series: PreparedTreemapSeries;
     width: number;
     height: number;
-}): PreparedTreemapData;
+}): Promise<PreparedTreemapData>;