@gravity-ui/charts 0.9.0 → 0.10.0

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