@gravity-ui/charts 1.0.1 → 1.1.0

package/dist/esm/hooks/useSeries/types.d.ts

@@ -243,9 +243,12 @@ export type PreparedTreemapSeries = {
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
+    index: number;
+};
 export type PreparedWaterfallSeries = {
     type: WaterfallSeries['type'];
-    data: WaterfallSeriesData[];
+    data: PreparedWaterfallSeriesData[];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
@@ -254,8 +257,6 @@ export type PreparedWaterfallSeries = {
         html: boolean;
         format?: ValueFormat;
     };
-    positiveColor: string;
-    negativeColor: string;
 } & BasePreparedSeries;
 export type PreparedSankeySeries = {
     type: SankeySeries['type'];

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

@@ -5,10 +5,12 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(d, plotHeight) {
+    var _a, _b;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.subTotal }, d.series.dataLabels));
+    const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
+    const text = getFormattedValue(Object.assign({ value: labelValue }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
     let y;
@@ -60,7 +62,7 @@ export const prepareWaterfallData = (args) => {
         acc.push(...s.data.map((d) => ({ data: d, series: s })));
         return acc;
     }, []);
-    const data = sortBy(flattenData, (d) => d.data.x);
+    const data = sortBy(flattenData, (d) => d.data.index);
     const bandWidth = getBandWidth({
         series,
         xAxis,

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

@@ -75,6 +75,8 @@ export interface ChartAxis {
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
+    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    visible?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
 }

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

@@ -36,5 +36,14 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** Individual series legend options. Has higher priority than legend options in widget data. */
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
+        /** The legend item text for positive, negative values and totals. */
+        itemText?: {
+            /** The legend item text for positive values. */
+            positive?: string;
+            /** The legend item text for negative values. */
+            negative?: string;
+            /** The legend item text for totals. */
+            totals?: string;
+        };
     };
 }

package/dist/esm/utils/chart/axis-generators/bottom.d.ts

@@ -19,6 +19,7 @@ type AxisBottomArgs = {
         size: number;
         color?: string;
     };
+    leftmostLimit?: number;
 };
 export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
 export {};

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -103,6 +103,21 @@ export function axisBottom(args) {
                 .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             labels.each(function (_d, i, nodes) {
+                if (i === 0) {
+                    const currentElement = this;
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const nextElement = nodes[i + 1];
+                    const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
+                    if (currentElementPosition.left < leftmostLimit) {
+                        const remainSpace = nextElementPosition.left -
+                            currentElementPosition.right +
+                            x -
+                            labelsMargin;
+                        text.attr('text-anchor', 'start');
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
                 if (i === nodes.length - 1) {
                     const currentElement = this;
                     const prevElement = nodes[i - 1];

package/dist/esm/utils/chart/get-closest-data.js

@@ -1,30 +1,40 @@
 import { Delaunay, bisector, sort } from 'd3';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
-function getClosestPointsByXValue(x, y, points) {
+function getClosestYIndex(items, y) {
     var _a, _b, _c, _d;
-    const sorted = sort(points, (p) => p.x);
-    const closestXIndex = bisector((p) => p.x).center(sorted, x);
-    if (closestXIndex === -1) {
-        return [];
-    }
-    const closestX = sorted[closestXIndex].x;
-    const closestPoints = sort(points.filter((p) => p.x === closestX), (p) => p.y0);
     let closestYIndex = -1;
-    if (y < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
+    if (y < ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
         closestYIndex = 0;
     }
-    else if (y > ((_b = closestPoints[closestPoints.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
-        closestYIndex = closestPoints.length - 1;
+    else if (y > ((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
+        closestYIndex = items.length - 1;
     }
     else {
-        closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+        closestYIndex = items.findIndex((p) => y > p.y0 && y < p.y1);
         if (closestYIndex === -1) {
-            const sortedY = sort(closestPoints.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
+            const sortedY = sort(items.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
             const sortedYIndex = bisector((p) => p.y).center(sortedY, y);
             closestYIndex = (_d = (_c = sortedY[sortedYIndex]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : -1;
         }
     }
+    return closestYIndex;
+}
+function getClosestPointsByXValue(x, y, points) {
+    const sorted = sort(points, (p) => p.x);
+    const closestXIndex = bisector((p) => p.x).center(sorted, x);
+    if (closestXIndex === -1) {
+        return [];
+    }
+    const closestX = sorted[closestXIndex].x;
+    const filtered = points.filter((p) => p.x === closestX);
+    const groupedBySeries = Object.values(groupBy(filtered, (p) => get(p.series, 'id'))).map((items) => {
+        const sortedByY = sort(items, (p) => p.y0);
+        const index = getClosestYIndex(sortedByY, y);
+        return sortedByY[index === -1 ? 0 : index];
+    });
+    const closestPoints = sort(groupedBySeries, (p) => p.y0);
+    const closestYIndex = getClosestYIndex(closestPoints, y);
     return closestPoints.map((p, i) => ({
         data: p.data,
         series: p.series,

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

@@ -2,6 +2,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
+import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { formatNumber, getNumberUnitRate } from '../../libs/format-number';
@@ -100,11 +101,10 @@ export const getDomainDataYBySeries = (series) => {
             }
             case 'waterfall': {
                 let yValue = 0;
-                seriesList.forEach((s) => {
-                    s.data.forEach((d) => {
-                        yValue += Number(d.y) || 0;
-                        acc.push(yValue);
-                    });
+                const points = seriesList.map((s) => s.data).flat();
+                sortBy(points, (p) => p.index).forEach((d) => {
+                    yValue += Number(d.y) || 0;
+                    acc.push(yValue);
                 });
                 break;
             }

package/dist/esm/utils/chart/series/waterfall.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedWaterfallSeries } from '../../../hooks';
+import type { PreparedWaterfallSeries, PreparedWaterfallSeriesData } from '../../../hooks';
 import type { WaterfallSeriesData } from '../../../types';
 export declare function getWaterfallPointColor(point: WaterfallSeriesData, series: PreparedWaterfallSeries): string;
-export declare function getWaterfallPointSubtotal(point: WaterfallSeriesData, series: PreparedWaterfallSeries): number | null;
+export declare function getWaterfallPointSubtotal(point: PreparedWaterfallSeriesData, series: PreparedWaterfallSeries): number | null;

package/dist/esm/utils/chart/series/waterfall.js

@@ -2,13 +2,7 @@ export function getWaterfallPointColor(point, series) {
     if (point.color) {
         return point.color;
     }
-    if (point.total) {
-        return series.color;
-    }
-    if (Number(point.y) > 0) {
-        return series.positiveColor;
-    }
-    return series.negativeColor;
+    return series.color;
 }
 export function getWaterfallPointSubtotal(point, series) {
     const pointIndex = series.data.indexOf(point);

package/dist/esm/utils/chart-ui/pie-center-text.d.ts

@@ -1,5 +1,6 @@
 export declare function pieCenterText(text: string, options?: {
     padding?: number;
+    color?: string;
 }): ((args: {
     series: {
         innerRadius: number;

package/dist/esm/utils/chart-ui/pie-center-text.js

@@ -7,6 +7,7 @@ export function pieCenterText(text, options) {
         return undefined;
     }
     const padding = get(options, 'padding', 12);
+    const color = get(options, 'color', 'currentColor');
     return function (args) {
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
@@ -17,7 +18,8 @@ export function pieCenterText(text, options) {
             .text(text)
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .style('font-size', `${fontSize}px`);
+            .style('font-size', `${fontSize}px`)
+            .style('fill', color);
         return container.node();
     };
 }

package/package.json

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