@gravity-ui/chartkit 5.5.0 → 5.7.0

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

@@ -8,9 +8,9 @@ export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
-    radius: number;
     borderColor: string;
     borderWidth: number;
+    radius: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

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

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

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

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

@@ -76,6 +76,7 @@ export type PreparedScatterSeries = {
             };
         };
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
@@ -89,6 +90,7 @@ export type PreparedBarXSeries = {
         allowOverlap: boolean;
         padding: number;
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarYSeries = {
     type: BarYSeries['type'];
@@ -164,6 +166,7 @@ export type PreparedLineSeries = {
     dashStyle: DashStyle;
     linecap: LineCap;
     opacity: number | null;
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];
@@ -196,6 +199,7 @@ export type PreparedAreaSeries = {
             };
         };
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedTreemapSeries = {
     type: TreemapSeries['type'];

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

@@ -7,5 +7,6 @@ export declare const prepareAreaData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
+    boundsHeight: number;
 }) => PreparedAreaData[];

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

@@ -1,5 +1,5 @@
 import { group, sort } from 'd3';
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
@@ -28,9 +28,12 @@ function getLabelData(point, series, xMax) {
     return labelData;
 }
 function getXValues(series, xAxis, xScale) {
+    const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
         s.data.forEach((d) => {
-            const key = String(d.x);
+            const key = String(xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x);
             if (!acc.has(key)) {
                 acc.set(key, getXValue({ point: d, xAxis, xScale }));
             }
@@ -38,7 +41,7 @@ function getXValues(series, xAxis, xScale) {
         return acc;
     }, new Map());
     if (xAxis.type === 'category') {
-        return (xAxis.categories || []).reduce((acc, category) => {
+        return categories.reduce((acc, category) => {
             const xValue = xValues.get(category);
             if (typeof xValue === 'number') {
                 acc.push([category, xValue]);
@@ -49,13 +52,9 @@ function getXValues(series, xAxis, xScale) {
     return sort(Array.from(xValues), ([_x, xValue]) => xValue);
 }
 export const prepareAreaData = (args) => {
-    const { series, xAxis, xScale, yScale } = args;
-    const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
-    const yAxis = args.yAxis[0];
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
-    const [yMin, _yMax] = yScale.range();
     return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
         const xValues = getXValues(seriesStack, xAxis, xScale);
         const accumulatedYValues = new Map();
@@ -63,8 +62,19 @@ export const prepareAreaData = (args) => {
             accumulatedYValues.set(key, 0);
         });
         const seriesStackData = seriesStack.reduce((acc, s) => {
+            const yAxisIndex = s.yAxis;
+            const seriesYAxis = yAxis[yAxisIndex];
+            const seriesYScale = yScale[yAxisIndex];
+            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
             const seriesData = s.data.reduce((m, d) => {
-                return m.set(String(d.x), d);
+                const key = String(xAxis.type === 'category'
+                    ? getDataCategoryValue({
+                        axisDirection: 'x',
+                        categories: xAxis.categories || [],
+                        data: d,
+                    })
+                    : d.x);
+                return m.set(key, d);
             }, new Map());
             const points = xValues.reduce((pointsAcc, [x, xValue]) => {
                 const accumulatedYValue = accumulatedYValues.get(x) || 0;
@@ -74,7 +84,8 @@ export const prepareAreaData = (args) => {
                         // FIXME: think about how to break the series into separate areas(null Y values)
                         y: 0,
                     };
-                const yValue = getYValue({ point: d, yAxis, yScale }) - accumulatedYValue;
+                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }) -
+                    accumulatedYValue;
                 accumulatedYValues.set(x, yMin - yValue);
                 pointsAcc.push({
                     y0: yMin - accumulatedYValue,

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

@@ -8,5 +8,6 @@ export declare const prepareBarXData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
+    boundsHeight: number;
 }) => PreparedBarXData[];

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

@@ -24,9 +24,7 @@ function getLabelData(d) {
     };
 }
 export const prepareBarXData = (args) => {
-    const { series, seriesOptions, xAxis, xScale, yScale } = args;
-    const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
@@ -100,6 +98,8 @@ export const prepareBarXData = (args) => {
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
             sortedData.forEach((yValue) => {
+                const yAxisIndex = yValue.series.yAxis;
+                const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
@@ -110,11 +110,13 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const y = yLinearScale(yValue.data.y);
-                const height = plotHeight - y;
+                const yDataValue = yValue.data.y;
+                const y = seriesYScale(yDataValue);
+                const base = seriesYScale(0);
+                const height = yDataValue > 0 ? base - y : y - base;
                 const barData = {
                     x,
-                    y: y - stackHeight,
+                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
                     width: rectWidth,
                     height,
                     opacity: get(yValue.data, 'opacity', null),

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

@@ -8,5 +8,5 @@ export declare const prepareBarYData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
 }) => PreparedBarYData[];

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

@@ -48,7 +48,7 @@ function getBandWidth(series, yAxis, yScale) {
     return bandWidth;
 }
 export const prepareBarYData = (args) => {
-    const { series, seriesOptions, yAxis, xScale, yScale } = args;
+    const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
     const plotWidth = xLinearScale(xLinearScale.domain()[1]);
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
@@ -81,7 +81,8 @@ export const prepareBarYData = (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            let stackSum = 0;
+            const base = xLinearScale(0);
+            let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -97,9 +98,10 @@ export const prepareBarYData = (args) => {
                     center = scale(Number(yValue));
                 }
                 const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
-                const width = xLinearScale(data.x);
+                const xValue = Number(data.x);
+                const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
                 stackItems.push({
-                    x: stackSum,
+                    x: xValue > 0 ? stackSum : stackSum - width,
                     y,
                     width,
                     height: barHeight,

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

@@ -23,7 +23,7 @@ type Args = {
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
-    yScale?: ChartScale;
+    yScale?: ChartScale[];
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -32,6 +32,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            boundsHeight,
                         });
                         acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
                         shapesData.push(...preparedData);
@@ -90,6 +91,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            boundsHeight,
                         });
                         acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
                         shapesData.push(...preparedData);
@@ -102,7 +104,7 @@ export const useShapes = (args) => {
                             series: chartSeries,
                             xAxis,
                             xScale,
-                            yAxis: yAxis[0],
+                            yAxis,
                             yScale,
                         });
                         acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));

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

@@ -7,5 +7,5 @@ export declare const prepareLineData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
 }) => PreparedLineData[];

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

@@ -32,9 +32,10 @@ export const prepareLineData = (args) => {
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     return series.reduce((acc, s) => {
+        const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, xAxis, xScale }),
-            y: getYValue({ point: d, yAxis, yScale }),
+            y: getYValue({ point: d, yAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

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

@@ -6,6 +6,6 @@ export declare const prepareScatterData: (args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis;
-    yScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
 }) => PreparedScatterData[];

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

@@ -6,7 +6,10 @@ const getFilteredLinearScatterData = (data) => {
 export const prepareScatterData = (args) => {
     const { series, xAxis, xScale, yAxis, yScale } = args;
     return series.reduce((acc, s) => {
-        const filteredData = xAxis.type === 'category' || yAxis.type === 'category'
+        const yAxisIndex = get(s, 'yAxis', 0);
+        const seriesYAxis = yAxis[yAxisIndex];
+        const seriesYScale = yScale[yAxisIndex];
+        const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
             ? s.data
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
@@ -15,7 +18,7 @@ export const prepareScatterData = (args) => {
                     data: d,
                     series: s,
                     x: getXValue({ point: d, xAxis, xScale }),
-                    y: getYValue({ point: d, yAxis, yScale }),
+                    y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
                     opacity: get(d, 'opacity', null),
                 },
                 hovered: false,

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

@@ -8,5 +8,5 @@ export declare const prepareWaterfallData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
 }) => PreparedWaterfallData[];

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

@@ -50,7 +50,7 @@ function getBandWidth(args) {
     return bandWidth;
 }
 export const prepareWaterfallData = (args) => {
-    const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale, } = 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');

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

@@ -8,6 +8,7 @@ export * from './axis';
 export * from './labels';
 export * from './symbol';
 export * from './series';
+export declare const CHART_SERIES_WITH_VOLUME: ChartKitWidgetSeries['type'][];
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
@@ -39,6 +40,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
     }[];
 };
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => number[];
+export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends {

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

@@ -15,6 +15,11 @@ export * from './labels';
 export * from './symbol';
 export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
+export const CHART_SERIES_WITH_VOLUME = [
+    'bar-x',
+    'area',
+    'waterfall',
+];
 /**
  * Checks whether the series should be drawn with axes.
  *
@@ -41,6 +46,12 @@ export const getDomainDataXBySeries = (series) => {
         return acc;
     }, []);
 };
+export function getDefaultMaxXAxisValue(series) {
+    if (series.some((s) => s.type === 'bar-y')) {
+        return 0;
+    }
+    return undefined;
+}
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {

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/helpers/config/config.js

@@ -1328,8 +1328,8 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     // Callback setExtremes used because of it obligatory invocation on every zoom event
                     // setTimeout used because of absence resetZoomButton node in dom on first zoom event
                     setTimeout(() => {
-                        var _a;
-                        const text = (_a = this.chart.resetZoomButton) === null || _a === void 0 ? void 0 : _a.text;
+                        var _a, _b;
+                        const text = (_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoomButton) === null || _b === void 0 ? void 0 : _b.text;
                         if (text) {
                             text.translate(0, -6);
                         }

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.5.0",
+  "version": "5.7.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",