@gravity-ui/chartkit 4.0.0 → 4.1.0

package/README.md

@@ -19,7 +19,8 @@ import '@gravity-ui/uikit/styles/styles.scss';
 ```typescript
 import {ThemeProvider} from '@gravity-ui/uikit';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
-import {YagrPlugin, YagrWidgetData} from '@gravity-ui/chartkit/build/plugins';
+import {YagrPlugin} from '@gravity-ui/chartkit/yagr';
+import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr';
 
 import '@gravity-ui/uikit/styles/styles.scss';
 

package/build/plugins/d3/renderer/D3Widget.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import { select } from 'd3';
 import debounce from 'lodash/debounce';
+import { getRandomCKId } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
     const handleResize = React.useCallback(() => {
-        if (ref.current) {
-            const { top, left, width, height } = ref.current.getBoundingClientRect();
+        var _a;
+        const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (parentElement) {
+            const { top, left, width, height } = parentElement.getBoundingClientRect();
             setDimensions({ top, left, width, height });
         }
     }, []);
@@ -25,16 +28,22 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     }), [handleResize]);
     React.useEffect(() => {
         const selection = select(window);
-        selection.on('resize', debuncedHandleResize);
+        // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
+        const eventName = `resize.${getRandomCKId()}`;
+        selection.on(eventName, debuncedHandleResize);
         return () => {
             // https://d3js.org/d3-selection/events#selection_on
-            selection.on('resize', null);
+            selection.on(eventName, null);
         };
     }, [debuncedHandleResize]);
     React.useEffect(() => {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%', position: 'relative' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
+    return (React.createElement("div", { ref: ref, style: {
+            width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
+            height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
+            position: 'relative',
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
 });
 export default D3Widget;

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

@@ -18,9 +18,6 @@ export const Chart = (props) => {
         width,
         height,
         margin: chart.margin,
-        legend,
-        title,
-        xAxis,
         yAxis,
     });
     const { preparedSeries, handleLegendItemClick } = useSeries({ series: data.series, legend });
@@ -51,10 +48,7 @@ export const Chart = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b({ hovered: chartHovered }), width: width, height: height, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[
-                    chart.margin.left,
-                    chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
-                ].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[chart.margin.left, chart.margin.top].join(',')})` },
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },

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

@@ -1,17 +1,13 @@
 import type { ChartMargin } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedLegend, PreparedTitle } from '../useChartOptions/types';
+import type { PreparedAxis } from '../useChartOptions/types';
 type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    legend: PreparedLegend;
-    title?: PreparedTitle;
-    xAxis?: PreparedAxis;
     yAxis?: PreparedAxis[];
 };
 export declare const useChartDimensions: (args: Args) => {
     boundsWidth: number;
     boundsHeight: number;
-    legendHeight: number;
 };
 export {};

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

@@ -1,11 +1,9 @@
 export const useChartDimensions = (args) => {
-    const { margin, legend, title, width, height, xAxis, yAxis } = args;
-    const titleHeight = (title === null || title === void 0 ? void 0 : title.height) || 0;
-    const xAxisTitleHeight = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.title.height) || 0;
+    const { margin, width, height, yAxis } = args;
     const yAxisTitleHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.reduce((acc, axis) => {
         return acc + (axis.title.height || 0);
     }, 0)) || 0;
     const boundsWidth = width - margin.right - margin.left - yAxisTitleHeight;
-    const boundsHeight = height - margin.top - margin.bottom - legend.height - titleHeight - xAxisTitleHeight;
-    return { boundsWidth, boundsHeight, legendHeight: legend.height };
+    const boundsHeight = height - margin.top - margin.bottom;
+    return { boundsWidth, boundsHeight };
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.d.ts

@@ -1,8 +1,10 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedChart } from './types';
+import type { PreparedAxis, PreparedChart, PreparedTitle, PreparedLegend } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartKitWidgetData['chart'];
     series: ChartKitWidgetData['series'];
+    preparedLegend: PreparedLegend;
     preparedXAxis: PreparedAxis;
     preparedY1Axis: PreparedAxis;
+    preparedTitle?: PreparedTitle;
 }) => PreparedChart;

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -42,26 +42,63 @@ const getAxisLabelMaxWidth = (args) => {
         .remove();
     return width;
 };
