@gravity-ui/chartkit 5.15.0 → 5.16.0

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.js

@@ -3,11 +3,12 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
 const b = block('d3-bar-x');
 export const BarXSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -89,5 +90,7 @@ export const BarXSeriesShapes = (args) => {
             dispatcher.on('hover-shape.bar-x', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/prepare-data.js

@@ -8,15 +8,21 @@ function getLabelData(d) {
     }
     const text = String(d.data.label || d.data.y);
     const style = d.series.dataLabels.style;
-    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    const html = d.series.dataLabels.html;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+        labels: [text],
+        style,
+        html,
+    });
     let y = Math.max(height, d.y - d.series.dataLabels.padding);
     if (d.series.dataLabels.inside) {
         y = d.y + d.height / 2;
     }
+    const x = d.x + d.width / 2;
     return {
         text,
-        x: d.x + d.width / 2,
-        y,
+        x: html ? x - width / 2 : x,
+        y: html ? y - height : y,
         style,
         size: { width, height },
         textAnchor: 'middle',
@@ -122,8 +128,19 @@ export const prepareBarXData = (args) => {
                     opacity: get(yValue.data, 'opacity', null),
                     data: yValue.data,
                     series: yValue.series,
+                    htmlElements: [],
                 };
-                barData.label = getLabelData(barData);
+                const label = getLabelData(barData);
+                if (yValue.series.dataLabels.html && label) {
+                    barData.htmlElements.push({
+                        x: label.x,
+                        y: label.y,
+                        content: label.text,
+                    });
+                }
+                else {
+                    barData.label = getLabelData(barData);
+                }
                 stackItems.push(barData);
                 stackHeight += height + 1;
             });

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/types.d.ts

@@ -1,5 +1,5 @@
 import { TooltipDataChunkBarX } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedBarXSeries } from '../../useSeries/types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     x: number;
@@ -9,4 +9,5 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     opacity: number | null;
     series: PreparedBarXSeries;
     label?: LabelData;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.d.ts

@@ -7,5 +7,6 @@ type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedBarYData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const BarYSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
+import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarYData } from './prepare-data';
-const DEFAULT_LABEL_PADDING = 7;
 const b = block('d3-bar-y');
 export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -26,31 +26,24 @@ export const BarYSeriesShapes = (args) => {
             .attr('fill', (d) => d.color)
             .attr('opacity', (d) => d.data.opacity || null)
             .attr('cursor', (d) => d.series.cursor);
-        const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
+        const dataLabels = preparedData.reduce((acc, d) => {
+            if (d.label) {
+                acc.push(d.label);
+            }
+            return acc;
+        }, []);
         const labelSelection = svgElement
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => String(d.data.label || d.data.x))
+            .text((d) => d.text)
             .attr('class', b('label'))
