@gravity-ui/chartkit 4.14.0 → 4.16.0

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import get from 'lodash/get';
-import { color, pointer, select } from 'd3';
+import { symbol, color, pointer, select } from 'd3';
 import { block } from '../../../../../../utils/cn';
-import { extractD3DataFromNode, isNodeContainsD3Data } from '../../../utils';
+import { extractD3DataFromNode, isNodeContainsD3Data, getSymbol } from '../../../utils';
 import { shapeKey } from '../utils';
+import { SymbolType } from '../../../../../../constants';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
-const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const EMPTY_SELECTION = null;
 const isNodeContainsScatterData = (node) => {
     return isNodeContainsD3Data(node);
@@ -22,13 +22,20 @@ export function ScatterSeriesShape(props) {
         const hoverOptions = get(seriesOptions, 'scatter.states.hover');
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
         const selection = svgElement
-            .selectAll(`circle`)
+            .selectAll('path')
             .data(preparedData, shapeKey)
-            .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
-            .attr('fill', (d) => d.data.color || d.series.color || '')
-            .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
-            .attr('cx', (d) => d.cx)
-            .attr('cy', (d) => d.cy);
+            .join((enter) => enter.append('path').attr('class', b('point')), (update) => update, (exit) => exit.remove())
+            .attr('d', (d) => {
+            const symbolType = d.series.symbolType || SymbolType.Circle;
+            const scatterSymbol = getSymbol(symbolType);
+            // D3 takes size as square pixels, so we need to make square pixels size by multiplying
+            // https://d3js.org/d3-shape/symbol#symbol
+            return symbol(scatterSymbol, d.size * d.size)();
+        })
+            .attr('transform', (d) => {
+            return 'translate(' + d.cx + ',' + d.cy + ')';
+        })
+            .attr('fill', (d) => d.data.color || d.series.color || '');
         svgElement
             .on('mousemove', (e) => {
             const point = e.target;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.d.ts

@@ -9,6 +9,7 @@ export type PreparedScatterData = Omit<TooltipDataChunkScatter, 'series'> & {
     hovered: boolean;
     active: boolean;
     id: number;
+    size: number;
 };
 export declare const prepareScatterData: (args: {
     series: PreparedScatterSeries[];

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -1,4 +1,5 @@
 import { getXValue, getYValue } from '../utils';
+const DEFAULT_SCATTER_POINT_SIZE = 7;
 const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
@@ -9,6 +10,7 @@ export const prepareScatterData = (args) => {
             ? s.data
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
+            const size = d.radius ? d.radius * 2 : DEFAULT_SCATTER_POINT_SIZE;
             acc.push({
                 data: d,
                 series: s,
@@ -17,6 +19,7 @@ export const prepareScatterData = (args) => {
                 hovered: false,
                 active: true,
                 id: acc.length - 1,
+                size,
             });
         });
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/utils.d.ts

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../../../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
+import { DashStyle } from '../../../../../constants';
 export declare function getXValue(args: {
     point: {
         x?: number | string;
@@ -25,3 +26,4 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
+export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;

package/build/plugins/d3/renderer/hooks/useShapes/utils.js

@@ -34,3 +34,20 @@ export function setActiveState(args) {
     }
     return datum;
 }
+export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+    const value = dashStyle.toLowerCase();
+    const arrayValue = value
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+        return `${parseInt(part, 10) * strokeWidth}`;
+    });
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+};

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -6,6 +6,7 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './symbol';
 export type AxisDirection = 'x' | 'y';
 export type NodeWithD3Data<T = unknown> = Element & {
     __data__: T;

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

@@ -12,6 +12,7 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './symbol';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
  * Checks whether the series should be drawn with axes.

package/build/plugins/d3/renderer/utils/symbol.d.ts

@@ -0,0 +1,5 @@
+import { SymbolType } from '../../../../constants';
+export declare const getSymbolType: (index: number) => SymbolType;
+export declare const getSymbol: (symbolType: SymbolType) => {
+    draw: (context: CanvasPath, size: number) => void;
+};

package/build/plugins/d3/renderer/utils/symbol.js

@@ -0,0 +1,36 @@
+import { symbolDiamond2, symbolCircle, symbolSquare, symbolTriangle2 } from 'd3';
+import { SymbolType } from '../../../../constants';
+export const getSymbolType = (index) => {
+    const scatterStyles = Object.values(SymbolType);
+    return scatterStyles[index % scatterStyles.length];
+};
+// This is an inverted triangle
+// Based on https://github.com/d3/d3-shape/blob/main/src/symbol/triangle2.js
+const sqrt3 = Math.sqrt(3);
+const triangleDown = {
+    draw: (context, size) => {
+        const s = Math.sqrt(size) * 0.6824;
+        const t = s / 2;
+        const u = (s * sqrt3) / 2;
+        context.moveTo(0, s);
+        context.lineTo(u, -t);
+        context.lineTo(-u, -t);
+        context.closePath();
+    },
+};
+export const getSymbol = (symbolType) => {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return symbolDiamond2;
+        case SymbolType.Circle:
+            return symbolCircle;
+        case SymbolType.Square:
+            return symbolSquare;
+        case SymbolType.Triangle:
+            return symbolTriangle2;
+        case SymbolType.TriangleDown:
+            return triangleDown;
+        default:
+            return symbolCircle;
+    }
+};

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

@@ -1,16 +1,10 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import { SeriesType } from '../../../../constants';
 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 AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
 const validateXYSeries = (args) => {
     const { series, xAxis, yAxis } = args;
     const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1155,9 +1155,6 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     var _a;
                     if (chartType === 'column' || chartType === 'bar') {
                         this.series.forEach((seriesItem) => {
-                            if (!seriesItem.legendItem) {
-                                return;
-                            }
                             const color = seriesItem.color;
                             // The update method updates all series, and therefore,
                             // after working out the handleLegendItemMouseOverAndOut,

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

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
@@ -24,7 +25,7 @@ export type AreaMarkerOptions = PointMarkerOptions & {
     symbol?: AreaMarkerSymbol;
 };
 export type AreaSeries<T = any> = BaseSeries & {
-    type: 'area';
+    type: typeof SeriesType.Area;
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/build/types/widget-data/bar-x.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
@@ -26,7 +27,7 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     label?: string | number;
 };
 export type BarXSeries<T = any> = BaseSeries & {
-    type: 'bar-x';
+    type: typeof SeriesType.BarX;
     data: BarXSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/build/types/widget-data/bar-y.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
@@ -20,7 +21,7 @@ export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
     label?: string | number;
 };
 export type BarYSeries<T = any> = BaseSeries & {
-    type: 'bar-y';
+    type: typeof SeriesType.BarY;
     data: BarYSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

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

@@ -0,0 +1,9 @@
+/** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */
+export type Halo = {
+    /** Enable or disable the halo */
+    enabled?: boolean;
+    /** The opacity of halo */
+    opacity?: number;
+    /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */
+    size?: number;
+};

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

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

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

@@ -17,6 +17,7 @@ export * from './line';
 export * from './series';
 export * from './title';
 export * from './tooltip';
+export * from './halo';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

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

@@ -11,3 +11,4 @@ export * from './line';
 export * from './series';
 export * from './title';
 export * from './tooltip';
+export * from './halo';

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

@@ -58,3 +58,11 @@ export type PathLegendSymbolOptions = BaseLegendSymbol & {
      * */
     width?: number;
 };
+export type SymbolLegendSymbolOptions = BaseLegendSymbol & {
+    /**
+     * The pixel width of the symbol for series types that use a symbol in the legend
+     *
+     * @default 8
+     * */
+    width?: number;
+};

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

@@ -1,6 +1,7 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
+import { DashStyle, LineCap, SeriesType } from '../../constants';
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
@@ -24,7 +25,7 @@ export type LineMarkerOptions = PointMarkerOptions & {
     symbol?: LineMarkerSymbol;
 };
 export type LineSeries<T = any> = BaseSeries & {
-    type: 'line';
+    type: typeof SeriesType.Line;
     data: LineSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
@@ -41,4 +42,8 @@ export type LineSeries<T = any> = BaseSeries & {
     };
     /** Options for the point markers of line series */
     marker?: LineMarkerOptions;
+    /** Option for line stroke style */
+    dashStyle?: `${DashStyle}`;
+    /** Option for line cap style */
+    linecap?: `${LineCap}`;
 };

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

@@ -8,11 +8,3 @@ 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/pie.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type PieSeriesData<T = any> = BaseSeriesData<T> & {
@@ -13,7 +14,7 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';
 export type PieSeries<T = any> = BaseSeries & {
-    type: 'pie';
+    type: typeof SeriesType.Pie;
     data: PieSeriesData<T>[];
     /**
      * The color of the border surrounding each segment.

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

@@ -1,3 +1,4 @@
+import { SeriesType, SymbolType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
@@ -24,14 +25,14 @@ export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
     radius?: number;
 };
 export type ScatterSeries<T = any> = BaseSeries & {
-    type: 'scatter';
+    type: typeof SeriesType.Scatter;
     data: ScatterSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
     /** A predefined shape or symbol for the dot */
-    symbol?: string;
+    symbolType?: `${SymbolType}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: ChartKitWidgetLegend & {
         symbol?: RectLegendSymbolOptions;

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

@@ -4,8 +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 type { PointMarkerOptions, PointMarkerHalo } from './marker';
+import type { PointMarkerOptions } from './marker';
 import type { AreaSeries, AreaSeriesData } from './area';
+import type { Halo } from './halo';
+import { DashStyle, LineCap } from '../../constants';
 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> = {
@@ -125,7 +127,10 @@ export type ChartKitWidgetSeriesOptions = {
     pie?: {
         /** Options for the series states that provide additional styling information to the series. */
         states?: {
-            hover?: BasicHoverState;
+            hover?: BasicHoverState & {
+                /** Options for the halo appearing outside the hovered slice */
+                halo?: Halo;
+            };
             inactive?: BasicInactiveState;
         };
     };
@@ -147,13 +152,23 @@ export type ChartKitWidgetSeriesOptions = {
             hover?: BasicHoverState & {
                 marker?: PointMarkerOptions & {
                     /** Options for the halo appearing around the hovered point */
-                    halo?: PointMarkerHalo;
+                    halo?: Halo;
                 };
             };
             inactive?: BasicInactiveState;
         };
         /** Options for the point markers of line series */
         marker?: LineMarkerOptions;
+        /** Options for line style
+         *
+         * @default 'Solid'
+         * */
+        dashStyle?: `${DashStyle}`;
+        /** Options for line cap style
+         *
+         * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
+         * */
+        linecap?: `${LineCap}`;
     };
     area?: {
         /** Pixel width of the graph line.
@@ -166,7 +181,7 @@ export type ChartKitWidgetSeriesOptions = {
             hover?: BasicHoverState & {
                 marker?: PointMarkerOptions & {
                     /** Options for the halo appearing around the hovered point */
-                    halo?: PointMarkerHalo;
+                    halo?: Halo;
                 };
             };
             inactive?: BasicInactiveState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.14.0",
+  "version": "4.16.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.1.0",
+    "@gravity-ui/yagr": "^4.1.1",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
@@ -120,6 +120,12 @@
     "lint:prettier": "prettier --check --loglevel=error '**/*.{js,jsx,ts,tsx,scss}'",
     "lint": "run-p lint:*",
     "typecheck": "tsc --noEmit",
+    "docs:deps": "cd ./documentation && npm ci",
+    "docs:start": "cd ./documentation && npm run start",
+    "docs:start:ru": "cd ./documentation && npm run start:ru",
+    "docs:build": "cd ./documentation && npm run build",
+    "docs:serve": "cd ./documentation && npm run serve",
+    "docs:deploy": "cd ./documentation && npm run deploy",
     "prepublishOnly": "npm run build"
   },
   "husky": {