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
pull/104487/head
Isabel Matwawana 4 months ago committed by GitHub
parent c321afdeb7
commit 4c2790c41b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 65
      docs/sources/panels-visualizations/visualizations/status-history/index.md
  2. 2
      docs/sources/shared/visualizations/legend-options-2.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/<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,68 +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/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
## 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.
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
### Row height
### Panel options
Controls the height 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.
### Column width
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
Controls the width of boxes. 1 = maximum space and 0 = minimum space.
### Status history options
### Line width
Use these options to refine the visualization.
Controls line width of state regions.
<!-- prettier-ignore-start -->
### Fill opacity
| 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. |
Controls the opacity of state regions.
<!-- prettier-ignore-end -->
## Legend options
### Legend options
{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
{{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
## Tooltip options
### Tooltip options
{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" >}}
{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
## Axis options
### Axis options
{{< docs/shared lookup="visualizations/axis-options-state-status.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
## Standard options
### Standard options
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
## Data links and actions
### Data links and actions
{{< docs/shared lookup="visualizations/datalink-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
## Value mappings
### Value mappings
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<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="<GRAFANA_VERSION>" >}}
## Field overrides
### Field overrides
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}

@ -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**.

Loading…
Cancel
Save