GraphNG: use uPlot's native ms support (#29445)

packages/grafana-ui/package.json

@@ -71,7 +71,7 @@
     "react-transition-group": "4.4.1",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1",
-    "uplot": "1.4.4"
+    "uplot": "1.4.6"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "11.0.2",

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

@@ -32,6 +32,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       timeZone,
       theme,
     } = this.props;
+
     const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90;
 
     let config: Axis = {
@@ -82,7 +83,7 @@ function calculateSpace(self: uPlot, axisIdx: number, scaleMin: number, scaleMax
 
   // For x-axis (bottom) we need bigger spacing between labels
   if (axis.side === 2) {
-    return 60;
+    return 50;
   }
 
   return 30;
@@ -114,11 +115,12 @@ function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) {
 function formatTime(self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number): string[] {
   const timeZone = (self.axes[axisIdx] as any).timeZone;
   const scale = self.scales.x;
-  const range = (scale?.max ?? 0) - (scale?.min ?? 0) / 1000;
+  const range = ((scale?.max ?? 0) - (scale?.min ?? 0)) / 1e3;
   const oneDay = 86400;
   const oneYear = 31536000;
 
-  foundIncr = foundIncr / 1000;
+  foundIncr /= 1e3;
+
   let format = systemDateFormats.interval.minute;
 
   if (foundIncr < 1) {

packages/grafana-ui/src/components/uPlot/hooks.ts

@@ -116,7 +116,7 @@ export const usePlotConfig = (width: number, height: number, timeZone: TimeZone,
     const tz = getTimeZoneInfo(timeZone, Date.now())?.ianaName;
 
     if (tz) {
-      fmt = (ts: number) => uPlot.tzDate(new Date(ts * 1e3), tz);
+      fmt = (ts: number) => uPlot.tzDate(new Date(ts), tz);
     }
 
     return fmt;
@@ -130,6 +130,7 @@ export const usePlotConfig = (width: number, height: number, timeZone: TimeZone,
       ...DEFAULT_PLOT_CONFIG,
       width,
       height,
+      ms: 1,
       plugins: Object.entries(plugins).map(p => ({
         hooks: p[1].hooks,
       })),

yarn.lock

@@ -27296,10 +27296,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-uplot@1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.4.4.tgz#ab30da26b1e2d432df5bc43389e70399787f0448"
-  integrity sha512-vgV84+by3fGTU4bdpffSvA9FX8ide6MsmlBzOASPDdZCquXmCA+T2qodeNdnBen+7YOeqD9H91epVnF0dQgVKw==
+uplot@1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.4.6.tgz#52b6812c06b8d3cb89d4a8d053f45415cb5d9a13"
+  integrity sha512-nw3LdjLFhAqKQF/Rv7QjZICVnjJemOQVj2L3b7889gHBrnC1LwltkzTcawDcbMe6pxo++0KVev9xSC0YCw+m5w==
 
 upper-case-first@^1.1.0, upper-case-first@^1.1.2:
   version "1.1.2"