@gravity-ui/charts 1.18.2 → 1.20.0

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SeriesType, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
@@ -49,8 +49,18 @@ async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
     axis.labels.height = Math.min(maxHeight, labelsHeight);
     axis.labels.rotation = rotation;
 }
+function getMaxPaddingBySeries({ series }) {
+    if (series.some((s) => s.type === SeriesType.Heatmap)) {
+        return 0;
+    }
+    return 0.01;
+}
 export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
     var _a, _b, _c, _d, _e;
+    const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
+    if (!hasAxisRelatedSeries) {
+        return Promise.resolve(null);
+    }
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
     const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
@@ -70,6 +80,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
     const labelsLineHeight = labelsHtml
         ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
         : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
+    const shouldHideGrid = seriesData.some((s) => s.type === SeriesType.Heatmap);
     const preparedXAxis = {
         type: get(xAxis, 'type', 'linear'),
         labels: {
@@ -100,9 +111,9 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
         },
         min: get(xAxis, 'min'),
         max: get(xAxis, 'max'),
-        maxPadding: get(xAxis, 'maxPadding', 0.01),
+        maxPadding: get(xAxis, 'maxPadding', getMaxPaddingBySeries({ series: seriesData })),
         grid: {
-            enabled: get(xAxis, 'grid.enabled', true),
+            enabled: shouldHideGrid ? false : get(xAxis, 'grid.enabled', true),
         },
         ticks: {
             pixelInterval: ((_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _c === void 0 ? void 0 : _c.interval)

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { calculateNumericProperty, formatAxisTickLabel, getClosestPointsRange, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SeriesType, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
@@ -20,8 +20,7 @@ const getAxisLabelMaxWidth = async (args) => {
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
     const tickValues = getTickValues({ axis, scale, labelLineHeight, series: seriesData });
-    const ticks = getScaleTicks(scale);
-    const tickStep = getClosestPointsRange(axis, ticks);
+    const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !axis.labels.dateFormat) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);
     }
@@ -38,6 +37,12 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return { height: size.maxHeight, width: size.maxWidth };
 };
+function getMaxPaddingBySeries({ series }) {
+    if (series.some((s) => s.type === SeriesType.Heatmap)) {
+        return 0;
+    }
+    return 0.05;
+}
 export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
@@ -72,6 +77,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         })).slice(0, titleMaxRowsCount);
         const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
