@gravity-ui/charts 0.9.0 → 0.10.0

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

@@ -12,6 +12,10 @@
   alignment-baseline: before-edge;
 }
 
+.gcharts-radar__label {
+  alignment-baseline: before-edge;
+}
+
 .gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);

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

@@ -0,0 +1,50 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
+export interface RadarSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    /** The value of the radar point. */
+    value: number;
+}
+export interface RadarSeriesCategory {
+    /** The categories for the radar chart. */
+    key: string;
+    /** Maximum value for current key. */
+    maxValue?: number;
+}
+export type RadarMarkerSymbol = 'circle' | 'square';
+export interface RadarMarkerOptions extends PointMarkerOptions {
+    symbol?: RadarMarkerSymbol;
+}
+export interface RadarSeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SeriesType.Radar;
+    /** The categories for the radar chart. */
+    categories?: RadarSeriesCategory[];
+    data: RadarSeriesData<T>[];
+    /** The name of the radar series. */
+    name?: string;
+    /** The color of the radar series. */
+    color?: string;
+    /**
+     * The color of the border surrounding the radar area.
+     * @default `--g-color-base-background` from @gravity-ui/uikit.
+     */
+    borderColor?: string;
+    /**
+     * The width of the border surrounding the radar area.
+     * @default 1
+     */
+    borderWidth?: number;
+    /**
+     * The opacity of the radar area fill.
+     * @default 0.5
+     */
+    fillOpacity?: number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Options for the point markers of line in radar series */
+    marker?: RadarMarkerOptions;
+}

package/dist/cjs/types/chart/radar.js

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

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

@@ -8,12 +8,13 @@ import type { Halo } from './halo';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { RadarSeries, RadarSeriesData } from './radar';
 import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T>;
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -233,4 +234,18 @@ export interface ChartSeriesOptions {
             inactive?: BasicInactiveState;
         };
     };
+    radar?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: Halo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+        /** Options for the point markers of radar series */
+        marker?: PointMarkerOptions;
+    };
 }

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

@@ -5,6 +5,7 @@ import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { RadarSeries, RadarSeriesCategory, RadarSeriesData } from './radar';
 import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
@@ -62,7 +63,13 @@ export interface TooltipDataChunkWaterfall<T = MeaningfulAny> {
     data: WaterfallSeriesData<T>;
     series: WaterfallSeries<T>;
 }
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T>) & {
+export interface TooltipDataChunkRadar<T = MeaningfulAny> {
+    data: RadarSeriesData<T>;
+    series: RadarSeries<T>;
+    category?: RadarSeriesCategory;
+    closest: boolean;
+}
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T>) & {
     closest?: boolean;
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {

package/dist/cjs/types/index.d.ts

@@ -26,6 +26,7 @@ export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
 export * from './chart/sankey';
+export * from './chart/radar';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

package/dist/cjs/types/index.js

@@ -18,3 +18,4 @@ export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
 export * from './chart/sankey';
+export * from './chart/radar';

package/dist/cjs/utils/chart/get-closest-data.js

@@ -32,13 +32,16 @@ function getClosestPointsByXValue(x, y, points) {
     }));
 }
 function getSeriesType(shapeData) {
-    return get(shapeData, 'series.type') || get(shapeData, 'point.series.type');
+    return (get(shapeData, 'series.type') ||
+        get(shapeData, 'point.series.type') ||
+        get(shapeData, 'type'));
 }
 export function getClosestPoints(args) {
     const { position, shapesData, boundsHeight, boundsWidth } = args;
     const [pointerX, pointerY] = position;
     const result = [];
     const groups = groupBy(shapesData, getSeriesType);
+    // eslint-disable-next-line complexity
     Object.entries(groups).forEach(([seriesType, list]) => {
         var _a, _b;
         switch (seriesType) {
@@ -140,7 +143,7 @@ export function getClosestPoints(args) {
                     const y = pointerY - center[1];
                     let angle = Math.atan2(y, x) + 0.5 * Math.PI;
                     angle = angle < 0 ? Math.PI * 2 + angle : angle;
-                    const polarRadius = Math.sqrt(x * x + y * y);
+                    const polarRadius = getRadius({ center, pointer: [pointerX, pointerY] });
                     return (angle >= p.startAngle && angle <= p.endAngle && polarRadius < p.data.radius);
                 });
                 if (closestPoint) {
@@ -188,6 +191,33 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'radar': {
+                const [radarData] = list;
+                const radius = getRadius({ center: radarData.center, pointer: [pointerX, pointerY] });
+                if (radius <= radarData.radius) {
+                    const radarShapes = radarData.shapes.filter((shape) => isInsidePath({
+                        path: shape.path,
+                        point: [pointerX, pointerY],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                        strokeWidth: shape.borderWidth,
+                    }));
+                    const points = radarShapes.map((shape) => shape.points).flat();
+                    const delaunayX = Delaunay.from(points, (d) => d.position[0], (d) => d.position[1]);
+                    const closestPoint = points[delaunayX.find(pointerX, pointerY)];
+                    if (closestPoint) {
+                        radarData.shapes.forEach((shape) => {
+                            result.push({
+                                data: shape.points[closestPoint.index].data,
+                                series: shape.series,
+                                category: shape.series.categories[closestPoint.index],
+                                closest: shape.series === closestPoint.series,
+                            });
+                        });
+                    }
+                }
+                break;
+            }
         }
     });
     return result;
@@ -206,3 +236,10 @@ function isInsidePath(args) {
     }
     return null;
 }
