From beed74efb80345809971170beef08506f2f2c68c Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Mon, 31 Mar 2025 14:41:18 -0400 Subject: [PATCH] [release-11.1.14] Docs: status history visualization refactor (#103127) * Docs: status history visualization refactor (#103027) * Added config options section and bumped heading levels * Added level offset * Restructured Status history options and removed screenshot from Value mappings section * Replaced screenshot and updated example text * Fixed heading level in legend options 2 shared file (cherry picked from commit 4c2790c41b176f3d1d31604c6167bd60eadbdfb2) * Ran prettier --- .../visualizations/status-history/index.md | 59 +++++++++---------- .../shared/visualizations/legend-options-2.md | 2 +- .../visualizations/tooltip-options-1.md | 2 +- .../visualizations/tooltip-options-3.md | 34 +++++++++++ 4 files changed, 65 insertions(+), 32 deletions(-) create mode 100644 docs/sources/shared/visualizations/tooltip-options-3.md diff --git a/docs/sources/panels-visualizations/visualizations/status-history/index.md b/docs/sources/panels-visualizations/visualizations/status-history/index.md index b7825b94b82..7698b9093e4 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -32,9 +32,9 @@ refs: A status history visualization displays data in a way that shows periodic states over time. In a status history, each field or series is rendered as a horizontal row, with multiple boxes showing the different statuses. This provides you with a centralized view for the status of a component or service. -For example, if you're monitoring the health status of different services, you can use a status history to visualize the different statuses, such as “OK,” “WARN,” or “BAD,” over time. Each status is represented by a different color: +For example, if you're monitoring the health status of different services, you can use a status history to visualize the different statuses, such as “True” or "False," over time. Each status is represented by a different color: -{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" alt="A status history panel showing the health status of different services" >}} +{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-status-history-v11.6.png" max-width="800px" alt="A status history panel showing the health status of different sensors" >}} {{% admonition type="note" %}} A status history is similar to a [state timeline](https://grafana.com/docs/grafana//panels-visualizations/visualizations/state-timeline/), but has different [configuration options](#status-history-options). Unlike state timelines, status histories don't merge consecutive values. @@ -95,60 +95,59 @@ The data is converted as follows: {{< figure src="/static/img/docs/status-history-panel/status_history.png" max-width="1025px" alt="A status history panel with two time columns showing the status of two servers" >}} -## Panel options +## Configuration options + +{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} + +### Panel options {{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} -## Status history options +### Status history options Use these options to refine the visualization. -### Show values + -Controls whether values are rendered inside the value boxes. Auto will render values if there is sufficient space. +| Option | Description | +| ------ | ----------------------------------------------------------------------------------------------- | +| Show values | Controls whether values are rendered inside the state regions. Choose from **Auto**, **Always**, and **Never**. **Auto** renders values if there is sufficient space. | +| Row height | Controls the height of boxes. 1 = maximum space and 0 = minimum space. | +| Column width | Controls the width of boxes. 1 = maximum space and 0 = minimum space. | +| Page size (enable pagination) | The **Page size** option lets you paginate the status history visualization to limit how many series are visible at once. This is useful when you have many series. | +| Line width | Controls line width of state regions. | +| Fill opacity | Controls value alignment inside state regions. | -### Row height + -Controls the height of boxes. 1 = maximum space and 0 = minimum space. +### Legend options -### Column width +{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="" leveloffset="+1" >}} -Controls the width of boxes. 1 = maximum space and 0 = minimum space. +### Tooltip options -### Line width +{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="" leveloffset="+1" >}} -Controls line width of state regions. +### Axis options -### Fill opacity +{{< docs/shared lookup="visualizations/axis-options-state-status.md" source="grafana" version="" leveloffset="+1" >}} -Controls the opacity of state regions. - -## Legend options - -{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="" >}} - -## Tooltip options - -{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} - -## Standard options +### Standard options {{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} -## Data links +### Data links {{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} -## Value mappings +### Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} -{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}} - -## Thresholds +### Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} -## Field overrides +### Field overrides {{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="" >}} diff --git a/docs/sources/shared/visualizations/legend-options-2.md b/docs/sources/shared/visualizations/legend-options-2.md index 9abfe0adfc7..3091b358b84 100644 --- a/docs/sources/shared/visualizations/legend-options-2.md +++ b/docs/sources/shared/visualizations/legend-options-2.md @@ -28,6 +28,6 @@ Choose where to display the legend. - **Bottom -** Below the graph. - **Right -** To the right of the graph. -#### Width +### Width Control how wide the legend is when placed on the right side of the visualization. This option is only displayed if you set the legend placement to **Right**. diff --git a/docs/sources/shared/visualizations/tooltip-options-1.md b/docs/sources/shared/visualizations/tooltip-options-1.md index ff797789d3c..dd6436b0826 100644 --- a/docs/sources/shared/visualizations/tooltip-options-1.md +++ b/docs/sources/shared/visualizations/tooltip-options-1.md @@ -3,7 +3,7 @@ title: Tooltip options comments: | There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. - This file is used in the following visualizations: bar chart, pie chart, state timeline, status history + This file is used in the following visualizations: bar chart, pie chart --- Tooltip options control the information overlay that appears when you hover over data points in the visualization. diff --git a/docs/sources/shared/visualizations/tooltip-options-3.md b/docs/sources/shared/visualizations/tooltip-options-3.md new file mode 100644 index 00000000000..b093f5c4771 --- /dev/null +++ b/docs/sources/shared/visualizations/tooltip-options-3.md @@ -0,0 +1,34 @@ +--- +title: Tooltip options +comments: | + There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. + Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. + This file is used in the following visualizations: histogram, state timeline, status history +--- + +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + +| Option | Description | +| --------------------------------------- | ------------------------------------------------------------------------------------------------------------ | +| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. | +| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. | +| Max width | Set the maximum width of the tooltip box. | +| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. | + +### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single** - The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All** - The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden** - Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +### Values sort order + +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest.