diff --git a/docs/Makefile b/docs/Makefile index 1a54a5a9878..78c12ffc424 100644 --- 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 new file mode 100644 index 00000000000..e1d4b2cdaf0 --- /dev/null +++ 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 index 7b5c3e618ef..3359cbe7b40 100644 --- 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)