TimeSeriesPanel: Fixes overlapping time axis ticks (#31332)

* GraphNG: Fixes overlapping time axis ticks

* Review tweaks

devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json

@@ -19,7 +19,9 @@
     {
       "icon": "external link",
       "tags": ["gdev", "graph-ng"],
-      "type": "dashboards"
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
     }
   ],
   "panels": [

devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json

@@ -16,7 +16,15 @@
   "gnetId": null,
   "graphTooltip": 0,
   "id": 391,
-  "links": [],
+  "links": [
+    {
+      "icon": "external link",
+      "tags": ["gdev", "graph-ng"],
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
+    }
+  ],
   "panels": [
     {
       "datasource": null,

devenv/dev-dashboards/panel-graph/graph-ng-nulls.json

@@ -19,7 +19,9 @@
     {
       "icon": "external link",
       "tags": ["gdev", "graph-ng"],
-      "type": "dashboards"
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
     }
   ],
   "panels": [

devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json

@@ -19,7 +19,9 @@
     {
       "icon": "external link",
       "tags": ["gdev", "graph-ng"],
-      "type": "dashboards"
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
     }
   ],
   "panels": [

devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json

@@ -19,7 +19,9 @@
     {
       "icon": "external link",
       "tags": ["gdev", "graph-ng"],
-      "type": "dashboards"
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
     }
   ],
   "panels": [

devenv/dev-dashboards/panel-graph/graph-ng.json

@@ -19,7 +19,9 @@
     {
       "icon": "external link",
       "tags": ["gdev", "graph-ng"],
-      "type": "dashboards"
+      "type": "dashboards",
+      "asDropdown": true,
+      "title": "Graph Tests"
     }
   ],
   "panels": [

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

@@ -99,13 +99,24 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
 /* Minimum grid & tick spacing in CSS pixels */
 function calculateSpace(self: uPlot, axisIdx: number, scaleMin: number, scaleMax: number, plotDim: number): number {
   const axis = self.axes[axisIdx];
+  const scale = self.scales[axis.scale!];
 
-  // For x-axis (bottom) we need bigger spacing between labels
-  if (axis.side === 2) {
-    return 55;
+  // for axis left & right
+  if (axis.side !== 2 || !scale) {
+    return 30;
+  }
+
+  const defaultSpacing = 40;
+
+  if (scale.time) {
+    const maxTicks = plotDim / defaultSpacing;
+    const increment = (scaleMax - scaleMin) / maxTicks;
+    const sample = formatTime(self, [scaleMin], axisIdx, defaultSpacing, increment);
+    const width = measureText(sample[0], 12).width + 18;
+    return width;
   }
 
-  return 30;
+  return defaultSpacing;
 }
 
 /** height of x axis or width of y axis in CSS pixels alloted for values, gap & ticks, but excluding axis label */
@@ -129,29 +140,38 @@ function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) {
   return measureText(maxLength, 12).width + 18;
 }
 
+const timeUnitSize = {
+  second: 1000,
+  minute: 60 * 1000,
+  hour: 60 * 60 * 1000,
+  day: 24 * 60 * 60 * 1000,
+  month: 28 * 24 * 60 * 60 * 1000,
+  year: 365 * 24 * 60 * 60 * 1000,
+};
+
 /** Format time axis ticks */
 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)) / 1e3;
-  const oneDay = 86400;
-  const oneYear = 31536000;
-
-  foundIncr /= 1e3;
+  const range = (scale?.max ?? 0) - (scale?.min ?? 0);
+  const yearRoundedToDay = Math.round(timeUnitSize.year / timeUnitSize.day) * timeUnitSize.day;
+  const incrementRoundedToDay = Math.round(foundIncr / timeUnitSize.day) * timeUnitSize.day;
 
   let format = systemDateFormats.interval.minute;
 
-  if (foundIncr < 1) {
+  if (foundIncr < timeUnitSize.second) {
     format = systemDateFormats.interval.second.replace('ss', 'ss.SS');
-  } else if (foundIncr <= 45) {
+  } else if (foundIncr <= timeUnitSize.minute) {
     format = systemDateFormats.interval.second;
-  } else if (foundIncr <= 7200 || range <= oneDay) {
+  } else if (foundIncr <= timeUnitSize.hour || range <= timeUnitSize.day) {
     format = systemDateFormats.interval.minute;
-  } else if (foundIncr <= 80000) {
+  } else if (foundIncr <= timeUnitSize.day) {
     format = systemDateFormats.interval.hour;
-  } else if (foundIncr <= 2419200 || range <= oneYear) {
+  } else if (foundIncr <= timeUnitSize.month || range < timeUnitSize.year) {
     format = systemDateFormats.interval.day;
-  } else if (foundIncr <= 31536000) {
+  } else if (incrementRoundedToDay === yearRoundedToDay) {
+    format = systemDateFormats.interval.year;
+  } else if (foundIncr <= timeUnitSize.year) {
     format = systemDateFormats.interval.month;
   }