@gravity-ui/chartkit 4.15.0 → 4.16.0

package/build/constants/widget-data.d.ts

@@ -19,6 +19,13 @@ export declare enum DashStyle {
     ShortDot = "ShortDot",
     Solid = "Solid"
 }
+export declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}
 export declare enum LineCap {
     Butt = "butt",
     Round = "round",

package/build/constants/widget-data.js

@@ -20,6 +20,14 @@ export var DashStyle;
     DashStyle["ShortDot"] = "ShortDot";
     DashStyle["Solid"] = "Solid";
 })(DashStyle || (DashStyle = {}));
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));
 export var LineCap;
 (function (LineCap) {
     LineCap["Butt"] = "butt";

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { select, line as lineGenerator } from 'd3';
+import { symbol, select, line as lineGenerator } from 'd3';
+import { getSymbol } from '../utils';
 import { block } from '../../../../utils/cn';
 import { getLineDashArray } from '../hooks/useShapes/utils';
 const b = block('d3-legend');
@@ -109,6 +110,23 @@ function renderLegendSymbol(args) {
                     .style('fill', color);
                 break;
             }
+            case 'symbol': {
+                const y = legend.lineHeight / 2;
+                element
+                    .append('svg:path')
+                    .attr('d', () => {
+                    const scatterSymbol = getSymbol(d.symbol.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.symbol.width * d.symbol.width)();
+                })
+                    .attr('transform', () => {
+                    return 'translate(' + x + ',' + y + ')';
+                })
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
         }
     });
 }

package/build/plugins/d3/renderer/components/styles.css

@@ -29,6 +29,10 @@
   stroke: var(--g-color-text-hint);
 }
 
+.chartkit-d3-legend__item-symbol_shape_symbol.chartkit-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
   alignment-baseline: before-edge;

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -1,5 +1,6 @@
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
+import { getSymbolType } from '../../utils';
 import { prepareLineSeries } from './prepare-line-series';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
@@ -8,15 +9,17 @@ import { ChartKitError } from '../../../../../libs';
 import { preparePieSeries } from './prepare-pie';
 import { prepareArea } from './prepare-area';
 function prepareAxisRelatedSeries(args) {
-    const { colorScale, series, legend } = args;
+    const { colorScale, series, legend, index } = args;
     const preparedSeries = cloneDeep(series);
     const name = 'name' in series && series.name ? series.name : '';
+    const symbolType = (series.symbolType || getSymbolType(index));
+    preparedSeries.symbolType = symbolType;
     preparedSeries.color = 'color' in series && series.color ? series.color : colorScale(name);
     preparedSeries.name = name;
     preparedSeries.visible = get(preparedSeries, 'visible', true);
     preparedSeries.legend = {
         enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
-        symbol: prepareLegendSymbol(series),
+        symbol: prepareLegendSymbol(series, symbolType),
     };
     return [preparedSeries];
 }
@@ -36,8 +39,8 @@ export function prepareSeries(args) {
             return prepareBarYSeries({ series: series, legend, colorScale });
         }
         case 'scatter': {
-            return series.reduce((acc, singleSeries) => {
-                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale }));
+            return series.reduce((acc, singleSeries, index) => {
+                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale, index }));
                 return acc;
             }, []);
         }

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -1,6 +1,6 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, SymbolLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
-import { DashStyle, LineCap } from '../../../../../constants';
+import { DashStyle, LineCap, SymbolType } from '../../../../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -8,7 +8,11 @@ export type PathLegendSymbol = {
     shape: 'path';
     strokeWidth: number;
 } & Required<PathLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol;
+export type SymbolLegendSymbol = {
+    shape: 'symbol';
+    symbolType: SymbolType;
+} & Required<SymbolLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
     height: number;
     lineHeight: number;
@@ -53,6 +57,7 @@ type BasePreparedSeries = {
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
+    symbolType: SymbolType;
 } & BasePreparedSeries;
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];

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

@@ -1,6 +1,7 @@
 import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
 import { ChartKitWidgetSeries } from '../../../../../types';
+import { SymbolType } from '../../../../../constants';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
-export declare function prepareLegendSymbol(series: ChartKitWidgetSeries): PreparedLegendSymbol;
+export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: SymbolType): PreparedLegendSymbol;
 export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -1,6 +1,7 @@
 import memoize from 'lodash/memoize';
-import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { SymbolType } from '../../../../../constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -12,15 +13,13 @@ export const getActiveLegendItems = (series) => {
 export const getAllLegendItems = (series) => {
     return series.map((s) => s.name);
 };
-export function prepareLegendSymbol(series) {
+export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
-    const symbolHeight = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.height) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
-        shape: 'rect',
+        shape: 'symbol',
+        symbolType: symbolType || SymbolType.Circle,
         width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
-        height: symbolHeight,
-        radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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/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/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/scatter.d.ts

@@ -1,4 +1,4 @@
-import { SeriesType } from '../../constants';
+import { SeriesType, SymbolType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
@@ -32,7 +32,7 @@ export type ScatterSeries<T = any> = BaseSeries & {
     /** 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.15.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",
@@ -125,6 +125,7 @@
     "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": {