@gravity-ui/chartkit 4.18.2 → 4.19.0

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.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,10 +72,10 @@ 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');
         }
@@ -86,6 +86,7 @@ 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 +97,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';
@@ -114,11 +115,11 @@ export const shapeYagrConfig = (args) => {
     config.axes = config.axes || {};
     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),
         };
     }
     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.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",