@gravity-ui/charts 1.35.2 → 1.36.0

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

@@ -7,7 +7,10 @@ import './styles.css';
 const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
-    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
+    const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
+        dispatcher,
+        tooltip,
+    });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
@@ -23,5 +26,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, qa: tooltip.qa })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, hoveredPlotLines: hoveredPlotLines, hoveredPlotBands: hoveredPlotBands, 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/components/Tooltip/styles.css

@@ -45,14 +45,21 @@
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
+.gcharts-tooltip__content-row-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .gcharts-tooltip__content-row-color {
   display: inline-block;
+  flex-shrink: 0;
   width: 16px;
   height: 8px;
   border-radius: 2px;
   background-color: #dddddd;
 }
 .gcharts-tooltip__content-row-value {
+  flex-shrink: 0;
   margin-inline-start: auto;
 }
 .gcharts-tooltip__content-row-totals {

package/dist/esm/constants/defaults/axis.d.ts

@@ -12,5 +12,9 @@ type AxisCrosshairDefaults = Required<AxisCrosshair>;
 export declare const axisCrosshairDefaults: AxisCrosshairDefaults;
 export declare const xAxisTitleDefaults: AxisTitleDefaults;
 export declare const yAxisTitleDefaults: AxisTitleDefaults;
+export declare const axisTickMarksDefaults: {
+    enabled: boolean;
+    length: number;
+};
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;
 export {};

package/dist/esm/constants/defaults/axis.js

@@ -25,4 +25,8 @@ export const axisCrosshairDefaults = {
 };
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
+export const axisTickMarksDefaults = {
+    enabled: false,
+    length: 6,
+};
 export const DEFAULT_AXIS_TYPE = 'linear';

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { DashStyle } from '../../constants';
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -10,6 +10,7 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
     maxWidth: number;
 };
 export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
+    custom?: MeaningfulAny;
     label: {
         text: string;
         style: BaseTextStyle;
@@ -25,6 +26,7 @@ export type PreparedAxisPlotLine = {
     dashStyle: DashStyle;
     opacity: number;
     layerPlacement: PlotLayerPlacement;
+    custom?: MeaningfulAny;
     label: {
         text: string;
         style: BaseTextStyle;
@@ -35,6 +37,10 @@ export type PreparedAxisPlotLine = {
 export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
     defaultRange?: ChartAxisRangeSlider['defaultRange'];
 };
+export type PreparedAxisTickMarks = {
+    enabled: boolean;
+    length: number;
+};
 type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
@@ -58,6 +64,7 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
     ticks: {
         pixelInterval?: number;
     };
+    tickMarks: PreparedAxisTickMarks;
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../../constants';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
@@ -17,7 +17,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     const labelLineHeight = (await getTextSize('Tmp')).height;
     const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
-    if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
+    if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat) && tickStep >= TIME_UNITS.day) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);
     }
     const labels = tickValues.map((tick) => formatAxisTickLabel({
@@ -141,6 +141,10 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 })
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
+        tickMarks: {
+            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
+        },
         position: 'bottom',
         plotIndex: 0,
         plotLines: get(xAxis, 'plotLines', []).map((d) => ({
@@ -150,6 +154,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            custom: d.custom,
             label: prepareAxisPlotLabel(d),
         })),
         plotBands: get(xAxis, 'plotBands', []).map((d) => ({
@@ -158,6 +163,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             from: get(d, 'from', 0),
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            custom: d.custom,
             label: prepareAxisPlotLabel(d),
         })),
         crosshair: {

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../../constants';
 import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { prepareAxisPlotLabel } from './utils';
@@ -160,6 +160,10 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                     })
                     : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
             },
