@gravity-ui/charts 1.17.0 → 1.18.1

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

@@ -96,9 +96,11 @@ export const ChartInner = (props) => {
                     const axisData = await prepareAxisData({
                         axis,
                         scale,
+                        top: boundsOffsetTop,
                         width: boundsWidth,
                         height: boundsHeight,
                         split: preparedSplit,
+                        series: preparedSeries,
                     });
                     items.push(axisData);
                 }
@@ -107,7 +109,7 @@ export const ChartInner = (props) => {
                 setYAxisDataItems(items);
             }
         })();
-    }, [boundsHeight, boundsWidth, preparedSplit, yAxis, yScale]);
+    }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
     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:
@@ -121,10 +123,14 @@ export const ChartInner = (props) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-                xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    yAxisDataItems.map((axisData, index) => (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }))),
-                    xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))))),
+                xScale && xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                    React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))),
+                Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
+                    if (!axisData) {
+                        return null;
+                    }
+                    return (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
+                }))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),

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

@@ -51,6 +51,6 @@ export declare function useChartInnerProps(props: Props): {
     xAxis: PreparedAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: PreparedAxis[];
-    yScale: import("../../hooks").ChartScale[] | undefined;
+    yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
 };
 export {};

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

@@ -20,6 +20,8 @@ export function useChartInnerProps(props) {
         colors: data.colors,
         title: data.title,
         tooltip: data.tooltip,
+        xAxis: data.xAxis,
+        yAxes: data.yAxis,
     });
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(data.series.options);
@@ -64,10 +66,9 @@ export function useChartInnerProps(props) {
             boundsHeight: estimatedBoundsHeight,
             width,
             seriesData: zoomedSeriesData,
-            seriesOptions: preparedSeriesOptions,
             yAxis: data.yAxis,
         }).then((val) => setYAxis(val));
-    }, [data.yAxis, estimatedBoundsHeight, height, preparedSeriesOptions, width, zoomedSeriesData]);
+    }, [data.yAxis, estimatedBoundsHeight, height, width, zoomedSeriesData]);
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,

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

@@ -10,5 +10,6 @@ export interface ChartTooltipContentProps {
     totals?: ChartTooltip['totals'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    qa?: string;
 }
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, } = 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 })) : (customTooltip);
+    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);
 };

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -9,6 +9,7 @@ type Props = {
     headerFormat?: ChartTooltip['headerFormat'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    qa?: string;
 };
-export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }: Props) => React.JSX.Element;
 export {};

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

@@ -10,13 +10,13 @@ import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }) => {
+export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }) => {
     var _a;
     const [visibleRows, setVisibleRows] = React.useState();
     const [maxContentRowsHeight, setMaxContentRowsHeight] = React.useState();
     const [scrollBarWidth, setScrollBarWidth] = React.useState(0);
     const contentRowsRef = React.useRef(null);
-    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis, headerFormat });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
     const prevHoveredValues = usePrevious(hoveredValues);
     const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
@@ -83,7 +83,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
             setScrollBarWidth(0);
         }
     }, [pinned]);
-    return (React.createElement("div", { className: b('content') },
+    return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
             visibleHovered.map((seriesItem, i) => {

package/dist/esm/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -1,14 +1,15 @@
 import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 export type HoveredValue = string | number | null | undefined;
 export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
-export declare function getDefaultValueFormat({ axis, }: {
+export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
     axis?: ChartXAxis | ChartYAxis | null;
+    closestPointsRange?: number;
 }): ValueFormat | undefined;
-export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
+export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     data: TooltipDataChunk[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
-    valueFormat?: ValueFormat;
+    headerFormat?: ChartTooltip["headerFormat"];
 }) => {
     value: string | null;
     formattedValue?: undefined;

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

@@ -1,7 +1,6 @@
 import get from 'lodash/get';
-import { DEFAULT_DATE_FORMAT } from '../../../constants';
 import { i18n } from '../../../i18n';
-import { getDataCategoryValue } from '../../../utils';
+import { getDataCategoryValue, getDefaultDateFormat } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 function getRowData(fieldName, data, axis) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
@@ -20,7 +19,7 @@ export function getXRowData(data, xAxis) {
 function getYRowData(data, yAxis) {
     return getRowData('y', data, yAxis);
 }
-export function getDefaultValueFormat({ axis, }) {
+export function getDefaultValueFormat({ axis, closestPointsRange, }) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'linear':
         case 'logarithmic': {
@@ -31,14 +30,14 @@ export function getDefaultValueFormat({ axis, }) {
         case 'datetime': {
             return {
                 type: 'date',
-                format: DEFAULT_DATE_FORMAT,
+                format: getDefaultDateFormat(closestPointsRange),
             };
         }
         default:
             return undefined;
     }
 }
-export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
+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))) {
         return null;
@@ -49,18 +48,16 @@ export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
         const value = getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
-        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
         const formattedValue = getFormattedValue({
             value: getYRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, yAxis),
-            format,
+            format: headerFormat,
         });
         return { value, formattedValue };
     }
     const value = getXRowData((_e = data[0]) === null || _e === void 0 ? void 0 : _e.data, xAxis);
-    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
     const formattedValue = getFormattedValue({
         value: getXRowData((_f = data[0]) === null || _f === void 0 ? void 0 : _f.data, xAxis),
-        format,
+        format: headerFormat,
     });
     return { value, formattedValue };
 };

package/dist/esm/components/Tooltip/index.js

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
 };

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

