@gravity-ui/chartkit 4.17.0 → 4.18.0

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

@@ -50,6 +50,8 @@ function getXValues(series, xAxis, xScale) {
 }
 export const prepareAreaData = (args) => {
     const { series, xAxis, xScale, yScale } = args;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const yAxis = args.yAxis[0];
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
@@ -109,6 +111,22 @@ export const prepareAreaData = (args) => {
             });
             return acc;
         }, []);
+        if (series.some((s) => s.stacking === 'percent')) {
+            xValues.forEach(([x], index) => {
+                const stackHeight = accumulatedYValues.get(x) || 0;
+                let acc = 0;
+                const ratio = plotHeight / stackHeight;
+                seriesStackData.forEach((item) => {
+                    const point = item.points[index];
+                    if (point) {
+                        const height = (point.y0 - point.y) * ratio;
+                        point.y0 = plotHeight - height - acc;
+                        point.y = point.y0 + height;
+                        acc += height;
+                    }
+                });
+            });
+        }
         return result.concat(seriesStackData);
     }, []);
 };

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

@@ -25,6 +25,8 @@ function getLabelData(d) {
 }
 export const prepareBarXData = (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale } = args;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
@@ -93,6 +95,7 @@ export const prepareBarXData = (args) => {
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((yValues, groupItemIndex) => {
             let stackHeight = 0;
+            const stackItems = [];
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
@@ -107,9 +110,8 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const yLinearScale = yScale;
                 const y = yLinearScale(yValue.data.y);
-                const height = yLinearScale(yLinearScale.domain()[0]) - y;
+                const height = plotHeight - y;
                 const barData = {
                     x,
                     y: y - stackHeight,
@@ -119,9 +121,19 @@ export const prepareBarXData = (args) => {
                     series: yValue.series,
                 };
                 barData.label = getLabelData(barData);
-                result.push(barData);
+                stackItems.push(barData);
                 stackHeight += height + 1;
             });
+            if (series.some((s) => s.stacking === 'percent')) {
+                let acc = 0;
+                const ratio = plotHeight / (stackHeight - stackItems.length);
+                stackItems.forEach((item) => {
+                    item.height = item.height * ratio;
+                    item.y = plotHeight - item.height - acc;
+                    acc += item.height + 1;
+                });
+            }
+            result.push(...stackItems);
         });
     });
     return result;

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

@@ -49,6 +49,8 @@ function getBandWidth(series, yAxis, yScale) {
 }
 export const prepareBarYData = (args) => {
     const { series, seriesOptions, yAxis, xScale, yScale } = args;
+    const xLinearScale = xScale;
+    const plotWidth = xLinearScale(xLinearScale.domain()[1]);
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
@@ -80,6 +82,7 @@ export const prepareBarYData = (args) => {
         const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
             let stackSum = 0;
+            const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : measureValues;
@@ -94,10 +97,8 @@ export const prepareBarYData = (args) => {
                     center = scale(Number(yValue));
                 }
                 const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
-                const xLinearScale = xScale;
-                const x = xLinearScale(data.x);
-                const width = x - xLinearScale(xLinearScale.domain()[0]);
-                result.push({
+                const width = xLinearScale(data.x);
+                stackItems.push({
                     x: stackSum,
                     y,
                     width,
@@ -108,6 +109,16 @@ export const prepareBarYData = (args) => {
                 });
                 stackSum += width + 1;
             });
+            if (series.some((s) => s.stacking === 'percent')) {
+                let acc = 0;
+                const ratio = plotWidth / (stackSum - stackItems.length);
+                stackItems.forEach((item) => {
+                    item.width = item.width * ratio;
+                    item.x = acc;
+                    acc += item.width;
+                });
+            }
+            result.push(...stackItems);
         });
     });
     return result;

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

@@ -4,12 +4,12 @@ import type { PreparedAxis } from '../useChartOptions/types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedSeries, PreparedSeriesOptions } from '../';
 import type { PreparedBarXData } from './bar-x';
