@gravity-ui/charts 1.18.2 → 1.20.0

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

@@ -69,7 +69,9 @@ export interface ChartAxis {
     min?: number;
     /** The maximum value of the axis. If undefined the max value is automatically calculate. */
     max?: number;
-    /** The grid lines settings. */
+    /** The grid lines settings.
+     * Unavailable for some visualizations, such as a heatmap.
+     */
     grid?: {
         /** Enable or disable the grid lines.
          * @default true

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

@@ -0,0 +1,47 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, 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:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: number;
+    /**
+     * The `y` value of the heatmap cell. Depending on the context, it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /** Value of the heatmap cell */
+    value?: number;
+    /** Data label value of the heatmap cell. If not specified, the value is used. */
+    label?: string;
+}
+export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SeriesType.Heatmap;
+    data: HeatmapSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    dataLabels?: BaseSeries['dataLabels'];
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /**
+     * The width of the border surrounding each cell.
+     *
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * The color of the border surrounding each cell.
+     */
+    borderColor?: string;
+}

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

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

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

@@ -5,6 +5,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { Halo } from './halo';
+import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
@@ -13,8 +14,8 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T>;
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -268,4 +269,20 @@ export interface ChartSeriesOptions {
         /** Options for the point markers of radar series */
         marker?: PointMarkerOptions;
     };
+    heatmap?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+        };
+        /**
+         * The width of the border surrounding each cell.
+         *
+         * @default 0
+         */
+        borderWidth?: number;
+        /**
+         * The color of the border surrounding each cell.
+         */
+        borderColor?: string;
+    };
 }

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

@@ -5,6 +5,7 @@ import type { ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { CustomFormat, ValueFormat } from './base';
+import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { RadarSeries, RadarSeriesCategory, RadarSeriesData } from './radar';
@@ -72,7 +73,12 @@ export interface TooltipDataChunkRadar<T = MeaningfulAny> {
     category?: RadarSeriesCategory;
     closest: boolean;
 }
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T>) & {
+export interface TooltipDataChunkHeatmap<T = MeaningfulAny> {
+    data: HeatmapSeriesData<T>;
+    series: HeatmapSeries<T>;
+    closest: boolean;
+}
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T> | TooltipDataChunkHeatmap<T>) & {
     closest?: boolean;
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {

package/dist/esm/types/index.d.ts

@@ -28,6 +28,7 @@ export * from './chart/treemap';
 export * from './chart/waterfall';
 export * from './chart/sankey';
 export * from './chart/radar';
+export * from './chart/heatmap';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

package/dist/esm/types/index.js

@@ -20,3 +20,4 @@ export * from './chart/treemap';
 export * from './chart/waterfall';
 export * from './chart/sankey';
 export * from './chart/radar';
+export * from './chart/heatmap';

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

@@ -3,8 +3,9 @@ export function getDomainForContinuousColorScale(args) {
     const { series } = args;
     const values = series.reduce((acc, s) => {
         switch (s.type) {
-            case 'pie': {
-                acc.push(...s.data.map((d) => d.value));
+            case 'pie':
+            case 'heatmap': {
+                acc.push(...s.data.map((d) => Number(d.value)));
                 break;
             }
             case 'bar-y': {

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

@@ -49,7 +49,7 @@ export function getClosestPoints(args) {
     const groups = groupBy(shapesData, getSeriesType);
     // eslint-disable-next-line complexity
     Object.entries(groups).forEach(([seriesType, list]) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         switch (seriesType) {
             case 'bar-x': {
                 const points = list.map((d) => ({
@@ -177,6 +177,23 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'heatmap': {
+                const data = list;
+                const closestPoint = (_d = data[0]) === null || _d === void 0 ? void 0 : _d.items.find((cell) => {
+                    return (pointerX >= cell.x &&
+                        pointerX <= cell.x + cell.width &&
+                        pointerY >= cell.y &&
+                        pointerY <= cell.y + cell.height);
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data,
+                        series: data[0].series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
             case 'sankey': {
                 const [data] = list;
                 const closestLink = data.links.find((d) => {

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

@@ -2,7 +2,7 @@ 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 { DEFAULT_AXIS_LABEL_FONT_SIZE, SeriesType } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { getWaterfallPointSubtotal } from './series/waterfall';
 export * from './axis';
@@ -109,19 +109,16 @@ export function getDefaultMinXAxisValue(series) {
 }
 export function getDefaultMinYAxisValue(series) {
     if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+        if (series.some((s) => s.type === SeriesType.Waterfall)) {
+            const seriesData = series.map((s) => s.data).flat();
+            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
+            return Math.min(0, minSubTotal);
+        }
         return series.reduce((minValue, s) => {
-            switch (s.type) {
-                case 'waterfall': {
-                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
-                    return Math.min(minValue, minSubTotal);
-                }
-                default: {
-                    // https://github.com/gravity-ui/charts/issues/160
-                    // @ts-expect-error
-                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-                    return Math.min(minValue, minYValue);
-                }
-            }
+            // https://github.com/gravity-ui/charts/issues/160
+            // @ts-expect-error
+            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
+            return Math.min(minValue, minYValue);
         }, 0);
     }
     return undefined;

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

@@ -1,4 +1,4 @@
 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: PreparedWaterfallSeriesData, series: PreparedWaterfallSeries): number | null;
+export declare function getWaterfallPointSubtotal(point: PreparedWaterfallSeriesData, data: PreparedWaterfallSeriesData[]): number | null;

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

@@ -4,12 +4,12 @@ export function getWaterfallPointColor(point, series) {
     }
     return series.color;
 }
-export function getWaterfallPointSubtotal(point, series) {
-    const pointIndex = series.data.indexOf(point);
+export function getWaterfallPointSubtotal(point, data) {
+    const pointIndex = data.indexOf(point);
     if (pointIndex === -1) {
         return null;
     }
-    return series.data.reduce((sum, d, index) => {
+    return data.reduce((sum, d, index) => {
         if (index <= pointIndex) {
             const value = d.total ? 0 : Number(d.y);
             return sum + value;

package/dist/esm/validation/validate-axes.js

@@ -2,6 +2,22 @@ import { AXIS_TYPE } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
 const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
+function validateDuplicateCategories({ categories, key, axisIndex, }) {
+    const seen = new Set();
+    categories.forEach((category) => {
+        if (seen.has(category)) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_duplicate-axis-categories', {
+                    key,
+                    axisIndex,
+                    duplicate: category,
+                }),
+            });
+        }
+        seen.add(category);
+    });
+}
 function validateAxisType({ axis, key }) {
     if (axis.type && !AVAILABLE_AXIS_TYPES.includes(axis.type)) {
         throw new ChartError({
@@ -38,9 +54,23 @@ export function validateAxes(args) {
     if (xAxis) {
         validateAxisType({ axis: xAxis, key: 'x' });
         validateLabelsHtmlOptions({ axis: xAxis });
+        if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category' && xAxis.categories) {
+            validateDuplicateCategories({
+                categories: xAxis.categories,
+                key: 'x',
+                axisIndex: 0,
+            });
+        }
     }
-    yAxis.forEach((axis) => {
+    yAxis.forEach((axis, axisIndex) => {
         validateAxisType({ axis, key: 'y' });
+        if (axis.type === 'category' && axis.categories) {
+            validateDuplicateCategories({
+                categories: axis.categories,
+                key: 'y',
+                axisIndex,
+            });
+        }
         validateLabelsHtmlOptions({ axis });
     });
 }

package/package.json

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