@gravity-ui/chartkit 4.21.1 → 4.22.0

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

@@ -13,6 +13,7 @@ import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
+    var _a, _b;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const dispatcher = React.useMemo(() => {
@@ -60,15 +61,15 @@ export const Chart = (props) => {
         yScale,
         svgContainer: svgRef.current,
     });
+    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click) {
-            dispatcher.on('click-chart', (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.click);
+        if (clickHandler) {
+            dispatcher.on('click-chart', clickHandler);
         }
         return () => {
             dispatcher.on('click-chart', null);
         };
-    }, [dispatcher]);
+    }, [dispatcher, clickHandler]);
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
     return (React.createElement(React.Fragment, null,

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

@@ -54,6 +54,7 @@ export function prepareArea(args) {
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
             },
             marker: prepareMarker(series, seriesOptions),
+            cursor: get(series, 'cursor', null),
         };
         return prepared;
     }, []);

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

@@ -30,6 +30,7 @@ export function prepareBarXSeries(args) {
                 allowOverlap: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.allowOverlap) || false,
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
             },
+            cursor: get(series, 'cursor', null),
         };
     }, []);
 }

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

@@ -40,6 +40,7 @@ export function prepareBarYSeries(args) {
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
+            cursor: get(series, 'cursor', null),
         };
     }, []);
 }

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

@@ -73,6 +73,7 @@ export function prepareLineSeries(args) {
             dashStyle: dashStyle,
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
             opacity: get(series, 'opacity', null),
+            cursor: get(series, 'cursor', null),
         };
         return prepared;
     }, []);

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

@@ -53,6 +53,7 @@ export function preparePieSeries(args) {
             },
             renderCustomShape: series.renderCustomShape,
             opacity: get(dataItem, 'opacity', null),
+            cursor: get(series, 'cursor', null),
         };
         return result;
     });

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

@@ -39,6 +39,7 @@ export function prepareScatterSeries(args) {
             },
             data: s.data,
             marker: prepareMarker(s, seriesOptions, index),
+            cursor: get(s, 'cursor', null),
         };
         return prepared;
     }, []);

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

@@ -10,7 +10,7 @@ export function prepareTreemap(args) {
         const id = getRandomCKId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
-        return {
+        const preparedSeries = {
             color,
             data: s.data,
             dataLabels: {
@@ -29,6 +29,8 @@ export function prepareTreemap(args) {
             },
             levels: s.levels,
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
+            cursor: get(s, 'cursor', null),
         };
+        return preparedSeries;
     });
 }

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

@@ -53,6 +53,7 @@ type BasePreparedSeries = {
         enabled: boolean;
         symbol: PreparedLegendSymbol;
     };
+    cursor: string | null;
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
@@ -206,7 +207,7 @@ export type PreparedTreemapSeries = {
         allowOverlap: boolean;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
-} & BasePreparedSeries & TreemapSeries;
+} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;

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

@@ -25,7 +25,8 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('shape')
             .data(preparedData)
             .join('g')
-            .attr('class', b('series'));
+            .attr('class', b('series'))
+            .attr('cursor', (d) => d.series.cursor);
         shapeSelection
             .append('path')
             .attr('class', b('line'))

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

@@ -28,7 +28,8 @@ export const BarXSeriesShapes = (args) => {
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.data.color || d.series.color)
-            .attr('opacity', (d) => d.opacity);
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
         if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
             dataLabels = filterOverlappingLabels(dataLabels);

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

@@ -24,7 +24,8 @@ export const BarYSeriesShapes = (args) => {
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.color)
-            .attr('opacity', (d) => d.data.opacity || null);
+            .attr('opacity', (d) => d.data.opacity || null)
+            .attr('cursor', (d) => d.series.cursor);
         const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
         const labelSelection = svgElement
             .selectAll('text')

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

@@ -32,7 +32,8 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-linejoin', (d) => d.linecap)
             .attr('stroke-linecap', (d) => d.linecap)
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
-            .attr('opacity', (d) => d.opacity);
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);

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

@@ -33,7 +33,8 @@ export function PieSeriesShapes(args) {
             return `translate(${x}, ${y})`;
         })
             .style('stroke', (pieData) => pieData.borderColor)
-            .style('stroke-width', (pieData) => pieData.borderWidth);
+            .style('stroke-width', (pieData) => pieData.borderWidth)
+            .attr('cursor', (pieData) => pieData.series.cursor);
         // Render halo appearing outside the hovered slice
         shapesSelection
             .selectAll('halo')

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

@@ -23,7 +23,8 @@ export function ScatterSeriesShape(props) {
             .join('g')
             .call(renderMarker)
             .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
-            .attr('opacity', (d) => d.point.opacity);
+            .attr('opacity', (d) => d.point.opacity)
+            .attr('cursor', (d) => d.point.series.cursor);
         const getSelectedPoint = (element) => {
             return select(element).datum();
         };

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

@@ -18,7 +18,8 @@ export const TreemapSeriesShape = (props) => {
             .selectAll('g')
             .data(leaves)
             .join('g')
-            .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
+            .attr('transform', (d) => `translate(${d.x0},${d.y0})`)
+            .attr('cursor', series.cursor);
         const rectSelection = leaf
             .append('rect')
             .attr('id', (d) => d.id || d.name)

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

@@ -22,6 +22,8 @@ export type BaseSeries = {
          * */
         allowOverlap?: boolean;
     };
+    /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
+    cursor?: string;
 };
 export type BaseSeriesData<T = any> = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.21.1",
+  "version": "4.22.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",