+function getRadius(args) {
+    const { pointer, center } = args;
+    const x = pointer[0] - center[0];
+    const y = pointer[1] - center[1];
+    const polarRadius = Math.sqrt(x * x + y * y);
+    return polarRadius;
+}

package/dist/cjs/utils/chart/index.js

@@ -15,7 +15,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
-const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey'];
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',

package/dist/esm/components/Tooltip/DefaultContent.js

@@ -28,14 +28,17 @@ const getRowData = (fieldName, data, axis) => {
 const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
+    if (data.some((item) => item.series.type === 'radar')) {
+        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+    }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData((_a = data[0]) === null || _a === void 0 ? void 0 : _a.data, yAxis);
+        return getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
     }
-    return getXRowData((_b = data[0]) === null || _b === void 0 ? void 0 : _b.data, xAxis);
+    return getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis);
 };
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
@@ -109,6 +112,18 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             ": ",
                             value)));
                 }
+                case 'radar': {
+                    const radarSeries = series;
+                    const seriesData = data;
+                    const value = (React.createElement(React.Fragment, null,
+                        React.createElement("span", null,
+                            radarSeries.name || radarSeries.id,
+                            "\u00A0"),
+                        React.createElement("span", null, seriesData.value)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                }
                 default: {
                     return null;
                 }

package/dist/esm/constants/defaults/series-options.js

@@ -89,6 +89,18 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    radar: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
     waterfall: {
         barMaxWidth: 50,
         barPadding: 0.1,

package/dist/esm/constants/index.d.ts

@@ -10,6 +10,7 @@ export declare const SeriesType: {
     readonly Treemap: "treemap";
     readonly Waterfall: "waterfall";
     readonly Sankey: "sankey";
+    readonly Radar: "radar";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/dist/esm/constants/index.js

@@ -10,6 +10,7 @@ export const SeriesType = {
     Treemap: 'treemap',
     Waterfall: 'waterfall',
     Sankey: 'sankey',
+    Radar: 'radar',
 };
 export var DashStyle;
 (function (DashStyle) {

package/dist/esm/hooks/useSeries/prepare-radar.d.ts

@@ -0,0 +1,16 @@
+import type { ChartSeriesOptions, RadarSeries } from '../../types';
+import type { PreparedLegend, PreparedRadarSeries } from './types';
+type PrepareRadarSeriesArgs = {
+    series: RadarSeries[];
+    seriesOptions?: ChartSeriesOptions;
+    legend: PreparedLegend;
+};
+export declare const DEFAULT_MARKER: {
+    enabled: boolean;
+    radius: number;
+    symbol: `${import("../../constants").SymbolType}`;
+    borderColor: string;
+    borderWidth: number;
+};
+export declare function prepareRadarSeries(args: PrepareRadarSeriesArgs): PreparedRadarSeries[];
+export {};

package/dist/esm/hooks/useSeries/prepare-radar.js

@@ -0,0 +1,63 @@
+import { scaleOrdinal } from 'd3';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { DEFAULT_PALETTE } from '../../constants';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
+import { prepareLegendSymbol } from './utils';
+export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: true, radius: 2 });
+function prepareMarker(series, seriesOptions) {
+    var _a;
+    const seriesHoverState = get(seriesOptions, 'radar.states.hover');
+    const markerNormalState = Object.assign({}, DEFAULT_MARKER, (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.radar) === null || _a === void 0 ? void 0 : _a.marker, series.marker);
+    const hoveredMarkerDefaultOptions = {
+        enabled: true,
+        radius: markerNormalState.radius + 1,
+        borderWidth: 1,
+        borderColor: '#ffffff',
+        halo: DEFAULT_HALO_OPTIONS,
+    };
+    return {
+        states: {
+            normal: markerNormalState,
+            hover: merge(hoveredMarkerDefaultOptions, seriesHoverState === null || seriesHoverState === void 0 ? void 0 : seriesHoverState.marker),
+        },
+    };
+}
+export function prepareRadarSeries(args) {
+    var _a, _b;
+    const { series: radarSeries, seriesOptions, legend } = args;
+    const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), DEFAULT_PALETTE);
+    const categories = (_b = (_a = radarSeries.find((s) => s.categories)) === null || _a === void 0 ? void 0 : _a.categories) !== null && _b !== void 0 ? _b : [];
+    return radarSeries.map((series, index) => {
+        var _a, _b, _c, _d, _e;
+        const name = (_a = series.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`;
+        const color = (_b = series.color) !== null && _b !== void 0 ? _b : colorScale(name);
+        const preparedSeries = {
+            type: 'radar',
+            data: series.data,
+            categories,
+            id: getUniqId(),
+            name,
+            color,
+            visible: typeof series.visible === 'boolean' ? series.visible : true,
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            borderColor: series.borderColor || color,
+            borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
+            fillOpacity: (_d = series.fillOpacity) !== null && _d !== void 0 ? _d : 0.25,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', true),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.style),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(series, 'dataLabels.allowOverlap', false),
+                html: get(series, 'dataLabels.html', false),
+            },
+            cursor: get(series, 'cursor', null),
+            marker: prepareMarker(series, seriesOptions),
+        };
+        return preparedSeries;
+    });
+}

package/dist/esm/hooks/useSeries/prepareSeries.js

@@ -4,6 +4,7 @@ import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
+import { prepareRadarSeries } from './prepare-radar';
 import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
@@ -75,6 +76,13 @@ export function prepareSeries(args) {
                 legend,
             });
         }
+        case 'radar': {
+            return prepareRadarSeries({
+                series: series,
+                seriesOptions,
+                legend,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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 {};