@gravity-ui/charts 1.0.1 → 1.2.0

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

@@ -1,6 +1,7 @@
 import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
-import type { PreparedAxis, PreparedSplit } from '../../hooks';
+import type { PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../hooks';
 import type { TextRow } from './text';
+import type { AxisDirection } from './types';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
@@ -29,3 +30,13 @@ export declare function getAxisTitleRows(args: {
     axis: PreparedAxis;
     textMaxWidth: number;
 }): TextRow[];
+interface GetBandsPositionArgs {
+    band: PreparedAxisPlotBand;
+    axisScale: AxisScale<AxisDomain>;
+    axis: AxisDirection;
+}
+export declare function getBandsPosition(args: GetBandsPositionArgs): {
+    from: number;
+    to: number;
+};
+export {};

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

@@ -1,3 +1,4 @@
+import clamp from 'lodash/clamp';
 import { wrapText } from './text';
 export function getTicksCount({ axis, range }) {
     let ticksCount;
@@ -69,3 +70,37 @@ export function getAxisTitleRows(args) {
         return acc;
     }, []);
 }
+export function getBandsPosition(args) {
+    var _a, _b, _c;
+    const { band, axisScale } = args;
+    const scalePosTo = axisScale(band.to);
+    const scalePosFrom = axisScale(band.from);
+    const isX = args.axis === 'x';
+    if (scalePosTo !== undefined && scalePosFrom !== undefined) {
+        return {
+            from: Math.max(scalePosFrom, 0),
+            to: Math.max(scalePosTo, 0),
+        };
+    }
+    if (typeof band.from !== 'number' || typeof band.to !== 'number') {
+        throw new Error('Filed to create plot band');
+    }
+    const category = axisScale.domain();
+    const bandwidth = (_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 1;
+    const halfBandwidth = bandwidth / 2;
+    const calcPosition = (value) => {
+        var _a, _b;
+        if (value >= category.length) {
+            return ((_a = axisScale(category[category.length - 1])) !== null && _a !== void 0 ? _a : 0) + halfBandwidth * (isX ? 1 : -1);
+        }
+        return (((_b = axisScale(category[clamp(Math.floor(value), 0, category.length - 1)])) !== null && _b !== void 0 ? _b : 0) +
+            bandwidth * (value - Math.floor(Math.abs(value))) * (isX ? 1 : -1));
+    };
+    const to = calcPosition(band.to);
+    const from = calcPosition(band.from);
+    const maxPos = ((_c = axisScale(category[isX ? category.length - 1 : 0])) !== null && _c !== void 0 ? _c : 0) + halfBandwidth;
+    return {
+        from: clamp(from, -halfBandwidth, maxPos),
+        to: clamp(to, -halfBandwidth, maxPos),
+    };
+}

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.d.ts

@@ -1,6 +1,7 @@
 import type { AxisDomain } from 'd3';
 import type { PreparedAxis } from '../../hooks';
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
+import type { AxisDirection } from './types';
 export * from './math';
 export * from './text';
 export * from './time';
@@ -12,7 +13,6 @@ export * from './series';
 export * from './color';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
-export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartSeries['type'];
     data: unknown;
@@ -76,3 +76,4 @@ export declare const getDataCategoryValue: (args: {
     data: ChartSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
+export { AxisDirection };

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/types.d.ts

@@ -0,0 +1 @@
+export type AxisDirection = 'x' | 'y';

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

@@ -0,0 +1 @@
+export {};

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/dist/esm/validation/index.js

@@ -95,6 +95,148 @@ const validateXYSeries = (args) => {
         }
     });
 };
+const validateAxisPlotValues = (args) => {
+    const { series, xAxis, yAxis = [] } = args;
+    const yAxisIndex = get(series, 'yAxis', 0);
+    const seriesYAxis = yAxis[yAxisIndex];
+    if (yAxisIndex !== 0 && typeof seriesYAxis === 'undefined') {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-y-axis-index', {
+                index: yAxisIndex,
+            }),
+        });
+    }
+    const xPlotBands = get(xAxis, 'plotBands', []);
+    const yPlotBands = get(yAxis, 'plotBands', []);
+    if (!xPlotBands.length && !yPlotBands.length) {
+        return;
+    }
+    const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
+    const yType = get(seriesYAxis, 'type', DEFAULT_AXIS_TYPE);
+    xPlotBands.forEach(({ from = 0, to = 0 }) => {
+        const fromNotEqualTo = typeof to !== typeof from;
+        if (fromNotEqualTo) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                message: i18n('error', 'label_axis-plot-band-options-not-equal', {
+                    axis: 'x',
+                    option: 'from',
+                }),
+            });
+        }
+        switch (xType) {
+            case 'category': {
+                const invalidFrom = typeof from !== 'string' && typeof from !== 'number';
+                const invalidTo = typeof to !== 'string' && typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear':
+            case 'datetime': {
+                const invalidFrom = typeof from !== 'number';
+                const invalidTo = typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+        }
+    });
+    yPlotBands.forEach(({ from = 0, to = 0 }) => {
+        const fromNotEqualTo = typeof to !== typeof from;
+        if (fromNotEqualTo) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                message: i18n('error', 'label_axis-plot-band-options-not-equal', {
+                    axis: 'x',
+                    option: 'from',
+                }),
+            });
+        }
+        switch (yType) {
+            case 'category': {
+                const invalidFrom = typeof from !== 'string' && typeof from !== 'number';
+                const invalidTo = typeof to !== 'string' && typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear':
+            case 'datetime': {
+                const invalidFrom = typeof from !== 'number';
+                const invalidTo = typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+        }
+    });
+};
 const validatePieSeries = ({ series }) => {
     series.data.forEach(({ value }) => {
         if (typeof value !== 'number') {
@@ -163,12 +305,14 @@ const validateSeries = (args) => {
         case 'area':
         case 'bar-y':
         case 'bar-x': {
+            validateAxisPlotValues({ series, xAxis, yAxis });
             validateXYSeries({ series, xAxis, yAxis });
             validateStacking({ series });
             break;
         }
         case 'line':
         case 'scatter': {
+            validateAxisPlotValues({ series, xAxis, yAxis });
             validateXYSeries({ series, xAxis, yAxis });
             break;
         }

package/package.json

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