@gravity-ui/charts 1.24.0 → 1.24.2

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -1,33 +1,7 @@
 import { group } from 'd3';
-import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
-async function getLabelData(point, series, xMax) {
-    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
-    const style = series.dataLabels.style;
-    const size = await getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
-    const labelData = {
-        text,
-        x: point.x,
-        y: point.y - series.dataLabels.padding,
-        style,
-        size: { width: size.maxWidth, height: size.maxHeight },
-        textAnchor: 'middle',
-        series: series,
-        active: true,
-    };
-    const left = getLeftPosition(labelData);
-    if (left < 0) {
-        labelData.x = labelData.x + Math.abs(left);
-    }
-    else {
-        const right = left + labelData.size.width;
-        if (right > xMax) {
-            labelData.x = labelData.x - (right - xMax);
-        }
-    }
-    return labelData;
-}
 function getXValues(series, xAxis, xScale) {
     const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
@@ -53,148 +27,175 @@ function getXValues(series, xAxis, xScale) {
     }
     return Array.from(xValues);
 }
+async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
+    const svgLabels = [];
+    const htmlLabels = [];
+    const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
+    for (let pointsIndex = 0; pointsIndex < points.length; pointsIndex++) {
+        const point = points[pointsIndex];
+        if (point.y === null) {
+            continue;
+        }
+        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
+        if (series.dataLabels.html) {
+            const size = await getLabelsSize({
+                labels: [text],
+                style: series.dataLabels.style,
+                html: series.dataLabels.html,
+            });
+            const labelSize = { width: size.maxWidth, height: size.maxHeight };
+            const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
+            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height);
+            htmlLabels.push({
+                x,
+                y,
+                content: text,
+                size: labelSize,
+                style: series.dataLabels.style,
+            });
+        }
+        else {
+            const labelSize = await getTextSize(text);
+            const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
+            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height);
+            svgLabels.push({
+                text,
+                x,
+                y,
+                style: series.dataLabels.style,
+                size: labelSize,
+                textAnchor: 'start',
+                series,
+                active: true,
+            });
+        }
+    }
+    return { svgLabels, htmlLabels };
+}
 export const prepareAreaData = async (args) => {
-    var _a;
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, isOutsideBounds } = args;
+    var _a, _b;
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, } = args;
     const [_xMin, xRangeMax] = xScale.range();
-    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const xMax = xRangeMax;
     const result = [];
