@gravity-ui/chartkit 5.14.0 → 5.15.0

package/build/plugins/d3/renderer/components/Chart.js

@@ -22,6 +22,7 @@ export const Chart = (props) => {
     var _a, _b;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
+    const htmlLayerRef = React.useRef(null);
     const dispatcher = React.useMemo(() => {
         return getD3Dispatcher();
     }, []);
@@ -71,6 +72,7 @@ export const Chart = (props) => {
         yAxis,
         yScale,
         split: preparedSplit,
+        htmlLayout: htmlLayerRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
@@ -136,5 +138,8 @@ export const Chart = (props) => {
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
+        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
+                transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
+            } }),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -2,6 +2,14 @@
   position: absolute;
 }
 
+.chartkit-d3__html-layer {
+  display: contents;
+}
+
+.chartkit-d3__html-layer > * {
+  transform: inherit;
+}
+
 .chartkit-d3-axis .domain {
   stroke: var(--g-color-line-generic-active);
 }

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

@@ -24,6 +24,7 @@ export function preparePieSeries(args) {
                 connectorShape: get(series, 'dataLabels.connectorShape', 'polyline'),
                 distance: get(series, 'dataLabels.distance', 25),
                 connectorCurve: get(series, 'dataLabels.connectorCurve', 'basic'),
+                html: get(series, 'dataLabels.html', false),
             },
             label: dataItem.label,
             value: dataItem.value,

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -126,6 +126,7 @@ export type PreparedPieSeries = {
         connectorShape: ConnectorShape;
         distance: number;
         connectorCurve: ConnectorCurve;
+        html: boolean;
     };
     states: {
         hover: {

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);
@@ -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;
                 }

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,18 +1,24 @@
 import React from 'react';
-import { arc, color, line as lineGenerator, select } from 'd3';
+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 { 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);
+    const htmlItems = React.useMemo(() => {
+        return preparedData.reduce((result, d) => {
+            result.push(...d.htmlElements);
+            return result;
+        }, []);
+    }, [preparedData]);
     React.useEffect(() => {
         if (!ref.current) {
             return () => { };
@@ -71,6 +77,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 +94,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 +172,9 @@ 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 } }),
+        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 } }));
+        })))));
 }

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

