@gravity-ui/charts 1.41.1 → 1.42.0

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

@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
-            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+            preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -16,7 +16,7 @@ export function useDefaultState(props) {
         // Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
         // listeners first; parent effects run before child effects in React.
         queueMicrotask(() => {
-            var _a;
+            var _a, _b;
             const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
             const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
             if (x === undefined || y === undefined) {
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
                     clientX: rect.left + svgPointerX,
                     clientY: rect.top + svgPointerY,
                 });
+            if (syntheticEvent) {
+                (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
+            }
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: closest,
                 xAxis,

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

@@ -3,5 +3,10 @@ import { getDefaultTooltipHeaderFormat } from '../../../utils/chart/tooltip';
 export const getPreparedTooltip = (args) => {
     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 : getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis }) });
+    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 : getDefaultTooltipHeaderFormat({
+            dateTimeLabelFormats: tooltip === null || tooltip === void 0 ? void 0 : tooltip.dateTimeLabelFormats,
+            seriesData,
+            yAxes,
+            xAxis,
+        }) });
 };

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

@@ -1,9 +1,10 @@
 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 | null | undefined;
-export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
+export declare function getDefaultValueFormat({ axis, closestPointsRange, dateTimeLabelFormats, }: {
     axis?: ChartXAxis | ChartYAxis | null;
     closestPointsRange?: number;
+    dateTimeLabelFormats?: ChartTooltip['dateTimeLabelFormats'];
 }): ValueFormat | undefined;
 export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     data: TooltipDataChunk[];

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

