@gravity-ui/charts 1.13.0 → 1.13.2

package/dist/cjs/constants/defaults/series-options.d.ts

@@ -4,13 +4,15 @@ type DefaultBarXSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
         barMaxWidth: number;
         barPadding: number;
         groupPadding: number;
+        stackGap: number;
     };
 };
-type DefaultBarYSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
+type DefaultBarYSeriesOptions = Partial<ChartSeriesOptions['bar-y']> & {
     'bar-y': {
         barMaxWidth: number;
         barPadding: number;
         groupPadding: number;
+        stackGap: number;
     };
 };
 type DefaultWaterfallSeriesOptions = Partial<ChartSeriesOptions['waterfall']> & {

package/dist/cjs/constants/defaults/series-options.js

@@ -3,6 +3,7 @@ export const seriesOptionsDefaults = {
         barMaxWidth: 50,
         barPadding: 0.1,
         groupPadding: 0.2,
+        stackGap: 1,
         states: {
             hover: {
                 enabled: true,
@@ -18,6 +19,7 @@ export const seriesOptionsDefaults = {
         barMaxWidth: 50,
         barPadding: 0.1,
         groupPadding: 0.2,
+        stackGap: 1,
         states: {
             hover: {
                 enabled: true,

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

@@ -29,39 +29,25 @@ function getYScaleRange(args) {
         case 'linear':
         case 'logarithmic': {
             let range = [boundsHeight, boundsHeight * axis.maxPadding];
-            switch (axis.order) {
-                case 'sortDesc':
-                case 'reverse': {
-                    range.reverse();
-                }
-            }
             const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
             if (barYSeries.length) {
                 const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
-                const { barSize, dataLength } = getBarYLayoutForNumericScale({
-                    plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
-                    groupedData,
-                    seriesOptions: seriesOptions,
-                });
-                if (dataLength > 1) {
-                    const alreadyCountedStackingIds = new Set();
-                    const offsetMultiplier = barYSeries.reduce((acc, s) => {
-                        let count = 0;
-                        if (s.stackId) {
-                            if (!alreadyCountedStackingIds.has(s.stackId)) {
-                                alreadyCountedStackingIds.add(s.stackId);
-                                count = 1;
-                            }
-                        }
-                        else {
-                            count = 1;
-                        }
-                        return acc + count;
-                    }, 0);
-                    const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
+                if (Object.keys(groupedData).length > 1) {
+                    const { bandSize } = getBarYLayoutForNumericScale({
+                        plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
+                        groupedData,
+                        seriesOptions: seriesOptions,
+                    });
+                    const offset = bandSize / 2;
                     range = [range[0] - offset, range[1] + offset];
                 }
             }
+            switch (axis.order) {
+                case 'sortDesc':
+                case 'reverse': {
+                    range.reverse();
+                }
+            }
             return range;
         }
         case 'category': {

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

@@ -32,6 +32,7 @@ async function getLabelData(d) {
 }
 export const prepareBarXData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
+    const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
@@ -124,7 +125,12 @@ export const prepareBarXData = async (args) => {
                 const yDataValue = yValue.data.y;
                 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;
+                }
                 if (height <= 0) {
                     continue;
                 }
@@ -132,12 +138,12 @@ export const prepareBarXData = async (args) => {
                     x,
                     y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
                     width: rectWidth,
-                    height,
+                    height: shapeHeight,
                     opacity: get(yValue.data, 'opacity', null),
                     data: yValue.data,
                     series: yValue.series,
                     htmlElements: [],
-                    isLastStackItem: yValueIndex === sortedData.length - 1,
+                    isLastStackItem,
                 };
                 const label = await getLabelData(barData);
                 if (yValue.series.dataLabels.html && label) {
@@ -153,7 +159,7 @@ export const prepareBarXData = async (args) => {
                     barData.label = await getLabelData(barData);
                 }
                 stackItems.push(barData);
-                stackHeight += height + 1;
+                stackHeight += height;
             }
             if (series.some((s) => s.stacking === 'percent')) {
                 let acc = 0;

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

@@ -7,10 +7,11 @@ const DEFAULT_LABEL_PADDING = 7;
 export const prepareBarYData = async (args) => {
     var _a;
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
+    const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
-    const plotWidth = xLinearScale(xLinearScale.domain()[1]);
+    const yScaleRange = yLinearScale.range();
+    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -40,12 +41,22 @@ export const prepareBarYData = async (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            const base = xLinearScale(0 - measureValues[0].series.borderWidth);
+            const base = xLinearScale(0) - measureValues[0].series.borderWidth;
             let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : measureValues;
+            let ratio = 1;
+            if (series.some((s) => s.stacking === 'percent')) {
+                const sum = sortedData.reduce((acc, item) => {
+                    if (item.data.x) {
+                        return acc + xLinearScale(Number(item.data.x));
+                    }
+                    return acc;
+                }, 0);
+                ratio = xLinearScale.range()[1] / sum;
+            }
             sortedData.forEach(({ data, series: s }, xValueIndex) => {
                 let center;
                 if (yAxis[0].type === 'category') {
@@ -58,35 +69,32 @@ export const prepareBarYData = async (args) => {
                 }
                 const y = center - currentBarHeight / 2 + (barSize + barGap) * groupItemIndex;
                 const xValue = Number(data.x);
-                const width = Math.abs(xLinearScale(xValue) - base);
-                if (width <= 0) {
+                const isLastStackItem = xValueIndex === sortedData.length - 1;
+                const width = Math.abs(xLinearScale(xValue) * ratio - base);
+                let shapeWidth = width - (stackItems.length ? stackGap : 0);
+                if (shapeWidth < 0) {
+                    shapeWidth = width;
+                }
+                if (shapeWidth <= 0) {
                     return;
                 }
+                const itemStackGap = width - shapeWidth;
                 const item = {
-                    x: xValue > baseRangeValue ? stackSum : stackSum - width,
-                    y,
-                    width,
+                    x: (xValue > baseRangeValue ? stackSum : stackSum - width) + itemStackGap,
+                    y: y,
+                    width: shapeWidth,
                     height: barSize,
                     color: data.color || s.color,
                     borderColor: s.borderColor,
-                    borderWidth: s.borderWidth,
+                    borderWidth: barSize > s.borderWidth * 2 ? s.borderWidth : 0,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,
-                    isLastStackItem: xValueIndex === sortedData.length - 1,
+                    isLastStackItem,
                 };
                 stackItems.push(item);
-                stackSum += width + 1;
+                stackSum += width;
             });
-            if (series.some((s) => s.stacking === 'percent')) {
-                let acc = 0;
-                const ratio = plotWidth / (stackSum - stackItems.length);
-                stackItems.forEach((item) => {
-                    item.width = item.width * ratio;
-                    item.x = acc;
-                    acc += item.width;
-                });
-            }
             result.push(...stackItems);
         });
     });

package/dist/cjs/hooks/utils/bar-y.d.ts

@@ -14,7 +14,6 @@ export declare function getBarYLayoutForNumericScale(args: {
     bandSize: number;
     barGap: number;
     barSize: number;
-    dataLength: number;
 };
 export declare function getBarYLayoutForCategoryScale(args: {
     groupedData: ReturnType<typeof groupBarYDataByYValue>;

package/dist/cjs/hooks/utils/bar-y.js

@@ -32,13 +32,14 @@ export function getBarYLayoutForNumericScale(args) {
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    const dataLength = Object.values(groupedData).reduce((sum, items) => sum + Object.keys(items).length, 0);
-    const bandSize = plotHeight / dataLength;
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotHeight / groups.length;
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;
     const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize - barGap, barMaxWidth));
-    return { bandSize, barGap, barSize, dataLength };
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
 }
 export function getBarYLayoutForCategoryScale(args) {
     const { groupedData, seriesOptions, yScale } = args;

package/dist/cjs/types/chart/series.d.ts

@@ -79,6 +79,11 @@ export interface ChartSeriesOptions {
          * @default 0
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
@@ -130,6 +135,11 @@ export interface ChartSeriesOptions {
          * @default 0
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

package/dist/esm/constants/defaults/series-options.d.ts

@@ -4,13 +4,15 @@ type DefaultBarXSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
         barMaxWidth: number;
         barPadding: number;
         groupPadding: number;
+        stackGap: number;
     };
 };
-type DefaultBarYSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
+type DefaultBarYSeriesOptions = Partial<ChartSeriesOptions['bar-y']> & {
     'bar-y': {
         barMaxWidth: number;
         barPadding: number;
         groupPadding: number;
+        stackGap: number;
     };
 };
 type DefaultWaterfallSeriesOptions = Partial<ChartSeriesOptions['waterfall']> & {

package/dist/esm/constants/defaults/series-options.js

@@ -3,6 +3,7 @@ export const seriesOptionsDefaults = {
         barMaxWidth: 50,
         barPadding: 0.1,
         groupPadding: 0.2,
+        stackGap: 1,
         states: {
             hover: {
                 enabled: true,
@@ -18,6 +19,7 @@ export const seriesOptionsDefaults = {
         barMaxWidth: 50,
         barPadding: 0.1,
         groupPadding: 0.2,
+        stackGap: 1,
         states: {
             hover: {
                 enabled: true,

package/dist/esm/hooks/useAxisScales/index.js

@@ -29,39 +29,25 @@ function getYScaleRange(args) {
         case 'linear':
         case 'logarithmic': {
             let range = [boundsHeight, boundsHeight * axis.maxPadding];
-            switch (axis.order) {
-                case 'sortDesc':
-                case 'reverse': {
-                    range.reverse();
-                }
-            }
             const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
             if (barYSeries.length) {
                 const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
-                const { barSize, dataLength } = getBarYLayoutForNumericScale({
-                    plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
-                    groupedData,
-                    seriesOptions: seriesOptions,
-                });
-                if (dataLength > 1) {
-                    const alreadyCountedStackingIds = new Set();
-                    const offsetMultiplier = barYSeries.reduce((acc, s) => {
-                        let count = 0;
-                        if (s.stackId) {
-                            if (!alreadyCountedStackingIds.has(s.stackId)) {
-                                alreadyCountedStackingIds.add(s.stackId);
-                                count = 1;
-                            }
-                        }
-                        else {
-                            count = 1;
-                        }
-                        return acc + count;
-                    }, 0);
-                    const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
+                if (Object.keys(groupedData).length > 1) {
+                    const { bandSize } = getBarYLayoutForNumericScale({
+                        plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
+                        groupedData,
+                        seriesOptions: seriesOptions,
+                    });
+                    const offset = bandSize / 2;
                     range = [range[0] - offset, range[1] + offset];
                 }
             }
+            switch (axis.order) {
+                case 'sortDesc':
+                case 'reverse': {
+                    range.reverse();
+                }
+            }
             return range;
         }
         case 'category': {

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

@@ -32,6 +32,7 @@ async function getLabelData(d) {
 }
 export const prepareBarXData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
+    const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
@@ -124,7 +125,12 @@ export const prepareBarXData = async (args) => {
                 const yDataValue = yValue.data.y;
                 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;
+                }
                 if (height <= 0) {
                     continue;
                 }
@@ -132,12 +138,12 @@ export const prepareBarXData = async (args) => {
                     x,
                     y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
                     width: rectWidth,
-                    height,
+                    height: shapeHeight,
                     opacity: get(yValue.data, 'opacity', null),
                     data: yValue.data,
                     series: yValue.series,
                     htmlElements: [],
-                    isLastStackItem: yValueIndex === sortedData.length - 1,
+                    isLastStackItem,
                 };
                 const label = await getLabelData(barData);
                 if (yValue.series.dataLabels.html && label) {
@@ -153,7 +159,7 @@ export const prepareBarXData = async (args) => {
                     barData.label = await getLabelData(barData);
                 }
                 stackItems.push(barData);
-                stackHeight += height + 1;
+                stackHeight += height;
             }
             if (series.some((s) => s.stacking === 'percent')) {
                 let acc = 0;

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -7,10 +7,11 @@ const DEFAULT_LABEL_PADDING = 7;
 export const prepareBarYData = async (args) => {
     var _a;
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
+    const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
-    const plotWidth = xLinearScale(xLinearScale.domain()[1]);
+    const yScaleRange = yLinearScale.range();
+    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -40,12 +41,22 @@ export const prepareBarYData = async (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            const base = xLinearScale(0 - measureValues[0].series.borderWidth);
+            const base = xLinearScale(0) - measureValues[0].series.borderWidth;
             let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : measureValues;
+            let ratio = 1;
+            if (series.some((s) => s.stacking === 'percent')) {
+                const sum = sortedData.reduce((acc, item) => {
+                    if (item.data.x) {
+                        return acc + xLinearScale(Number(item.data.x));
+                    }
+                    return acc;
+                }, 0);
+                ratio = xLinearScale.range()[1] / sum;
+            }
             sortedData.forEach(({ data, series: s }, xValueIndex) => {
                 let center;
                 if (yAxis[0].type === 'category') {
@@ -58,35 +69,32 @@ export const prepareBarYData = async (args) => {
                 }
                 const y = center - currentBarHeight / 2 + (barSize + barGap) * groupItemIndex;
                 const xValue = Number(data.x);
-                const width = Math.abs(xLinearScale(xValue) - base);
-                if (width <= 0) {
+                const isLastStackItem = xValueIndex === sortedData.length - 1;
+                const width = Math.abs(xLinearScale(xValue) * ratio - base);
+                let shapeWidth = width - (stackItems.length ? stackGap : 0);
+                if (shapeWidth < 0) {
+                    shapeWidth = width;
+                }
+                if (shapeWidth <= 0) {
                     return;
                 }
+                const itemStackGap = width - shapeWidth;
                 const item = {
-                    x: xValue > baseRangeValue ? stackSum : stackSum - width,
-                    y,
-                    width,
+                    x: (xValue > baseRangeValue ? stackSum : stackSum - width) + itemStackGap,
+                    y: y,
+                    width: shapeWidth,
                     height: barSize,
                     color: data.color || s.color,
                     borderColor: s.borderColor,
-                    borderWidth: s.borderWidth,
+                    borderWidth: barSize > s.borderWidth * 2 ? s.borderWidth : 0,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,
-                    isLastStackItem: xValueIndex === sortedData.length - 1,
+                    isLastStackItem,
                 };
                 stackItems.push(item);
-                stackSum += width + 1;
+                stackSum += width;
             });
-            if (series.some((s) => s.stacking === 'percent')) {
-                let acc = 0;
-                const ratio = plotWidth / (stackSum - stackItems.length);
-                stackItems.forEach((item) => {
-                    item.width = item.width * ratio;
-                    item.x = acc;
-                    acc += item.width;
-                });
-            }
             result.push(...stackItems);
         });
     });

package/dist/esm/hooks/utils/bar-y.d.ts

@@ -14,7 +14,6 @@ export declare function getBarYLayoutForNumericScale(args: {
     bandSize: number;
     barGap: number;
     barSize: number;
-    dataLength: number;
 };
 export declare function getBarYLayoutForCategoryScale(args: {
     groupedData: ReturnType<typeof groupBarYDataByYValue>;

package/dist/esm/hooks/utils/bar-y.js

@@ -32,13 +32,14 @@ export function getBarYLayoutForNumericScale(args) {
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    const dataLength = Object.values(groupedData).reduce((sum, items) => sum + Object.keys(items).length, 0);
-    const bandSize = plotHeight / dataLength;
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotHeight / groups.length;
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;
     const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize - barGap, barMaxWidth));
-    return { bandSize, barGap, barSize, dataLength };
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
 }
 export function getBarYLayoutForCategoryScale(args) {
     const { groupedData, seriesOptions, yScale } = args;

package/dist/esm/types/chart/series.d.ts

@@ -79,6 +79,11 @@ export interface ChartSeriesOptions {
          * @default 0
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
@@ -130,6 +135,11 @@ export interface ChartSeriesOptions {
          * @default 0
          */
         borderRadius?: number;
+        /**
+         * The distance between the shapes of the stacked values, in pixels.
+         * @default 1
+         */
+        stackGap?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",