GraphNG: cache ianaName & reduce calls to getTimeZoneInfo() (#31712)

packages/grafana-ui/src/components/BarChart/__snapshots__/utils.test.ts.snap

@@ -43,7 +43,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -116,6 +115,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -163,7 +163,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -236,6 +235,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -283,7 +283,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -356,6 +355,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -403,7 +403,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -476,6 +475,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -523,7 +523,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -596,6 +595,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -643,7 +643,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -716,6 +715,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -763,7 +763,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -836,6 +835,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;
@@ -883,7 +883,6 @@ UPlotConfigBuilder {
     "x": false,
     "y": false,
   },
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {
@@ -956,6 +955,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;

packages/grafana-ui/src/components/BarChart/utils.test.ts

@@ -54,6 +54,11 @@ function mockDataFrame() {
   return preparePlotFrame([df1, df2]);
 }
 
+jest.mock('@grafana/data', () => ({
+  ...(jest.requireActual('@grafana/data') as any),
+  DefaultTimeZone: 'utc',
+}));
+
 describe('GraphNG utils', () => {
   describe('preparePlotConfigBuilder', () => {
     const frame = mockDataFrame();

packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap

@@ -27,12 +27,11 @@ UPlotConfigBuilder {
             "panelBg": "#000000",
           },
         },
-        "timeZone": "browser",
+        "timeZone": "utc",
       },
     },
   },
   "bands": Array [],
-  "getTimeZone": [Function],
   "hasBottomAxis": true,
   "hasLeftAxis": true,
   "hooks": Object {},
@@ -148,6 +147,7 @@ UPlotConfigBuilder {
       },
     },
   ],
+  "tz": "UTC",
   "tzDate": [Function],
 }
 `;

packages/grafana-ui/src/components/GraphNG/utils.test.ts

@@ -79,6 +79,11 @@ function mockDataFrame() {
   });
 }
 
+jest.mock('@grafana/data', () => ({
+  ...(jest.requireActual('@grafana/data') as any),
+  DefaultTimeZone: 'utc',
+}));
+
 describe('GraphNG utils', () => {
   test('preparePlotConfigBuilder', () => {
     const frame = mockDataFrame();

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -20,8 +20,11 @@ export class UPlotConfigBuilder {
   private hasLeftAxis = false;
   private hasBottomAxis = false;
   private hooks: Hooks.Arrays = {};
+  private tz: string | undefined = undefined;
 
-  constructor(private getTimeZone = () => DefaultTimeZone) {}
+  constructor(getTimeZone = () => DefaultTimeZone) {
+    this.tz = getTimeZoneInfo(getTimeZone(), Date.now())?.ianaName;
+  }
 
   addHook(type: keyof Hooks.Defs, hook: valueof<Hooks.Defs>) {
     if (!this.hooks[type]) {
@@ -166,15 +169,8 @@ export class UPlotConfigBuilder {
   }
 
   private tzDate = (ts: number) => {
-    if (!this.getTimeZone) {
+    let date = new Date(ts);
-      return new Date(ts);
-    }
-    const tz = getTimeZoneInfo(this.getTimeZone(), Date.now())?.ianaName;
 
-    if (!tz) {
+    return this.tz ? uPlot.tzDate(date, this.tz) : date;
-      return new Date(ts);
-    }
-
-    return uPlot.tzDate(new Date(ts), tz);
   };
 }