+        const shouldHideGrid = axisItem.visible === false || seriesData.some((s) => s.type === SeriesType.Heatmap);
         const preparedAxis = {
             type: axisType,
             labels: {
@@ -104,10 +110,12 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             },
             min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(seriesData),
             max: get(axisItem, 'max'),
-            maxPadding: get(axisItem, 'maxPadding', 0.05),
+            maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: seriesData })),
             grid: {
-                enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
-                    (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
+                enabled: shouldHideGrid
+                    ? false
+                    : get(axisItem, 'grid.enabled', firstPlotAxis ||
+                        (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
             },
             ticks: {
                 pixelInterval: ((_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.interval)

package/dist/esm/hooks/useSeries/prepare-heatmap.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleOrdinal } from 'd3';
+import type { ChartSeriesOptions, HeatmapSeries } from '../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareHeatmapSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: HeatmapSeries[];
+    legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
+};
+export declare function prepareHeatmapSeries(args: PrepareHeatmapSeriesArgs): PreparedSeries[];
+export {};

package/dist/esm/hooks/useSeries/prepare-heatmap.js

@@ -0,0 +1,37 @@
+import get from 'lodash/get';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareHeatmapSeries(args) {
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
+    return seriesList.map((series) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getUniqId(),
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            data: series.data,
+            dataLabels: {
+                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                html: (_d = (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : false,
+                format: (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.format,
+            },
+            cursor: get(series, 'cursor', null),
+            yAxis: get(series, 'yAxis', 0),
+            tooltip: series.tooltip,
+            borderColor: (_h = (_f = series.borderColor) !== null && _f !== void 0 ? _f : (_g = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _g === void 0 ? void 0 : _g.borderColor) !== null && _h !== void 0 ? _h : 'var(--gcharts-shape-border-color)',
+            borderWidth: (_l = (_j = series.borderWidth) !== null && _j !== void 0 ? _j : (_k = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _k === void 0 ? void 0 : _k.borderWidth) !== null && _l !== void 0 ? _l : 0,
+        };
+    }, []);
+}

package/dist/esm/hooks/useSeries/prepareSeries.js

@@ -2,6 +2,7 @@ import { ChartError } from '../../libs';
 import { prepareArea } from './prepare-area';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
+import { prepareHeatmapSeries } from './prepare-heatmap';
 import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
 import { prepareRadarSeries } from './prepare-radar';
@@ -90,6 +91,14 @@ export async function prepareSeries(args) {
                 colors,
             });
         }
+        case 'heatmap': {
+            return await prepareHeatmapSeries({
+                series: series,
+                legend,
+                colorScale,
+                seriesOptions,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

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

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ConnectorCurve, ConnectorShape, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -137,6 +137,18 @@ export type PreparedBarYSeries = {
     borderWidth: number;
     borderColor: string;
 } & BasePreparedSeries;
+export type PreparedHeatmapSeries = {
+    type: HeatmapSeries['type'];
+    data: HeatmapSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        html: boolean;
+        format?: ValueFormat;
+    };
+    borderWidth: number;
+    borderColor: string;
+} & BasePreparedSeries;
 export type PreparedPieSeries = {
     type: PieSeries['type'];
     data: PieSeriesData;
@@ -313,7 +325,7 @@ export type PreparedRadarSeries = {
         };
     };
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/dist/esm/hooks/useShapes/heatmap/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedHeatmapData } from './types';
+export { prepareHeatmapData } from './prepare-data';
+export * from './types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedHeatmapData;
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const HeatmapSeriesShapes: (args: Args) => React.JSX.Element;

package/dist/esm/hooks/useShapes/heatmap/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { color, select } from 'd3';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+export { prepareHeatmapData } from './prepare-data';
+export * from './types';
+const b = block('heatmap');
+export const HeatmapSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a, _b;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = (_b = (_a = seriesOptions.heatmap) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.hover;
+        svgElement.selectAll('*').remove();
+        // heatmap cells
+        const cellsSelection = svgElement
+            .selectAll('rect')
+            .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)
+            .attr('fill', (d) => d.color)
+            .attr('stroke', (d) => d.borderColor)
+            .attr('stroke-width', (d) => d.borderWidth);
+        // dataLabels
+        svgElement
+            .selectAll('text')
+            .data(preparedData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            if (hoverEnabled) {
+                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
+                    acc.add(d.data);
+                    return acc;
+                }, new Set());
+                cellsSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.heatmap', handleShapeHover);
+        return () => {
+            dispatcher.on('hover-shape.heatmap', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+};

package/dist/esm/hooks/useShapes/heatmap/prepare-data.d.ts

@@ -0,0 +1,13 @@
+import type { ChartScale } from '../../../hooks/useAxisScales';
+import type { PreparedAxis } from '../../../hooks/useChartOptions/types';
+import type { PreparedHeatmapSeries } from '../../useSeries/types';
+import type { PreparedHeatmapData } from './types';
+type PrepareHeatmapDataArgs = {
+    series: PreparedHeatmapSeries;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis;
+    xScale: ChartScale;
+    yScale: ChartScale;
+};
+export declare function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale, }: PrepareHeatmapDataArgs): Promise<PreparedHeatmapData>;
+export {};

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

@@ -0,0 +1,97 @@
+import { getBandSize } from '../../../hooks/utils/get-band-size';
+import { getDomainDataXBySeries, getDomainDataYBySeries, getFormattedValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isBandScale, } from '../../../utils';
+export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale, }) {
+    var _a, _b, _c, _d, _e;
+    const yDomainData = getDomainDataYBySeries([series]);
+    const bandHeight = getBandSize({ domain: yDomainData, scale: yScale });
+    const yAxisCategories = (_a = yAxis.categories) !== null && _a !== void 0 ? _a : [];
+    const xDomainData = getDomainDataXBySeries([series]);
+    const bandWidth = getBandSize({ domain: xDomainData, scale: xScale });
+    const xAxisCategories = (_b = xAxis.categories) !== null && _b !== void 0 ? _b : [];
+    const heatmapItems = series.data.map((d) => {
+        var _a, _b, _c;
+        let x = 0;
+        if (isBandScale(xScale)) {
+            x = (_a = xScale(xAxisCategories[d.x])) !== null && _a !== void 0 ? _a : 0;
+        }
+        else {
+            const scale = xScale;
+            x = scale(d.x) - bandWidth / 2;
+        }
+        let y = 0;
+        if (isBandScale(yScale)) {
+            y = (_b = yScale(yAxisCategories[d.y])) !== null && _b !== void 0 ? _b : 0;
+        }
+        else {
+            const scale = yScale;
+            y = scale(d.y) - bandHeight / 2;
+        }
+        const item = {
+            x,
+            y,
+            color: (_c = d.color) !== null && _c !== void 0 ? _c : series.color,
+            width: bandWidth,
+            height: bandHeight,
+            borderColor: series.borderColor,
+            borderWidth: series.borderWidth,
+            data: d,
+        };
+        return item;
+    });
+    const svgDataLabels = [];
+    const htmlDataLabels = [];
+    if (series.dataLabels.enabled) {
+        if (series.dataLabels.html) {
+            for (let i = 0; i < heatmapItems.length; i++) {
+                const item = heatmapItems[i];
+                const labelContent = (_c = item.data.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: item.data.value, format: series.dataLabels.format });
+                if (labelContent) {
+                    const dataLabelsStyle = Object.assign(Object.assign({}, series.dataLabels.style), { maxWidth: `${item.width}px`, maxHeight: `${item.height}px`, overflow: 'hidden' });
+                    const { maxHeight: height, maxWidth: width } = (_d = (await getLabelsSize({
+                        labels: [labelContent],
+                        style: dataLabelsStyle,
+                        html: true,
+                    }))) !== null && _d !== void 0 ? _d : {};
+                    const size = { width, height };
+                    htmlDataLabels.push({
+                        x: item.x + item.width / 2 - size.width / 2,
+                        y: item.y + item.height / 2 - size.height / 2,
+                        content: labelContent,
+                        style: dataLabelsStyle,
+                        size,
+                    });
+                }
+            }
+        }
+        else {
+            const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
+            for (let i = 0; i < heatmapItems.length; i++) {
+                const item = heatmapItems[i];
+                const labelContent = (_e = item.data.label) !== null && _e !== void 0 ? _e : getFormattedValue({ value: item.data.value, format: series.dataLabels.format });
+                if (labelContent) {
+                    const size = await getTextSize(labelContent);
+                    const text = await getTextWithElipsis({
+                        text: labelContent,
+                        getTextWidth: (s) => getTextSize(s).then((value) => value.width),
+                        maxWidth: item.width,
+                    });
+                    if (text) {
+                        svgDataLabels.push({
+                            x: item.x + item.width / 2 - size.width / 2,
+                            y: item.y + item.height / 2 - size.height / 2,
+                            text,
+                            style: series.dataLabels.style,
+                        });
+                    }
+                }
+            }
+        }
+    }
+    const preparedData = {
+        series: series,
+        htmlElements: htmlDataLabels,
+        items: heatmapItems,
+        labels: svgDataLabels,
+    };
+    return preparedData;
+}

package/dist/esm/hooks/useShapes/heatmap/types.d.ts

@@ -0,0 +1,24 @@
+import type { BaseTextStyle, HeatmapSeriesData, HtmlItem } from '../../../types';
+import type { PreparedHeatmapSeries } from '../../useSeries/types';
+export type HeatmapItem = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    borderColor: string | null;
+    borderWidth: number | null;
+    data: HeatmapSeriesData;
+};
+export type HeatmapLabel = {
+    x: number;
+    y: number;
+    text: string;
+    style: BaseTextStyle;
+};
+export type PreparedHeatmapData = {
+    series: PreparedHeatmapSeries;
+    items: HeatmapItem[];
+    htmlElements: HtmlItem[];
+    labels: HeatmapLabel[];
+};

