@gravity-ui/chartkit 5.4.0 → 5.6.0

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/prepare-data.js

@@ -0,0 +1,132 @@
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import { getLabelsSize } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getXValue, getYValue } from '../utils';
+function getLabelData(d, plotHeight) {
+    if (!d.series.dataLabels.enabled) {
+        return undefined;
+    }
+    const text = String(d.data.label || d.subTotal);
+    const style = d.series.dataLabels.style;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    let y;
+    if (Number(d.data.y) > 0 || d.data.total) {
+        y = Math.max(height, d.y - d.series.dataLabels.padding);
+    }
+    else {
+        y = Math.min(plotHeight - d.series.dataLabels.padding, d.y + d.height + d.series.dataLabels.padding + height);
+    }
+    return {
+        text,
+        x: d.x + d.width / 2,
+        y,
+        style,
+        size: { width, height },
+        textAnchor: 'middle',
+        series: d.series,
+    };
+}
+function getBandWidth(args) {
+    const { series, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        return xBandScale.bandwidth();
+    }
+    const xLinearScale = xScale;
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+        return acc;
+    }, []);
+    let bandWidth = Infinity;
+    xValues.sort().forEach((xValue, index) => {
+        if (index > 0 && xValue !== xValues[index - 1]) {
+            const dist = xLinearScale(xValue) - xLinearScale(xValues[index - 1]);
+            if (dist < bandWidth) {
+                bandWidth = dist;
+            }
+        }
+    });
+    return bandWidth;
+}
+export const prepareWaterfallData = (args) => {
+    const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
+    const barPadding = get(seriesOptions, 'waterfall.barPadding');
+    const flattenData = series.reduce((acc, s) => {
+        acc.push(...s.data.map((d) => ({ data: d, series: s })));
+        return acc;
+    }, []);
+    const data = sortBy(flattenData, (d) => d.data.x);
+    const bandWidth = getBandWidth({
+        series,
+        xAxis,
+        xScale,
+    });
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
+    const yZero = getYValue({
+        point: { y: 0 },
+        yScale,
+        yAxis,
+    });
+    let totalValue = 0;
+    const result = [];
+    data.forEach((item, _index) => {
+        if (typeof item.data.y !== 'number' && !item.data.total) {
+            return;
+        }
+        if (!item.data.total) {
+            totalValue += Number(item.data.y);
+        }
+        const prevPoint = result[result.length - 1];
+        const xCenter = getXValue({ point: item.data, xAxis, xScale });
+        const x = xCenter - rectWidth / 2;
+        const yValue = Number(item.data.total ? totalValue : item.data.y);
+        const height = yZero -
+            getYValue({
+                point: { y: Math.abs(yValue) },
+                yScale,
+                yAxis,
+            });
+        let y;
+        if (!prevPoint || item.data.total) {
+            y = getYValue({
+                point: {
+                    y: yValue > 0 ? yValue : 0,
+                },
+                yScale,
+                yAxis,
+            });
+        }
+        else if (Number(prevPoint.data.y) < 0) {
+            if (Number(item.data.y) > 0) {
+                y = prevPoint.y + prevPoint.height - height;
+            }
+            else {
+                y = prevPoint.y + prevPoint.height;
+            }
+        }
+        else if (Number(item.data.y) < 0) {
+            y = prevPoint.y;
+        }
+        else {
+            y = prevPoint.y - height;
+        }
+        const preparedData = {
+            x,
+            y,
+            width: rectWidth,
+            height,
+            opacity: get(item.data, 'opacity', null),
+            data: item.data,
+            series: item.series,
+            subTotal: totalValue,
+        };
+        preparedData.label = getLabelData(preparedData, plotHeight);
+        result.push(preparedData);
+    });
+    return result;
+};

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.d.ts

@@ -0,0 +1,14 @@
+import { WaterfallSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
+import { PreparedWaterfallSeries } from '../../useSeries/types';
+export type PreparedWaterfallData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number | null;
+    series: PreparedWaterfallSeries;
+    data: WaterfallSeriesData;
+    label?: LabelData;
+    subTotal: number;
+};

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/d3/renderer/utils/get-closest-data.js