@@ -21,7 +21,7 @@ export function getXRowData(data, xAxis) {
 function getYRowData(data, yAxis) {
     return getRowData('y', data, yAxis);
 }
-export function getDefaultValueFormat({ axis, closestPointsRange, }) {
+export function getDefaultValueFormat({ axis, closestPointsRange, dateTimeLabelFormats, }) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'linear':
         case 'logarithmic': {
@@ -32,7 +32,7 @@ export function getDefaultValueFormat({ axis, closestPointsRange, }) {
         case 'datetime': {
             return {
                 type: 'date',
-                format: getDefaultDateFormat(closestPointsRange),
+                format: getDefaultDateFormat(closestPointsRange, dateTimeLabelFormats),
             };
         }
         default:

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

@@ -17,15 +17,18 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
+    const { activeLegendItems, boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
+            if (s.legend.enabled && !activeLegendItems.includes(s.legend.groupId)) {
+                return false;
+            }
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
                 return false;
             }
             return true;
         });
-    }, [preparedSeries]);
+    }, [preparedSeries, activeLegendItems]);
     const { xAxis: preparedXAxis, yAxis: preparedYAxis } = useAxis({
         boundsHeight: preparedRangeSlider.height,
         height,

package/dist/cjs/hooks/useRangeSlider/types.d.ts

@@ -9,6 +9,7 @@ export type RangeSliderState = {
     min: number;
 };
 export interface RangeSliderProps {
+    activeLegendItems: string[];
     boundsOffsetLeft: number;
     boundsWidth: number;
     height: number;

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

@@ -1,4 +1,5 @@
 import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
+import type { DateTimeLabelFormats } from '../../utils/chart/time';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, ChartXAxis, ChartYAxis } from './axis';
@@ -201,4 +202,36 @@ export interface ChartTooltip<T = MeaningfulAny> {
          */
         direction?: 'asc' | 'desc';
     } | ChartTooltipSortComparator<T>;
+    /**
+     * Per-granularity display formats for the default datetime tooltip header.
+     * Ignored when `headerFormat` is set.
+     *
+     * Each value is a format string in the same form as the `format` argument to
+     * [`DateTime#format`](https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html) in `@gravity-ui/date-utils`
+     * (see the **`FormatInput`** type there): Day.js–style tokens, e.g. `YYYY`, `MM`, `DD`, `HH`, `mm`, `ss`, `SSS`, `MMM`.
+     *
+     * Partial objects are merged with the built-in `DATETIME_LABEL_FORMATS`; omitted keys keep defaults.
+     * @example ISO-like date and time
+     * ```ts
+     * dateTimeLabelFormats: { day: 'YYYY-MM-DD', hour: 'YYYY-MM-DD HH:mm', minute: 'YYYY-MM-DD HH:mm' }
+     * ```
+     * @example US-style calendar date
+     * ```ts
+     * dateTimeLabelFormats: { day: 'MM/DD/YYYY', week: 'MM/DD/YYYY' }
+     * ```
+     * @example Only sub-day precision (other units stay defaults)
+     * ```ts
+     * dateTimeLabelFormats: { hour: 'HH:mm', minute: 'HH:mm', second: 'HH:mm:ss' }
+     * ```
+     * @example Coarse ranges: short month and full year
+     * ```ts
+     * dateTimeLabelFormats: { month: 'YYYY-MM', year: 'YYYY' }
+     * ```
+     * @example Localized-style month label with day precision unchanged
+     * ```ts
+     * dateTimeLabelFormats: { month: 'MMMM YYYY' }
+     * ```
+     * @see https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html
+     */
+    dateTimeLabelFormats?: DateTimeLabelFormats;
 }

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

@@ -1,4 +1,15 @@
-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 const TIME_UNITS: {
+    readonly millisecond: 1;
+    readonly second: 1000;
+    readonly minute: 60000;
+    readonly hour: 3600000;
+    readonly day: number;
+    readonly week: number;
+    readonly month: number;
+    readonly year: number;
+};
+export type TimeUnit = keyof typeof TIME_UNITS;
+export declare const DATETIME_LABEL_FORMATS: Record<TimeUnit, string>;
+export type DateTimeLabelFormats = Partial<Record<TimeUnit, string>>;
+export declare function getDefaultDateFormat(range?: number, overrides?: DateTimeLabelFormats): string;
 export declare function getDefaultTimeOnlyFormat(step: number): string;

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

@@ -23,14 +23,15 @@ function getTimeUnit(range) {
     const index = units.findIndex((unit) => range < TIME_UNITS[unit]);
     return index === -1 ? 'year' : units[index - 1];
 }
-export function getDefaultDateFormat(range) {
+export function getDefaultDateFormat(range, overrides) {
+    const formats = Object.assign(Object.assign({}, DATETIME_LABEL_FORMATS), overrides);
     if (range) {
         const unit = getTimeUnit(range);
-        if (unit in DATETIME_LABEL_FORMATS) {
-            return DATETIME_LABEL_FORMATS[unit];
+        if (unit in formats) {
+            return formats[unit];
         }
     }
-    return DATETIME_LABEL_FORMATS.day;
+    return formats.day;
 }
 export function getDefaultTimeOnlyFormat(step) {
     if (step < TIME_UNITS.second) {

package/dist/cjs/utils/chart/tooltip.d.ts

@@ -1,6 +1,7 @@
-import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
-export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }: {
+import type { ChartSeries, ChartTooltip, ChartXAxis, ChartYAxis } from '../../types';
+export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, dateTimeLabelFormats, }: {
     seriesData: ChartSeries[];
     yAxes?: ChartYAxis[];
     xAxis?: ChartXAxis;
+    dateTimeLabelFormats?: ChartTooltip['dateTimeLabelFormats'];
 }): import("../../types").ValueFormat | undefined;

package/dist/cjs/utils/chart/tooltip.js

@@ -1,16 +1,20 @@
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getMinSpaceBetween } from './array';
 import { getDomainDataXBySeries, getDomainDataYBySeries } from './common';
-export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }) {
+export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, dateTimeLabelFormats, }) {
     if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap', 'funnel'].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 });
+        return getDefaultValueFormat({
+            axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[0],
+            closestPointsRange,
+            dateTimeLabelFormats,
+        });
     }
     const domainData = getDomainDataXBySeries(seriesData);
     const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
-    return getDefaultValueFormat({ axis: xAxis, closestPointsRange });
+    return getDefaultValueFormat({ axis: xAxis, closestPointsRange, dateTimeLabelFormats });
 }

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