@@ -17,21 +17,20 @@ type Args = {
 };
 type ReturnValue = {
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
 };
 export declare function createYScale(args: {
     axis: PreparedAxis;
     boundsHeight: number;
     series: (PreparedSeries | ChartSeries)[];
-    seriesOptions: PreparedSeriesOptions;
-}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
     seriesOptions: PreparedSeriesOptions;
     hasZoomX?: boolean;
-}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
 /**
  * Uses to create scales for axis related series
  */

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

@@ -3,11 +3,26 @@ 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 { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
+import { getBandSize } from '../utils';
 import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 const X_AXIS_ZOOM_PADDING = 0.02;
-function isNumericalArrayData(data) {
-    return data.every((d) => typeof d === 'number' || d === null);
+function validateArrayData(data) {
+    let hasNumberAndNullValues;
+    let hasOnlyNullValues;
+    for (const d of data) {
+        const isNumber = typeof d === 'number';
+        const isNull = d === null;
+        hasNumberAndNullValues =
+            typeof hasNumberAndNullValues === 'undefined'
+                ? isNumber || isNull
+                : hasNumberAndNullValues && (isNumber || isNull);
+        hasOnlyNullValues =
+            typeof hasOnlyNullValues === 'undefined' ? isNull : hasOnlyNullValues && isNull;
+        if (!hasNumberAndNullValues) {
+            break;
+        }
+    }
+    return { hasNumberAndNullValues, hasOnlyNullValues };
 }
 function filterCategoriesByVisibleSeries(args) {
     const { axisDirection, categories, series } = args;
@@ -19,30 +34,18 @@ function filterCategoriesByVisibleSeries(args) {
             });
         }
     });
-    return categories.filter((c) => visibleCategories.has(c));
+    const filteredCategories = categories.filter((c) => visibleCategories.has(c));
+    return filteredCategories.length > 0 ? filteredCategories : categories;
 }
 // axis is validated in `validation/index.ts`, so the value of `axis.type` is definitely valid.
 // eslint-disable-next-line consistent-return
 function getYScaleRange(args) {
-    const { axis, boundsHeight, series, seriesOptions } = args;
+    const { axis, boundsHeight } = args;
     switch (axis.type) {
         case 'datetime':
         case 'linear':
         case 'logarithmic': {
-            let range = [boundsHeight, boundsHeight * axis.maxPadding];
-            const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-            if (barYSeries.length) {
-                const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
-                if (Object.keys(groupedData).length > 1) {
-                    const { bandSize } = getBarYLayoutForNumericScale({
-                        plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
-                        groupedData,
-                        seriesOptions: seriesOptions,
-                    });
-                    const offset = bandSize / 2;
-                    range = [range[0] - offset, range[1] + offset];
-                }
-            }
+            const range = [boundsHeight, 0];
             switch (axis.order) {
                 case 'sortDesc':
                 case 'reverse': {
@@ -56,18 +59,23 @@ function getYScaleRange(args) {
         }
     }
 }
+// eslint-disable-next-line complexity
 export function createYScale(args) {
-    const { axis, boundsHeight, series, seriesOptions } = args;
+    const { axis, boundsHeight, series } = args;
     const yMinProps = get(axis, 'min');
     const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
-    const range = getYScaleRange({ axis, boundsHeight, series, seriesOptions });
+    const range = getYScaleRange({ axis, boundsHeight });
     switch (axis.type) {
         case 'linear':
         case 'logarithmic': {
             const domain = getDomainDataYBySeries(series);
-            if (isNumericalArrayData(domain)) {
+            const { hasNumberAndNullValues, hasOnlyNullValues } = validateArrayData(domain);
+            if (hasOnlyNullValues || domain.length === 0) {
+                return undefined;
+            }
+            if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
                 const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
                 let yMax;
@@ -79,7 +87,23 @@ export function createYScale(args) {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([yMin, yMax]).range(range).nice();
+                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) {
+                    if (domain.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domain,
+                        });
+                        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));
+                return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
             }
             break;
         }
@@ -103,11 +127,31 @@ export function createYScale(args) {
             }
             else {
                 const domain = getDomainDataYBySeries(series);
-                if (isNumericalArrayData(domain)) {
+                const { hasNumberAndNullValues, hasOnlyNullValues } = validateArrayData(domain);
+                if (hasOnlyNullValues || domain.length === 0) {
+                    return undefined;
+                }
+                if (hasNumberAndNullValues) {
                     const [yMinTimestamp, yMaxTimestamp] = extent(domain);
                     const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
                     const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
-                    return scaleUtc().domain([yMin, yMax]).range(range).nice();
+                    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 (Object.keys(domain).length > 1) {
+                            const bandWidth = getBandSize({
+                                scale: scale,
+                                domain: domain,
+                            });
+                            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());
+                    return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
                 }
             }
         }
@@ -178,7 +222,14 @@ export function createXScale(args) {
         case 'linear':
         case 'logarithmic': {
             const domainData = getDomainDataXBySeries(series);
-            if (isNumericalArrayData(domainData)) {
+            const { hasNumberAndNullValues, hasOnlyNullValues } = validateArrayData(domainData);
+            if (hasOnlyNullValues || domainData.length === 0) {
+                return undefined;
+            }
+            if (series.some((s) => s.stacking === 'percent')) {
+                return scaleLinear().domain([0, 100]).range(range);
+            }
+            if (hasNumberAndNullValues) {
                 const [xMinDomain, xMaxDomain] = extent(domainData);
                 let xMin;
                 let xMax;
@@ -227,7 +278,11 @@ export function createXScale(args) {
         case 'datetime': {
             let domain = null;
             const domainData = get(axis, 'timestamps') || getDomainDataXBySeries(series);
-            if (isNumericalArrayData(domainData)) {
+            const { hasNumberAndNullValues, hasOnlyNullValues } = validateArrayData(domainData);
+            if (hasOnlyNullValues || domainData.length === 0) {
+                return undefined;
+            }
+            if (hasNumberAndNullValues) {
                 const [xMinTimestamp, xMaxTimestamp] = extent(domainData);
                 const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
@@ -271,7 +326,6 @@ const createScales = (args) => {
                 axis,
                 boundsHeight: axisHeight,
                 series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
-                seriesOptions,
             });
         }),
     };

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

@@ -1,4 +1,4 @@
-import type { ChartSeries, ChartTitle, ChartTooltip, ChartOptions as GeneralChartOptions } from '../../types';
+import type { ChartSeries, ChartTitle, ChartTooltip, ChartXAxis, ChartYAxis, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
     seriesData: ChartSeries[];
@@ -6,6 +6,8 @@ type Args = {
     colors?: string[];
     title?: ChartTitle;
     tooltip?: ChartTooltip;
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

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

@@ -4,10 +4,10 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { chart, colors, seriesData, title, tooltip } = args;
+    const { chart, colors, seriesData, title, tooltip, yAxes, xAxis } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
-        const preparedTooltip = getPreparedTooltip({ tooltip });
+        const preparedTooltip = getPreparedTooltip({ tooltip, seriesData, yAxes, xAxis });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
@@ -19,6 +19,6 @@ export const useChartOptions = (args) => {
             title: preparedTitle,
             tooltip: preparedTooltip,
         };
-    }, [chart, colors, seriesData, title, tooltip]);
+    }, [chart, colors, seriesData, title, tooltip, xAxis, yAxes]);
     return options;
 };

package/dist/esm/hooks/useChartOptions/tooltip.d.ts

@@ -1,5 +1,8 @@
-import type { ChartData } from '../../types';
+import type { ChartData, ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedTooltip } from './types';
 export declare const getPreparedTooltip: (args: {
     tooltip: ChartData["tooltip"];
+    seriesData: ChartSeries[];
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
 }) => PreparedTooltip;

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

@@ -1,6 +1,21 @@
 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))) {
+        return undefined;
+    }
+    if (seriesData.some((item) => item.type === 'bar-y')) {
+        const domainData = getDomainDataYBySeries(seriesData);
+        const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
+        return getDefaultValueFormat({ axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[0], closestPointsRange });
+    }
+    const domainData = getDomainDataXBySeries(seriesData);
+    const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
+    return getDefaultValueFormat({ axis: xAxis, closestPointsRange });
+}
 export const getPreparedTooltip = (args) => {
-    var _a;
-    const { tooltip } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0 });
+    var _a, _b;
+    const { tooltip, seriesData, yAxes, xAxis } = args;
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultHeaderFormat({ seriesData, yAxes, xAxis }) });
 };