@@ -45,7 +45,18 @@ export function getClosestPoints(args) {
                     y0: d.y,
                     y1: d.y + d.height,
                 }));
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'waterfall': {
+                const points = list.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    x: d.x + d.width / 2,
+                    y0: d.y,
+                    y1: d.y + d.height,
+                }));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'area': {
@@ -59,12 +70,12 @@ export function getClosestPoints(args) {
                     })));
                     return acc;
                 }, []);
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'line': {
                 const points = list.reduce((acc, d) => {
-                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                    acc.push(...d.points.map((p) => ({
                         data: p.data,
                         series: p.series,
                         x: p.x,
@@ -73,7 +84,7 @@ export function getClosestPoints(args) {
                     })));
                     return acc;
                 }, []);
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'bar-y': {
@@ -96,7 +107,7 @@ export function getClosestPoints(args) {
                         closestXIndex = closestPoints.findIndex((p) => pointerX > p.x && pointerX < p.x + p.width);
                     }
                 }
-                Array.prototype.push.apply(result, closestPoints.map((p, i) => ({
+                result.push(...closestPoints.map((p, i) => ({
                     data: p.data,
                     series: p.series,
                     closest: i === closestXIndex,

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -7,6 +7,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];

package/build/plugins/d3/renderer/utils/index.js

@@ -13,6 +13,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 /**
  * Checks whether the series should be drawn with axes.
@@ -70,6 +71,16 @@ export const getDomainDataYBySeries = (series) => {
                 });
                 break;
             }
+            case 'waterfall': {
+                let yValue = 0;
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        yValue += Number(d.y) || 0;
+                        acc.push(yValue);
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.y));

package/build/plugins/d3/renderer/utils/series/index.d.ts

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/index.js

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/waterfall.d.ts

@@ -0,0 +1,4 @@
+import { WaterfallSeriesData } from '../../../../../types';
+import { PreparedWaterfallSeries } from '../../hooks';
+export declare function getWaterfallPointColor(point: WaterfallSeriesData, series: PreparedWaterfallSeries): string;
+export declare function getWaterfallPointSubtotal(point: WaterfallSeriesData, series: PreparedWaterfallSeries): number | null;

package/build/plugins/d3/renderer/utils/series/waterfall.js

@@ -0,0 +1,25 @@
+export function getWaterfallPointColor(point, series) {
+    if (point.color) {
+        return point.color;
+    }
+    if (point.total) {
+        return series.color;
+    }
+    if (Number(point.y) > 0) {
+        return series.positiveColor;
+    }
+    return series.negativeColor;
+}
+export function getWaterfallPointSubtotal(point, series) {
+    const pointIndex = series.data.indexOf(point);
+    if (pointIndex === -1) {
+        return null;
+    }
+    return series.data.reduce((sum, d, index) => {
+        if (index <= pointIndex) {
+            const value = d.total ? 0 : Number(d.y);
+            return sum + value;
+        }
+        return sum;
+    }, 0);
+}

package/build/plugins/d3/renderer/utils/text.js

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { select } from 'd3-selection';
 export function setEllipsisForOverflowText(selection, maxWidth) {
     var _a, _b, _c, _d;
     let text = selection.text();

package/build/plugins/d3/renderer/validation/index.js

@@ -6,9 +6,19 @@ import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../../libs';
 import { DEFAULT_AXIS_TYPE } from '../constants';
 const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
 const validateXYSeries = (args) => {
-    const { series, xAxis, yAxis } = args;
+    const { series, xAxis, yAxis = [] } = args;
+    const yAxisIndex = get(series, 'yAxis', 0);
+    const seriesYAxis = yAxis[yAxisIndex];
+    if (yAxisIndex !== 0 && typeof seriesYAxis === 'undefined') {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-y-axis-index', {
+                index: yAxisIndex,
+            }),
+        });
+    }
     const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
-    const yType = get(yAxis, 'type', DEFAULT_AXIS_TYPE);
+    const yType = get(seriesYAxis, 'type', DEFAULT_AXIS_TYPE);
     series.data.forEach(({ x, y }) => {
         switch (xType) {
             case 'category': {
@@ -203,7 +213,6 @@ export const validateData = (data) => {
         });
     }
     data.series.data.forEach((series) => {
-        var _a;
-        validateSeries({ series, yAxis: (_a = data.yAxis) === null || _a === void 0 ? void 0 : _a[0], xAxis: data.xAxis });
+        validateSeries({ series, yAxis: data.yAxis, xAxis: data.xAxis });
     });
 };

package/build/plugins/d3/utils/pie-center-text.js

@@ -1,4 +1,4 @@
-import { create } from 'd3';
+import { create } from 'd3-selection';
 import get from 'lodash/get';
 import { getLabelsSize } from '../renderer/utils';
 const MAX_FONT_SIZE = 64;

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -363,6 +363,11 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                         mouseOut: () => void;
                         click: (event: any) => void;
                     };
+                    point: {
+                        events: {
+                            click: () => false;
+                        };
+                    };
                     marker: {
                         states: {
                             hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.d.ts

@@ -526,6 +526,11 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
                 mouseOut: () => void;
                 click: (event: any) => void;
             };
+            point: {
+                events: {
+                    click: () => false;
+                };
+            };
             marker: {
                 states: {
                     hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1264,6 +1264,14 @@ export function prepareConfig(data, options, isMobile, holidays) {
                         }
                     },
                 },
+                point: {
+                    events: {
+                        click: function () {
+                            // Prevent slicing of pie segment after clicking it
+                            return false;
+                        },
+                    },
+                },
                 marker: options.splitTooltip
                     ? {
                         states: {

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -57,7 +57,7 @@ const first = {
 };
 const second = {
     allowPointSelect: true,
-    slicedOffset: 0,
+    slicedOffset: 20,
     cursor: 'pointer',
     showInLegend: true,
 };

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -357,6 +357,11 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                     mouseOut: () => void;
                     click: (event: any) => void;
                 };
+                point: {
+                    events: {
+                        click: () => false;
+                    };
+                };
                 marker: {
                     states: {
                         hover: {

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

@@ -70,4 +70,6 @@ export type AreaSeries<T = any> = BaseSeries & {
     };
     /** Options for the point markers of line in area series */
     marker?: AreaMarkerOptions;
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
 };

package/build/types/widget-data/bar-x.d.ts

@@ -61,4 +61,6 @@ export type BarXSeries<T = any> = BaseSeries & {
     legend?: ChartKitWidgetLegend & {
         symbol?: RectLegendSymbolOptions;
     };
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
 };

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

@@ -19,6 +19,7 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

package/build/types/widget-data/index.js

@@ -13,3 +13,4 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';

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

@@ -51,4 +51,6 @@ export type LineSeries<T = any> = BaseSeries & {
     linecap?: `${LineCap}`;
     /** Individual opacity for the line. */
     opacity?: number;
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
 };

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

@@ -40,4 +40,6 @@ export type ScatterSeries<T = any> = BaseSeries & {
     legend?: ChartKitWidgetLegend & {
         symbol?: RectLegendSymbolOptions;
     };
+    /** Y-axis index (when using two axes) */
+    yAxis?: number;
 };

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

@@ -9,8 +9,9 @@ import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T>;
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -202,5 +203,23 @@ export type ChartKitWidgetSeriesOptions = {
             inactive?: BasicInactiveState;
         };
     };
+    waterfall?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 };
 export {};

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

@@ -6,6 +6,7 @@ import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -50,7 +51,11 @@ export type TooltipDataChunkTreemap<T = any> = {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 };
-export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>) & {
+export type TooltipDataChunkWaterfall<T = any> = {
+    data: WaterfallSeriesData<T>;
+    series: WaterfallSeries<T>;
+};
+export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
 export type ChartKitWidgetTooltip<T = any> = {

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

@@ -0,0 +1,39 @@
+import { SeriesType } from '../../constants';
+import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+export type WaterfallSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * The `x` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     */
+    y?: number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+    /** Individual opacity for the point. */
+    opacity?: number;
+    /** When this property is true, the point display the total sum across the entire series. */
+    total?: boolean;
+};
+export type WaterfallSeries<T = any> = BaseSeries & {
+    type: typeof SeriesType.Waterfall;
+    data: WaterfallSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** The color used for positive values. If it is not specified, the general color of the series is used. */
+    positiveColor?: string;
+    /** The color used for negative values. If it is not specified, the general color of the series is used. */
+    negativeColor?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+};

package/build/types/widget-data/waterfall.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -75,6 +75,7 @@
     "@storybook/react": "^7.0.26",
     "@storybook/react-webpack5": "^7.0.26",
     "@types/d3": "^7.4.0",
+    "@types/d3-selection": "^3.0.10",
     "@types/jest": "^28.1.3",
     "@types/lodash": "^4.14.177",
     "@types/node": "^18.0.0",