@gravity-ui/charts 0.9.0 → 0.10.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/hooks/useShapes/radar/types.js

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

package/dist/esm/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/esm/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/esm/types/chart/radar.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",