package/dist/esm/hooks/useChartOptions/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlot, ChartYAxis } from '../../types';
+import type { AxisPlot, ChartAxis } from '../../types';
 export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
@@ -8,4 +8,7 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     };
     padding: number;
 };
-export declare function getAxisCategories(axis?: ChartYAxis): string[] | undefined;
+export declare function getAxisCategories({ categories, order, }?: {
+    categories?: string[];
+    order?: ChartAxis['order'];
+}): string[] | undefined;

package/dist/esm/hooks/useChartOptions/utils.js

@@ -8,10 +8,9 @@ export function prepareAxisPlotLabel(d) {
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
     };
 }
-export function getAxisCategories(axis) {
-    const categories = axis === null || axis === void 0 ? void 0 : axis.categories;
+export function getAxisCategories({ categories, order, } = {}) {
     if (categories) {
-        switch (axis.order) {
+        switch (order) {
             case 'reverse': {
                 return reverse(categories);
             }

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

@@ -1,10 +1,15 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
-async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
+async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
+    if (!scale) {
+        axis.labels.height = 0;
+        axis.labels.rotation = 0;
+        return;
+    }
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getAxisItems({
         scale: scale,
@@ -12,6 +17,9 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
         maxCount: getMaxTickCount({ width, axis }),
     });
     const step = getClosestPointsRange(axis, ticks);
+    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+        axis.labels.dateFormat = getDefaultDateFormat(step);
+    }
     const labels = ticks.map((value) => {
         return formatAxisTickLabel({
             axis,
@@ -38,10 +46,11 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
         })).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
-    return { height: Math.min(maxHeight, labelsHeight), rotation };
+    axis.labels.height = Math.min(maxHeight, labelsHeight);
+    axis.labels.rotation = rotation;
 }
 export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     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);
@@ -96,7 +105,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             enabled: get(xAxis, 'grid.enabled', true),
         },
         ticks: {
-            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
+            pixelInterval: ((_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _c === void 0 ? void 0 : _c.interval)
+                ? calculateNumericProperty({
+                    base: width,
+                    value: xAxis.ticks.interval,
+                })
+                : (_d = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _d === void 0 ? void 0 : _d.pixelInterval,
         },
         position: 'bottom',
         plotIndex: 0,
@@ -129,14 +143,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
         visible: get(xAxis, 'visible', true),
         order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
     };
-    const { height, rotation } = await getLabelSettings({
+    await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
         seriesOptions,
         width,
-        autoRotation: (_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _c === void 0 ? void 0 : _c.autoRotation,
+        autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
     });
-    preparedXAxis.labels.height = height;
-    preparedXAxis.labels.rotation = rotation;
     return preparedXAxis;
 };

package/dist/esm/hooks/useChartOptions/y-axis.d.ts

@@ -1,11 +1,9 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
-import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }: {
+export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, yAxis, }: {
     height: number;
     boundsHeight: number;
     width: number;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;
 }) => Promise<PreparedAxis[]>;