@gravity-ui/charts 1.50.0 → 1.51.0

package/dist/cjs/core/scales/y-scale.js

@@ -127,6 +127,9 @@ function getDomainMinAlignedToStartTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMin;
+            }
             dNewMin = tickValues[0].value - step;
         }
     }
@@ -161,6 +164,9 @@ function getDomainMaxAlignedToEndTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMax;
+            }
             dNewMax = Math.floor(dMax / step + 1) * step;
         }
     }

package/dist/cjs/core/series/prepare-funnel.js

@@ -4,17 +4,20 @@ import { DEFAULT_DATALABELS_STYLE } from '../constants';
 import { getUniqId } from '../utils';
 import { prepareLegendSymbol } from './utils';
 export function prepareFunnelSeries(args) {
-    var _a, _b;
+    var _a, _b, _c;
     const { series, legend, colors } = args;
     const dataNames = series.data.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, colors);
-    const isConnectorsEnabled = (_b = (_a = series.connectors) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
+    const shape = (_a = series.shape) !== null && _a !== void 0 ? _a : 'rectangle';
+    const isTrapezoid = shape === 'trapezoid';
+    const isConnectorsEnabled = (_c = (_b = series.connectors) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : !isTrapezoid;
     const preparedSeries = series.data.map((dataItem) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const id = getUniqId();
         const color = dataItem.color || colorScale(dataItem.name);
         const result = {
             type: 'funnel',
+            shape,
             data: dataItem,
             dataLabels: {
                 enabled: get(series, 'dataLabels.enabled', true),

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

@@ -362,6 +362,7 @@ export type PreparedRadarSeries = {
 export type PreparedFunnelSeries = {
     type: FunnelSeries['type'];
     data: FunnelSeriesData;
+    shape: Required<FunnelSeries>['shape'];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;

package/dist/cjs/core/shapes/funnel/prepare-data.js

@@ -19,7 +19,7 @@ function getAreaConnectorPath(args) {
     return p;
 }
 export async function prepareFunnelData(args) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { series, boundsWidth, boundsHeight } = args;
     const items = [];
     const svgLabels = [];
@@ -95,15 +95,28 @@ export async function prepareFunnelData(args) {
         }
     }
     const segmentMaxWidth = boundsWidth - segmentLeftOffset - segmentRightOffset;
+    const isTrapezoid = ((_d = series[0]) === null || _d === void 0 ? void 0 : _d.shape) === 'trapezoid';
+    const getItemWidth = (index) => (segmentMaxWidth * series[index].data.value) / maxValue;
     for (let index = 0; index < series.length; index++) {
         const s = series[index];
         const d = s.data;
-        const itemWidth = (segmentMaxWidth * d.value) / maxValue;
+        const itemWidth = getItemWidth(index);
+        const centerX = segmentLeftOffset + segmentMaxWidth / 2;
+        const segmentY = getSegmentY(index);
+        const isLastSegment = index === series.length - 1;
+        const bottomWidth = isTrapezoid && !isLastSegment ? getItemWidth(index + 1) : itemWidth;
+        const points = [
+            [centerX - itemWidth / 2, segmentY],
+            [centerX + itemWidth / 2, segmentY],
+            [centerX + bottomWidth / 2, segmentY + itemHeight],
+            [centerX - bottomWidth / 2, segmentY + itemHeight],
+        ];
         const funnelSegment = {
-            x: segmentLeftOffset + segmentMaxWidth / 2 - itemWidth / 2,
-            y: getSegmentY(index),
+            x: centerX - itemWidth / 2,
+            y: segmentY,
             width: itemWidth,
             height: itemHeight,
+            points,
             color: s.color,
             series: s,
             data: d,
@@ -114,7 +127,7 @@ export async function prepareFunnelData(args) {
         items.push(funnelSegment);
         const prevSeries = series[index - 1];
         const prevItem = items[index - 1];
-        if (prevSeries && prevItem && ((_d = prevSeries.connectors) === null || _d === void 0 ? void 0 : _d.enabled)) {
+        if (prevSeries && prevItem && ((_e = prevSeries.connectors) === null || _e === void 0 ? void 0 : _e.enabled)) {
             const connectorPoints = [
                 [prevItem.x, prevItem.y + prevItem.height],
                 [prevItem.x + prevItem.width, prevItem.y + prevItem.height],

package/dist/cjs/core/shapes/funnel/renderer.js

@@ -11,13 +11,10 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     svgElement.selectAll('*').remove();
     // funnel levels
     const cellsSelection = svgElement
-        .selectAll('rect')
+        .selectAll('polygon')
         .data(preparedData.items)
-        .join('rect')
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('height', (d) => d.height)
-        .attr('width', (d) => d.width)
+        .join('polygon')
+        .attr('points', (d) => d.points.map((p) => p.join(',')).join(' '))
         .attr('fill', (d) => d.color)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);

package/dist/cjs/core/shapes/funnel/types.d.ts

@@ -7,6 +7,7 @@ export type FunnelItemData = {
     y: number;
     width: number;
     height: number;
+    points: [number, number][];
     color: string;
     series: PreparedFunnelSeries;
     data: FunnelSeriesData;

package/dist/cjs/core/types/chart/funnel.d.ts

@@ -21,6 +21,23 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
     name?: string;
     /** The color of the funnel series. */
     color?: string;
+    /**
+     * The visual shape of funnel segments.
+     *
+     * - `'rectangle'` (**recommended**): each segment is an independent rectangle whose
+     *   width is directly proportional to its value. The human eye reads width as a linear
+     *   scale, making comparisons between segments accurate and effortless.
+     *
+     * - `'trapezoid'`: adjacent segments are drawn as connected trapezoids, giving the chart
+     *   a classic "funnel" silhouette. However, this shape distorts perception: the slanted
+     *   sides cause viewers to judge area (which grows as the square of width) rather than
+     *   width alone, exaggerating differences between large and small values. Use only for
+     *   decorative purposes or when visual familiarity with the funnel metaphor is more
+     *   important than analytical precision.
+     *
+     * @default 'rectangle'
+     */
+    shape?: 'rectangle' | 'trapezoid';
     /** Lines or areas connecting the funnel segments. */
     connectors?: {
         enabled?: boolean;

package/dist/esm/core/scales/y-scale.js

@@ -127,6 +127,9 @@ function getDomainMinAlignedToStartTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMin;
+            }
             dNewMin = tickValues[0].value - step;
         }
     }
@@ -161,6 +164,9 @@ function getDomainMaxAlignedToEndTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMax;
+            }
             dNewMax = Math.floor(dMax / step + 1) * step;
         }
     }

package/dist/esm/core/series/prepare-funnel.js

@@ -4,17 +4,20 @@ import { DEFAULT_DATALABELS_STYLE } from '../constants';
 import { getUniqId } from '../utils';
 import { prepareLegendSymbol } from './utils';
 export function prepareFunnelSeries(args) {
-    var _a, _b;
+    var _a, _b, _c;
     const { series, legend, colors } = args;
     const dataNames = series.data.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, colors);
-    const isConnectorsEnabled = (_b = (_a = series.connectors) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
+    const shape = (_a = series.shape) !== null && _a !== void 0 ? _a : 'rectangle';
+    const isTrapezoid = shape === 'trapezoid';
+    const isConnectorsEnabled = (_c = (_b = series.connectors) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : !isTrapezoid;
     const preparedSeries = series.data.map((dataItem) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const id = getUniqId();
         const color = dataItem.color || colorScale(dataItem.name);
         const result = {
             type: 'funnel',
+            shape,
             data: dataItem,
             dataLabels: {
                 enabled: get(series, 'dataLabels.enabled', true),

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

@@ -362,6 +362,7 @@ export type PreparedRadarSeries = {
 export type PreparedFunnelSeries = {
     type: FunnelSeries['type'];
     data: FunnelSeriesData;
+    shape: Required<FunnelSeries>['shape'];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;

package/dist/esm/core/shapes/funnel/prepare-data.js

@@ -19,7 +19,7 @@ function getAreaConnectorPath(args) {
     return p;
 }
 export async function prepareFunnelData(args) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { series, boundsWidth, boundsHeight } = args;
     const items = [];
     const svgLabels = [];
@@ -95,15 +95,28 @@ export async function prepareFunnelData(args) {
         }
     }
     const segmentMaxWidth = boundsWidth - segmentLeftOffset - segmentRightOffset;
+    const isTrapezoid = ((_d = series[0]) === null || _d === void 0 ? void 0 : _d.shape) === 'trapezoid';
+    const getItemWidth = (index) => (segmentMaxWidth * series[index].data.value) / maxValue;
     for (let index = 0; index < series.length; index++) {
         const s = series[index];
         const d = s.data;
-        const itemWidth = (segmentMaxWidth * d.value) / maxValue;
+        const itemWidth = getItemWidth(index);
+        const centerX = segmentLeftOffset + segmentMaxWidth / 2;
+        const segmentY = getSegmentY(index);
+        const isLastSegment = index === series.length - 1;
+        const bottomWidth = isTrapezoid && !isLastSegment ? getItemWidth(index + 1) : itemWidth;
+        const points = [
+            [centerX - itemWidth / 2, segmentY],
+            [centerX + itemWidth / 2, segmentY],
+            [centerX + bottomWidth / 2, segmentY + itemHeight],
+            [centerX - bottomWidth / 2, segmentY + itemHeight],
+        ];
         const funnelSegment = {
-            x: segmentLeftOffset + segmentMaxWidth / 2 - itemWidth / 2,
-            y: getSegmentY(index),
+            x: centerX - itemWidth / 2,
+            y: segmentY,
             width: itemWidth,
             height: itemHeight,
+            points,
             color: s.color,
             series: s,
             data: d,
@@ -114,7 +127,7 @@ export async function prepareFunnelData(args) {
         items.push(funnelSegment);
         const prevSeries = series[index - 1];
         const prevItem = items[index - 1];
-        if (prevSeries && prevItem && ((_d = prevSeries.connectors) === null || _d === void 0 ? void 0 : _d.enabled)) {
+        if (prevSeries && prevItem && ((_e = prevSeries.connectors) === null || _e === void 0 ? void 0 : _e.enabled)) {
             const connectorPoints = [
                 [prevItem.x, prevItem.y + prevItem.height],
                 [prevItem.x + prevItem.width, prevItem.y + prevItem.height],

package/dist/esm/core/shapes/funnel/renderer.js

@@ -11,13 +11,10 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     svgElement.selectAll('*').remove();
     // funnel levels
     const cellsSelection = svgElement
-        .selectAll('rect')
+        .selectAll('polygon')
         .data(preparedData.items)
-        .join('rect')
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('height', (d) => d.height)
-        .attr('width', (d) => d.width)
+        .join('polygon')
+        .attr('points', (d) => d.points.map((p) => p.join(',')).join(' '))
         .attr('fill', (d) => d.color)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);

package/dist/esm/core/shapes/funnel/types.d.ts

@@ -7,6 +7,7 @@ export type FunnelItemData = {
     y: number;
     width: number;
     height: number;
+    points: [number, number][];
     color: string;
     series: PreparedFunnelSeries;
     data: FunnelSeriesData;

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

@@ -21,6 +21,23 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
     name?: string;
     /** The color of the funnel series. */
     color?: string;
+    /**
+     * The visual shape of funnel segments.
+     *
+     * - `'rectangle'` (**recommended**): each segment is an independent rectangle whose
+     *   width is directly proportional to its value. The human eye reads width as a linear
+     *   scale, making comparisons between segments accurate and effortless.
+     *
+     * - `'trapezoid'`: adjacent segments are drawn as connected trapezoids, giving the chart
+     *   a classic "funnel" silhouette. However, this shape distorts perception: the slanted
+     *   sides cause viewers to judge area (which grows as the square of width) rather than
+     *   width alone, exaggerating differences between large and small values. Use only for
+     *   decorative purposes or when visual familiarity with the funnel metaphor is more
+     *   important than analytical precision.
+     *
+     * @default 'rectangle'
+     */
+    shape?: 'rectangle' | 'trapezoid';
     /** Lines or areas connecting the funnel segments. */
     connectors?: {
         enabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.50.0",
+  "version": "1.51.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",