@gravity-ui/charts 1.24.2 → 1.26.0

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

@@ -17,7 +17,6 @@ export async function prepareBarYData(args) {
             htmlElements: [],
         };
     }
-    const yScaleRange = yLinearScale.range();
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -34,11 +33,9 @@ export async function prepareBarYData(args) {
         }
     })();
     const groupedData = groupBarYDataByYValue(series, yAxis);
-    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const { bandSize, barGap, barSize } = getBarYLayout({
         groupedData,
         seriesOptions,
-        plotHeight,
         scale: yScale,
     });
     const result = [];

package/dist/esm/hooks/useShapes/waterfall/prepare-data.js

@@ -86,7 +86,10 @@ export const prepareWaterfallData = async (args) => {
         if (typeof item.data.y !== 'number' && !item.data.total) {
             continue;
         }
-        if (!item.data.total) {
+        if (item.data.total) {
+            item.data.y = totalValue;
+        }
+        else {
             totalValue += Number(item.data.y);
         }
         const prevPoint = result[result.length - 1];

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

@@ -1,14 +1,15 @@
 import type { BarXSeries, BarXSeriesData } from '../../types';
 import type { PreparedXAxis } from '../useAxis/types';
+import type { ChartScale } from '../useAxisScales';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
 export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedXAxis): Record<string | number, Record<string, {
     data: BarXSeriesData;
     series: T;
 }[]>>;
-export declare function getBarXLayoutForNumericScale(args: {
-    plotWidth: number;
+export declare function getBarXLayout(args: {
     seriesOptions: PreparedSeriesOptions;
     groupedData: ReturnType<typeof groupBarXDataByXValue>;
+    scale: ChartScale | undefined;
 }): {
     bandSize: number;
     barGap: number;

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

@@ -1,7 +1,9 @@
+import { max } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getSeriesStackId } from '../useSeries/utils';
+import { getBandSize } from './get-band-size';
 export function groupBarXDataByXValue(series, xAxis) {
     const data = {};
     series.forEach((s) => {
@@ -25,17 +27,17 @@ export function groupBarXDataByXValue(series, xAxis) {
     });
     return data;
 }
-export function getBarXLayoutForNumericScale(args) {
-    const { plotWidth, groupedData, seriesOptions } = args;
+export function getBarXLayout(args) {
+    const { groupedData, seriesOptions, scale } = args;
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
     const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
-    const groups = Object.values(groupedData);
-    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
-    const bandSize = plotWidth / groups.length;
+    const domain = Object.keys(groupedData);
+    const bandSize = getBandSize({ domain, scale: scale });
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
     const groupSize = bandSize - groupGap;
     const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - barGap, barMaxWidth));
     return { bandSize, barGap, barSize };
 }

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

@@ -13,7 +13,6 @@ export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBar
     series: T;
 }[]>>;
 export declare function getBarYLayout(args: {
-    plotHeight: number;
     seriesOptions: PreparedSeriesOptions;
     groupedData: ReturnType<typeof groupBarYDataByYValue>;
     scale: ChartScale | undefined;

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

@@ -8,13 +8,13 @@ const isSeriesDataValid = (d) => d.x !== null;
 export function groupBarYDataByYValue(series, yAxis) {
     const data = {};
     series.forEach((s) => {
+        const axisIndex = get(s, 'yAxis', 0);
+        const seriesYAxis = yAxis[axisIndex];
+        const categories = get(seriesYAxis, 'categories', []);
         s.data.forEach((d) => {
             if (!isSeriesDataValid(d)) {
                 return;
             }
-            const axisIndex = get(s, 'yAxis', 0);
-            const seriesYAxis = yAxis[axisIndex];
-            const categories = get(seriesYAxis, 'categories', []);
             const key = seriesYAxis.type === 'category'
                 ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
                 : d.y;

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
 import type { ChartSeriesRangeSliderOptions } from './series';
 export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
@@ -67,7 +67,7 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
      * */
     lineWidth?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line in area series */

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

@@ -145,6 +145,7 @@ export interface ChartAxis {
     };
     /** Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.
+     * Does not apply for series with data normalization along on a specific axis (stacking: 'percent').
      * @default 0.05 for Y axis, 0.01 for X axis
      */
     maxPadding?: number;

package/dist/esm/types/chart/bar-x.d.ts

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesOptions, ChartSeriesRangeSliderOptions } from './series';
 export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
@@ -64,7 +64,7 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
         inside?: boolean;
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Y-axis index (when using two axes) */

package/dist/esm/types/chart/bar-y.d.ts

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface BarYSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
@@ -68,7 +68,7 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
         inside?: boolean;
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /**

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

@@ -1,5 +1,6 @@
 import type { FormatNumberOptions } from '../formatter';
 import type { MeaningfulAny } from '../misc';
+import type { ChartLegendItem } from './legend';
 type NumberFormat = {
     type: 'number';
 } & FormatNumberOptions;
@@ -67,6 +68,14 @@ export interface BaseSeriesData<T = MeaningfulAny> {
     /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
     color?: string;
 }
+export interface BaseSeriesLegend extends ChartLegendItem {
+    /** For multiple series with the same groupId, only one label in the legend will be displayed.
+     * The legend element uses the name and symbol from the first series of the group.
+     */
+    groupId?: string;
+    /** The text is displayed in the legend instead of the series name. */
+    itemText?: string;
+}
 export interface BaseTextStyle {
     fontSize: string;
     fontWeight?: string;

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

@@ -1,7 +1,7 @@
 import type { DashStyle, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseDataLabels, BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseDataLabels, BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { ChartLegendItem, RectLegendSymbolOptions } from './legend';
 export interface FunnelSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the funnel segment. */
     value: number;
@@ -9,6 +9,10 @@ export interface FunnelSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     name: string;
     /** Initial data label of the funnel segment. If not specified, the value is used. */
     label?: string;
+    /** Individual series legend options. Has higher priority than legend options in series data */
+    legend?: BaseSeriesLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 }
 export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataLabels'> {
     type: typeof SERIES_TYPE.Funnel;
@@ -17,10 +21,6 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
     name?: string;
     /** The color of the funnel series. */
     color?: string;
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
     /** Lines or areas connecting the funnel segments. */
     connectors?: {
         enabled?: boolean;
@@ -43,4 +43,8 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
         /** Horizontal alignment of the data labels. */
         align?: 'left' | 'center' | 'right';
     };
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegendItem & {
+        symbol?: RectLegendSymbolOptions;
+    };
 }

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface HeatmapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the heatmap cell. Depending on the context, it may represents:
@@ -31,7 +31,7 @@ export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
     color?: string;
     dataLabels?: BaseSeries['dataLabels'];
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /**

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

@@ -1,6 +1,16 @@
 import type { BaseTextStyle } from './base';
-export interface ChartLegend {
+export interface ChartLegendItem {
     enabled?: boolean;
+    /**
+     * Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+    /** CSS styles for each legend item */
+    itemStyle?: BaseTextStyle;
+}
+export interface ChartLegend extends ChartLegendItem {
     /**
      * Different types for different color schemes.
      * If the color scheme is continuous, a gradient legend will be drawn.
@@ -21,14 +31,6 @@ export interface ChartLegend {
      * @default center
      * */
     justifyContent?: 'start' | 'center';
-    /**
-     * Defines the pixel distance between each legend item
-     *
-     * @default 20
-     * */
-    itemDistance?: number;
-    /** CSS styles for each legend item */
-    itemStyle?: BaseTextStyle;
     /**
      * The space between the legend and the axis labels or chart area.
      *
@@ -64,7 +66,7 @@ export interface ChartLegend {
      *
      * @default 'bottom'
      * */
-    position?: 'top' | 'bottom';
+    position?: 'top' | 'bottom' | 'left' | 'right';
 }
 export interface BaseLegendSymbol {
     /**

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

@@ -1,7 +1,7 @@
 import type { DashStyle, LineCap, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
 import type { ChartSeriesRangeSliderOptions } from './series';
 export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
@@ -42,7 +42,7 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
      * */
     lineWidth?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line series */

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

@@ -1,8 +1,8 @@
 import type { BaseType } from 'd3';
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { ChartLegendItem, RectLegendSymbolOptions } from './legend';
 export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the pie segment. */
     value: number | null;
@@ -16,6 +16,10 @@ export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     opacity?: number;
     /** The individual radius of the pie segment. The default value is series.radius */
     radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in series data */
+    legend?: BaseSeriesLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 }
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';
@@ -54,10 +58,6 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
      * If not specified, the minimum radius is calculated as 30% of the height or width of the chart (the minimum value is taken) minus the halo effect.
      */
     minRadius?: string | number;
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
     dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * The distance of the data label from the pie's edge.
@@ -85,6 +85,10 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
          * */
         connectorCurve?: ConnectorCurve;
     };
+    /** Individual series legend options. Has higher priority than legend options in chart data */
+    legend?: ChartLegendItem & {
+        symbol?: RectLegendSymbolOptions;
+    };
     /**
      * Function for adding custom svg nodes for a series
      *

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
 export interface RadarSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the radar point. */
@@ -42,7 +42,7 @@ export interface RadarSeries<T = MeaningfulAny> extends BaseSeries {
      */
     fillOpacity?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line in radar series */

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface SankeySeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     name: string;
     color?: string;
@@ -16,7 +16,7 @@ export interface SankeySeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     data: SankeySeriesData<T>[];
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
 }

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE, SymbolType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesRangeSliderOptions } from './series';
 export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
@@ -39,7 +39,7 @@ export interface ScatterSeries<T = MeaningfulAny> extends BaseSeries {
     /** A predefined shape or symbol for the dot */
     symbolType?: `${SymbolType}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Y-axis index (when using two axes) */

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

@@ -1,7 +1,7 @@
 import type { LayoutAlgorithm, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface TreemapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The name of the node (used in legend, tooltip etc). */
     name: string | string[];
@@ -23,7 +23,7 @@ export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
     /** The main color of the series (hex, rgba). */
     color?: string;
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Set options on specific levels. Takes precedence over series options, but not point options. */

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { ChartLegendItem, RectLegendSymbolOptions } from './legend';
 export interface WaterfallSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value. Depending on the context , it may represents:
@@ -34,7 +34,7 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** The color used for negative values. If it is not specified, the general color of the series is used. */
     negativeColor?: string;
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: ChartLegendItem & {
         symbol?: RectLegendSymbolOptions;
         /** The legend item text for positive, negative values and totals. */
         itemText?: {

package/package.json

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