feat(yagr): add timezone support for tooltip header and x axis labels (…

…#405)
gravity-ui · Feb 2, 2024 · ab74dc2 · ab74dc2
1 parent e61de8c
commit ab74dc2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {renderTooltip} from './renderTooltip';
		export {getRenderTooltip} from './renderTooltip';