-import type { PreparedScatterData } from './scatter';
+import type { PreparedScatterData } from './scatter/types';
 import type { PreparedPieData } from './pie/types';
 import type { PreparedLineData } from './line/types';
 import type { PreparedBarYData } from './bar-y/types';
 export type { PreparedBarXData } from './bar-x';
-export type { PreparedScatterData } from './scatter';
+export type { PreparedScatterData } from './scatter/types';
 import type { PreparedAreaData } from './area/types';
 import './styles.css';
 export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;

package/build/plugins/d3/renderer/hooks/useShapes/marker.d.ts

@@ -1,12 +1,13 @@
 import { BaseType, Selection } from 'd3';
 import { MarkerData as LineMarkerData } from './line/types';
 import { MarkerData as AreaMarkerData } from './area/types';
-type MarkerData = LineMarkerData | AreaMarkerData;
-export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<SVGGElement | BaseType, T, SVGGElement, unknown>;
+import { MarkerData as ScatterMarkerData } from './scatter/types';
+type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData;
+export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<BaseType | SVGGElement, T, SVGGElement, unknown>;
 export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
 export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
 export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
-export declare function getMarkerSymbol(type: string, radius: number): string | null;
+export declare function getMarkerSymbol(type: "circle" | "diamond" | "square" | "triangle" | "triangle-down" | undefined, radius: number): string | null;
 export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
 export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
 export {};

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

@@ -1,5 +1,8 @@
-import { symbol, symbolCircle, symbolSquare } from 'd3';
+import { symbol } from 'd3';
 import { block } from '../../../../../utils/cn';
+import { SymbolType } from '../../../../../constants';
+import { getSymbol } from '../../utils';
+import get from 'lodash/get';
 const b = block('d3-marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');
