@gravity-ui/charts 1.18.1 → 1.19.0

package/dist/cjs/components/AxisY/AxisY.js

@@ -43,11 +43,13 @@ export const AxisY = (props) => {
                 .attr('y', (d) => d.y)
                 .attr('text-anchor', 'start');
         }
-        svgElement
-            .append('path')
-            .attr('class', b('domain'))
-            .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
-            .style('stroke', preparedAxisData.domain.lineColor);
+        if (preparedAxisData.domain) {
+            svgElement
+                .append('path')
+                .attr('class', b('domain'))
+                .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
+                .style('stroke', preparedAxisData.domain.lineColor);
+        }
         const tickClassName = b('tick');
         const ticks = svgElement
             .selectAll(`.${tickClassName}`)

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -86,11 +86,14 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
     const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
-    const domain = {
-        start: [domainX, axisPlotTopPosition],
-        end: [domainX, axisPlotTopPosition + axisHeight],
-        lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
-    };
+    let domain = null;
+    if (axis.visible) {
+        domain = {
+            start: [domainX, axisPlotTopPosition],
+            end: [domainX, axisPlotTopPosition + axisHeight],
+            lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+        };
+    }
     const ticks = [];
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
@@ -226,7 +229,7 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
             content: titleContent,
             style: axis.title.style,
             size: rotatedTitleSize,
-            x: x,
+            x,
             y: axisPlotTopPosition + y,
             rotate: rotateAngle,
             offset: -(originalTextSize.height / titleContent.length) * (titleContent.length - 1),

package/dist/cjs/components/AxisY/types.d.ts

