@gravity-ui/chartkit 4.6.1 → 4.7.0

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

@@ -5,6 +5,7 @@ import { select } from 'd3';
 import { legendDefaults } from '../../constants';
 import { getHorisontalSvgTextHeight } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
+import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
 export const getPreparedLegend = (args) => {
     const { legend, series } = args;
     const enabled = typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1;
@@ -80,13 +81,17 @@ export const getLegendComponents = (args) => {
     let legendHeight = preparedLegend.lineHeight * items.length;
     let pagination;
     if (maxLegendHeight < legendHeight) {
-        const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight);
+        // extra line for paginator
+        const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
         const maxPage = Math.ceil(items.length / limit);
         pagination = { limit, maxPage };
         legendHeight = maxLegendHeight;
     }
     preparedLegend.height = legendHeight;
-    const top = chartHeight - chartMargin.bottom - preparedLegend.height + preparedLegend.lineHeight / 2;
-    const offset = { left: chartMargin.left, top };
+    const top = chartHeight - chartMargin.bottom - preparedLegend.height;
+    const offset = {
+        left: chartMargin.left + getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }),
+        top,
+    };
     return { legendConfig: { offset, pagination }, legendItems: items };
 };

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

@@ -0,0 +1,3 @@
+import type { ChartKitWidgetSeriesOptions } from '../../../../../types/widget-data';
+import type { PreparedSeriesOptions } from './types';
+export declare const getPreparedOptions: (options?: ChartKitWidgetSeriesOptions) => PreparedSeriesOptions;

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

@@ -0,0 +1,5 @@
+import merge from 'lodash/merge';
+import { seriesOptionsDefaults } from '../../constants';
+export const getPreparedOptions = (options) => {
+    return merge({}, seriesOptionsDefaults, options);
+};

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

@@ -1,9 +1,9 @@
-import { scaleOrdinal } from 'd3';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
+import { scaleOrdinal } from 'd3';
+import { getRandomCKId } from '../../../../../utils';
 import { DEFAULT_PALETTE } from '../../constants';
 import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
-import { getRandomCKId } from '../../../../../utils';
 const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',
     fontWeight: 'bold',