package/dist/esm/hooks/useShapes/heatmap/types.js

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

package/dist/esm/hooks/useShapes/index.d.ts

@@ -6,6 +6,7 @@ import type { PreparedAxis } from '../useChartOptions/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
+import type { PreparedHeatmapData } from './heatmap';
 import type { PreparedLineData } from './line/types';
 import type { PreparedPieData } from './pie/types';
 import type { PreparedRadarData } from './radar/types';
@@ -15,7 +16,7 @@ export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

package/dist/esm/hooks/useShapes/index.js

@@ -6,6 +6,7 @@ import { AreaSeriesShapes } from './area';
 import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { HeatmapSeriesShapes, prepareHeatmapData } from './heatmap';
 import { LineSeriesShapes } from './line';
 import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
@@ -174,6 +175,20 @@ export const useShapes = (args) => {
                         shapesData.push(...preparedData);
                         break;
                     }
+                    case 'heatmap': {
+                        if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
+                            const preparedData = await prepareHeatmapData({
+                                series: chartSeries[0],
+                                xAxis,
+                                xScale,
+                                yAxis: yAxis[0],
+                                yScale: yScale[0],
+                            });
+                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: "heatmap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapesData.push(preparedData);
+                        }
+                        break;
+                    }
                     default: {
                         throw new ChartError({
                             message: `The display method is not defined for a series with type "${seriesType}"`,

package/dist/esm/hooks/useShapes/styles.css

@@ -36,4 +36,8 @@
 
 .gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
+}
+
+.gcharts-heatmap__label {
+  dominant-baseline: text-before-edge;
 }

package/dist/esm/hooks/useTooltip/index.js

@@ -1,10 +1,20 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 export const useTooltip = ({ dispatcher, tooltip }) => {
     const [{ hovered, pointerPosition }, setTooltipState] = React.useState({});
+    const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
             dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition) => {
-                setTooltipState({ hovered: nextHovered, pointerPosition: nextPointerPosition });
+                const isHoveredChanged = !isEqual(prevHovered.current, nextHovered);
+                const newTooltipState = {
+                    pointerPosition: nextPointerPosition,
+                    hovered: isHoveredChanged ? nextHovered : prevHovered.current,
+                };
+                if (isHoveredChanged) {
+                    prevHovered.current = nextHovered;
+                }
+                setTooltipState(newTooltipState);
             });
         }
         return () => {

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

@@ -1,4 +1,3 @@
-import type { AxisDomain, AxisScale } from 'd3';
 import type { BarYSeries, BarYSeriesData } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
@@ -7,10 +6,6 @@ export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBar
     data: BarYSeriesData;
     series: T;
 }[]>>;
