@gravity-ui/chartkit 4.13.0 → 4.14.0

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

@@ -0,0 +1,145 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
+import { i18n } from '../../../../i18n';
+import { DEFAULT_AXIS_TYPE } from '../constants';
+const AVAILABLE_SERIES_TYPES = [
+    'area',
+    'bar-x',
+    'bar-y',
+    'line',
+    'pie',
+    'scatter',
+];
+const validateXYSeries = (args) => {
+    const { series, xAxis, yAxis } = args;
+    const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
+    const yType = get(yAxis, 'type', DEFAULT_AXIS_TYPE);
+    series.data.forEach(({ x, y }) => {
+        switch (xType) {
+            case 'category': {
+                if (typeof x !== 'string' && typeof x !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-category-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'datetime': {
+                if (typeof x !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear': {
+                if (typeof x !== 'number' && x !== null) {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+            }
+        }
+        switch (yType) {
+            case 'category': {
+                if (typeof y !== 'string' && typeof y !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-category-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'datetime': {
+                if (typeof y !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear': {
+                if (typeof y !== 'number' && y !== null) {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+            }
+        }
+    });
+};
+const validatePieSeries = ({ series }) => {
+    series.data.forEach(({ value }) => {
+        if (typeof value !== 'number') {
+            throw new ChartKitError({
+                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_invalid-pie-data-value'),
+            });
+        }
+    });
+};
+const validateSeries = (args) => {
+    const { series, xAxis, yAxis } = args;
+    if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-series-type', {
+                types: AVAILABLE_SERIES_TYPES.join(', '),
+            }),
+        });
+    }
+    switch (series.type) {
+        case 'bar-x':
+        case 'bar-y':
+        case 'line':
+        case 'scatter': {
+            validateXYSeries({ series, xAxis, yAxis });
+            break;
+        }
+        case 'pie': {
+            validatePieSeries({ series });
+        }
+    }
+};
+export const validateData = (data) => {
+    if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.NO_DATA,
+            message: i18n('error', 'label_no-data'),
+        });
+    }
+    if (data.series.data.some((s) => isEmpty(s.data))) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: 'You should specify data for all series',
+        });
+    }
+    data.series.data.forEach((series) => {
+        var _a;
+        validateSeries({ series, yAxis: (_a = data.yAxis) === null || _a === void 0 ? void 0 : _a[0], xAxis: data.xAxis });
+    });
+};

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

@@ -0,0 +1,57 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
+export type AreaSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * The `x` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+};
+export type AreaMarkerSymbol = 'circle' | 'square';
+export type AreaMarkerOptions = PointMarkerOptions & {
+    symbol?: AreaMarkerSymbol;
+};
+export type AreaSeries<T = any> = BaseSeries & {
+    type: 'area';
+    data: AreaSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** Whether to stack the values of each series on top of each other.
+     * Possible values are undefined to disable, "normal" to stack by value
+     *
+     * @default undefined
+     * */
+    stacking?: 'normal';
+    /** This option allows grouping series in a stacked chart */
+    stackId?: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Fill opacity for the area
+     *
+     * @default 0.75
+     * */
+    opacity?: number;
+    /** Pixel width of the graph line.
+     *
+     * @default 1
+     * */
+    lineWidth?: number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Options for the point markers of line in area series */
+    marker?: AreaMarkerOptions;
+};

package/build/types/widget-data/area.js

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

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

@@ -12,6 +12,7 @@ export * from './pie';
 export * from './scatter';
 export * from './bar-x';
 export * from './bar-y';
+export * from './area';
 export * from './line';
 export * from './series';
 export * from './title';

package/build/types/widget-data/index.js

@@ -6,6 +6,7 @@ export * from './pie';
 export * from './scatter';
 export * from './bar-x';
 export * from './bar-y';
+export * from './area';
 export * from './line';
 export * from './series';
 export * from './title';

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

@@ -1,6 +1,6 @@
-import { BaseSeries, BaseSeriesData } from './base';
-import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
-import { PointMarkerOptions } from './marker';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the point. Depending on the context , it may represents:

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

@@ -8,3 +8,11 @@ export type PointMarkerOptions = {
     /** The width of the point marker's border */
     borderWidth?: number;
 };
+export type PointMarkerHalo = {
+    /** Enable or disable the halo appearing around the point */
+    enabled?: boolean;
+    /** The Opacity of the point halo */
+    opacity?: number;
+    /** The radius of the point halo */
+    radius?: number;
+};

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

@@ -4,9 +4,10 @@ import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { LineSeries, LineSeriesData, LineMarkerOptions } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import { PointMarkerOptions } from './marker';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T>;
+import type { PointMarkerOptions, PointMarkerHalo } from './marker';
+import type { AreaSeries, AreaSeriesData } from './area';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -146,11 +147,26 @@ export type ChartKitWidgetSeriesOptions = {
             hover?: BasicHoverState & {
                 marker?: PointMarkerOptions & {
                     /** Options for the halo appearing around the hovered point */
-                    halo?: {
-                        enabled?: boolean;
-                        opacity?: number;
-                        radius?: number;
-                    };
+                    halo?: PointMarkerHalo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+        /** Options for the point markers of line series */
+        marker?: LineMarkerOptions;
+    };
+    area?: {
+        /** Pixel width of the graph line.
+         *
+         * @default 1
+         * */
+        lineWidth?: number;
+        /** 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?: PointMarkerHalo;
                 };
             };
             inactive?: BasicInactiveState;

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

@@ -4,6 +4,7 @@ import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { LineSeries, LineSeriesData } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
+import type { AreaSeries, AreaSeriesData } from './area';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -32,7 +33,15 @@ export type TooltipDataChunkLine<T = any> = {
         name: string;
     };
 };
-export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T>;
+export type TooltipDataChunkArea<T = any> = {
+    data: AreaSeriesData<T>;
+    series: {
+        type: AreaSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T>;
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^4.0.3",
+    "@gravity-ui/yagr": "^4.1.0",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",