@gravity-ui/charts 0.8.0 → 0.10.0

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -258,7 +258,40 @@ export type PreparedSankeySeries = {
         style: BaseTextStyle;
     };
 } & BasePreparedSeries & Omit<SankeySeries, keyof BasePreparedSeries>;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries;
+export type PreparedRadarSeries = {
+    type: RadarSeries['type'];
+    data: RadarSeriesData[];
+    categories: RadarSeriesCategory[];
+    borderColor: string;
+    borderWidth: number;
+    fillOpacity: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+    };
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

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

@@ -5,7 +5,7 @@ import { block, filterOverlappingLabels } from '../../..//utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
-const b = block('d3-area');
+const b = block('area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

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

@@ -8,13 +8,14 @@ import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
 import type { PreparedLineData } from './line/types';
 import type { PreparedPieData } from './pie/types';
+import type { PreparedRadarData } from './radar/types';
 import type { PreparedSankeyData } from './sankey/types';
 import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -10,6 +10,8 @@ import { LineSeriesShapes } from './line';
 import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
 import { preparePieData } from './pie/prepare-data';
+import { RadarSeriesShapes } from './radar';
+import { prepareRadarData } from './radar/prepare-data';
 import { SankeySeriesShape } from './sankey';
 import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
@@ -149,6 +151,16 @@ export const useShapes = (args) => {
                     shapesData.push(preparedData);
                     break;
                 }
+                case 'radar': {
+                    const preparedData = prepareRadarData({
+                        series: chartSeries,
+                        boundsWidth,
+                        boundsHeight,
+                    });
+                    acc.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.push(...preparedData);
+                    break;
+                }
                 default: {
                     throw new ChartError({
                         message: `The display method is not defined for a series with type "${seriesType}"`,

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

@@ -5,7 +5,7 @@ import { block, filterOverlappingLabels, getLineDashArray } from '../../../utils
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
-const b = block('d3-line');
+const b = block('line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

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

@@ -2,9 +2,10 @@ import type { BaseType, Selection } from 'd3';
 import { SymbolType } from '../../constants';
 import type { MarkerData as AreaMarkerData } from './area/types';
 import type { MarkerData as LineMarkerData } from './line/types';
+import type { RadarMarkerData } from './radar/types';
 import type { 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>;
+type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData | RadarMarkerData;
+export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType, T, BaseType, unknown>): Selection<BaseType, T, BaseType, 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;

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

@@ -2,7 +2,7 @@ import { symbol } from 'd3';
 import get from 'lodash/get';
 import { SymbolType } from '../../constants';
 import { block, getSymbol } from '../../utils';
-const b = block('d3-marker');
+const b = block('marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');
 export function renderMarker(selection) {

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

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { setActiveState } from '../utils';
-const b = block('d3-pie');
+const b = block('pie');
 export function getHaloVisibility(d) {
     const enabled = d.data.pie.halo.enabled && d.data.hovered;
     return enabled ? '' : 'hidden';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedRadarData } from './types';
+type PrepareRadarSeriesArgs = {
+    dispatcher: Dispatch<object>;
+    series: PreparedRadarData[];
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare function RadarSeriesShapes(args: PrepareRadarSeriesArgs): React.JSX.Element;
+export {};

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { color, line, select } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState } from '../utils';
+const b = block('radar');
+export function RadarSeriesShapes(args) {
+    const { dispatcher, series: preparedData, seriesOptions, htmlLayout } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const areaSelector = `.${b('area')}`;
+        const radarSelection = svgElement
+            .selectAll('radar')
+            .data(preparedData)
+            .join('g')
+            .attr('id', (radarData) => radarData.id)
+            .attr('class', b('item'))
+            .attr('cursor', (radarData) => radarData.cursor);
+        // render axes
+        radarSelection
+            .selectAll(`.${b('axis')}`)
+            .data((radarData) => radarData.axes)
+            .join('line')
+            .attr('class', b('axis'))
+            .attr('x1', (d) => d.radar.center[0])
+            .attr('y1', (d) => d.radar.center[1])
+            .attr('x2', (d) => d.point[0])
+            .attr('y2', (d) => d.point[1])
+            .attr('stroke', (d) => d.strokeColor)
+            .attr('stroke-width', (d) => d.strokeWidth);
+        // render grid lines
+        radarSelection
+            .selectAll(`.${b('grid')}`)
+            .data((radarData) => radarData.grid)
+            .join('path')
+            .attr('class', b('grid'))
+            .attr('d', (d) => `${line()(d.path)} Z`)
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.strokeColor)
+            .attr('stroke-width', (d) => d.strokeWidth);
+        // render radar area
+        const shapesSelection = radarSelection
+            .selectAll(areaSelector)
+            .data((radarData) => radarData.shapes)
+            .join('g')
+            .attr('class', b('area'));
+        shapesSelection
+            .append('path')
+            .attr('d', (d) => d.path)
+            .attr('fill', (d) => d.color)
+            .attr('fill-opacity', (d) => d.fillOpacity)
+            .attr('stroke', (d) => d.borderColor)
+            .attr('stroke-width', (d) => d.borderWidth);
+        // render markers
+        const markerSelection = shapesSelection
+            .selectAll('marker')
+            .data((radarData) => radarData.points)
+            .join('g')
+            .call(renderMarker);
+        // Render labels
+        radarSelection
+            .selectAll('text')
+            .data((radarData) => radarData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .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);
+        // Handle hover events
+        const eventName = `hover-shape.radar`;
+        const hoverOptions = get(seriesOptions, 'radar.states.hover');
+        const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
+        dispatcher.on(eventName, (data) => {
+            const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
+            const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
+            const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
+            const selectedSeriesId = selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.id;
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            shapesSelection.datum((d, i, elements) => {
+                var _a;
+                const hovered = Boolean(hoverEnabled && ((_a = d.series) === null || _a === void 0 ? void 0 : _a.id) === selectedSeriesId);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    select(elements[i]).attr('fill', () => {
+                        var _a;
+                        const initialColor = d.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;
+                    });
+                    if (hovered) {
+                        select(elements[i]).raise();
+                    }
+                }
+                setActiveState({
+                    element: elements[i],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    datum: d,
+                });
+                markerSelection.datum((markerData, index, markers) => {
+                    const hoveredState = Boolean(hoverEnabled && markerData.data === selectedSeriesData);
+                    if (markerData.hovered !== hoveredState) {
+                        markerData.hovered = hoveredState;
+                        const elementSelection = select(markers[index]);
+                        elementSelection.attr('visibility', getMarkerVisibility(markerData));
+                        selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                        selectMarkerSymbol(elementSelection).call(setMarker, hoveredState ? 'hover' : 'normal');
+                    }
+                    return markerData;
+                });
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
+}

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

@@ -0,0 +1,9 @@
+import type { PreparedRadarSeries } from '../../useSeries/types';
+import type { PreparedRadarData } from './types';
+type Args = {
+    series: PreparedRadarSeries[];
+    boundsWidth: number;
+    boundsHeight: number;
+};
+export declare function prepareRadarData(args: Args): PreparedRadarData[];
+export {};

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

@@ -0,0 +1,155 @@
+import { curveLinearClosed, line, range, scaleLinear } from 'd3';
+import { getLabelsSize } from '../../../utils';
+export function prepareRadarData(args) {
+    const { series: preparedSeries, boundsWidth, boundsHeight } = args;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const center = [boundsWidth / 2, boundsHeight / 2];
+    const result = [];
+    const gridStepsCount = 5;
+    const radius = maxRadius * 0.8; // Leave some space for labels
+    // Create scale for values
+    const valueScale = scaleLinear()
+        .domain([0, Math.max(...preparedSeries.map((s) => s.data.map((d) => d.value)).flat())])
+        .range([0, radius]);
+    const [, finalRadius] = valueScale.range();
+    const data = {
+        type: 'radar',
+        id: preparedSeries[0].id,
+        center,
+        radius: finalRadius,
+        shapes: [],
+        labels: [],
+        axes: [],
+        htmlLabels: [],
+        grid: [],
+        cursor: preparedSeries[0].cursor,
+    };
+    const categories = preparedSeries[0].categories;
+    const axisStrokeColor = 'var(--g-color-line-generic)';
+    const axisStrokeWidth = 1;
+    // Create axes based on categories
+    const axesCount = categories.length;
+    const angleStep = (2 * Math.PI) / axesCount;
+    data.axes = categories.map((_category, index) => {
+        const angle = index * angleStep - Math.PI / 2; // Start from top (negative PI/2)
+        return {
+            point: [
+                center[0] + Math.cos(angle) * data.radius,
+                center[1] + Math.sin(angle) * data.radius,
+            ],
+            radar: data,
+            strokeColor: axisStrokeColor,
+            strokeWidth: axisStrokeWidth,
+            angle,
+        };
+    });
+    const gridStepInc = data.radius / gridStepsCount;
+    const gridSteps = range(gridStepInc, data.radius + gridStepInc, gridStepInc);
+    gridSteps.forEach((gridStep) => {
+        const gridLines = {
+            path: [],
+            strokeColor: axisStrokeColor,
+            strokeWidth: axisStrokeWidth,
+        };
+        categories.forEach((_category, index) => {
+            const angle = index * angleStep - Math.PI / 2; // Start from top (negative PI/2)
+            gridLines.path.push([
+                center[0] + Math.cos(angle) * gridStep,
+                center[1] + Math.sin(angle) * gridStep,
+            ]);
+        });
+        data.grid.push(gridLines);
+    });
+    const radarAreaLine = line().curve(curveLinearClosed);
+    preparedSeries.forEach((series) => {
+        var _a;
+        const { dataLabels } = series;
+        const markers = [];
+        categories.forEach((category, index) => {
+            var _a;
+            const dataItem = series.data[index];
+            const angle = index * angleStep - Math.PI / 2; // Start from top (negative PI/2)
+            const pointValueScale = scaleLinear()
+                .domain([
+                0,
+                (_a = category.maxValue) !== null && _a !== void 0 ? _a : Math.max(...preparedSeries.map((s) => s.data[index].value)),
+            ])
+                .range([0, radius]);
+            const pointRadius = pointValueScale(dataItem.value);
+            const x = center[0] + Math.cos(angle) * pointRadius;
+            const y = center[1] + Math.sin(angle) * pointRadius;
+            markers.push({
+                point: {
+                    x,
+                    y,
+                    series,
+                    data: dataItem,
+                },
+                index,
+                position: [x, y],
+                color: series.color,
+                opacity: 1,
+                radius: 2,
+                data: dataItem,
+                series: series,
+                hovered: false,
+                active: false,
+            });
+        });
+        data.shapes.push({
+            borderWidth: series.borderWidth,
+            borderColor: series.borderColor,
+            fillOpacity: series.fillOpacity,
+            points: markers,
+            path: (_a = radarAreaLine(markers.map((p) => p.position))) !== null && _a !== void 0 ? _a : '',
+            series: series,
+            color: series.color,
+            hovered: false,
+            active: true,
+        });
+        // Create labels if enabled
+        if (dataLabels.enabled) {
+            const { style } = dataLabels;
+            const shouldUseHtml = dataLabels.html;
+            data.labels = categories.map((category, index) => {
+                const text = category.key;
+                const labelSize = getLabelsSize({ labels: [text], style });
+                const angle = index * angleStep - Math.PI / 2;
+                // Position label slightly outside the point
+                const labelRadius = data.radius + 10;
+                let x = center[0] + Math.cos(angle) * labelRadius;
+                let y = center[1] + Math.sin(angle) * labelRadius;
+                if (shouldUseHtml) {
+                    x = x < center[0] ? x - labelSize.maxWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
+                    y = y < center[1] ? y - labelSize.maxHeight : y;
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return {
+                    text,
+                    x,
+                    y,
+                    style,
+                    size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
+                    maxWidth: labelSize.maxWidth,
+                    textAnchor: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'end' : 'start',
+                    series: { id: series.id },
+                };
+            });
+            // Create HTML labels if needed
+            if (dataLabels.html) {
+                data.htmlLabels = data.labels.map((label) => ({
+                    x: label.x,
+                    y: label.y,
+                    content: label.text,
+                    size: label.size,
+                }));
+            }
+        }
+        return data;
+    });
+    result.push(data);
+    return result;
+}

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

@@ -0,0 +1,58 @@
+import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
+import type { PreparedRadarSeries } from '../../useSeries/types';
+export type RadarLabelData = LabelData & {
+    maxWidth: number;
+};
+export type RadarAxisData = {
+    point: [number, number];
+    angle: number;
+    strokeColor: string;
+    strokeWidth: number;
+    radar: PreparedRadarData;
+};
+export type RadarGridData = {
+    path: [number, number][];
+    strokeColor: string;
+    strokeWidth: number;
+};
+export type PointData = {
+    x: number;
+    y: number;
+    data: RadarSeriesData;
+    series: PreparedRadarSeries;
+};
+export type RadarMarkerData = {
+    point: PointData;
+    radius: number;
+    position: [number, number];
+    index: number;
+    color: string;
+    opacity: number;
+    data: RadarSeriesData;
+    series: PreparedRadarSeries;
+    hovered: boolean;
+    active: boolean;
+};
+export type RadarShapeData = {
+    points: RadarMarkerData[];
+    path: string;
+    color: string;
+    series: PreparedRadarSeries;
+    hovered: boolean;
+    active: boolean;
+    borderColor: string;
+    borderWidth: number;
+    fillOpacity: number;
+};
+export type PreparedRadarData = {
+    type: 'radar';
+    id: string;
+    shapes: RadarShapeData[];
+    labels: RadarLabelData[];
+    axes: RadarAxisData[];
+    grid: RadarGridData[];
+    center: [number, number];
+    radius: number;
+    htmlLabels: HtmlItem[];
+    cursor: string | null;
+};

package/dist/cjs/hooks/useShapes/radar/types.js

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

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

@@ -6,7 +6,7 @@ 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');
+const b = block('scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/styles.css

@@ -1,17 +1,21 @@
-.gcharts-d3-scatter__point {
+.gcharts-scatter__point {
   stroke-width: 1px;
 }
 
-.gcharts-d3-pie__segment {
+.gcharts-pie__segment {
   stroke: var(--g-color-base-background);
 }
-.gcharts-d3-pie__label {
+.gcharts-pie__label {
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
   alignment-baseline: before-edge;
 }
 
+.gcharts-radar__label {
+  alignment-baseline: before-edge;
+}
+
 .gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
@@ -23,13 +27,13 @@
   alignment-baseline: after-edge;
 }
 
-.gcharts-d3-treemap__label {
+.gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
   alignment-baseline: text-before-edge;
 }
 
-.gcharts-d3-waterfall__connector {
+.gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
 }

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

@@ -3,7 +3,7 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-const b = block('d3-treemap');
+const b = block('treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

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

@@ -6,7 +6,7 @@ import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColo
 import { HtmlLayer } from '../HtmlLayer';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
-const b = block('d3-waterfall');
+const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
-export type { ChartData } from './types';
+export * from './types';

package/dist/cjs/index.js

@@ -1,2 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
+export * from './types';

package/dist/cjs/types/chart/axis.d.ts

@@ -73,6 +73,8 @@ export interface ChartAxis {
      * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
+    /** An array of lines stretching across the plot area, marking a specific value */
+    plotLines?: AxisPlotLine[];
 }
 export interface ChartXAxis extends ChartAxis {
 }
@@ -105,6 +107,4 @@ export interface ChartYAxis extends ChartAxis {
     /** Property for splitting charts. Determines which area the axis is located in.
      * */
     plotIndex?: number;
-    /** An array of lines stretching across the plot area, marking a specific value */
-    plotLines?: AxisPlotLine[];
 }