Docs: Adds initial status history docs (#35243)

* Docs: Adds initial status history docs

* spell fixes

* Update docs/sources/whatsnew/whats-new-in-v8-0.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

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

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

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

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 +++
 title = "State timeline"
-description = "Stat timeline visualization"
+description = "State timeline visualization"
 keywords = ["grafana", "docs", "state timeline", "panel"]
 weight = 900
 +++
@@ -21,7 +21,7 @@ Controls whether Grafana merges identical values if they are next to each other.
 
 ### Show values
 
-Controls whether values are rendered inside the state regions. Auto will render values if there is room.
+Controls whether values are rendered inside the state regions. Auto will render values if there is sufficient space.
 
 ### Align values
 
@@ -47,7 +47,7 @@ To assign colors to boolean or string values, use the [Value mappings](< {{ refr
 
 ## Time series data with thresholds
 
-The panel can be with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions.
+The panel can be used with time series data as well. In this case, the thresholds are used to turn the time series into discrete colored state regions.
 
 {{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}}
 

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

@@ -0,0 +1,55 @@
++++
+title = "Status history"
+description = "Status history visualization"
+keywords = ["grafana", "docs", "status history", "panel"]
+weight = 900
++++
+
+# Status history
+
+The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value. 
+
+{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" caption="Status history example" >}}
+
+## Supported data 
+
+Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.  
+
+## Display 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.
+
+### Column width
+
+Controls the width of boxes. 1 = maximum space and 0 = minimum space.
+
+### Line width
+
+Controls line width of state regions.
+
+### Fill opacity
+
+Controls the opacity of state regions.
+
+## Value mappings
+
+To assign colors to boolean or string values, use the [Value mappings](< {{ refref "../value-mappings.md"}} >).
+
+{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
+
+## Time series data with thresholds
+
+The panel can be used with time series data as well. In this case, the thresholds are used to color the boxes. You can also
+use gradient color schemes to color values.
+
+{{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}}
+
+## Legend options
+
+When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` option under [Standard options]({{< relref "../standard-options.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
+
+{{< docs/shared "visualizations/legend-mode.md" >}}

docs/sources/whatsnew/whats-new-in-v8-0.md

@@ -73,7 +73,8 @@ For more information, refer to [State timeline visualization]({{< relref "../pan
 
 ### Status history visualization (beta)
 
-A sister panel to the state timeline is the new Status history panel visualization. It can display periodic state in a grid. Works with both numerical, string or boolean state.
+A sister panel to the state timeline is the new Status history panel visualization. It can display periodic states in a grid view. It supports both numerical, string, or boolean states. You can assign colors using value mappings, thresholds, or gradient color. For more information, refer to [Status history]({{< relref "../panels/visualizations/status-history.md" >}}).
+schemes.
 
 ![Status grid visualization](/static/img/docs/status-grid/status-grid-8-0.png)