@@ -14,9 +17,11 @@ export function renderMarker(selection) {
         .append('path')
         .attr('class', haloClassName)
         .attr('d', (d) => {
-        const type = d.point.series.marker.states.normal.symbol;
-        const radius = d.point.series.marker.states.hover.halo.size;
-        return getMarkerSymbol(type, radius);
+        const series = d.point.series;
+        const type = series.marker.states.normal.symbol;
+        const radius = get(d.point.data, 'radius', series.marker.states.hover.radius);
+        const haloSize = series.marker.states.hover.halo.size;
+        return getMarkerSymbol(type, radius + haloSize);
     })
         .attr('fill', (d) => d.point.series.color)
         .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
@@ -42,25 +47,19 @@ export function getMarkerHaloVisibility(d) {
 export function setMarker(selection, state) {
     selection
         .attr('d', (d) => {
-        const radius = d.point.series.marker.states[state].radius +
-            d.point.series.marker.states[state].borderWidth;
-        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
+        const series = d.point.series;
+        const type = series.marker.states.normal.symbol;
+        const radius = get(d.point.data, 'radius', series.marker.states[state].radius);
+        const size = radius + series.marker.states[state].borderWidth;
+        return getMarkerSymbol(type, size);
     })
         .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
         .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
 }
-export function getMarkerSymbol(type, radius) {
-    switch (type) {
-        case 'square': {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolSquare, size)();
-        }
-        case 'circle':
-        default: {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolCircle, size)();
-        }
-    }
+export function getMarkerSymbol(type = SymbolType.Circle, radius) {
+    const symbolFn = getSymbol(type);
+    const size = Math.pow(radius, 2) * Math.PI;
+    return symbol(symbolFn, size)();
 }
 export function selectMarkerHalo(parentSelection) {
     return parentSelection.select(`.${haloClassName}`);

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

@@ -34,6 +34,7 @@ export function PieSeriesShapes(args) {
         })
             .style('stroke', (pieData) => pieData.borderColor)
             .style('stroke-width', (pieData) => pieData.borderWidth);
+        // Render halo appearing outside the hovered slice
         shapesSelection
             .selectAll('halo')
             .data((pieData) => {
@@ -55,6 +56,7 @@ export function PieSeriesShapes(args) {
             .attr('opacity', (d) => d.data.pie.halo.opacity)
             .attr('z-index', -1)
             .attr('visibility', getHaloVisibility);
+        // Render segments
         shapesSelection
             .selectAll(segmentSelector)
             .data((pieData) => pieData.segments)
@@ -101,6 +103,18 @@ export function PieSeriesShapes(args) {
             .attr('stroke-linejoin', 'round')
             .attr('stroke-linecap', 'round')
             .style('fill', 'none');
+        // Render custom shapes if defined
+        shapesSelection.each(function (d, index, nodes) {
+            var _a, _b;
+            const customShape = (_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                series: {
+                    innerRadius: d.innerRadius,
+                },
+            });
+            if (customShape) {
+                nodes[index].append(customShape);
+            }
+        });
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
 import { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedScatterData } from './prepare-data';
+import type { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';
-export type { PreparedScatterData } from './prepare-data';
 type ScatterSeriesShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedScatterData[];

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

@@ -1,16 +1,11 @@
 import React from 'react';
 import get from 'lodash/get';
-import { symbol, color, pointer, select } from 'd3';
+import { pointer, select } from 'd3';
 import { block } from '../../../../../../utils/cn';
-import { extractD3DataFromNode, isNodeContainsD3Data, getSymbol } from '../../../utils';
-import { shapeKey } from '../utils';
-import { SymbolType } from '../../../../../../constants';
+import { setActiveState, shapeKey } from '../utils';
+import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
-const EMPTY_SELECTION = null;
-const isNodeContainsScatterData = (node) => {
-    return isNodeContainsD3Data(node);
-};
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
     const ref = React.useRef(null);
@@ -21,30 +16,29 @@ export function ScatterSeriesShape(props) {
         const svgElement = select(ref.current);
         const hoverOptions = get(seriesOptions, 'scatter.states.hover');
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
+        svgElement.selectAll('*').remove();
         const selection = svgElement
             .selectAll('path')
             .data(preparedData, shapeKey)
-            .join((enter) => enter.append('path').attr('class', b('point')), (update) => update, (exit) => exit.remove())
-            .attr('d', (d) => {
-            const symbolType = d.series.symbolType || SymbolType.Circle;
-            const scatterSymbol = getSymbol(symbolType);
-            // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-            // https://d3js.org/d3-shape/symbol#symbol
-            return symbol(scatterSymbol, d.size * d.size)();
-        })
-            .attr('transform', (d) => {
-            return 'translate(' + d.cx + ',' + d.cy + ')';
-        })
-            .attr('fill', (d) => d.data.color || d.series.color || '');
+            .join('g')
+            .call(renderMarker)
+            .attr('fill', (d) => d.point.data.color || d.point.series.color || '');
         svgElement
             .on('mousemove', (e) => {
-            const point = e.target;
-            if (!isNodeContainsScatterData(point)) {
+            const datum = select(e.target).datum();
+            if (!datum) {
                 return;
             }
             const [pointerX, pointerY] = pointer(e, svgContainer);
-            const segmentData = extractD3DataFromNode(point);
-            dispatcher.call('hover-shape', {}, [segmentData], [pointerX, pointerY]);
+            const data = {
+                series: {
+                    id: datum.point.series.id,
+                    type: 'scatter',
+                    name: datum.point.series.name,
+                },
+                data: datum.point.data,
+            };
+            dispatcher.call('hover-shape', {}, [data], [pointerX, pointerY]);
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
@@ -52,41 +46,35 @@ export function ScatterSeriesShape(props) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.scatter', (data) => {
-            const selectedPoint = data === null || data === void 0 ? void 0 : data[0];
-            const updates = [];
-            preparedData.forEach((p) => {
-                const hovered = Boolean(hoverEnabled &&
-                    selectedPoint &&
-                    p.cx === selectedPoint.cx &&
-                    p.cy === selectedPoint.cy);
-                if (p.hovered !== hovered) {
-                    p.hovered = hovered;
-                    updates.push(p);
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            selection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('z-index', hovered ? 999 : null);
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (hovered) {
+                    elementSelection.raise();
                 }
-                const active = Boolean(!inactiveEnabled || !selectedPoint || selectedPoint.series.id === p.series.id);
-                if (p.active !== active) {
-                    p.active = active;
-                    updates.push(p);
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
                 }
+                return d;
             });
-            selection.data(updates, shapeKey).join(() => EMPTY_SELECTION, (update) => {
-                update
-                    .attr('fill', (d) => {
-                    var _a;
-                    const initialColor = d.data.color || d.series.color || '';
-                    if (d.hovered) {
-                        return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                    }
-                    return initialColor;
-                })
-                    .attr('opacity', function (d) {
-                    if (!d.active) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
-                });
-                return update;
-            }, (exit) => exit);
         });
         return () => {
             dispatcher.on('hover-shape.scatter', null);

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

@@ -1,16 +1,7 @@
-import type { TooltipDataChunkScatter } from '../../../../../../types';
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import { PreparedScatterSeries } from '../../useSeries/types';
-export type PreparedScatterData = Omit<TooltipDataChunkScatter, 'series'> & {
-    cx: number;
-    cy: number;
-    series: PreparedScatterSeries;
-    hovered: boolean;
-    active: boolean;
-    id: number;
-    size: number;
-};
+import { PreparedScatterData } from './types';
 export declare const prepareScatterData: (args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedAxis;

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

@@ -1,5 +1,4 @@
 import { getXValue, getYValue } from '../utils';
-const DEFAULT_SCATTER_POINT_SIZE = 7;
 const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
@@ -10,16 +9,15 @@ export const prepareScatterData = (args) => {
             ? s.data
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
-            const size = d.radius ? d.radius * 2 : DEFAULT_SCATTER_POINT_SIZE;
             acc.push({
-                data: d,
-                series: s,
-                cx: getXValue({ point: d, xAxis, xScale }),
-                cy: getYValue({ point: d, yAxis, yScale }),
+                point: {
+                    data: d,
+                    series: s,
+                    x: getXValue({ point: d, xAxis, xScale }),
+                    y: getYValue({ point: d, yAxis, yScale }),
+                },
                 hovered: false,
                 active: true,
-                id: acc.length - 1,
-                size,
             });
         });
         return acc;

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

@@ -0,0 +1,15 @@
+import { ScatterSeriesData } from '../../../../../../types';
+import { PreparedScatterSeries } from '../../useSeries/types';
+type PointData = {
+    x: number;
+    y: number;
+    data: ScatterSeriesData;
+    series: PreparedScatterSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedScatterData = MarkerData;
+export {};

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

@@ -0,0 +1 @@
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/utils.d.ts

@@ -17,7 +17,7 @@ export declare function getYValue(args: {
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;
-export declare const shapeKey: (d: unknown) => string | number;
+export declare const shapeKey: (d: unknown) => string | -1;
 export declare function setActiveState<T extends {
     active?: boolean;
 }>(args: {

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

@@ -1,5 +1,3 @@
 import { SymbolType } from '../../../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
-export declare const getSymbol: (symbolType: SymbolType) => {
-    draw: (context: CanvasPath, size: number) => void;
-};
+export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;

package/build/plugins/d3/renderer/validation/index.js

@@ -96,6 +96,18 @@ const validatePieSeries = ({ series }) => {
         }
     });
 };
+const validateStacking = ({ series }) => {
+    const availableStackingValues = ['normal', 'percent'];
+    if (series.stacking && !availableStackingValues.includes(series.stacking)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-series-property', {
+                key: 'stacking',
+                values: availableStackingValues,
+            }),
+        });
+    }
+};
 const validateSeries = (args) => {
     const { series, xAxis, yAxis } = args;
     if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
@@ -107,8 +119,13 @@ const validateSeries = (args) => {
         });
     }
     switch (series.type) {
-        case 'bar-x':
+        case 'area':
         case 'bar-y':
+        case 'bar-x': {
+            validateXYSeries({ series, xAxis, yAxis });
+            validateStacking({ series });
+            break;
+        }
         case 'line':
         case 'scatter': {
             validateXYSeries({ series, xAxis, yAxis });

package/build/plugins/d3/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { pieCenterText } from './pie-center-text';
+export declare const CustomShapeRenderer: {
+    pieCenterText: typeof pieCenterText;
+};

package/build/plugins/d3/utils/index.js

@@ -0,0 +1,4 @@
+import { pieCenterText } from './pie-center-text';
+export const CustomShapeRenderer = {
+    pieCenterText,
+};

package/build/plugins/d3/utils/pie-center-text.d.ts

@@ -0,0 +1,7 @@
+export declare function pieCenterText(text: string, options?: {
+    padding?: number;
+}): ((args: {
+    series: {
+        innerRadius: number;
+    };
+}) => Element | null) | undefined;

package/build/plugins/d3/utils/pie-center-text.js

@@ -0,0 +1,23 @@
+import { create } from 'd3';
+import get from 'lodash/get';
+import { getLabelsSize } from '../renderer/utils';
+const MAX_FONT_SIZE = 64;
+export function pieCenterText(text, options) {
+    if (!text) {
+        return undefined;
+    }
+    const padding = get(options, 'padding', 12);
+    return function (args) {
+        let fontSize = MAX_FONT_SIZE;
+        const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
+        fontSize = (fontSize * (args.series.innerRadius - padding) * 2) / textSize.maxWidth;
+        const container = create('svg:g');
+        container
+            .append('text')
+            .text(text)
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .style('font-size', `${fontSize}px`);
+        return container.node();
+    };
+}

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

@@ -30,11 +30,11 @@ export type AreaSeries<T = any> = BaseSeries & {
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** Whether to stack the values of each series on top of each other.
-     * Possible values are undefined to disable, "normal" to stack by value
+     * Possible values are undefined to disable, "normal" to stack by value or "percent"
      *
      * @default undefined
      * */
-    stacking?: 'normal';
+    stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
     /** The main color of the series (hex, rgba) */

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

@@ -20,10 +20,6 @@ export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
 };
-export type LineMarkerSymbol = 'circle' | 'square';
-export type LineMarkerOptions = PointMarkerOptions & {
-    symbol?: LineMarkerSymbol;
-};
 export type LineSeries<T = any> = BaseSeries & {
     type: typeof SeriesType.Line;
     data: LineSeriesData<T>[];
@@ -41,7 +37,7 @@ export type LineSeries<T = any> = BaseSeries & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line series */
-    marker?: LineMarkerOptions;
+    marker?: PointMarkerOptions;
     /** Option for line stroke style */
     dashStyle?: `${DashStyle}`;
     /** Option for line cap style */

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

@@ -1,3 +1,4 @@
+import { SymbolType } from '../../constants';
 export type PointMarkerOptions = {
     /** Enable or disable the point marker */
     enabled?: boolean;
@@ -7,4 +8,5 @@ export type PointMarkerOptions = {
     borderColor?: string;
     /** The width of the point marker's border */
     borderWidth?: number;
+    symbol?: `${SymbolType}`;
 };

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

@@ -1,3 +1,4 @@
+import { BaseType } from 'd3';
 import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
@@ -71,4 +72,14 @@ export type PieSeries<T = any> = BaseSeries & {
          * */
         connectorCurve?: ConnectorCurve;
     };
+    /**
+     * Function for adding custom svg nodes for a series
+     *
+     * @return BaseType
+     * */
+    renderCustomShape?: (args: {
+        series: {
+            innerRadius: number;
+        };
+    }) => BaseType;
 };