@gravity-ui/chartkit 4.11.0 → 4.12.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select, line as lineGenerator } from 'd3';
 import { block } from '../../../../utils/cn';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
@@ -56,6 +56,58 @@ const appendPaginator = (args) => {
     });
     paginationLine.attr('transform', transform);
 };
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+function renderLegendSymbol(args) {
+    const { selection, legend } = args;
+    const line = selection.data();
+    const getXPosition = (i) => {
+        return line.slice(0, i).reduce((acc, legendItem) => {
+            return (acc +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
+                legendItem.textWidth +
+                legend.itemDistance);
+        }, 0);
+    };
+    selection.each(function (d, i) {
+        const element = select(this);
+        const x = getXPosition(i);
+        const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
+        const color = d.visible ? d.color : '';
+        switch (d.symbol.shape) {
+            case 'path': {
+                const y = legend.lineHeight / 2;
+                const points = [
+                    { x: x, y },
+                    { x: x + d.symbol.width, y },
+                ];
+                element
+                    .append('path')
+                    .attr('d', legendSymbolGenerator(points))
+                    .attr('fill', 'none')
+                    .attr('stroke-width', d.symbol.strokeWidth)
+                    .attr('class', className)
+                    .style('stroke', color);
+                break;
+            }
+            case 'rect': {
+                const y = (legend.lineHeight - d.symbol.height) / 2;
+                element
+                    .append('rect')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('width', d.symbol.width)
+                    .attr('height', d.symbol.height)
+                    .attr('rx', d.symbol.radius)
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
+        }
+    });
+}
 export const Legend = (props) => {
     const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
     const ref = React.useRef(null);
@@ -95,25 +147,7 @@ export const Legend = (props) => {
                         legend.itemDistance);
                 }, 0);
             };
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return getXPosition(i);
-            })
-                .attr('y', (legendItem) => {
-                return (legend.lineHeight - legendItem.symbol.height) / 2;
-            })
-                .attr('width', (legendItem) => {
-                return legendItem.symbol.width;
-            })
-                .attr('height', (legendItem) => legendItem.symbol.height)
-                .attr('rx', (legendItem) => legendItem.symbol.radius)
-                .attr('class', function (d) {
-                return b('item-shape', { unselected: !d.visible });
-            })
-                .style('fill', function (d) {
-                return d.visible ? d.color : '';
-            });
+            renderLegendSymbol({ selection: legendItemTemplate, legend });
             legendItemTemplate
                 .append('text')
                 .attr('x', function (legendItem, i) {

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

@@ -21,12 +21,12 @@
   user-select: none;
 }
 
-.chartkit-d3-legend__item-shape {
-  fill: var(--g-color-base-misc-medium);
+.chartkit-d3-legend__item-symbol_shape_rect.chartkit-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
 }
 
-.chartkit-d3-legend__item-shape_unselected {
-  fill: var(--g-color-text-hint);
+.chartkit-d3-legend__item-symbol_shape_path.chartkit-d3-legend__item-symbol_unselected {
+  stroke: var(--g-color-text-hint);
 }
 
 .chartkit-d3-legend__item-text {

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

@@ -1,4 +1,5 @@
 import { BaseTextStyle } from '../../../../../types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export declare const DEFAULT_DATALABELS_PADDING = 5;
 export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;

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

@@ -1,4 +1,5 @@
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, LegendItem } from './types';
 export declare const getPreparedLegend: (args: {

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.d.ts

@@ -1,6 +1,8 @@
 import { ScaleOrdinal } from 'd3';
 import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
 import { PreparedLegend, PreparedSeries } from './types';
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export declare const DEFAULT_LINE_WIDTH = 1;
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: LineSeries[];

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.js

@@ -1,10 +1,22 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
-import { prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export const DEFAULT_LINE_WIDTH = 1;
+function prepareLineLegendSymbol(series, seriesOptions) {
+    var _a;
+    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    return {
+        shape: 'path',
+        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
+        strokeWidth: get(series, 'lineWidth', defaultLineWidth),
+    };
+}
 export function prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
-    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', 1);
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
     return seriesList.map((series) => {
         var _a, _b;
         const id = getRandomCKId();
@@ -19,7 +31,7 @@ export function prepareLineSeries(args) {
             visible: get(series, 'visible', true),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
+                symbol: prepareLineLegendSymbol(series, seriesOptions),
             },
             data: series.data,
             dataLabels: {

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

@@ -1,9 +1,13 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol;
+export type PathLegendSymbol = {
+    shape: 'path';
+    strokeWidth: number;
+} & Required<PathLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
     height: number;
     lineHeight: number;

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

@@ -1,4 +1,4 @@
-import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -19,6 +19,6 @@ export function prepareLegendSymbol(series) {
         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) || 5,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.11.0",
+  "version": "4.12.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.0",
+    "@gravity-ui/yagr": "^4.0.1",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",