-    const list = Array.from(group(series, (s) => s.stackId));
-    for (let i = 0; i < list.length; i++) {
-        const [_stackId, seriesStack] = list[i];
-        const xValues = getXValues(seriesStack, xAxis, xScale);
-        const accumulatedYValues = new Map();
-        xValues.forEach(([key]) => {
-            accumulatedYValues.set(key, 0);
-        });
-        const seriesStackData = [];
-        for (let j = 0; j < seriesStack.length; j++) {
-            const s = seriesStack[j];
-            const yAxisIndex = s.yAxis;
-            const seriesYAxis = yAxis[yAxisIndex];
-            const seriesYScale = yScale[yAxisIndex];
-            if (!seriesYScale) {
-                continue;
-            }
-            const yMin = (_a = getYValue({
-                point: { y: 0 },
-                points: s.data,
-                yAxis: seriesYAxis,
-                yScale: seriesYScale,
-            })) !== null && _a !== void 0 ? _a : 0;
-            const seriesData = s.data.reduce((m, 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]) => {
-                var _a;
-                const accumulatedYValue = accumulatedYValues.get(x) || 0;
-                const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
-                    x,
-                    y: 0,
-                };
-                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
-                const yPointValue = yValue === null ? null : yValue - accumulatedYValue;
-                if (yPointValue !== null) {
-                    accumulatedYValues.set(x, yMin - yPointValue);
+    const dataByPlots = Array.from(group(series, (s) => {
+        const yAxisIndex = s.yAxis;
+        const seriesYAxis = yAxis[yAxisIndex];
+        const plotIndex = seriesYAxis.plotIndex;
+        return plotIndex;
+    }, (s) => s.stackId));
+    const plotIndexes = Object.keys(dataByPlots);
+    for (let plotDataIndex = 0; plotDataIndex < plotIndexes.length; plotDataIndex++) {
+        const [plotIndex, stackItems] = dataByPlots[plotDataIndex];
+        const list = Array.from(stackItems);
+        for (let i = 0; i < list.length; i++) {
+            const [_stackId, seriesStack] = list[i];
+            const xValues = getXValues(seriesStack, xAxis, xScale);
+            const accumulatedYValues = new Map();
+            xValues.forEach(([key]) => {
+                accumulatedYValues.set(key, 0);
+            });
+            const seriesStackData = [];
+            for (let j = 0; j < seriesStack.length; j++) {
+                const s = seriesStack[j];
+                const yAxisIndex = s.yAxis;
+                const seriesYAxis = yAxis[yAxisIndex];
+                const seriesYScale = yScale[yAxisIndex];
+                if (!seriesYScale) {
+                    continue;
                 }
-                pointsAcc.push({
-                    y0: yMin - accumulatedYValue,
-                    x: xValue,
-                    y: yPointValue,
-                    data: d,
-                    series: s,
-                });
-                return pointsAcc;
-            }, []);
-            let labels = [];
-            const htmlElements = [];
-            if (s.dataLabels.enabled) {
-                const labelItems = await Promise.all(points.reduce((labelItemsAcc, p) => {
-                    if (p.y === null) {
-                        return labelItemsAcc;
+                const yAxisTop = ((_a = split.plots[plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                const yMin = (_b = getYValue({
+                    point: { y: 0 },
+                    points: s.data,
+                    yAxis: seriesYAxis,
+                    yScale: seriesYScale,
+                })) !== null && _b !== void 0 ? _b : 0;
+                const seriesData = s.data.reduce((m, 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]) => {
+                    var _a;
+                    const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                        x,
+                        y: 0,
+                    };
+                    const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+                    const yPointValue = yValue === null ? null : yValue - accumulatedYValue;
+                    if (yPointValue !== null) {
+                        accumulatedYValues.set(x, yMin - yPointValue);
                     }
-                    labelItemsAcc.push(getLabelData(p, s, xMax));
-                    return labelItemsAcc;
-                }, []));
-                if (s.dataLabels.html) {
-                    const htmlLabels = await Promise.all(labelItems.map(async (l) => {
-                        var _a;
-                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
-                        const labelSize = await getLabelsSize({
-                            labels: [l.text],
-                            style,
-                            html: true,
-                        });
-                        return {
-                            x: l.x - l.size.width / 2,
-                            y: l.y,
-                            content: l.text,
-                            size: {
-                                width: labelSize.maxWidth,
-                                height: labelSize.maxHeight,
-                            },
-                            style,
-                        };
-                    }));
-                    htmlElements.push(...htmlLabels);
+                    pointsAcc.push({
+                        y0: yAxisTop + yMin - accumulatedYValue,
+                        x: xValue,
+                        y: yPointValue === null ? null : yAxisTop + (yPointValue !== null && yPointValue !== void 0 ? yPointValue : 0),
+                        data: d,
+                        series: s,
+                    });
+                    return pointsAcc;
+                }, []);
+                const labels = [];
+                const htmlElements = [];
+                if (s.dataLabels.enabled) {
+                    const labelsData = await prepareDataLabels({ series: s, points, xMax, yAxisTop });
+                    labels.push(...labelsData.svgLabels);
+                    htmlElements.push(...labelsData.htmlLabels);
                 }
-                else {
-                    labels = labelItems;
+                let markers = [];
+                if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                    markers = points.reduce((markersAcc, p) => {
+                        if (p.y === null) {
+                            return markersAcc;
+                        }
+                        markersAcc.push({
+                            point: p,
+                            active: true,
+                            hovered: false,
+                            clipped: isOutsideBounds(p.x, p.y),
+                        });
+                        return markersAcc;
+                    }, []);
                 }
+                seriesStackData.push({
+                    points,
+                    markers,
+                    labels,
+                    color: s.color,
+                    opacity: s.opacity,
+                    width: s.lineWidth,
+                    series: s,
+                    hovered: false,
+                    active: true,
+                    id: s.id,
+                    htmlElements,
+                });
             }
-            let markers = [];
-            if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
-                markers = points.reduce((markersAcc, p) => {
-                    if (p.y === null) {
-                        return markersAcc;
-                    }
-                    markersAcc.push({
-                        point: p,
-                        active: true,
-                        hovered: false,
-                        clipped: isOutsideBounds(p.x, p.y),
+            if (series.some((s) => s.stacking === 'percent')) {
+                xValues.forEach(([x], index) => {
+                    const stackHeight = accumulatedYValues.get(x) || 0;
+                    let acc = 0;
+                    const ratio = plotHeight / stackHeight;
+                    seriesStackData.forEach((item) => {
+                        const point = item.points[index];
+                        if (point.y !== null && point.y !== undefined) {
+                            const height = (point.y0 - point.y) * ratio;
+                            point.y0 = plotHeight - height - acc;
+                            point.y = point.y0 + height;
+                            acc += height;
+                        }
                     });
-                    return markersAcc;
-                }, []);
-            }
-            seriesStackData.push({
-                points,
-                markers,
-                labels,
-                color: s.color,
-                opacity: s.opacity,
-                width: s.lineWidth,
-                series: s,
-                hovered: false,
-                active: true,
-                id: s.id,
-                htmlElements,
-            });
-        }
-        if (series.some((s) => s.stacking === 'percent')) {
-            xValues.forEach(([x], index) => {
-                const stackHeight = accumulatedYValues.get(x) || 0;
-                let acc = 0;
-                const ratio = plotHeight / stackHeight;
-                seriesStackData.forEach((item) => {
-                    const point = item.points[index];
-                    if (point.y !== null && point.y !== undefined) {
-                        const height = (point.y0 - point.y) * ratio;
-                        point.y0 = plotHeight - height - acc;
-                        point.y = point.y0 + height;
-                        acc += height;
-                    }
                 });
-            });
+            }
+            result.push(...seriesStackData);
         }
-        result.push(...seriesStackData);
     }
     return result;
 };

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.d.ts

@@ -1,6 +1,7 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedBarXData } from './types';
 export declare const prepareBarXData: (args: {
     series: PreparedBarXSeries[];
@@ -10,4 +11,5 @@ export declare const prepareBarXData: (args: {
     yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     boundsHeight: number;
+    split: PreparedSplit;
 }) => Promise<PreparedBarXData[]>;

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -33,8 +33,8 @@ async function getLabelData(d) {
 }
 // eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
-    var _a;
-    const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
+    var _a, _b, _c;
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
@@ -55,8 +55,17 @@ export const prepareBarXData = async (args) => {
             }
         }
     })();
-    const data = {};
+    // series grouped by plotIndex > xValue > data[];
+    const dataByPlots = new Map();
     series.forEach((s) => {
+        var _a;
+        const yAxisIndex = s.yAxis;
+        const seriesYAxis = yAxis[yAxisIndex];
+        const plotIndex = seriesYAxis.plotIndex;
+        if (!dataByPlots.has(plotIndex)) {
+            dataByPlots.set(plotIndex, {});
+        }
+        const data = (_a = dataByPlots.get(plotIndex)) !== null && _a !== void 0 ? _a : {};
         s.data.forEach((d) => {
             if (!isSeriesDataValid(d)) {
                 return;
@@ -96,81 +105,87 @@ export const prepareBarXData = async (args) => {
             }
         });
     }
-    const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
-    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
-    const groupWidth = bandWidth - groupGap;
-    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
-    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
-    const groupedData = Object.entries(data);
-    for (let groupedDataIndex = 0; groupedDataIndex < groupedData.length; groupedDataIndex++) {
-        const [xValue, val] = groupedData[groupedDataIndex];
-        const stacks = Object.values(val);
-        const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
-        for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
-            const yValues = stacks[groupItemIndex];
-            let stackHeight = 0;
-            const stackItems = [];
-            const sortedData = sortKey
-                ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
-                : yValues;
-            for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
-                const yValue = sortedData[yValueIndex];
-                const yAxisIndex = yValue.series.yAxis;
-                const seriesYScale = yScale[yAxisIndex];
-                if (!seriesYScale) {
-                    continue;
-                }
-                let xCenter;
-                if (xAxis.type === 'category') {
-                    const xBandScale = xScale;
-                    const xBandScaleDomain = xBandScale.domain();
-                    if (xBandScaleDomain.indexOf(xValue) === -1) {
+    const plotIndexes = Array.from(dataByPlots.keys());
+    for (let plotDataIndex = 0; plotDataIndex < plotIndexes.length; plotDataIndex++) {
+        const data = (_a = dataByPlots.get(plotIndexes[plotDataIndex])) !== null && _a !== void 0 ? _a : {};
+        const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
+        const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
+        const groupWidth = bandWidth - groupGap;
+        const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+        const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
+        const groupedData = Object.entries(data);
+        for (let groupedDataIndex = 0; groupedDataIndex < groupedData.length; groupedDataIndex++) {
+            const [xValue, val] = groupedData[groupedDataIndex];
+            const stacks = Object.values(val);
+            const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
+            for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
+                const yValues = stacks[groupItemIndex];
+                let stackHeight = 0;
+                const stackItems = [];
+                const sortedData = sortKey
+                    ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                    : yValues;
+                for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
+                    const yValue = sortedData[yValueIndex];
+                    const yAxisIndex = yValue.series.yAxis;
+                    const seriesYScale = yScale[yAxisIndex];
+                    if (!seriesYScale) {
                         continue;
                     }
-                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
-                }
-                else {
-                    const xLinearScale = xScale;
-                    xCenter = xLinearScale(Number(xValue));
-                }
-                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const yDataValue = ((_a = yValue.data.y) !== null && _a !== void 0 ? _a : 0);
-                const y = seriesYScale(yDataValue);
-                const base = seriesYScale(0);
-                const isLastStackItem = yValueIndex === sortedData.length - 1;
-                const height = yDataValue > 0 ? base - y : y - base;
-                let shapeHeight = height - (stackItems.length ? stackGap : 0);
-                if (shapeHeight < 0) {
-                    shapeHeight = height;
+                    const seriesYAxis = yAxis[yAxisIndex];
+                    const yAxisTop = ((_b = split.plots[seriesYAxis.plotIndex]) === null || _b === void 0 ? void 0 : _b.top) || 0;
+                    let xCenter;
+                    if (xAxis.type === 'category') {
+                        const xBandScale = xScale;
+                        const xBandScaleDomain = xBandScale.domain();
+                        if (xBandScaleDomain.indexOf(xValue) === -1) {
+                            continue;
+                        }
+                        xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
+                    }
+                    else {
+                        const xLinearScale = xScale;
+                        xCenter = xLinearScale(Number(xValue));
+                    }
+                    const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
+                    const yDataValue = ((_c = yValue.data.y) !== null && _c !== void 0 ? _c : 0);
+                    const y = seriesYScale(yDataValue);
+                    const base = seriesYScale(0);
+                    const isLastStackItem = yValueIndex === sortedData.length - 1;
+                    const height = Math.abs(base - y);
+                    let shapeHeight = height - (stackItems.length ? stackGap : 0);
+                    if (shapeHeight < 0) {
+                        shapeHeight = height;
+                    }
+                    if (shapeHeight < 0) {
+                        continue;
+                    }
+                    const barData = {
+                        x,
+                        y: yAxisTop + (yDataValue > 0 ? y - stackHeight : base),
+                        width: rectWidth,
+                        height: shapeHeight,
+                        opacity: get(yValue.data, 'opacity', null),
+                        data: yValue.data,
+                        series: yValue.series,
+                        htmlElements: [],
+                        isLastStackItem,
+                    };
+                    stackItems.push(barData);
+                    stackHeight += height;
                 }
-                if (shapeHeight < 0) {
-                    continue;
+                if (series.some((s) => s.stacking === 'percent')) {
+                    let acc = 0;
+                    const ratio = plotHeight / (stackHeight - stackItems.length);
+                    stackItems.forEach((item) => {
+                        item.height = item.height * ratio;
+                        item.y = plotHeight - item.height - acc;
+                        acc += item.height + 1;
+                    });
                 }
-                const barData = {
-                    x,
-                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
-                    width: rectWidth,
-                    height: shapeHeight,
-                    opacity: get(yValue.data, 'opacity', null),
-                    data: yValue.data,
-                    series: yValue.series,
-                    htmlElements: [],
-                    isLastStackItem,
-                };
-                stackItems.push(barData);
-                stackHeight += height;
-            }
-            if (series.some((s) => s.stacking === 'percent')) {
-                let acc = 0;
-                const ratio = plotHeight / (stackHeight - stackItems.length);
-                stackItems.forEach((item) => {
-                    item.height = item.height * ratio;
-                    item.y = plotHeight - item.height - acc;
-                    acc += item.height + 1;
-                });
+                result.push(...stackItems);
             }
-            result.push(...stackItems);
         }
     }
     for (let i = 0; i < result.length; i++) {

package/dist/cjs/hooks/useShapes/index.js

@@ -57,6 +57,7 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                                 boundsHeight,
+                                split,
                             });
                             shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
@@ -120,6 +121,7 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                                 boundsHeight,
+                                split,
                                 isOutsideBounds,
                             });
                             shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -16,7 +16,7 @@ export const prepareLineData = async (args) => {
     var _a;
     const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds } = args;
     const [_xMin, xRangeMax] = xScale.range();
-    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const xMax = xRangeMax;
     const acc = [];
     for (let i = 0; i < series.length; i++) {
         const s = series[i];

package/dist/cjs/hooks/useShapes/styles.css

@@ -1,4 +1,8 @@
-.gcharts-line__label {
+.gcharts-line__label,
+.gcharts-area__label,
+.gcharts-radar__label,
+.gcharts-heatmap__label,
+.gcharts-funnel__label {
   dominant-baseline: text-before-edge;
 }
 
@@ -16,10 +20,6 @@
   dominant-baseline: text-before-edge;
 }
 
-.gcharts-radar__label {
-  dominant-baseline: text-before-edge;
-}
-
 .gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
@@ -40,12 +40,4 @@
 
 .gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
-}
-
-.gcharts-heatmap__label {
-  dominant-baseline: text-before-edge;
-}
-
-.gcharts-funnel__label {
-  dominant-baseline: text-before-edge;
 }

package/dist/cjs/utils/chart/index.js

@@ -129,7 +129,7 @@ export const getDomainDataYBySeries = (series) => {
         switch (type) {
             case 'area':
             case 'bar-x': {
-                acc.push(...getDomainDataForStackedSeries(seriesList));
+                acc.push(0, ...getDomainDataForStackedSeries(seriesList));
                 break;
             }
             case 'waterfall': {

package/dist/esm/components/ChartInner/index.js

@@ -177,6 +177,7 @@ export const ChartInner = (props) => {
     }, [
         initialized,
         preparedRangeSlider.defaultRange,
+        preparedSeries,
         setInitialized,
         updateRangeSliderState,
         xScale,
@@ -201,7 +202,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, width: width, xAxis: data.xAxis, yAxis: data.yAxis })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, width: width, xAxis: data.xAxis, yAxis: data.yAxis, zoomState: zoomState })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

package/dist/esm/components/ChartInner/useChartInnerProps.js

@@ -79,14 +79,13 @@ export function useChartInnerProps(props) {
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
-        hasZoomX: Boolean(zoomState.x),
-        hasZoomY: Boolean(zoomState.y),
         rangeSliderState,
         series: preparedSeries,
         seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
         xAxis,
         yAxis,
+        zoomState,
     });
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;