Docs: New index page with list of all visualizations and panels (#36756)

* New index pages and some new images

* Update

* Update graph-color-scheme.md

Small grammar fix

* Update pie-chart-panel.md

Small fix for caption

* Update _index.md

Minor grammatical change and missing comma.

* Update graph-color-scheme.md

Another small grammar tweak

* Adding color scheme docs

* Updated image captions

* Added missing panels

* Updates

* fixes

* Align on naming

* Fix

Co-authored-by: Petros Kolyvas <code@petros.io>

docs/sources/panels/visualizations/_index.md

@@ -1,10 +1,87 @@
 +++
-title = "Visualization options"
+title = "Visualization panels"
 weight = 420
 +++
 
-# Visualization options
+# Visualization panels
 
-Grafana offers a variety of visualizations to suit different use cases. This section of the documentation lists the different visualizations available in Grafana and their unique options.
+Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in panels, their options and typical usage. 
 
-You can add more panel types with [plugins]({{< relref "../../plugins/_index.md" >}}).
+* Graphs & charts 
+  * [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.    
+  * [State timeline]({{< relref "./state-timeline.md" >}}) for state changes over time.   
+  * [Status history]({{< relref "./state-timeline.md" >}}) for periodic state over time. 
+  * [Bar chart]({{< relref "./bar-chart.md" >}}) shows any categorical data.
+  * [Histogram]({{< relref "./histogram.md" >}}) calculates and shows value distribution in a bar chart.
+  * [Heatmap]({{< relref "./heatmap.md" >}}).  
+  * [Pie chart]({{< relref "./pie-chart-panel.md" >}}). 
+* Stats & numbers
+  * [Stat]({{< relref "./stat-panel.md" >}}) for big stats and optional sparkline. 
+  * [Gauge]({{< relref "./gauge-panel.md" >}}) is a normal radial gauge.  
+  * [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) is a horizontal or vertical bar gauge. 
+* Misc
+  * [Table]({{< relref "./table/_index.md" >}}) is the main and only table visualization.
+  * [Logs]({{< relref "./logs-panel.md" >}}) is the main visualization for logs.
+  * [Node Graph]({{< relref "./node-graph.md" >}}) for directed graphs or networks.
+* Widgets
+  * [Dashboard list]({{< relref "./dashboard-list-panel.md" >}}) can list dashboards.
+  * [Alert list]({{< relref "./alert-list-panel.md" >}}) can list alerts.
+  * [Text panel]({{< relref "./alert-list-panel.md" >}}) can show markdown and html.
+  * [News panel]({{< relref "./news-panel.md" >}}) can show RSS feeds.
+
+## Get more  
+
+You can add more visualization types by installing panel [panel plugins](https://grafana.com/grafana/plugins/?type=panel).
+## Examples 
+
+Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations.
+
+### Graphs
+
+For time based line, area and bar charts we recommend the default [Time series]({{< relref "./time-series/_index.md" >}}) visualization. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
+
+{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="700px" caption="Time series" >}}
+
+For categorical data use the [Bar chart]({{< relref "./bar-chart.md" >}}) visualization. 
+
+{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
+
+### Big numbers & stats
+
+The [Stat](stat-panel/) visualization shows one large stat value with an optional graph sparkline. You can control the background or value color using thresholds or color scales.
+
+{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
+
+### Gauge 
+
+If you want to present a value as it relates to a min and max value you have two options. First a standard [Radial Gauge]({{< relref "./gauge-panel.md" >}}) shown below.
+
+{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" >}}
+
+Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) with three different distinct display modes. 
+
+{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" >}}
+
+### Table 
+
+To show data in a table layout, use the [Table]({{< relref "./table/_index.md" >}}) visualization.
+
+{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
+
+### Pie chart 
+
+Grafana now ships with an included [Pie chart]({{< relref "./pie-chart-panel.md" >}}) visualization.
+
+{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="700px" lightbox="true" caption="Pie chart visualization" >}}
+
+### Heatmaps
+
+To show value distribution over, time use the [heatmap]({{< relref "./heatmap.md" >}}) visualization.
+
+{{< figure src="/static/img/docs/v43/heatmap_panel_cover.jpg" max-width="1000px" lightbox="true" caption="Heatmap" >}}
+
+### State timeline
+
+The state timeline panel visualization shows discrete state changes over time. 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="700px" caption="state timeline with string states" >}}

docs/sources/panels/visualizations/bar-chart.md

@@ -9,8 +9,7 @@ weight = 170
 
 This panel visualization allows you to graph categorical data.
 
-{{< figure src="/static/img/docs/bar-chart-panel/bar-chart-example-v8-0.png" max-width="1025px" caption="Bar chart example" >}}
-
+{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" caption="Bar chart" >}}
 ## Supported data formats
 
 Only one data frame is supported and it needs to have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.

docs/sources/panels/visualizations/pie-chart-panel.md

@@ -6,9 +6,9 @@ weight = 850
 
 # Pie chart
 
-The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form.
+{{< figure src="/static/img/docs/pie-chart-panel/pie-chart-example.png" max-width="1200px" lightbox="true" caption="Pie chart visualization" >}}
 
-![Pie chart panel](/static/img/docs/pie-chart-panel/pie-chart-panel-7-5.png)
+The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form.
 
 ## Value options
 

docs/sources/panels/visualizations/time-series/_index.md

@@ -6,11 +6,9 @@ weight = 1200
 
 # Time series
 
-> **Note:** Time series panel visualization is going to replace the Graph panel visualization in a future release.
+{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="1200px" caption="Time series" >}}
 
-Time series panel is a robust visualization to plot time series data. It can render as a line, a path of dots, or a series of bars. This type of graph is versatile enough to display almost any time-series data.
-
-For Time series panel examples, refer to the Grafana Play dashboard [New Features in v7.4](https://play.grafana.org/d/nP8rcffGk/new-features-in-v7-4?orgId=1).
+Time series visualization is the default and primary way to visualize time series data. It can render as a line, a path of dots, or a series of bars. It is versatile enough to display almost any time-series data. [ This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
 
 > **Note:** You can migrate Graph panel visualizations to Time series visualizations. To migrate, open the panel and then select the  **Time series** visualization. Grafana transfers all applicable settings.
 
@@ -34,6 +32,7 @@ Use these options to choose how to display your time series data.
 - [Graph time series as bars]({{< relref "./graph-time-series-as-bars.md" >}})
 - [Graph time series as points]({{< relref "./graph-time-series-as-points.md" >}})
 - [Graph stacked time series]({{< relref "./graph-time-series-stacking.md" >}})
+- [Graph and color schemes]({{< relref "./graph-color-scheme.md" >}})
 
 ## Axis
 

docs/sources/panels/visualizations/time-series/graph-color-scheme.md

@@ -0,0 +1,49 @@
++++
+title = "Graph and color schemes "
+keywords = ["grafana", "time series panel", "documentation", "guide", "graph"]
+weight = 400
++++
+
+{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
+
+# Graph and color schemes 
+
+Under [Standard options]({{< relref "../../standard-options.md" >}}) you find the [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color. 
+
+## Classic palette 
+
+The most common setup is to use the **Classic palette** for graphs. This scheme will automatically assign a color for each field or series based on it's order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule. 
+
+## Single color
+
+Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color. 
+
+## By value color schemes 
+
+ > **Note:** Starting in v8.1 the Time series panel now supports by value color schemes like **From thresholds** of the gradient color schemes. 
+
+If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)**  another option named **Color series by** will show up. This option control what value (Last, Min, Max) to use to assign the series its color. 
+
+## Scheme gradient mode
+
+The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When this mode is enabled the whole line or bar gets a gradient color defined from the selected **Color scheme**. 
+
+### From thresholds 
+
+If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme** then the line or bar color will change as they cross the thresholds defined. 
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="1200px" caption="Colors scheme: From thresholds" >}}
+
+If you have enabled bars mode it would look like this:
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_bars.png" max-width="1200px" caption="Color scheme: From thresholds" >}}
+
+### Gradient color schemes
+
+If you have a selected a **Color scheme** like **Green-Yellow-Red (by value)** then it would look like this:
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}}
+
+If you have enabled bars mode it would look like this:
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}}

docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md

@@ -6,8 +6,6 @@ weight = 200
 
 # Graph time series as bars
 
-> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
-
 This section explains how to use Time series field options to visualize time series data as bars and illustrates what the options do.
 
 ## Create the panel
@@ -98,6 +96,12 @@ Gradient color is generated based on the hue of the line color.
 
 ![Gradient mode hue example](/static/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
 
+#### Scheme 
+
+In this mode the whole bar will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Gradient color scheme mode" >}}
+
 ### Show points
 
 Choose when the points should be shown on the graph

docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md

@@ -6,8 +6,6 @@ weight = 100
 
 # Graph time series as lines
 
-> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
-
 This section explains how to use Time series field options to visualize time series data as lines and illustrates what the options do.
 
 ## Create the panel
@@ -106,6 +104,12 @@ Gradient color is generated based on the hue of the line color.
 
 ![Gradient mode hue example](/static/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
 
+#### Scheme 
+
+In this mode the whole line will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
+
+{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" caption="Gradient mode scheme" >}}
+
 ### Line style
 
 Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) field option.

docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md

@@ -6,8 +6,6 @@ weight = 300
 
 # Graph time series as points
 
-> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in the future releases.
-
 This section explains how to use Time series field options to visualize time series data as points and illustrates what the options do.
 
 ## Create the panel

docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md

@@ -6,8 +6,6 @@ weight = 400
 
 # Graph stacked time series
 
-> **Note:** This is a beta feature. Time series panel is going to replace the Graph panel in a future release.
-
 This section explains how to use Time series panel field options to control the stacking of the series and illustrates what the stacking options do.
 
 _Stacking_ allows Grafana to display series on top of each other. Be cautious when using stacking in the visualization as it can easily create misleading graphs. You can read more on why stacking may be not the best approach here: [Stacked Area Graphs Are Not Your Friend](https://everydayanalytics.ca/2014/08/stacked-area-graphs-are-not-your-friend.html).