From ab74dc2dfbdc10252bdecc97f9d49b9049a5b8d5 Mon Sep 17 00:00:00 2001
From: Vladimir Chernitsyn <chvp00@gmail.com>
Date: Fri, 2 Feb 2024 18:47:48 +0100
Subject: [PATCH] feat(yagr): add timezone support for tooltip header and x
 axis labels (#405)

---
 src/plugins/yagr/renderer/tooltip/index.ts         |  2 +-
 src/plugins/yagr/renderer/tooltip/renderTooltip.ts |  6 ++++--
 src/plugins/yagr/renderer/utils.ts                 | 14 ++++++++------
 src/plugins/yagr/types.ts                          |  8 ++++++++
 4 files changed, 21 insertions(+), 9 deletions(-)

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 = <T>(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<YagrConfig>;
     sources?: Record<