-            .attr('x', (d) => {
-            if (d.series.dataLabels.inside) {
-                return d.x + d.width / 2;
-            }
-            return d.x + d.width + DEFAULT_LABEL_PADDING;
-        })
-            .attr('y', (d) => {
-            return d.y + d.height / 2 + d.series.dataLabels.maxHeight / 2;
-        })
-            .attr('text-anchor', (d) => {
-            if (d.series.dataLabels.inside) {
-                return 'middle';
-            }
-            return 'right';
-        })
-            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
-            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
-            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
         const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
         const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
         dispatcher.on('hover-shape.bar-y', (data) => {
@@ -85,5 +78,7 @@ export const BarYSeriesShapes = (args) => {
             dispatcher.on('hover-shape.bar-y', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.js

@@ -1,7 +1,8 @@
 import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+const DEFAULT_LABEL_PADDING = 7;
 function groupByYValue(series, yAxis) {
     const data = {};
     series.forEach((s) => {
@@ -47,6 +48,41 @@ function getBandWidth(series, yAxis, yScale) {
     }
     return bandWidth;
 }
+function setLabel(prepared) {
+    const dataLabels = prepared.series.dataLabels;
+    if (!dataLabels.enabled) {
+        return;
+    }
+    const data = prepared.data;
+    const content = String(data.label || data.x);
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+        labels: [content],
+        style: dataLabels.style,
+        html: dataLabels.html,
+    });
+    const x = dataLabels.inside
+        ? prepared.x + prepared.width / 2
+        : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+    const y = prepared.y + prepared.height / 2;
+    if (dataLabels.html) {
+        prepared.htmlElements.push({
+            x,
+            y: y - height / 2,
+            content,
+        });
+    }
+    else {
+        prepared.label = {
+            x,
+            y: y + height / 2,
+            text: content,
+            textAnchor: dataLabels.inside ? 'middle' : 'right',
+            style: dataLabels.style,
+            series: prepared.series,
+            size: { width, height },
+        };
+    }
+}
 export const prepareBarYData = (args) => {
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
@@ -100,7 +136,7 @@ export const prepareBarYData = (args) => {
                 const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
                 const xValue = Number(data.x);
                 const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
-                stackItems.push({
+                const item = {
                     x: xValue > 0 ? stackSum : stackSum - width,
                     y,
                     width,
@@ -109,7 +145,9 @@ export const prepareBarYData = (args) => {
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,
-                });
+                    htmlElements: [],
+                };
+                stackItems.push(item);
                 stackSum += width + 1;
             });
             if (series.some((s) => s.stacking === 'percent')) {
@@ -124,5 +162,8 @@ export const prepareBarYData = (args) => {
             result.push(...stackItems);
         });
     });
+    result.forEach((d) => {
+        setLabel(d);
+    });
     return result;
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/types.d.ts

@@ -1,4 +1,5 @@
 import { TooltipDataChunkBarX } from '../../../../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedBarYSeries } from '../../useSeries/types';
 export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     x: number;
@@ -8,4 +9,6 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     color: string;
     opacity: number | null;
     series: PreparedBarYSeries;
+    label?: LabelData;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -34,7 +34,7 @@ export const useShapes = (args) => {
                             yScale,
                             boundsHeight,
                         });
-                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -49,7 +49,7 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        acc.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -64,7 +64,7 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        acc.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -79,7 +79,7 @@ export const useShapes = (args) => {
                             yScale,
                             split,
                         });
-                        acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -94,7 +94,7 @@ export const useShapes = (args) => {
                             yScale,
                             boundsHeight,
                         });
-                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -108,7 +108,7 @@ export const useShapes = (args) => {
                             yAxis,
                             yScale,
                         });
-                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                     }
                     break;
@@ -131,7 +131,7 @@ export const useShapes = (args) => {
                         width: boundsWidth,
                         height: boundsHeight,
                     });
-                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(preparedData);
                 }
             }

package/build/plugins/d3/renderer/hooks/useShapes/line/index.d.ts

@@ -6,6 +6,7 @@ type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedLineData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const LineSeriesShapes: (args: Args) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -3,11 +3,12 @@ import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { getLineDashArray, setActiveState } from '../utils';
 const b = block('d3-line');
 export const LineSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -124,5 +125,7 @@ export const LineSeriesShapes = (args) => {
             dispatcher.on('hover-shape.line', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.js

@@ -26,6 +26,15 @@ function getLabelData(point, series, xMax) {
     }
     return labelData;
 }
+function getHtmlLabel(point, series, xMax) {
+    const content = String(point.data.label || point.data.y);
+    const size = 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),
+        content,
+    };
+}
 export const prepareLineData = (args) => {
     const { series, xAxis, yAxis, xScale, yScale, split } = args;
     const [_xMin, xRangeMax] = xScale.range();
@@ -43,9 +52,15 @@ export const prepareLineData = (args) => {
             data: d,
             series: s,
         }));
+        const htmlElements = [];
         let labels = [];
         if (s.dataLabels.enabled) {
-            labels = points.map((p) => getLabelData(p, s, xMax));
+            if (s.dataLabels.html) {
+                htmlElements.push(...points.map((p) => getHtmlLabel(p, s, xMax)));
+            }
+            else {
+                labels = points.map((p) => getLabelData(p, s, xMax));
+            }
         }
         let markers = [];
         if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
@@ -68,6 +83,7 @@ export const prepareLineData = (args) => {
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             opacity: s.opacity,
+            htmlElements,
         };
         acc.push(result);
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/line/types.d.ts