@@ -74,7 +74,7 @@ export type AxisDomainData = {
 export type AxisYData = {
     id: string;
     title: AxisTitleData | null;
-    domain: AxisDomainData;
+    domain: AxisDomainData | null;
     ticks: AxisTickData[];
     plotLines: AxisPlotLineData[];
     plotBands: AxisPlotBandData[];

package/dist/cjs/components/AxisY/utils.js

@@ -15,8 +15,8 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
         }
         const getScaleTicks = () => {
             var _a;
+            const domainData = getDomainDataYBySeries(series);
             if (series.some((s) => s.type === 'bar-y')) {
-                const domainData = getDomainDataYBySeries(series);
                 if (domainData.length < 3) {
                     return domainData;
                 }

package/dist/cjs/components/ChartInner/index.js

@@ -13,6 +13,7 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
+import { useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
@@ -82,34 +83,27 @@ export const ChartInner = (props) => {
             unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
-    const [yAxisDataItems, setYAxisDataItems] = React.useState([]);
-    const countedRef = React.useRef(0);
-    React.useEffect(() => {
-        countedRef.current++;
-        (async function () {
-            const currentRun = countedRef.current;
-            const items = [];
-            for (let i = 0; i < yAxis.length; i++) {
-                const axis = yAxis[i];
-                const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
-                if (scale) {
-                    const axisData = await prepareAxisData({
-                        axis,
-                        scale,
-                        top: boundsOffsetTop,
-                        width: boundsWidth,
-                        height: boundsHeight,
-                        split: preparedSplit,
-                        series: preparedSeries,
-                    });
-                    items.push(axisData);
-                }
-            }
-            if (countedRef.current === currentRun) {
-                setYAxisDataItems(items);
+    const setYAxisDataItems = React.useCallback(async () => {
+        const items = [];
+        for (let i = 0; i < yAxis.length; i++) {
+            const axis = yAxis[i];
+            const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+            if (scale) {
+                const axisData = await prepareAxisData({
+                    axis,
+                    scale,
+                    top: boundsOffsetTop,
+                    width: boundsWidth,
+                    height: boundsHeight,
+                    split: preparedSplit,
+                    series: preparedSeries.filter((s) => s.visible),
+                });
+                items.push(axisData);
             }
-        })();
+        }
+        return items;
     }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
+    const yAxisDataItems = useAsyncState([], setYAxisDataItems);
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -41,10 +41,10 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../..").ChartTitle & {
+    title: (import("../../types").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../..").ChartTooltip<any> & {
+    tooltip: import("../../types").ChartTooltip<any> & {
         enabled: boolean;
         throttle: number;
     };

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -8,7 +8,7 @@ import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
 import { getActiveLegendItems } from '../../hooks/useSeries/utils';
 import { useZoom } from '../../hooks/useZoom';
 import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
-import { hasAtLeastOneSeriesDataPerPlot } from './utils';
+import { hasAtLeastOneSeriesDataPerPlot, useAsyncState } from './utils';
 export function useChartInnerProps(props) {
     var _a;
     const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode, clipPathId } = props;
@@ -38,44 +38,52 @@ export function useChartInnerProps(props) {
             zoomState,
         });
     }, [data.xAxis, data.yAxis, sortedSeriesData, zoomState]);
-    const [xAxis, setXAxis] = React.useState(null);
-    React.useEffect(() => {
-        setXAxis(null);
-        getPreparedXAxis({
+    const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
+        colors,
+        legend: data.legend,
+        originalSeriesData: sortedSeriesData,
+        seriesData: zoomedSeriesData,
+        seriesOptions: data.series.options,
+    });
+    const setAxes = React.useCallback(async () => {
+        const seriesData = preparedSeries.filter((s) => s.visible);
+        const xAxis = await getPreparedXAxis({
             xAxis: data.xAxis,
             width,
-            seriesData: zoomedSeriesData,
+            seriesData,
             seriesOptions: preparedSeriesOptions,
-        }).then((val) => setXAxis(val));
-    }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
-    const estimatedBoundsHeight = React.useMemo(() => {
+        });
+        let estimatedBoundsHeight = height;
         if (xAxis) {
-            return (height -
-                xAxis.title.height +
-                xAxis.title.margin +
-                xAxis.labels.margin +
-                parseInt(xAxis.labels.style.fontSize, 10));
+            estimatedBoundsHeight =
+                height -
+                    (xAxis.title.height +
+                        xAxis.title.margin +
+                        xAxis.labels.margin +
+                        xAxis.labels.height +
+                        (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                        chart.margin.top +
+                        chart.margin.bottom);
         }
-        return 0;
-    }, [height, xAxis]);
-    const [yAxis, setYAxis] = React.useState([]);
-    React.useEffect(() => {
-        setYAxis([]);
-        getPreparedYAxis({
+        const yAxis = await getPreparedYAxis({
             height,
             boundsHeight: estimatedBoundsHeight,
             width,
-            seriesData: zoomedSeriesData,
+            seriesData,
             yAxis: data.yAxis,
-        }).then((val) => setYAxis(val));
-    }, [data.yAxis, estimatedBoundsHeight, height, width, zoomedSeriesData]);
-    const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
-        colors,
-        legend: data.legend,
-        originalSeriesData: sortedSeriesData,
-        seriesData: zoomedSeriesData,
-        seriesOptions: data.series.options,
-    });
+        });
+        return { xAxis, yAxis };
+    }, [
+        chart.margin,
+        data.xAxis,
+        data.yAxis,
+        height,
+        preparedLegend,
+        preparedSeries,
+        preparedSeriesOptions,
+        width,
+    ]);
+    const { xAxis, yAxis } = useAsyncState({ xAxis: null, yAxis: [] }, setAxes);
     const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
     const { preparedSeries: preparedShapesSeries } = useShapeSeries({
         colors,

package/dist/cjs/components/ChartInner/utils.d.ts

@@ -1,3 +1,4 @@
 import type { PreparedAxis } from '../../hooks/useChartOptions/types';
 import type { ChartSeries } from '../../types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxes?: PreparedAxis[]): boolean;
+export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;

package/dist/cjs/components/ChartInner/utils.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
 export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     const hasDataMap = new Map();
     yAxes.forEach((yAxis) => {
@@ -26,3 +28,22 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     });
     return [...hasDataMap.values()].every((hasData) => hasData);
 }
+export function useAsyncState(value, setState) {
+    const [stateValue, setValue] = React.useState(value);
+    const countedRef = React.useRef(0);
+    const prevValue = React.useRef(value);
+    const ready = React.useRef(false);
+    React.useEffect(() => {
+        countedRef.current++;
+        (async function () {
+            const currentRun = countedRef.current;
+            const newValue = await setState();
+            ready.current = true;
+            if (countedRef.current === currentRun && !isEqual(prevValue.current, newValue)) {
+                setValue(newValue);
+                prevValue.current = newValue;
+            }
+        })();
+    }, [setState]);
+    return stateValue;
+}

package/dist/cjs/components/Legend/index.js

@@ -85,7 +85,7 @@ function renderLegendSymbol(args) {
             case 'path': {
                 const y = legendLineHeight / 2;
                 const points = [
-                    { x: x, y },
+                    { x, y },
                     { x: x + d.symbol.width, y },
                 ];
                 element

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -12,4 +12,4 @@ export interface ChartTooltipContentProps {
     yAxis?: ChartYAxis;
     qa?: string;
 }
-export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;
+export declare const ChartTooltipContent: React.MemoExoticComponent<(props: ChartTooltipContentProps) => React.JSX.Element | null>;

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
-export const ChartTooltipContent = (props) => {
+export const ChartTooltipContent = React.memo((props) => {
     const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
     return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis, qa: qa })) : (customTooltip);
-};
+});
+ChartTooltipContent.displayName = 'ChartTooltipContent';

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -150,6 +150,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                         });
                     }
                     case 'pie':
+                    case 'heatmap':
                     case 'treemap': {
                         const seriesData = data;
                         const formattedValue = getFormattedValue({

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.js

@@ -39,7 +39,7 @@ export function getDefaultValueFormat({ axis, closestPointsRange, }) {
 }
 export const getMeasureValue = ({ data, xAxis, yAxis, headerFormat, }) => {
     var _a, _b, _c, _d, _e, _f;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'heatmap'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'radar')) {
@@ -78,6 +78,7 @@ export function getHoveredValues(args) {
             }
             case 'pie':
             case 'radar':
+            case 'heatmap':
             case 'treemap': {
                 const seriesData = data;
                 return seriesData.value;

package/dist/cjs/constants/chart-types.d.ts

@@ -9,4 +9,5 @@ export declare const SeriesType: {
     readonly Waterfall: "waterfall";
     readonly Sankey: "sankey";
     readonly Radar: "radar";
+    readonly Heatmap: "heatmap";
 };

package/dist/cjs/constants/chart-types.js

@@ -9,4 +9,5 @@ export const SeriesType = {
     Waterfall: 'waterfall',
     Sankey: 'sankey',
     Radar: 'radar',
+    Heatmap: 'heatmap',
 };

package/dist/cjs/constants/defaults/series-options.js

@@ -117,4 +117,12 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    heatmap: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+        },
+    },
 };

package/dist/cjs/hooks/useAxisScales/index.js

@@ -3,8 +3,8 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
-import { getBandSize } from '../utils';
 import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
+import { getBandSize } from '../utils/get-band-size';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
     let hasNumberAndNullValues;
@@ -59,6 +59,10 @@ function getYScaleRange(args) {
         }
     }
 }
+function isSeriesWithYAxisOffset(series) {
+    const types = [SeriesType.BarY, SeriesType.Heatmap];
+    return series.some((s) => types.includes(s.type));
+}
 // eslint-disable-next-line complexity
 export function createYScale(args) {
     const { axis, boundsHeight, series } = args;
@@ -89,9 +93,9 @@ export function createYScale(args) {
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 const scale = scaleFn().domain([yMin, yMax]).range(range);
                 let offsetMin = 0;
-                let offsetMax = boundsHeight * axis.maxPadding;
-                const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-                if (barYSeries.length) {
+                // We should ignore padding if we are drawing only one point on the plot.
+                let offsetMax = yMin === yMax ? 0 : boundsHeight * axis.maxPadding;
+                if (isSeriesWithYAxisOffset(series)) {
                     if (domain.length > 1) {
                         const bandWidth = getBandSize({
                             scale: scale,
@@ -138,8 +142,7 @@ export function createYScale(args) {
                     const scale = scaleUtc().domain([yMin, yMax]).range(range);
                     let offsetMin = 0;
                     let offsetMax = boundsHeight * axis.maxPadding;
-                    const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-                    if (barYSeries.length) {
+                    if (isSeriesWithYAxisOffset(series)) {
                         if (Object.keys(domain).length > 1) {
                             const bandWidth = getBandSize({
                                 scale: scale,
@@ -175,6 +178,10 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+function isSeriesWithXAxisOffset(series) {
+    const types = [SeriesType.Heatmap];
+    return series.some((s) => types.includes(s.type));
+}
 function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, maxPadding, }) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth - maxPadding];
@@ -252,7 +259,23 @@ export function createXScale(args) {
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
                 const scale = scaleFn().domain([xMin, xMax]).range(range);
-                if (!hasZoomX) {
+                let offsetMin = 0;
+                let offsetMax = 0;
+                const hasOffset = isSeriesWithXAxisOffset(series);
+                if (hasOffset) {
+                    if (domainData.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domainData,
+                        });
+                        offsetMin += bandWidth / 2;
+                        offsetMax += bandWidth / 2;
+                    }
+                }
+                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                if (!hasZoomX && !hasOffset) {
                     // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                     scale.nice(Math.max(10, domainData.length));
                 }
@@ -288,7 +311,23 @@ export function createXScale(args) {
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
-                if (!hasZoomX) {
+                let offsetMin = 0;
+                let offsetMax = 0;
+                const hasOffset = isSeriesWithXAxisOffset(series);
+                if (hasOffset) {
+                    if (domainData.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domainData,
+                        });
+                        offsetMin += bandWidth / 2;
+                        offsetMax += bandWidth / 2;
+                    }
+                }
+                const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                if (!hasZoomX && !hasOffset) {
                     // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                     scale.nice(Math.max(10, domainData.length));
                 }

package/dist/cjs/hooks/useChartOptions/tooltip.js

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
 function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
-    if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar'].includes(item.type))) {
+    if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap'].includes(item.type))) {
         return undefined;
     }
     if (seriesData.some((item) => item.type === 'bar-y')) {

package/dist/cjs/hooks/useChartOptions/x-axis.d.ts

@@ -6,4 +6,4 @@ export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, widt
     seriesData: ChartSeries[];
     seriesOptions: PreparedSeriesOptions;
     width: number;
-}) => Promise<PreparedAxis>;
+}) => Promise<PreparedAxis | null>;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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,
+        };
+    }, []);
+}