Docs: Initial docs for State timeline visualization (grafana#35046)

* Docs: Initial docs for State timeline visualization * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Update docs/sources/panels/visualizations/state-timeline.md Co-authored-by: achatterjee-grafana <[email protected]> * Changed format for options from table to headings * Updated what's new * restore naming to Visualization options * Update docs/sources/whatsnew/whats-new-in-v8-0.md Co-authored-by: Diana Payton <[email protected]> * Update docs/sources/whatsnew/whats-new-in-v8-0.md Co-authored-by: Diana Payton <[email protected]> Co-authored-by: achatterjee-grafana <[email protected]> Co-authored-by: Diana Payton <[email protected]>
nj2208 · Jun 2, 2021 · ac9cbbc · ac9cbbc
1 parent d92a1f2
commit ac9cbbc
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/docs/Makefile b/docs/Makefile
@@ -15,7 +15,7 @@ docs-quick: pull
 	docker run -v $(shell pwd)/sources:$(CONTENT_PATH):Z -p $(PORT) --rm -it $(IMAGE) /bin/bash -c "ln -s /frontend-docs/packages_api /hugo/content/docs/grafana/next/packages_api && make server-quick"
 
 docs-no-pull:
-	docker run -v $(shell pwd)/sources:$(CONTENT_PATH):Z -p $(PORT) --rm -it $(IMAGE) /bin/bash -c "make server-quick"
+	docker run -v $(shell pwd)/sources:$(CONTENT_PATH):Z -p $(PORT) --rm -it $(IMAGE) /bin/bash -c "make server"
 
 docs-test: pull
 	docker run -v $(shell pwd)/sources:$(CONTENT_PATH):Z --rm -it $(IMAGE) /bin/bash -c 'make prod'

diff --git a/docs/sources/panels/visualizations/state-timeline.md b/docs/sources/panels/visualizations/state-timeline.md
@@ -0,0 +1,60 @@
++++
+title = "State timeline"
+description = "Stat timeline visualization"
+keywords = ["grafana", "docs", "state timeline", "panel"]
+weight = 900
++++
+
+# State timeline visualization
+
+The state timeline visualization shows discrete state changes over time. Each field or series is rendered as its unique horizontal band. State regions can either be rendered with or without values. This panel works well with string or boolean states but can also be used with time series. When used with time series, the thresholds are used to turn the numerical values into discrete state regions.
+
+{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="1025px" caption="state timeline with string states" >}}
+
+## Shared options
+
+The following shared options are available:
+
+- [Standard options]({{< relref "../standard-options.md" >}}) (Unit, min, max, decimals, color)
+- [Thresholds]({{< relref "../thresholds.md" >}})
+- [Value mappings]({{< relref "../value-mappings.md" >}})
+
+You can also use [field overrides]({{< relref "../field-overrides.md" >}}) to specify options per field or series.
+
+## Display options
+
+### Show values
+
+Controls whether values are rendered inside the state regions. Auto will render values if there is room.
+
+### Align values
+
+Controls value alignment inside state regions.
+
+### Row height
+
+Controls how much space between rows there are. 1 = no space = 0.5 = 50% 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 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" >}}
+
+## 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`.
diff --git a/docs/sources/whatsnew/whats-new-in-v8-0.md b/docs/sources/whatsnew/whats-new-in-v8-0.md
@@ -46,7 +46,17 @@ The Bar chart panel is a new visualization that allows categorical data display.
 
 ### State timeline visualization (beta)
 
-This new visualization is designed to display state changes and durations.
+The State timeline visualization shows discrete state changes over time. Each field or series is rendered as a unique horizontal band. This panel works well with string or boolean states, but it can also be used with time series data. When used with time series data, the thresholds are used to turn the numerical values into discrete state regions. 
+
+This panel also takes advantage of the new value mapping features that allow you to color string and boolean values. 
+
+Example with string values: 
+{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="1025px" caption="state timeline with string states" >}}
+
+With time series data and thresholds: 
+{{< figure src="/static/img/docs/v8/state_timeline_time_series.png" max-width="1025px" caption="state timeline with time series" >}}
+
+For more information, refer to [State timeline visualization]({{< relref "../panels/visualizations/state-timeline.md" >}}).
 
 ### Status grid visualization (beta)