@@ -1,6 +1,6 @@
 import { DashStyle, LineCap } from '../../../../../../constants';
 import { LineSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
     x: number;
@@ -26,4 +26,5 @@ export type PreparedLineData = {
     dashStyle: DashStyle;
     linecap: LineCap;
     opacity: number | null;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Portal } from '@gravity-ui/uikit';
 import { arc, color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { setEllipsisForOverflowTexts } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { setActiveState } from '../utils';
 const b = block('d3-pie');
 export function getHaloVisibility(d) {
@@ -13,12 +13,6 @@ export function getHaloVisibility(d) {
 export function PieSeriesShapes(args) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
     React.useEffect(() => {
         if (!ref.current) {
             return () => { };
@@ -174,7 +168,5 @@ export function PieSeriesShapes(args) {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        htmlLayout && (React.createElement(Portal, { container: htmlLayout }, htmlItems.map((item, index) => {
-            return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
-        })))));
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -125,7 +125,6 @@ export function preparePieData(args) {
                     active: true,
                     segment: relatedSegment.data,
                     angle: midAngle,
-                    html: shouldUseHtml,
                 };
                 let overlap = false;
                 if (prevLabel) {

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.d.ts

@@ -7,5 +7,6 @@ type ScatterSeriesShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
+import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions } = props;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -62,5 +63,7 @@ export function ScatterSeriesShape(props) {
             dispatcher.on('hover-shape.scatter', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -23,6 +23,7 @@ export const prepareScatterData = (args) => {
                 },
                 hovered: false,
                 active: true,
+                htmlElements: [],
             });
         });
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/types.d.ts

@@ -1,4 +1,5 @@
 import { ScatterSeriesData } from '../../../../../../types';
+import { HtmlItem } from '../../../types';
 import { PreparedScatterSeries } from '../../useSeries/types';
 type PointData = {
     x: number;
@@ -11,6 +12,7 @@ export type MarkerData = {
     point: PointData;
     active: boolean;
     hovered: boolean;
+    htmlElements: HtmlItem[];
 };
 export type PreparedScatterData = MarkerData;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.d.ts

@@ -6,6 +6,7 @@ type ShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -3,9 +3,10 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { setEllipsisForOverflowTexts } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
-    const { dispatcher, preparedData, seriesOptions } = props;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -92,5 +93,7 @@ export const TreemapSeriesShape = (props) => {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/treemap/prepare-data.js

@@ -51,7 +51,7 @@ export function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     const labelData = ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) ? getLabelData(leaves) : [];
-    return { labelData, leaves, series };
+    return { labelData, leaves, series, htmlElements: [] };
 }
 function getSeriesDataWithRootNode(series) {
     return series.data.reduce((acc, d) => {

package/build/plugins/d3/renderer/hooks/useShapes/treemap/types.d.ts

@@ -1,5 +1,6 @@
 import type { HierarchyRectangularNode } from 'd3';
 import type { TreemapSeriesData } from '../../../../../../types';
+import { HtmlItem } from '../../../types';
 import type { PreparedTreemapSeries } from '../../useSeries/types';
 export type TreemapLabelData = {
     text: string;
@@ -12,4 +13,5 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.d.ts

@@ -8,5 +8,6 @@ type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.js

@@ -4,12 +4,13 @@ import get from 'lodash/get';
 import { DashStyle } from '../../../../../../constants';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { getLineDashArray } from '../utils';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -121,5 +122,7 @@ export const WaterfallSeriesShapes = (args) => {
             dispatcher.on('hover-shape.waterfall', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/prepare-data.js

@@ -124,6 +124,7 @@ export const prepareWaterfallData = (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
+            htmlElements: [],
         };
         preparedData.label = getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.d.ts

@@ -1,5 +1,5 @@
 import { WaterfallSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedWaterfallSeries } from '../../useSeries/types';
 export type PreparedWaterfallData = {
     x: number;
@@ -11,4 +11,5 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/types/index.d.ts

@@ -13,10 +13,12 @@ export type LabelData = {
         id: string;
     };
     active?: boolean;
-    html?: boolean;
 };
 export type HtmlItem = {
     x: number;
     y: number;
     content: string;
 };
+export type ShapeDataWithHtmlItems = {
+    htmlElements: HtmlItem[];
+};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.d.ts

@@ -4,15 +4,16 @@ type AxisBottomArgs = {
     scale: AxisScale<AxisDomain>;
     ticks: {
         count?: number;
-        maxTickCount: number;
-        labelFormat: (value: any) => string;
+        maxTickCount?: number;
+        labelFormat?: (value: any) => string;
         labelsPaddings?: number;
         labelsMargin?: number;
         labelsStyle?: BaseTextStyle;
         labelsMaxWidth?: number;
         labelsLineHeight: number;
-        items: [number, number][];
-        rotation: number;
+        items?: [number, number][];
+        rotation?: number;
+        tickColor?: string;
     };
     domain: {
         size: number;