StateTimeline / StatusHistory: Add axis visibility and width controls (#98548)

* Allow setting the y axis width

* Add to docs

* Add to status history as well

* Add to status history docs and schema

* Change config to come from generic axis builder

* keep axis

* Change overridden label

* Update docs/sources/panels-visualizations/visualizations/status-history/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/state-timeline/index.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Remove the category/label override

* Move axis to its own section in docs as well

* clean

* rename to addAxisWidth

* Apply suggestions from code review

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Move sections to match UI order

* Update docs/sources/shared/visualizations/axis-options-all.md

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* Change other axis options doc to be consistent.

* Fix linter

* add AxisPlacement

* Add new placement option to docs

* change some wording

* Apply suggestions from code review

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

docs/sources/panels-visualizations/visualizations/state-timeline/index.md

@@ -149,6 +149,10 @@ The **Page size** option lets you paginate the state timeline visualization to l
 
 {{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
 
+### Axis options
+
+{{< docs/shared lookup="visualizations/axis-options-state-status.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
+
 ### Standard options
 
 {{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/panels-visualizations/visualizations/status-history/index.md

@@ -131,6 +131,10 @@ Controls the opacity of state regions.
 
 {{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
+## Axis options
+
+{{< docs/shared lookup="visualizations/axis-options-state-status.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
+
 ## Standard options
 
 {{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/panels-visualizations/visualizations/time-series/index.md

@@ -209,21 +209,7 @@ The following example shows three series: Min, Max, and Value. The Min and Max s
 
 ### Axis options
 
-Options under the **Axis** section control how the x- and y-axes are rendered. Some options don't take effect until you click outside of the field option box you're editing. You can also press `Enter`.
+{{< docs/shared lookup="visualizations/axis-options-all.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
-
-| Option                             | Description                                                                                                                                                                                                                                                                                                                                                                      |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Time zone                          | Set the desired time zones to display along the x-axis.                                                                                                                                                                                                                                                                                                                          |
-| [Placement](#placement)            | Select the placement of the y-axis.                                                                                                                                                                                                                                                                                                                                              |
-| Label                              | Set a y-axis text label. If you have more than one y-axis, then you can assign different labels using an override.                                                                                                                                                                                                                                                               |
-| Width                              | Set a fixed width of the axis. By default, Grafana dynamically calculates the width of an axis. By setting the width of the axis, data with different axes types can share the same display proportions. This setting makes it easier for you to compare more than one graph’s worth of data because the axes aren't shifted or stretched within visual proximity to each other. |
-| Show grid lines                    | Set the axis grid line visibility.<br>                                                                                                                                                                                                                                                                                                                                           |
-| Color                              | Set the color of the axis.                                                                                                                                                                                                                                                                                                                                                       |
-| Show border                        | Set the axis border visibility.                                                                                                                                                                                                                                                                                                                                                  |
-| Scale                              | Set the y-axis values scale.<br>                                                                                                                                                                                                                                                                                                                                                 |
-| Centered zero                      | Set the y-axis so it's centered on zero.                                                                                                                                                                                                                                                                                                                                         |
-| [Soft min](#soft-min-and-soft-max) | Set a soft min to better control the y-axis limits. zero.                                                                                                                                                                                                                                                                                                                        |
-| [Soft max](#soft-min-and-soft-max) | Set a soft max to better control the y-axis limits. zero.                                                                                                                                                                                                                                                                                                                        |
 
 #### Placement
 

docs/sources/shared/visualizations/axis-options-all.md

@@ -0,0 +1,21 @@
+---
+title: Axis options
+comments: |
+  This file is used in the following visualizations: time series.
+---
+
+Options under the **Axis** section control how the x- and y-axes are rendered. Some options don't take effect until you click outside of the field option box you're editing. You can also press `Enter`.
+
+| Option                             | Description                                                                                                        |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Time zone                          | Set the desired time zones to display along the x-axis.                                                            |
+| [Placement](#placement)            | Select the placement of the y-axis.                                                                                |
+| Label                              | Set a y-axis text label. If you have more than one y-axis, then you can assign different labels using an override. |
+| Width                              | Set a fixed width for the axis. By default, Grafana dynamically calculates the width of an axis.                   |
+| Show grid lines                    | Set the axis grid line visibility.<br>                                                                             |
+| Color                              | Set the color of the axis.                                                                                         |
+| Show border                        | Set the axis border visibility.                                                                                    |
+| Scale                              | Set the y-axis values scale.<br>                                                                                   |
+| Centered zero                      | Set the y-axis so it's centered on zero.                                                                           |
+| [Soft min](#soft-min-and-soft-max) | Set a soft min to better control the y-axis limits. zero.                                                          |
+| [Soft max](#soft-min-and-soft-max) | Set a soft max to better control the y-axis limits. zero.                                                          |

docs/sources/shared/visualizations/axis-options-state-status.md

@@ -0,0 +1,10 @@
+---
+title: Axis options
+comments: |
+  This file is used in the following visualizations: state timeline, status history.
+---
+
+| Option    | Description                                                                                      |
+| --------- | ------------------------------------------------------------------------------------------------ |
+| Placement | Control the visibility of series names along the y-axis or time values along the x-axis.         |
+| Width     | Set a fixed width for the axis. By default, Grafana dynamically calculates the width of an axis. |

packages/grafana-schema/src/raw/composable/statetimeline/panelcfg/x/StateTimelinePanelCfg_types.gen.ts

@@ -43,7 +43,7 @@ export const defaultOptions: Partial<Options> = {
   showValue: ui.VisibilityMode.Auto,
 };
 
-export interface FieldConfig extends ui.HideableFieldConfig {
+export interface FieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
   fillOpacity?: number;
   lineWidth?: number;
 }

packages/grafana-schema/src/raw/composable/statushistory/panelcfg/x/StatusHistoryPanelCfg_types.gen.ts

@@ -33,7 +33,7 @@ export const defaultOptions: Partial<Options> = {
   showValue: ui.VisibilityMode.Auto,
 };
 
-export interface FieldConfig extends ui.HideableFieldConfig {
+export interface FieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
   fillOpacity?: number;
   lineWidth?: number;
 }

packages/grafana-ui/src/options/builder/axis.tsx

@@ -14,49 +14,32 @@ import { Stack } from '../../components/Layout/Stack/Stack';
 import { Select } from '../../components/Select/Select';
 import { graphFieldOptions } from '../../components/uPlot/config';
 
+const category = ['Axis'];
+
 /**
  * @alpha
  */
-export function addAxisConfig(
+export function addAxisConfig(builder: FieldConfigEditorBuilder<AxisConfig>, defaultConfig: AxisConfig) {
-  builder: FieldConfigEditorBuilder<AxisConfig>,
-  defaultConfig: AxisConfig,
-  hideScale?: boolean
-) {
-  const category = ['Axis'];
-
   // options for axis appearance
+  addAxisPlacement(builder);
+
+  builder.addTextInput({
+    path: 'axisLabel',
+    name: 'Label',
+    category,
+    defaultValue: '',
+    settings: {
+      placeholder: 'Optional text',
+      expandTemplateVars: true,
+    },
+    showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
+    // Do not apply default settings to time and string fields which are used as x-axis fields in Time series and Bar chart panels
+    shouldApply: (f) => f.type !== FieldType.time && f.type !== FieldType.string,
+  });
+
+  addAxisWidth(builder);
+
   builder
-    .addRadio({
-      path: 'axisPlacement',
-      name: 'Placement',
-      category,
-      defaultValue: graphFieldOptions.axisPlacement[0].value,
-      settings: {
-        options: graphFieldOptions.axisPlacement,
-      },
-    })
-    .addTextInput({
-      path: 'axisLabel',
-      name: 'Label',
-      category,
-      defaultValue: '',
-      settings: {
-        placeholder: 'Optional text',
-        expandTemplateVars: true,
-      },
-      showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
-      // Do not apply default settings to time and string fields which are used as x-axis fields in Time series and Bar chart panels
-      shouldApply: (f) => f.type !== FieldType.time && f.type !== FieldType.string,
-    })
-    .addNumberInput({
-      path: 'axisWidth',
-      name: 'Width',
-      category,
-      settings: {
-        placeholder: 'Auto',
-      },
-      showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
-    })
     .addRadio({
       path: 'axisGridShow',
       name: 'Show grid lines',
@@ -209,3 +192,32 @@ export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps
     </Stack>
   );
 };
+
+/** @internal */
+export function addAxisWidth(builder: FieldConfigEditorBuilder<AxisConfig>) {
+  builder.addNumberInput({
+    path: 'axisWidth',
+    name: 'Width',
+    category,
+    settings: {
+      placeholder: 'Auto',
+    },
+    showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
+  });
+}
+
+/** @internal */
+export function addAxisPlacement(
+  builder: FieldConfigEditorBuilder<AxisConfig>,
+  optionsFilter = (placement: AxisPlacement) => true
+) {
+  builder.addRadio({
+    path: 'axisPlacement',
+    name: 'Placement',
+    category,
+    defaultValue: graphFieldOptions.axisPlacement[0].value,
+    settings: {
+      options: graphFieldOptions.axisPlacement.filter((placement) => optionsFilter(placement.value!)),
+    },
+  });
+}

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

@@ -51,6 +51,7 @@ interface UPlotConfigOptions {
   mergeValues?: boolean;
   getValueColor: (frameIdx: number, fieldIdx: number, value: unknown) => string;
   hoverMulti: boolean;
+  axisWidth?: number;
 }
 
 /**
@@ -161,25 +162,32 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
     range: coreConfig.yRange,
   });
 
+  const xAxisHidden = frame.fields[0].config.custom.axisPlacement === AxisPlacement.Hidden;
+
   builder.addAxis({
+    show: !xAxisHidden,
     scaleKey: xScaleKey,
     isTime: true,
     splits: coreConfig.xSplits!,
     placement: AxisPlacement.Bottom,
     timeZone: timeZones[0],
     theme,
-    grid: { show: true },
   });
 
+  const yCustomConfig = frame.fields[1].config.custom;
+  const yAxisWidth = yCustomConfig.axisWidth;
+  const yAxisHidden = yCustomConfig.axisPlacement === AxisPlacement.Hidden;
+
   builder.addAxis({
     scaleKey: FIXED_UNIT, // y
     isTime: false,
     placement: AxisPlacement.Left,
     splits: coreConfig.ySplits,
-    values: coreConfig.yValues,
+    values: yAxisHidden ? (u, splits) => splits.map((v) => null) : coreConfig.yValues,
     grid: { show: false },
     ticks: { show: false },
-    gap: 16,
+    gap: yAxisHidden ? 0 : 16,
+    size: yAxisHidden ? 0 : yAxisWidth,
     theme,
   });
 

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

@@ -103,7 +103,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(BarChartPanel)
         shouldApply: () => true,
       });
 
-      commonOptionsBuilder.addAxisConfig(builder, cfg, false);
+      commonOptionsBuilder.addAxisConfig(builder, cfg);
       commonOptionsBuilder.addHideFrom(builder);
     },
   })

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -4,6 +4,7 @@ import { useMeasure } from 'react-use';
 
 import { DashboardCursorSync, DataFrame, PanelProps } from '@grafana/data';
 import {
+  AxisPlacement,
   EventBusPlugin,
   Pagination,
   TooltipDisplayMode,
@@ -209,15 +210,16 @@ export const StateTimelinePanel = ({
                   maxWidth={options.tooltip.maxWidth}
                 />
               )}
-              {/* Renders annotations */}
+              {alignedFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
-              <AnnotationsPlugin2
+                <AnnotationsPlugin2
-                annotations={data.annotations ?? []}
+                  annotations={data.annotations ?? []}
-                config={builder}
+                  config={builder}
-                timeZone={timeZone}
+                  timeZone={timeZone}
-                newRange={newAnnotationRange}
+                  newRange={newAnnotationRange}
-                setNewRange={setNewAnnotationRange}
+                  setNewRange={setNewAnnotationRange}
-                canvasRegionRendering={false}
+                  canvasRegionRendering={false}
-              />
+                />
+              )}
               <OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} />
             </>
           );

public/app/plugins/panel/state-timeline/module.tsx

@@ -5,7 +5,7 @@ import {
   identityOverrideProcessor,
   PanelPlugin,
 } from '@grafana/data';
-import { VisibilityMode } from '@grafana/schema';
+import { AxisPlacement, VisibilityMode } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
 import { InsertNullsEditor } from '../timeseries/InsertNullsEditor';
@@ -76,6 +76,11 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StateTimelinePanel)
         });
 
       commonOptionsBuilder.addHideFrom(builder);
+      commonOptionsBuilder.addAxisPlacement(
+        builder,
+        (placement) => placement === AxisPlacement.Auto || placement === AxisPlacement.Hidden
+      );
+      commonOptionsBuilder.addAxisWidth(builder);
     },
   })
   .setPanelOptions((builder) => {

public/app/plugins/panel/state-timeline/panelcfg.cue

@@ -41,6 +41,7 @@ composableKinds: PanelCfg: {
 					perPage?: number & >=1 | *20
 				} @cuetsy(kind="interface")
 				FieldConfig: {
+					ui.AxisConfig
 					ui.HideableFieldConfig
 					lineWidth?:   uint32 & <=10 | *0
 					fillOpacity?: uint32 & <=100 | *70

public/app/plugins/panel/state-timeline/panelcfg.gen.ts

@@ -41,7 +41,7 @@ export const defaultOptions: Partial<Options> = {
   showValue: ui.VisibilityMode.Auto,
 };
 
-export interface FieldConfig extends ui.HideableFieldConfig {
+export interface FieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
   fillOpacity?: number;
   lineWidth?: number;
 }

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -1,7 +1,14 @@
 import { useMemo, useState } from 'react';
 
 import { DashboardCursorSync, PanelProps } from '@grafana/data';
-import { EventBusPlugin, TooltipDisplayMode, TooltipPlugin2, usePanelContext, useTheme2 } from '@grafana/ui';
+import {
+  AxisPlacement,
+  EventBusPlugin,
+  TooltipDisplayMode,
+  TooltipPlugin2,
+  usePanelContext,
+  useTheme2,
+} from '@grafana/ui';
 import { TimeRange2, TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart';
 import {
@@ -141,14 +148,16 @@ export const StatusHistoryPanel = ({
                 maxWidth={options.tooltip.maxWidth}
               />
             )}
-            <AnnotationsPlugin2
+            {alignedFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
-              annotations={data.annotations ?? []}
+              <AnnotationsPlugin2
-              config={builder}
+                annotations={data.annotations ?? []}
-              timeZone={timeZone}
+                config={builder}
-              newRange={newAnnotationRange}
+                timeZone={timeZone}
-              setNewRange={setNewAnnotationRange}
+                newRange={newAnnotationRange}
-              canvasRegionRendering={false}
+                setNewRange={setNewAnnotationRange}
-            />
+                canvasRegionRendering={false}
+              />
+            )}
             <OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} />
           </>
         );

public/app/plugins/panel/status-history/module.tsx

@@ -1,5 +1,5 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
-import { VisibilityMode } from '@grafana/schema';
+import { AxisPlacement, VisibilityMode } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
 import { StatusHistoryPanel } from './StatusHistoryPanel';
@@ -42,6 +42,11 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StatusHistoryPanel)
         });
 
       commonOptionsBuilder.addHideFrom(builder);
+      commonOptionsBuilder.addAxisPlacement(
+        builder,
+        (placement) => placement === AxisPlacement.Auto || placement === AxisPlacement.Hidden
+      );
+      commonOptionsBuilder.addAxisWidth(builder);
     },
   })
   .setPanelOptions((builder) => {

public/app/plugins/panel/status-history/panelcfg.cue

@@ -37,6 +37,7 @@ composableKinds: PanelCfg: {
 					colWidth?: float & <=1 | *0.9
 				} @cuetsy(kind="interface")
 				FieldConfig: {
+					ui.AxisConfig
 					ui.HideableFieldConfig
 					lineWidth?:   uint32 & <=10 | *1
 					fillOpacity?: uint32 & <=100 | *70

public/app/plugins/panel/status-history/panelcfg.gen.ts

@@ -31,7 +31,7 @@ export const defaultOptions: Partial<Options> = {
   showValue: ui.VisibilityMode.Auto,
 };
 
-export interface FieldConfig extends ui.HideableFieldConfig {
+export interface FieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
   fillOpacity?: number;
   lineWidth?: number;
 }