@@ -1,6 +1,6 @@
-import { arc, group } from 'd3';
+import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
-import { pieGenerator } from './utils';
+import { getCurveFactory, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            connectors: [],
             borderColor,
             borderWidth,
             borderRadius,
@@ -40,6 +41,7 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
+            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -53,6 +55,11 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
@@ -81,15 +88,17 @@ export function preparePieData(args) {
             items.forEach((d, index) => {
                 const prevLabel = labels[labels.length - 1];
                 const text = String(d.data.label || d.data.value);
-                const labelSize = getLabelsSize({ labels: [text], style });
+                const shouldUseHtml = dataLabels.html;
+                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
                 const labelWidth = labelSize.maxWidth;
                 const relatedSegment = data.segments[index];
                 const getLabelPosition = (angle) => {
                     let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    x = Math.max(-boundsWidth / 2, x);
-                    if (y < 0) {
-                        y -= labelHeight;
+                    y = y < 0 ? y - labelHeight : y;
+                    if (shouldUseHtml) {
+                        x = x < 0 ? x - labelWidth : x;
                     }
+                    x = Math.max(-boundsWidth / 2, x);
                     return [x, y];
                 };
                 const getConnectorPoints = (angle) => {
@@ -114,12 +123,9 @@ export function preparePieData(args) {
                     textAnchor: midAngle < Math.PI ? 'start' : 'end',
                     series: { id: d.id },
                     active: true,
-                    connector: {
-                        points: getConnectorPoints(midAngle),
-                        color: relatedSegment.data.color,
-                    },
                     segment: relatedSegment.data,
                     angle: midAngle,
+                    html: shouldUseHtml,
                 };
                 let overlap = false;
                 if (prevLabel) {
@@ -138,7 +144,6 @@ export function preparePieData(args) {
                                 const [newX, newY] = getLabelPosition(newAngle);
                                 label.x = newX;
                                 label.y = newY;
-                                label.connector.points = getConnectorPoints(newAngle);
                                 if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                     shouldAdjustAngle = false;
                                     overlap = false;
@@ -158,7 +163,21 @@ export function preparePieData(args) {
                             label.maxWidth = label.size.width - (right - boundsWidth / 2);
                         }
                     }
-                    labels.push(label);
+                    if (shouldUseHtml) {
+                        data.htmlElements.push({
+                            x: boundsWidth / 2 + label.x,
+                            y: boundsHeight / 2 + label.y,
+                            content: label.text,
+                        });
+                    }
+                    else {
+                        labels.push(label);
+                    }
+                    const connector = {
+                        path: line(getConnectorPoints(midAngle)),
+                        color: relatedSegment.data.color,
+                    };
+                    data.connectors.push(connector);
                 }
             });
             data.labels = labels;

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

@@ -1,6 +1,6 @@
 import type { PieArcDatum } from 'd3';
 import { ConnectorCurve } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {
     value: number;
@@ -12,18 +12,19 @@ export type SegmentData = {
     pie: PreparedPieData;
 };
 export type PieLabelData = LabelData & {
-    connector: {
-        points: [number, number][];
-        color: string;
-    };
     segment: SegmentData;
     angle: number;
     maxWidth: number;
 };
+export type PieConnectorData = {
+    path: string | null;
+    color: string;
+};
 export type PreparedPieData = {
     id: string;
     segments: PieArcDatum<SegmentData>[];
     labels: PieLabelData[];
+    connectors: PieConnectorData[];
     center: [number, number];
     radius: number;
     innerRadius: number;
@@ -37,4 +38,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
+    htmlElements: HtmlItem[];
 };

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

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

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -9,10 +9,11 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
     style?: BaseTextStyle;
     padding?: number;
 }): boolean;
-export declare function getLabelsSize({ labels, style, rotation, }: {
+export declare function getLabelsSize({ labels, style, rotation, html, }: {
     labels: string[];
     style?: BaseTextStyle;
     rotation?: number;
+    html?: boolean;
 }): {
     maxHeight: number;
     maxWidth: number;

package/build/plugins/d3/renderer/utils/text.js

@@ -63,24 +63,39 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .text((d) => d);
     return text;
 }
-export function getLabelsSize({ labels, style, rotation, }) {
-    var _a;
+export function getLabelsSize({ labels, style, rotation, html, }) {
+    var _a, _b, _c, _d, _e;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
     const container = select(document.body)
         .append('div')
         .attr('class', 'chartkit chartkit-theme_common');
-    const svg = container.append('svg');
-    const textSelection = renderLabels(svg, { labels, style });
-    if (rotation) {
-        textSelection
-            .attr('text-anchor', rotation > 0 ? 'start' : 'end')
-            .style('transform', `rotate(${rotation}deg)`);
+    const result = { maxHeight: 0, maxWidth: 0 };
+    let labelWrapper;
+    if (html) {
+        labelWrapper = container.append('div').style('position', 'absolute').node();
+        labels.forEach((l) => {
+            labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.insertAdjacentHTML('beforeend', l);
+        });
+        const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
+        result.maxWidth = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+        result.maxHeight = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+    }
+    else {
+        const svg = container.append('svg');
+        const textSelection = renderLabels(svg, { labels, style });
+        if (rotation) {
+            textSelection
+                .attr('text-anchor', rotation > 0 ? 'start' : 'end')
+                .style('transform', `rotate(${rotation}deg)`);
+        }
+        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
+        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
     }
-    const { height = 0, width = 0 } = ((_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
     container.remove();
-    return { maxHeight: height, maxWidth: width };
+    return result;
 }
 export function wrapText(args) {
     const { text, style, width } = args;

package/build/types/widget-data/base.d.ts

@@ -21,6 +21,13 @@ export type BaseSeries = {
          * @default false
          * */
         allowOverlap?: boolean;
+        /**
+         * Allows to use any html-tags to display the content.
+         * The element will be displayed outside the box of the SVG element.
+         *
+         * @default false
+         * */
+        html?: boolean;
     };
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -49,7 +49,7 @@
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/yagr": "^4.3.2",
+    "@gravity-ui/yagr": "^4.3.4",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",