@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
-            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+            preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -16,7 +16,7 @@ export function useDefaultState(props) {
         // Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
         // listeners first; parent effects run before child effects in React.
         queueMicrotask(() => {
-            var _a;
+            var _a, _b;
             const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
             const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
             if (x === undefined || y === undefined) {
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
                     clientX: rect.left + svgPointerX,
                     clientY: rect.top + svgPointerY,
                 });
+            if (syntheticEvent) {
+                (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
+            }
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: closest,
                 xAxis,

package/dist/esm/components/ChartInner/utils/tooltip.js

@@ -3,5 +3,10 @@ import { getDefaultTooltipHeaderFormat } from '../../../utils/chart/tooltip';
 export const getPreparedTooltip = (args) => {
     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 : getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis }) });
+    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 : getDefaultTooltipHeaderFormat({
+            dateTimeLabelFormats: tooltip === null || tooltip === void 0 ? void 0 : tooltip.dateTimeLabelFormats,
+            seriesData,
+            yAxes,
+            xAxis,
+        }) });
 };

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

@@ -1,9 +1,10 @@
 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 | null | undefined;
-export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
+export declare function getDefaultValueFormat({ axis, closestPointsRange, dateTimeLabelFormats, }: {
     axis?: ChartXAxis | ChartYAxis | null;
     closestPointsRange?: number;
+    dateTimeLabelFormats?: ChartTooltip['dateTimeLabelFormats'];
 }): ValueFormat | undefined;
 export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     data: TooltipDataChunk[];

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