-export declare function getBandSize({ domain, scale, }: {
-    domain: AxisDomain[];
-    scale: AxisScale<AxisDomain> | undefined;
-}): number;
 export declare function getBarYLayout(args: {
     plotHeight: number;
     seriesOptions: PreparedSeriesOptions;

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

@@ -1,8 +1,9 @@
 import { max } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue, isBandScale } from '../../utils';
+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 groupBarYDataByYValue(series, yAxis) {
     const data = {};
     series.forEach((s) => {
@@ -27,34 +28,6 @@ export function groupBarYDataByYValue(series, yAxis) {
     });
     return data;
 }
-export function getBandSize({ domain, scale, }) {
-    if (!scale || !domain.length) {
-        return 0;
-    }
-    if (isBandScale(scale)) {
-        return scale.bandwidth();
-    }
-    const range = scale.range();
-    const plotHeight = Math.abs(range[0] - range[1]);
-    if (domain.length === 1) {
-        return plotHeight;
-    }
-    // for the numeric or datetime axes, you first need to count domain.length + 1,
-    // since the extreme points are located not in the center of the bar, but along the edges of the axes
-    let bandWidth = plotHeight / (domain.length - 1);
-    domain.forEach((current, index) => {
-        if (index > 0) {
-            const prev = domain[index - 1];
-            const prevY = scale(prev);
-            const currentY = scale(current);
-            if (typeof prevY === 'number' && typeof currentY === 'number') {
-                const distance = Math.abs(prevY - currentY);
-                bandWidth = Math.min(bandWidth, distance);
-            }
-        }
-    });
-    return bandWidth;
-}
 export function getBarYLayout(args) {
     const { groupedData, seriesOptions, scale } = args;
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');

package/dist/esm/hooks/utils/get-band-size.d.ts

@@ -0,0 +1,5 @@
+import type { AxisDomain, AxisScale } from 'd3';
+export declare function getBandSize({ domain, scale, }: {
+    domain: AxisDomain[];
+    scale: AxisScale<AxisDomain> | undefined;
+}): number;

package/dist/esm/hooks/utils/get-band-size.js

@@ -0,0 +1,29 @@
+import { isBandScale } from '../../utils';
+export function getBandSize({ domain, scale, }) {
+    if (!scale || !domain.length) {
+        return 0;
+    }
+    if (isBandScale(scale)) {
+        return scale.bandwidth();
+    }
+    const range = scale.range();
+    const plotHeight = Math.abs(range[0] - range[1]);
+    if (domain.length === 1) {
+        return plotHeight;
+    }
+    // for the numeric or datetime axes, you first need to count domain.length + 1,
+    // since the extreme points are located not in the center of the bar, but along the edges of the axes
+    let bandWidth = plotHeight / (domain.length - 1);
+    domain.forEach((current, index) => {
+        if (index > 0) {
+            const prev = domain[index - 1];
+            const prevY = scale(prev);
+            const currentY = scale(current);
+            if (typeof prevY === 'number' && typeof currentY === 'number') {
+                const distance = Math.abs(prevY - currentY);
+                bandWidth = Math.min(bandWidth, distance);
+            }
+        }
+    });
+    return bandWidth;
+}

package/dist/esm/i18n/keysets/en.json

@@ -18,7 +18,8 @@
     "label_invalid-tooltip-totals-aggregation-type-str": "It seems you are trying to use inappropriate value for built-in \"tooltip.totals.aggregation\". Available values: [{{values}}].",
     "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}].",
     "label_invalid-axis-labels-html-type": "It seems you are trying to use inappropriate type for \"labels.html\" property. Only boolean is allowed.",
-    "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis."
+    "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
+    "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}]."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/esm/i18n/keysets/ru.json

@@ -18,7 +18,8 @@
     "label_invalid-tooltip-totals-aggregation-type-str": "Похоже, что вы пытаетесь использовать некорректное значение для встроенной агрегации \"tooltip.totals.aggregation\". Доступные значения: [{{values}}].",
     "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}].",
     "label_invalid-axis-labels-html-type": "Похоже, что вы пытаетесь использовать некорректный тип для свойства \"labels.html\". Допускается только использование булевых значений.",
-    "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\"."
+    "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
+    "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}]."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",