@gravity-ui/chartkit 5.5.0 → 5.6.0

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

@@ -49,13 +49,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,6 +59,10 @@ 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, _yMax] = seriesYScale.range();
             const seriesData = s.data.reduce((m, d) => {
                 return m.set(String(d.x), d);
             }, new Map());
@@ -74,7 +74,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,7 +110,7 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const y = yLinearScale(yValue.data.y);
+                const y = seriesYScale(yValue.data.y);
                 const height = plotHeight - y;
                 const barData = {
                     x,

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');

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/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/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.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",