+            tickMarks: {
+                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
+            },
             position: axisPosition,
             plotIndex: get(axisItem, 'plotIndex', 0),
             plotLines: get(axisItem, 'plotLines', []).map((d) => ({
@@ -169,6 +173,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                custom: d.custom,
                 label: prepareAxisPlotLabel(d),
             })),
             plotBands: get(axisItem, 'plotBands', []).map((d) => ({
@@ -177,6 +182,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 from: get(d, 'from', 0),
                 to: get(d, 'to', 0),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                custom: d.custom,
                 label: prepareAxisPlotLabel(d),
             })),
             crosshair: {

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

@@ -27,6 +27,7 @@ export declare function useNormalizedOriginalData(props: UseOriginalDataProps):
         maxPadding?: number;
         plotLines?: import("../..").AxisPlotLine[];
         plotBands?: import("../..").AxisPlotBand[];
+        tickMarks?: import("../..").ChartAxisTickMarks;
         visible?: boolean;
         order?: "sortAsc" | "sortDesc" | "reverse";
         startOnTick?: boolean;

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

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'd3';
-import type { PointPosition, TooltipDataChunk } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../useChartOptions/types';
 type Args = {
     dispatcher: Dispatch<object>;
@@ -7,6 +7,8 @@ type Args = {
 };
 export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
+    hoveredPlotLines: AxisPlotLine[] | undefined;
+    hoveredPlotBands: AxisPlotBand[] | undefined;
     pointerPosition: PointPosition | undefined;
 };
 export {};

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

@@ -1,16 +1,18 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 export const useTooltip = ({ dispatcher, tooltip }) => {
-    const [{ hovered, pointerPosition }, setTooltipState] = React.useState({});
+    const [{ hovered, hoveredPlotLines, hoveredPlotBands, 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) => {
+            dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition, nextHoveredPlots) => {
                 const filteredNextHovered = nextHovered === null || nextHovered === void 0 ? void 0 : nextHovered.filter((item) => 'y' in item.data ? item.data.y !== null : true);
                 const isHoveredChanged = !isEqual(prevHovered.current, filteredNextHovered);
                 const newTooltipState = {
-                    pointerPosition: nextPointerPosition,
                     hovered: isHoveredChanged ? filteredNextHovered : prevHovered.current,
+                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
+                    hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
+                    pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
                     prevHovered.current = filteredNextHovered;
@@ -26,6 +28,8 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
     }, [dispatcher, tooltip]);
     return {
         hovered,
+        hoveredPlotLines,
+        hoveredPlotBands,
         pointerPosition,
     };
 };

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

@@ -1,6 +1,7 @@
 import type { DurationInput } from '@gravity-ui/date-utils';
 import type { AXIS_TYPE, DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
+import type { MeaningfulAny } from '../misc';
 import type { BaseTextStyle } from './base';
 import type { ChartBrush } from './brush';
 export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
@@ -94,6 +95,16 @@ export interface ChartAxisTitle {
      */
     maxRowCount?: number;
 }
+export interface ChartAxisTickMarks {
+    /** Enable or disable the tick marks on the axis.
+     * @default false
+     */
+    enabled?: boolean;
+    /** The length of the tick marks in pixels (perpendicular to the axis).
+     * @default 6
+     */
+    length?: number;
+}
 export interface ChartAxis {
     categories?: string[];
     /** Configure a crosshair that follows either the mouse pointer or the hovered point. */
@@ -161,6 +172,8 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
+    /** Small perpendicular marks on the axis line at each tick position. */
+    tickMarks?: ChartAxisTickMarks;
     /** Whether axis, including axis title, line, ticks and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
@@ -226,6 +239,8 @@ export interface AxisPlot {
          * It is assigned as a data-qa attribute to an element. */
         qa?: string;
     };
+    /** Custom data associated with the plot line/band, accessible in tooltip renderer args. */
+    custom?: MeaningfulAny;
 }
 export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
@@ -259,7 +274,7 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string | null;
 }
-export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
+export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label' | 'custom'> {
     /** Whether the crosshair should snap to the point or follow the pointer independent of points.
      * @default true
      */

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

@@ -1,7 +1,7 @@
 import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
-import type { ChartXAxis, ChartYAxis } from './axis';
+import type { AxisPlotBand, AxisPlotLine, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { CustomFormat, ValueFormat } from './base';
@@ -91,6 +91,10 @@ export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | Too
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hovered: TooltipDataChunk<T>[];
+    /** Plot lines that intersect with the current pointer position. */
+    hoveredPlotLines?: AxisPlotLine[];
+    /** Plot bands that contain the current pointer position. */
+    hoveredPlotBands?: AxisPlotBand[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }

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

@@ -2,7 +2,7 @@ import { dateTimeUtc } from '@gravity-ui/date-utils';
 import capitalize from 'lodash/capitalize';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import { formatNumber, getDefaultUnit } from '../../libs';
-import { getDefaultDateFormat } from './time';
+import { DATETIME_LABEL_FORMATS, TIME_UNITS, getDefaultDateFormat, getDefaultTimeOnlyFormat, } from './time';
 const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
 function getFormattedDate(args) {
     const { value, format = DEFAULT_DATE_FORMAT } = args;
@@ -43,7 +43,22 @@ export function formatAxisTickLabel(args) {
         }
         case 'datetime': {
             const date = value;
-            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
+            let format;
+            if (axis.labels.dateFormat) {
+                format = axis.labels.dateFormat;
+            }
+            else if (step !== undefined && step < TIME_UNITS.day) {
+                const d = dateTimeUtc({ input: date });
+                const isMidnight = d.isValid() &&
+                    d.hour() === 0 &&
+                    d.minute() === 0 &&
+                    d.second() === 0 &&
+                    d.millisecond() === 0;
+                format = isMidnight ? DATETIME_LABEL_FORMATS.day : getDefaultTimeOnlyFormat(step);
+            }
+            else {
+                format = getDefaultDateFormat(step);
+            }
             return getFormattedDate({ value: date, format });
         }
         case 'linear':

package/dist/esm/utils/chart/get-hovered-plots.d.ts

@@ -0,0 +1,14 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../hooks';
+import type { ChartScale } from '../../hooks/useAxisScales/types';
+import type { AxisPlotBand, AxisPlotLine } from '../../types';
+export declare function getHoveredPlots(args: {
+    pointerX: number;
+    pointerY: number;
+    xAxis?: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+    xScale?: ChartScale;
+    yScale?: (ChartScale | undefined)[];
+}): {
+    plotLines: AxisPlotLine[];
+    plotBands: AxisPlotBand[];
+};

package/dist/esm/utils/chart/get-hovered-plots.js

@@ -0,0 +1,67 @@
+import { getBandsPosition, isBandScale } from './axis/common';
+const PLOT_LINE_HIT_THRESHOLD_PX = 4;
+function getHoveredAxisPlotBands(args) {
+    const { pointerPx, plotBands, scale, axis } = args;
+    const axisScale = scale;
+    const result = [];
+    for (const band of plotBands) {
+        const { from, to } = getBandsPosition({ band, axisScale, axis });
+        const startPx = Math.min(from, to);
+        const endPx = Math.max(from, to);
+        if (pointerPx >= startPx && pointerPx <= endPx) {
+            result.push(band);
+        }
+    }
+    return result;
+}
+function getHoveredAxisPlotLines(args) {
+    const { pointerPx, plotLines, scale } = args;
+    const result = [];
+    if (isBandScale(scale)) {
+        return result;
+    }
+    for (const line of plotLines) {
+        const linePx = Number(scale(line.value));
+        if (Math.abs(pointerPx - linePx) <= PLOT_LINE_HIT_THRESHOLD_PX + line.width / 2) {
+            result.push(line);
+        }
+    }
+    return result;
+}
+export function getHoveredPlots(args) {
+    const { pointerX, pointerY, xAxis, yAxis, xScale, yScale } = args;
+    const plotLines = [];
+    const plotBands = [];
+    if (xAxis && xScale) {
+        plotBands.push(...getHoveredAxisPlotBands({
+            pointerPx: pointerX,
+            plotBands: xAxis.plotBands,
+            scale: xScale,
+            axis: 'x',
+        }));
+        plotLines.push(...getHoveredAxisPlotLines({
+            pointerPx: pointerX,
+            plotLines: xAxis.plotLines,
+            scale: xScale,
+        }));
+    }
+    for (let i = 0; i < yAxis.length; i++) {
+        const yAxisItem = yAxis[i];
+        const yScaleItem = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+        if (!yAxisItem || !yScaleItem) {
+            continue;
+        }
+        plotBands.push(...getHoveredAxisPlotBands({
+            pointerPx: pointerY,
+            plotBands: yAxisItem.plotBands,
+            scale: yScaleItem,
+            axis: 'y',
+        }));
+        plotLines.push(...getHoveredAxisPlotLines({
+            pointerPx: pointerY,
+            plotLines: yAxisItem.plotLines,
+            scale: yScaleItem,
+        }));
+    }
+    return { plotLines, plotBands };
+}

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

@@ -1,3 +1,4 @@
 export declare const TIME_UNITS: Record<string, number>;
 export declare const DATETIME_LABEL_FORMATS: Record<keyof typeof TIME_UNITS, string>;
 export declare function getDefaultDateFormat(range?: number): string;
+export declare function getDefaultTimeOnlyFormat(step: number): string;

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

@@ -32,3 +32,12 @@ export function getDefaultDateFormat(range) {
     }
     return DATETIME_LABEL_FORMATS.day;
 }
+export function getDefaultTimeOnlyFormat(step) {
+    if (step < TIME_UNITS.second) {
+        return 'HH:mm:ss.SSS';
+    }
+    if (step < TIME_UNITS.minute) {
+        return 'HH:mm:ss';
+    }
+    return 'HH:mm';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.35.2",
+  "version": "1.36.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",