@@ -21,7 +21,7 @@ export function getXRowData(data, xAxis) {
 function getYRowData(data, yAxis) {
     return getRowData('y', data, yAxis);
 }
-export function getDefaultValueFormat({ axis, closestPointsRange, }) {
+export function getDefaultValueFormat({ axis, closestPointsRange, dateTimeLabelFormats, }) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'linear':
         case 'logarithmic': {
@@ -32,7 +32,7 @@ export function getDefaultValueFormat({ axis, closestPointsRange, }) {
         case 'datetime': {
             return {
                 type: 'date',
-                format: getDefaultDateFormat(closestPointsRange),
+                format: getDefaultDateFormat(closestPointsRange, dateTimeLabelFormats),
             };
         }
         default:

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

@@ -17,15 +17,18 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
+    const { activeLegendItems, boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
+            if (s.legend.enabled && !activeLegendItems.includes(s.legend.groupId)) {
+                return false;
+            }
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
                 return false;
             }
             return true;
         });
-    }, [preparedSeries]);
+    }, [preparedSeries, activeLegendItems]);
     const { xAxis: preparedXAxis, yAxis: preparedYAxis } = useAxis({
         boundsHeight: preparedRangeSlider.height,
         height,

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

@@ -9,6 +9,7 @@ export type RangeSliderState = {
     min: number;
 };
 export interface RangeSliderProps {
+    activeLegendItems: string[];
     boundsOffsetLeft: number;
     boundsWidth: number;
     height: number;

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

@@ -1,4 +1,5 @@
 import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
+import type { DateTimeLabelFormats } from '../../utils/chart/time';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, ChartXAxis, ChartYAxis } from './axis';
@@ -201,4 +202,36 @@ export interface ChartTooltip<T = MeaningfulAny> {
          */
         direction?: 'asc' | 'desc';
     } | ChartTooltipSortComparator<T>;
+    /**
+     * Per-granularity display formats for the default datetime tooltip header.
+     * Ignored when `headerFormat` is set.
+     *
+     * Each value is a format string in the same form as the `format` argument to
+     * [`DateTime#format`](https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html) in `@gravity-ui/date-utils`
+     * (see the **`FormatInput`** type there): Day.js–style tokens, e.g. `YYYY`, `MM`, `DD`, `HH`, `mm`, `ss`, `SSS`, `MMM`.
+     *
+     * Partial objects are merged with the built-in `DATETIME_LABEL_FORMATS`; omitted keys keep defaults.
+     * @example ISO-like date and time
+     * ```ts
+     * dateTimeLabelFormats: { day: 'YYYY-MM-DD', hour: 'YYYY-MM-DD HH:mm', minute: 'YYYY-MM-DD HH:mm' }
+     * ```
+     * @example US-style calendar date
+     * ```ts
+     * dateTimeLabelFormats: { day: 'MM/DD/YYYY', week: 'MM/DD/YYYY' }
+     * ```
+     * @example Only sub-day precision (other units stay defaults)
+     * ```ts
+     * dateTimeLabelFormats: { hour: 'HH:mm', minute: 'HH:mm', second: 'HH:mm:ss' }
+     * ```
+     * @example Coarse ranges: short month and full year
+     * ```ts
+     * dateTimeLabelFormats: { month: 'YYYY-MM', year: 'YYYY' }
+     * ```
+     * @example Localized-style month label with day precision unchanged
+     * ```ts
+     * dateTimeLabelFormats: { month: 'MMMM YYYY' }
+     * ```
+     * @see https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html
+     */
+    dateTimeLabelFormats?: DateTimeLabelFormats;
 }

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

@@ -1,4 +1,15 @@
-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 const TIME_UNITS: {
+    readonly millisecond: 1;
+    readonly second: 1000;
+    readonly minute: 60000;
+    readonly hour: 3600000;
+    readonly day: number;
+    readonly week: number;
+    readonly month: number;
+    readonly year: number;
+};
+export type TimeUnit = keyof typeof TIME_UNITS;
+export declare const DATETIME_LABEL_FORMATS: Record<TimeUnit, string>;
+export type DateTimeLabelFormats = Partial<Record<TimeUnit, string>>;
+export declare function getDefaultDateFormat(range?: number, overrides?: DateTimeLabelFormats): string;
 export declare function getDefaultTimeOnlyFormat(step: number): string;

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

@@ -23,14 +23,15 @@ function getTimeUnit(range) {
     const index = units.findIndex((unit) => range < TIME_UNITS[unit]);
     return index === -1 ? 'year' : units[index - 1];
 }
-export function getDefaultDateFormat(range) {
+export function getDefaultDateFormat(range, overrides) {
+    const formats = Object.assign(Object.assign({}, DATETIME_LABEL_FORMATS), overrides);
     if (range) {
         const unit = getTimeUnit(range);
-        if (unit in DATETIME_LABEL_FORMATS) {
-            return DATETIME_LABEL_FORMATS[unit];
+        if (unit in formats) {
+            return formats[unit];
         }
     }
-    return DATETIME_LABEL_FORMATS.day;
+    return formats.day;
 }
 export function getDefaultTimeOnlyFormat(step) {
     if (step < TIME_UNITS.second) {

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

@@ -1,6 +1,7 @@
-import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
-export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }: {
+import type { ChartSeries, ChartTooltip, ChartXAxis, ChartYAxis } from '../../types';
+export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, dateTimeLabelFormats, }: {
     seriesData: ChartSeries[];
     yAxes?: ChartYAxis[];
     xAxis?: ChartXAxis;
+    dateTimeLabelFormats?: ChartTooltip['dateTimeLabelFormats'];
 }): import("../..").ValueFormat | undefined;

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

@@ -1,16 +1,20 @@
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getMinSpaceBetween } from './array';
 import { getDomainDataXBySeries, getDomainDataYBySeries } from './common';
-export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }) {
+export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, dateTimeLabelFormats, }) {
     if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap', 'funnel'].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 });
+        return getDefaultValueFormat({
+            axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[0],
+            closestPointsRange,
+            dateTimeLabelFormats,
+        });
     }
     const domainData = getDomainDataXBySeries(seriesData);
     const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
-    return getDefaultValueFormat({ axis: xAxis, closestPointsRange });
+    return getDefaultValueFormat({ axis: xAxis, closestPointsRange, dateTimeLabelFormats });
 }

package/package.json

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