@gravity-ui/chartkit 4.18.2 → 4.19.1

package/build/plugins/yagr/renderer/tooltip/index.d.ts

@@ -1 +1 @@
-export { renderTooltip } from './renderTooltip';
+export { getRenderTooltip } from './renderTooltip';

package/build/plugins/yagr/renderer/tooltip/index.js

@@ -1 +1 @@
-export { renderTooltip } from './renderTooltip';
+export { getRenderTooltip } from './renderTooltip';

package/build/plugins/yagr/renderer/tooltip/renderTooltip.d.ts

@@ -1,2 +1,2 @@
 import type { TooltipRenderOptions } from '../../types';
-export declare const renderTooltip: (data: TooltipRenderOptions) => string;
+export declare const getRenderTooltip: (timeZone?: string) => (data: TooltipRenderOptions) => string;

package/build/plugins/yagr/renderer/tooltip/renderTooltip.js

@@ -12,7 +12,7 @@ const calcOption = (d) => {
  * Adapter between native Yagr tooltip config and ChartKit
  * tooltip renderer.
  */
-export const renderTooltip = (data) => {
+export const getRenderTooltip = (timeZone) => (data) => {
     const cfg = data.yagr.config;
     const timeMultiplier = cfg.chart.timeMultiplier || 1;
     const opts = data.options;
@@ -39,7 +39,7 @@ export const renderTooltip = (data) => {
         : undefined;
     const tooltipFormatOptions = {
         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) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
         withPercent: calcOption(opts.percent),

package/build/plugins/yagr/renderer/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Yagr, YagrWidgetData, YagrTheme, MinimalValidConfig } from '../types';
+import type { Yagr, YagrWidgetData, YagrTheme, YagrChartOptions, MinimalValidConfig } from '../types';
 type ShapeYagrConfigArgs = {
     data: YagrWidgetData['data'];
     libraryConfig: YagrWidgetData['libraryConfig'];
@@ -18,5 +18,12 @@ export declare const detectClickOutside: (args: {
     };
     yagr?: Yagr<MinimalValidConfig> | undefined;
 }) => (event: MouseEvent) => void;
+/**
+ * This function needs to align timezone that uplot is processing.
+ * Uplot uses simple new Date() when [processing ticks](https://github.com/leeoniya/uPlot/blob/master/src/opts.js#L177) on axis.
+ * It leads that timestamp will be converted to user browser timezone.
+ * In this function we artificially add shift diff between browser timezone and user timeozne to reset new Date() affects.
+ */
+export declare const getUplotTimezoneAligner: (chart?: YagrChartOptions, timeZone?: string) => (ts: number) => Date;
 export declare const shapeYagrConfig: (args: ShapeYagrConfigArgs) => MinimalValidConfig;
 export {};

package/build/plugins/yagr/renderer/utils.js

@@ -2,7 +2,7 @@ import merge from 'lodash/merge';
 import { dateTime } from '@gravity-ui/date-utils';
 import { defaults } from '@gravity-ui/yagr';
 import { settings } from '../../../libs';
-import { renderTooltip } from './tooltip';
+import { getRenderTooltip } from './tooltip';
 const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
 export const synchronizeTooltipTablesCellsWidth = (tooltipContainer) => {
@@ -72,20 +72,35 @@ export const detectClickOutside = (args) => (event) => {
         }
     }
 };
-const getXAxisFormatter = (msm = 1) => (_, ticks) => {
+const getXAxisFormatter = (msm = 1, timeZone) => (_, ticks) => {
     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');
         }
         return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');
     });
 };
+/**
+ * This function needs to align timezone that uplot is processing.
+ * Uplot uses simple new Date() when [processing ticks](https://github.com/leeoniya/uPlot/blob/master/src/opts.js#L177) on axis.
+ * It leads that timestamp will be converted to user browser timezone.
+ * In this function we artificially add shift diff between browser timezone and user timeozne to reset new Date() affects.
+ */
+export const getUplotTimezoneAligner = (chart, timeZone) => (ts) => {
+    const dt = ts / ((chart === null || chart === void 0 ? void 0 : chart.timeMultiplier) || 1);
+    const browserDate = dateTime({ input: dt });
+    const browserTimezone = browserDate.utcOffset();
+    const timestampRealTimezone = dateTime({ input: dt, timeZone }).utcOffset();
+    const uPlotOffset = (browserTimezone - timestampRealTimezone) * 60 * 1000;
+    return new Date(browserDate.valueOf() + uPlotOffset);
+};
 export const shapeYagrConfig = (args) => {
     var _a, _b;
     const { data, libraryConfig, theme } = args;
     const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
+    const { timeZone } = data;
     const chart = {
         appearance: {
             locale: settings.get('lang'),
@@ -96,7 +111,7 @@ export const shapeYagrConfig = (args) => {
     config.chart = chart;
     if ((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.show) {
         config.tooltip = config.tooltip || {};
-        config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || renderTooltip;
+        config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || getRenderTooltip(timeZone);
         if (!config.tooltip.className) {
             // "className" property prevent default yagr styles adding
             config.tooltip.className = 'chartkit-yagr-tooltip';
@@ -113,12 +128,13 @@ export const shapeYagrConfig = (args) => {
     }
     config.axes = config.axes || {};
     const xAxis = config.axes[defaults.DEFAULT_X_SCALE];
+    config.editUplotOptions = (opts) => (Object.assign(Object.assign({}, opts), { tzDate: timeZone ? getUplotTimezoneAligner(config.chart, timeZone) : undefined }));
     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),
         };
     }
     return config;

package/build/plugins/yagr/types.d.ts

@@ -14,6 +14,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<number, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.18.2",
+  "version": "4.19.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -47,7 +47,7 @@
   ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/date-utils": "^1.4.1",
+    "@gravity-ui/date-utils": "^1.4.2",
     "@gravity-ui/yagr": "^4.2.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",