TimeSeries: Allow custom time units on x-axis (#112913)

* more panels

* fix

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

@@ -163,8 +163,6 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
 
     if (values) {
       config.values = values;
-    } else if (isTime) {
-      config.values = formatTime;
     } else if (formatValue) {
       config.values = (u: uPlot, splits, axisIdx, tickSpace, tickIncr) => {
         let decimals = guessDecimals(roundDecimals(tickIncr, 6));
@@ -176,6 +174,8 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
           }
         });
       };
+    } else if (isTime) {
+      config.values = formatTime;
     }
 
     // store timezone

public/app/core/components/TimeSeries/utils.ts

@@ -156,6 +156,9 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({
         theme,
         grid: { show: i === 0 && xField.config.custom?.axisGridShow },
         filter: filterTicks,
+        formatValue: xField.config.unit?.startsWith('time:')
+          ? (v, decimals) => xField.display!(v, decimals).text
+          : undefined,
       });
     }
 

public/app/core/components/TimelineChart/utils.ts

@@ -166,7 +166,9 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
     range: coreConfig.yRange,
   });
 
-  const xAxisHidden = frame.fields[0].config.custom.axisPlacement === AxisPlacement.Hidden;
+  const xField = frame.fields[0];
+
+  const xAxisHidden = xField.config.custom.axisPlacement === AxisPlacement.Hidden;
 
   builder.addAxis({
     show: !xAxisHidden,
@@ -176,6 +178,9 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
     placement: AxisPlacement.Bottom,
     timeZone: timeZones[0],
     theme,
+    formatValue: xField.config.unit?.startsWith('time:')
+      ? (v, decimals) => xField.display!(v, decimals).text
+      : undefined,
   });
 
   const yCustomConfig = frame.fields[1].config.custom;

public/app/plugins/panel/heatmap/module.tsx

@@ -23,13 +23,18 @@ import { Options, defaultOptions, HeatmapColorMode, HeatmapColorScale } from './
 
 export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
   .useFieldConfig({
-    disableStandardOptions: Object.values(FieldConfigProperty).filter((v) => v !== FieldConfigProperty.Links),
+    disableStandardOptions: Object.values(FieldConfigProperty).filter(
+      (v) => v !== FieldConfigProperty.Links && v !== FieldConfigProperty.Unit
+    ),
     standardOptions: {
       [FieldConfigProperty.Links]: {
         settings: {
           showOneClick: true,
         },
       },
+      [FieldConfigProperty.Unit]: {
+        hideFromDefaults: true,
+      },
     },
     useCustomConfig: (builder) => {
       const category = [t('heatmap.category-heatmap', 'Heatmap')];

public/app/plugins/panel/heatmap/utils.ts

@@ -10,6 +10,7 @@ import {
   incrRoundUp,
   TimeRange,
   FieldType,
+  getDisplayProcessor,
 } from '@grafana/data';
 import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation, HeatmapCellLayout } from '@grafana/schema';
 import { UPlotConfigBuilder } from '@grafana/ui';
@@ -163,6 +164,13 @@ export function prepConfig(opts: PrepConfigOpts) {
     }
   }
 
+  let xField = dataRef.current?.heatmap?.fields[0]!;
+  xField.display ??= getDisplayProcessor({
+    field: xField,
+    theme,
+    timeZone,
+  });
+
   builder.addAxis({
     scaleKey: xScaleKey,
     placement: AxisPlacement.Bottom,
@@ -170,6 +178,10 @@ export function prepConfig(opts: PrepConfigOpts) {
     isTime,
     theme: theme,
     timeZone,
+    formatValue:
+      isTime && xField.config.unit?.startsWith('time:')
+        ? (v, decimals) => xField.display!(v, decimals).text
+        : undefined,
   });
 
   const yField = dataRef.current?.heatmap?.fields[1]!;