@gravity-ui/chartkit 5.14.1 → 5.16.0

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

@@ -4,7 +4,7 @@ import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
     const style = series.dataLabels.style;
-    const size = getLabelsSize({ labels: [text], style });
+    const size = getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
     const labelData = {
         text,
         x: point.x,
@@ -22,7 +22,7 @@ function getLabelData(point, series, xMax) {
     else {
         const right = left + labelData.size.width;
         if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
+            labelData.x = labelData.x - (right - xMax);
         }
     }
     return labelData;
@@ -97,8 +97,22 @@ export const prepareAreaData = (args) => {
                 return pointsAcc;
             }, []);
             let labels = [];
+            const htmlElements = [];
             if (s.dataLabels.enabled) {
-                labels = points.map((p) => getLabelData(p, s, xMax));
+                const labelItems = points.map((p) => getLabelData(p, s, xMax));
+                if (s.dataLabels.html) {
+                    const htmlLabels = labelItems.map((l) => {
+                        return {
+                            x: l.x - l.size.width / 2,
+                            y: l.y,
+                            content: l.text,
+                        };
+                    });
+                    htmlElements.push(...htmlLabels);
+                }
+                else {
+                    labels = labelItems;
+                }
             }
             let markers = [];
             if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
@@ -119,6 +133,7 @@ export const prepareAreaData = (args) => {
                 hovered: false,
                 active: true,
                 id: s.id,
+                htmlElements,
             });
             return acc;
         }, []);

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

@@ -1,5 +1,5 @@
 import { AreaSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedAreaSeries } from '../../useSeries/types';
 export type PointData = {
     y0: number;
@@ -24,4 +24,5 @@ export type PreparedAreaData = {
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    htmlElements: HtmlItem[];
 };

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

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

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.d.ts

@@ -25,6 +25,7 @@ type Args = {
     xScale?: ChartScale;
     yScale?: ChartScale[];
     split: PreparedSplit;
+    htmlLayout: HTMLElement | null;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -15,7 +15,7 @@ import { prepareTreemapData } from './treemap/prepare-data';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, } = args;
     const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -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;
@@ -119,7 +119,7 @@ export const useShapes = (args) => {
                         boundsWidth,
                         boundsHeight,
                     });
-                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", 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.d.ts

@@ -6,6 +6,7 @@ type PreparePieSeriesArgs = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import { arc, color, line as lineGenerator, select } from 'd3';
+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';
-import { getCurveFactory } from './utils';
 const b = block('d3-pie');
 export function getHaloVisibility(d) {
     const enabled = d.data.pie.halo.enabled && d.data.hovered;
     return enabled ? '' : 'hidden';
 }
 export function PieSeriesShapes(args) {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -71,6 +71,7 @@ export function PieSeriesShapes(args) {
             .attr('class', b('segment'))
             .attr('fill', (d) => d.data.color)
             .attr('opacity', (d) => d.data.opacity);
+        // render Labels
         shapesSelection
             .selectAll('text')
             .data((pieData) => pieData.labels)
@@ -87,19 +88,12 @@ export function PieSeriesShapes(args) {
         // Add the polyline between chart and labels
         shapesSelection
             .selectAll(connectorSelector)
-            .data((pieData) => pieData.labels)
+            .data((pieData) => pieData.connectors)
             .enter()
             .append('path')
             .attr('class', b('connector'))
-            .attr('d', (d) => {
-            let line = lineGenerator();
-            const curveFactory = getCurveFactory(d.segment.pie);
-            if (curveFactory) {
-                line = line.curve(curveFactory);
-            }
-            return line(d.connector.points);
-        })
-            .attr('stroke', (d) => d.connector.color)
+            .attr('d', (d) => d.path)
+            .attr('stroke', (d) => d.color)
             .attr('stroke-width', 1)
             .attr('stroke-linejoin', 'round')
             .attr('stroke-linecap', 'round')
@@ -172,5 +166,7 @@ export function PieSeriesShapes(args) {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }