@gravity-ui/charts 1.41.2 → 1.42.0

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/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/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/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.2",
+  "version": "1.42.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",