@@ -53,6 +53,7 @@ function prepareBarXSeries(args) {
             type: series.type,
             color: color,
             name: name,
+            id: '',
             visible: get(series, 'visible', true),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
@@ -80,13 +81,15 @@ function preparePieSeries(args) {
         var _a, _b;
         const result = {
             type: 'pie',
-            data: dataItem.value,
+            data: dataItem,
             dataLabels: {
                 enabled: get(series, 'dataLabels.enabled', true),
             },
             label: dataItem.label,
+            value: dataItem.value,
             visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
             name: dataItem.name,
+            id: '',
             color: dataItem.color || colorScale(dataItem.name),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),

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

@@ -1,4 +1,5 @@
 import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -31,6 +32,7 @@ export type LegendConfig = {
 type BasePreparedSeries = {
     color: string;
     name: string;
+    id: string;
     visible: boolean;
     legend: {
         enabled: boolean;
@@ -52,9 +54,11 @@ export type PreparedBarXSeries = {
     };
 } & BasePreparedSeries;
 export type PreparedPieSeries = BasePreparedSeries & Required<Omit<PieSeries, 'data'>> & {
-    data: PieSeriesData['value'];
+    data: PieSeriesData;
+    value: PieSeriesData['value'];
     stackId: string;
     label?: PieSeriesData['label'];
 };
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedPieSeries;
+export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedBarXData } from './prepare-data';
+export { prepareBarXData } from './prepare-data';
+export type { PreparedBarXData } from './prepare-data';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedBarXData[];
+    seriesOptions: PreparedSeriesOptions;
+};
+export declare const BarXSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import get from 'lodash/get';
+import { color, select } from 'd3';
+import { block } from '../../../../../../utils/cn';
+export { prepareBarXData } from './prepare-data';
+const DEFAULT_LABEL_PADDING = 7;
+const b = block('d3-bar-x');
+export const BarXSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'bar-x.states.hover');
+        const inactiveOptions = get(seriesOptions, 'bar-x.states.inactive');
+        svgElement.selectAll('*').remove();
+        const rectSelection = svgElement
+            .selectAll('allRects')
+            .data(preparedData)
+            .join('rect')
+            .attr('class', b('segment'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('height', (d) => d.height)
+            .attr('width', (d) => d.width)
+            .attr('fill', (d) => d.data.color || d.series.color);
+        const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
+        const labelSelection = svgElement
+            .selectAll('allLabels')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => String(d.data.label || d.data.y))
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x + d.width / 2)
+            .attr('y', (d) => {
+            if (d.series.dataLabels.inside) {
+                return d.y + d.height / 2;
+            }
+            return d.y - DEFAULT_LABEL_PADDING;
+        })
+            .attr('text-anchor', 'middle')
+            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
+            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
+            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
+        dispatcher.on('hover-shape.bar-x', (data) => {
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            if (!data) {
+                if (hoverEnabled) {
+                    rectSelection.attr('fill', (d) => d.data.color || d.series.color);
+                }
+                if (inactiveEnabled) {
+                    rectSelection.attr('opacity', null);
+                    labelSelection.attr('opacity', null);
+                }
+                return;
+            }
+            if (hoverEnabled) {
+                const hoveredValues = data.map((d) => d.data.x);
+                rectSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.data.color || d.series.color;
+                    if (hoveredValues.includes(d.data.x)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveEnabled) {
+                const hoveredSeries = data.map((d) => d.series.id);
+                rectSelection.attr('opacity', (d) => {
+                    return hoveredSeries.includes(d.series.id)
+                        ? null
+                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                });
+                labelSelection.attr('opacity', (d) => {
+                    return hoveredSeries.includes(d.series.id)
+                        ? null
+                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                });
+            }
+        });
+        return () => {
+            dispatcher.on('hover-shape.bar-x', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

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

@@ -0,0 +1,19 @@
+import type { TooltipDataChunkBarX } from '../../../../../../types';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
+export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    series: PreparedBarXSeries;
+};
+export declare const prepareBarXData: (args: {
+    series: PreparedBarXSeries[];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedBarXData[];

package/build/plugins/d3/renderer/hooks/useShapes/{bar-x.js → bar-x/prepare-data.js}

@@ -1,21 +1,15 @@
-import { ascending, descending, max, pointer, select, sort } from 'd3';
-import React from 'react';
+import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
-import { block } from '../../../../../utils/cn';
-import { getDataCategoryValue } from '../../utils';
-import { DEFAULT_BAR_X_SERIES_OPTIONS } from './defaults';
+import { getDataCategoryValue } from '../../../utils';
 const MIN_RECT_WIDTH = 1;
 const MIN_RECT_GAP = 1;
 const MIN_GROUP_GAP = 1;
-const DEFAULT_LABEL_PADDING = 7;
-const b = block('d3-bar-x');
-function prepareData(args) {
+export const prepareBarXData = (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale } = args;
     const categories = get(xAxis, 'categories', []);
-    const { barMaxWidth: defaultBarMaxWidth, barPadding: defaultBarPadding, groupPadding: defaultGroupPadding, } = DEFAULT_BAR_X_SERIES_OPTIONS;
-    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth', defaultBarMaxWidth);
-    const barPadding = get(seriesOptions, 'bar-x.barPadding', defaultBarPadding);
-    const groupPadding = get(seriesOptions, 'bar-x.groupPadding', defaultGroupPadding);
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
     const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -110,78 +104,4 @@ function prepareData(args) {
         });
     });
     return result;
-}
-export function BarXSeriesShapes(args) {
-    const { top, left, series, seriesOptions, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const shapes = prepareData({
-            series,
-            seriesOptions,
-            xAxis,
-            xScale,
-            yAxis,
-            yScale,
-        });
-        svgElement
-            .selectAll('allRects')
-            .data(shapes)
-            .join('rect')
-            .attr('class', b('segment'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.data.color || d.series.color)
-            .on('mousemove', (e, d) => {
-            const [x, y] = pointer(e, svgContainer);
-            onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
-                hovered: {
-                    data: d.data,
-                    series: d.series,
-                },
-                pointerPosition: [x - left, y - top],
-            });
-        })
-            .on('mouseleave', () => {
-            if (onSeriesMouseLeave) {
-                onSeriesMouseLeave();
-            }
-        });
-        const dataLabels = shapes.filter((s) => s.series.dataLabels.enabled);
-        svgElement
-            .selectAll('allLabels')
-            .data(dataLabels)
-            .join('text')
-            .text((d) => String(d.data.label || d.data.y))
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x + d.width / 2)
-            .attr('y', (d) => {
-            if (d.series.dataLabels.inside) {
-                return d.y + d.height / 2;
-            }
-            return d.y - DEFAULT_LABEL_PADDING;
-        })
-            .attr('text-anchor', 'middle')
-            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
-            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
-            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
-    }, [
-        onSeriesMouseMove,
-        onSeriesMouseLeave,
-        svgContainer,
-        xAxis,
-        xScale,
-        yAxis,
-        yScale,
-        series,
-        left,
-        top,
-    ]);
-    return React.createElement("g", { ref: ref, className: b() });
-}
+};

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

@@ -1,26 +1,29 @@
 import React from 'react';
-import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
-import type { ChartOptions } from '../useChartOptions/types';
+import { Dispatch } from 'd3';
+import type { PreparedAxis } from '../useChartOptions/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedSeries } from '../';
-import type { OnSeriesMouseMove, OnSeriesMouseLeave } from '../useTooltip/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../';
+import type { PreparedBarXData } from './bar-x';
+import type { PreparedScatterData } from './scatter';
 import './styles.css';
+export type { PreparedBarXData } from './bar-x';
+export type { PreparedScatterData } from './scatter';
+export type ShapeData = PreparedBarXData | PreparedScatterData;
 type Args = {
     top: number;
     left: number;
     boundsWidth: number;
     boundsHeight: number;
+    dispatcher: Dispatch<object>;
     series: PreparedSeries[];
-    seriesOptions?: ChartKitWidgetSeriesOptions;
-    xAxis: ChartOptions['xAxis'];
-    yAxis: ChartOptions['yAxis'];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
     svgContainer: SVGSVGElement | null;
-    onSeriesMouseMove?: OnSeriesMouseMove;
-    onSeriesMouseLeave?: OnSeriesMouseLeave;
     xScale?: ChartScale;
     yScale?: ChartScale;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: ShapeData[];
 };
-export {};

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

@@ -1,46 +1,63 @@
 import React from 'react';
 import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
-import { BarXSeriesShapes } from './bar-x';
-import { ScatterSeriesShape } from './scatter';
+import { BarXSeriesShapes, prepareBarXData } from './bar-x';
+import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
 export const useShapes = (args) => {
-    const { top, left, boundsWidth, boundsHeight, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
-    const shapes = React.useMemo(() => {
+    const { top, left, boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
+    const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
-        return Array.from(groupedSeries).reduce((acc, item) => {
+        const shapesData = [];
+        const shapes = Array.from(groupedSeries).reduce((acc, item) => {
             const [seriesType, chartSeries] = item;
             switch (seriesType) {
                 case 'bar-x': {
                     if (xScale && yScale) {
-                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", series: chartSeries, seriesOptions: seriesOptions, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, top: top, left: left, svgContainer: svgContainer, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave }));
+                        const preparedData = prepareBarXData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
                     }
                     break;
                 }
                 case 'scatter': {
                     if (xScale && yScale) {
-                        const scatterShapes = chartSeries.map((scatterSeries, i) => {
-                            return (React.createElement(ScatterSeriesShape, { key: i, top: top, left: left, series: scatterSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
+                        const preparedData = prepareScatterData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis: yAxis[0],
+                            yScale,
                         });
-                        acc.push(...scatterShapes);
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, top: top, left: left, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                     }
                     break;
                 }
                 case 'pie': {
                     const groupedPieSeries = group(chartSeries, (pieSeries) => pieSeries.stackId);
                     acc.push(...Array.from(groupedPieSeries).map(([key, pieSeries]) => {
-                        return (React.createElement(PieSeriesComponent, { key: `pie-${key}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, series: pieSeries, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
+                        return (React.createElement(PieSeriesComponent, { key: `pie-${key}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, top: top, left: left, series: pieSeries, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                     }));
                 }
             }
             return acc;
         }, []);
+        return { shapes, shapesData };
     }, [
         boundsWidth,
         boundsHeight,
+        dispatcher,
         series,
+        seriesOptions,
         xAxis,
         xScale,
         yAxis,
@@ -48,8 +65,6 @@ export const useShapes = (args) => {
         svgContainer,
         left,
         top,
-        onSeriesMouseMove,
-        onSeriesMouseLeave,
     ]);
-    return { shapes };
+    return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
 };

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

@@ -1,13 +1,15 @@
 import React from 'react';
-import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import { PreparedPieSeries } from '../useSeries/types';
+import type { Dispatch } from 'd3';
+import { PreparedPieSeries, PreparedSeriesOptions } from '../useSeries/types';
 type PreparePieSeriesArgs = {
     boundsWidth: number;
     boundsHeight: number;
+    dispatcher: Dispatch<object>;
+    top: number;
+    left: number;
     series: PreparedPieSeries[];
+    seriesOptions: PreparedSeriesOptions;
     svgContainer: SVGSVGElement | null;
-    onSeriesMouseMove?: OnSeriesMouseMove;
-    onSeriesMouseLeave?: OnSeriesMouseLeave;
 };
 export declare function PieSeriesComponent(args: PreparePieSeriesArgs): React.JSX.Element;
 export {};