diff --git a/src/plugins/yagr/renderer/tooltip/index.ts b/src/plugins/yagr/renderer/tooltip/index.ts index aa55733d..8ccf69b0 100644 --- a/src/plugins/yagr/renderer/tooltip/index.ts +++ b/src/plugins/yagr/renderer/tooltip/index.ts @@ -1 +1 @@ -export {renderTooltip} from './renderTooltip'; +export {getRenderTooltip} from './renderTooltip'; diff --git a/src/plugins/yagr/renderer/tooltip/renderTooltip.ts b/src/plugins/yagr/renderer/tooltip/renderTooltip.ts index df3d8168..a44f226b 100644 --- a/src/plugins/yagr/renderer/tooltip/renderTooltip.ts +++ b/src/plugins/yagr/renderer/tooltip/renderTooltip.ts @@ -16,7 +16,7 @@ const calcOption = (d: T | {[key in string]: T} | undefined) => { * Adapter between native Yagr tooltip config and ChartKit * tooltip renderer. */ -export const renderTooltip = (data: TooltipRenderOptions) => { +export const getRenderTooltip = (timeZone?: string) => (data: TooltipRenderOptions) => { const cfg = data.yagr.config; const timeMultiplier = cfg.chart.timeMultiplier || 1; const opts = data.options; @@ -50,7 +50,9 @@ export const renderTooltip = (data: TooltipRenderOptions) => { const tooltipFormatOptions: TooltipData = { activeRowAlwaysFirstInTooltip: rows.length > 1, - tooltipHeader: dateTime({input: x / timeMultiplier}).format('DD MMMM YYYY HH:mm:ss'), + tooltipHeader: dateTime({input: x / timeMultiplier, timeZone}).format( + 'DD MMMM YYYY HH:mm:ss', + ), shared: true, lines: rows.map( (row, i) => diff --git a/src/plugins/yagr/renderer/utils.ts b/src/plugins/yagr/renderer/utils.ts index 7a0dcda9..349092d5 100644 --- a/src/plugins/yagr/renderer/utils.ts +++ b/src/plugins/yagr/renderer/utils.ts @@ -3,7 +3,7 @@ import {dateTime} from '@gravity-ui/date-utils'; import {defaults} from '@gravity-ui/yagr'; import {settings} from '../../../libs'; import type {Yagr, YagrWidgetData, YagrTheme, YagrChartOptions, MinimalValidConfig} from '../types'; -import {renderTooltip} from './tooltip'; +import {getRenderTooltip} from './tooltip'; const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header'; const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list'; @@ -117,11 +117,11 @@ export const detectClickOutside = }; const getXAxisFormatter = - (msm = 1) => + (msm = 1, timeZone?: string) => (_: unknown, ticks: number[]) => { const range = (ticks[ticks.length - 1] - ticks[0]) / msm; return ticks.map((rawValue) => { - const d = dateTime({input: rawValue / msm}); + const d = dateTime({input: rawValue / msm, timeZone}); if (d.hour() === 0 && d.minute() === 0 && d.second() === 0) { return d.format('DD.MM.YY'); @@ -139,6 +139,8 @@ export const shapeYagrConfig = (args: ShapeYagrConfigArgs): MinimalValidConfig = series: data.graphs, }; + const {timeZone} = data; + const chart: YagrChartOptions = { appearance: { locale: settings.get('lang'), @@ -152,7 +154,7 @@ export const shapeYagrConfig = (args: ShapeYagrConfigArgs): MinimalValidConfig = if (config.tooltip?.show) { config.tooltip = config.tooltip || {}; - config.tooltip.render = config.tooltip?.render || renderTooltip; + config.tooltip.render = config.tooltip?.render || getRenderTooltip(timeZone); if (!config.tooltip.className) { // "className" property prevent default yagr styles adding @@ -175,12 +177,12 @@ export const shapeYagrConfig = (args: ShapeYagrConfigArgs): MinimalValidConfig = const xAxis = config.axes[defaults.DEFAULT_X_SCALE]; if (xAxis && !xAxis.values) { - xAxis.values = getXAxisFormatter(config.chart.timeMultiplier); + xAxis.values = getXAxisFormatter(config.chart.timeMultiplier, timeZone); } if (!xAxis) { config.axes[defaults.DEFAULT_X_SCALE] = { - values: getXAxisFormatter(config.chart.timeMultiplier), + values: getXAxisFormatter(config.chart.timeMultiplier, timeZone), }; } diff --git a/src/plugins/yagr/types.ts b/src/plugins/yagr/types.ts index 7bab2e76..f90340a9 100644 --- a/src/plugins/yagr/types.ts +++ b/src/plugins/yagr/types.ts @@ -18,6 +18,14 @@ export type YagrWidgetData = { data: { graphs: RawSerieData[]; timeline: number[]; + /** + * Allow to setup timezone for X axis and tooltip's header. + * + * Format example: "UTC", "Europe/Moscow". + * + * For more examples check [wiki](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) + */ + timeZone?: string; }; libraryConfig: Partial; sources?: Record<