-export const getPreparedChart = (args) => {
-    const { chart, series, preparedXAxis, preparedY1Axis } = args;
-    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
-    let marginBottom = get(chart, 'margin.bottom', 0);
-    let marginLeft = get(chart, 'margin.left', 0);
+const getMarginTop = (args) => {
+    const { chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
-    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
+        marginTop +=
+            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+    }
+    if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
+        marginTop += preparedTitle.height;
+    }
+    return marginTop;
+};
+const getMarginBottom = (args) => {
+    const { chart, hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
+    let marginBottom = get(chart, 'margin.bottom', 0) + preparedLegend.height;
     if (hasAxisRelatedSeries) {
         marginBottom +=
-            preparedXAxis.labels.padding +
+            preparedXAxis.title.height +
                 getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
+        if (preparedXAxis.labels.enabled) {
+            marginBottom += preparedXAxis.labels.padding;
+        }
+    }
+    return marginBottom;
+};
+const getMarginLeft = (args) => {
+    const { chart, hasAxisRelatedSeries, series, preparedY1Axis } = args;
+    let marginLeft = get(chart, 'margin.left', 0);
+    if (hasAxisRelatedSeries) {
         marginLeft +=
             AXIS_WIDTH +
                 preparedY1Axis.labels.padding +
                 getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
-                (preparedY1Axis.title.height || 0);
-        marginTop +=
-            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+                preparedY1Axis.title.height;
+    }
+    return marginLeft;
+};
+const getMarginRight = (args) => {
+    const { chart, hasAxisRelatedSeries, series, preparedXAxis } = args;
+    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
         marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
     }
+    return marginRight;
+};
+export const getPreparedChart = (args) => {
+    const { chart, series, preparedLegend, preparedXAxis, preparedY1Axis, preparedTitle } = args;
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    const marginTop = getMarginTop({ chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle });
+    const marginBottom = getMarginBottom({
+        chart,
+        hasAxisRelatedSeries,
+        preparedLegend,
+        preparedXAxis,
+    });
+    const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, series, preparedY1Axis });
+    const marginRight = getMarginRight({ chart, hasAxisRelatedSeries, series, preparedXAxis });
     return {
         margin: {
             top: marginTop,

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

@@ -16,6 +16,8 @@ export const useChartOptions = (args) => {
         const preparedChart = getPreparedChart({
             chart,
             series,
+            preparedTitle,
+            preparedLegend,
             preparedXAxis,
             preparedY1Axis: preparedYAxis[0],
         });

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

@@ -93,7 +93,7 @@ export function BarXSeriesShapes(args) {
                     .attr('y', (d) => d.y)
                     .attr('height', (d) => d.height)
                     .attr('width', (d) => d.width)
-                    .attr('fill', item.color)
+                    .attr('fill', (d) => d.data.color || item.color)
                     .on('mousemove', (e, point) => {
                     const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { group } from 'd3';
+import { getRandomCKId } from '../../../../../utils';
 import { getOnlyVisibleSeries } from '../../utils';
 import { BarXSeriesShapes } from './bar-x';
-import { prepareScatterSeries } from './scatter';
+import { ScatterSeriesShape } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
 export const useShapes = (args) => {
@@ -15,29 +16,22 @@ export const useShapes = (args) => {
             switch (seriesType) {
                 case 'bar-x': {
                     if (xScale && yScale) {
-                        acc.push(React.createElement(BarXSeriesShapes, Object.assign({}, args, { key: "bar-x", series: chartSeries, xScale: xScale, yScale: yScale })));
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", series: chartSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, top: top, left: left, svgContainer: svgContainer, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave }));
                     }
                     break;
                 }
                 case 'scatter': {
                     if (xScale && yScale) {
-                        acc.push(...prepareScatterSeries({
-                            top,
-                            left,
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            onSeriesMouseMove,
-                            onSeriesMouseLeave,
-                            svgContainer,
-                        }));
+                        const scatterShapes = chartSeries.map((scatterSeries, i) => {
+                            const id = getRandomCKId();
+                            return (React.createElement(ScatterSeriesShape, { key: `${i}-${id}`, top: top, left: left, series: scatterSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
+                        });
+                        acc.push(...scatterShapes);
                     }
                     break;
                 }
                 case 'pie': {
-                    const groupedPieSeries = group(chartSeries, (item) => item.stackId);
+                    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 }));
                     }));
@@ -54,6 +48,8 @@ export const useShapes = (args) => {
         yAxis,
         yScale,
         svgContainer,
+        left,
+        top,
         onSeriesMouseMove,
         onSeriesMouseLeave,
     ]);

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

@@ -3,10 +3,10 @@ import { ChartOptions } from '../useChartOptions/types';
 import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { ScatterSeries } from '../../../../../types/widget-data';
-type PrepareScatterSeriesArgs = {
+type ScatterSeriesShapeProps = {
     top: number;
     left: number;
-    series: ScatterSeries[];
+    series: ScatterSeries;
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
@@ -15,5 +15,5 @@ type PrepareScatterSeriesArgs = {
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
 };
-export declare function prepareScatterSeries(args: PrepareScatterSeriesArgs): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
-import { pointer } from 'd3';
+import { pointer, select } from 'd3';
 import React from 'react';
 import { block } from '../../../../../utils/cn';
-import { getRandomCKId } from '../../../../../utils';
 const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const prepareCategoricalScatterData = (data) => {
@@ -10,11 +9,9 @@ const prepareCategoricalScatterData = (data) => {
 const prepareLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
-const getPointProperties = (args) => {
-    const { point, xAxis, xScale, yAxis, yScale } = args;
-    const r = point.radius || DEFAULT_SCATTER_POINT_RADIUS;
+const getCxAttr = (args) => {
+    const { point, xAxis, xScale } = args;
     let cx;
-    let cy;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
         cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2;
@@ -23,6 +20,11 @@ const getPointProperties = (args) => {
         const xLinearScale = xScale;
         cx = xLinearScale(point.x);
     }
+    return cx;
+};
+const getCyAttr = (args) => {
+    const { point, yAxis, yScale } = args;
+    let cy;
     if (yAxis[0].type === 'category') {
         const yBandScale = yScale;
         cy = (yBandScale(point.category) || 0) + yBandScale.step() / 2;
@@ -31,35 +33,57 @@ const getPointProperties = (args) => {
         const yLinearScale = yScale;
         cy = yLinearScale(point.y);
     }
-    return { r, cx, cy };
+    return cy;
 };
-export function prepareScatterSeries(args) {
-    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
-    return series.reduce((result, s) => {
+export function ScatterSeriesShape(props) {
+    const { series, xAxis, xScale, yAxis, yScale, svgContainer, left, top, onSeriesMouseMove, onSeriesMouseLeave, } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         var _a;
-        const randomKey = getRandomCKId();
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
         const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
-            ? prepareCategoricalScatterData(s.data)
-            : prepareLinearScatterData(s.data);
-        result.push(...preparedData.map((point, i) => {
-            const pointProps = getPointProperties({
-                point,
-                xAxis,
-                xScale,
-                yAxis,
-                yScale,
+            ? prepareCategoricalScatterData(series.data)
+            : prepareLinearScatterData(series.data);
+        svgElement
+            .selectAll('allPoints')
+            .data(preparedData)
+            .enter()
+            .append('circle')
+            .attr('class', b('point'))
+            .attr('fill', (d) => d.color || series.color || '')
+            .attr('r', (d) => d.radius || DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('cx', (d) => getCxAttr({ point: d, xAxis, xScale }))
+            .attr('cy', (d) => getCyAttr({ point: d, yAxis, yScale }))
+            .on('mousemove', (e, d) => {
+            const [x, y] = pointer(e, svgContainer);
+            onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                hovered: {
+                    data: d,
+                    series,
+                },
+                pointerPosition: [x - left, y - top],
             });
-            return (React.createElement("circle", Object.assign({ key: `${i}-${randomKey}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
-                    const [x, y] = pointer(e, svgContainer);
-                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
-                        hovered: {
-                            data: point,
-                            series: s,
-                        },
-                        pointerPosition: [x - left, y - top],
-                    });
-                }, onMouseLeave: onSeriesMouseLeave })));
-        }));
-        return result;
-    }, []);
+        })
+            .on('mouseleave', () => {
+            if (onSeriesMouseLeave) {
+                onSeriesMouseLeave();
+            }
+        });
+    }, [
+        series,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer,
+        left,
+        top,
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+    ]);
+    return React.createElement("g", { ref: ref, className: b() });
 }

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

@@ -22,6 +22,8 @@ export type BaseSeriesData<T = any> = {
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
 };
 export type BaseTextStyle = {
     fontSize: string;

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

@@ -5,8 +5,6 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     value: number;
     /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
-    /** Individual color for the pie segment. */
-    color?: string;
     /** Initial visibility of the pie segment. */
     visible?: boolean;
     /** Initial data label of the pie segment. If not specified, the value is used. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.0.0",
+  "version": "4.1.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": "^3.7.10",
+    "@gravity-ui/yagr": "^3.7.13",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"