* 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 4c2790c41b)
* Ran prettier
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:
{{<figuresrc="/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">}}
{{<figuresrc="/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/<GRAFANA_VERSION>/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,83 @@ The data is converted as follows:
{{<figuresrc="/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">}}
| 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. |
Controls whether values are rendered inside the value boxes. Auto will render values if there is sufficient space.
<!-- prettier-ignore-end -->
### Row height
### Legend options
Controls the height of boxes. 1 = maximum space and 0 = minimum space.
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:
@ -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**.
Isabel Matwawana
3 months ago
committed by