Docs/panel refactor (#43569)

* new refactored panel docs * fixed links * removed xtra sharing link, added links to panel display option tasks * fixed typo * add aliases * incorporate PM feedback * intermediate commit to resolve merge conflict * final changes to resolve merge conflicts
2022-01-18 15:06:27 -06:00
parent 959723050f
commit 449c608ef1
118 changed files with 2043 additions and 1668 deletions
@@ -9,7 +9,7 @@ weight = 1200

 {{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="1200px" caption="Time series" >}}

-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.
+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.

@@ -23,7 +23,7 @@ These options are available whether you are graphing your time series as lines,

 ### Legend calculations

-Choose which of the [standard calculations]({{< relref "../../panels/calculations-list.md">}}) to show in the legend. You can have more than one.
+Choose which of the [standard calculations]({{< relref "../../panels/reference-calculation-types.md">}}) to show in the legend. You can have more than one.

 ## Graph styles

@@ -61,7 +61,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B

 **Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.

-You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../../panels/standard-options.md#max" >}}).
+You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Reference: Standard field definitions]({{< relref "../../panels/reference-standard-field-definitions.md#max" >}}).

 ![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)

@@ -9,7 +9,7 @@ weight = 400

 # Graph and color schemes

-Under [Standard options]({{< relref "../../panels/standard-options.md" >}}) you find the [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
+To set the graph and color schemes, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}).

 ## Classic palette

@@ -9,11 +9,14 @@ weight = 200

 This section explains how to use Time series field options to visualize time series data as bars and illustrates what the options do.

+For more information about the time series visualization, refer to [Time series]({{< relref "_index.md" >}}).
+
 ## Create the panel

-1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
-2. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
-3. In Style, click **Bars**.
+1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}).
+1. Select the **Time series** visualization.
+1. In the Panel editor side pane, click **Graph styles** to expand it.
+1. In Style, click **Bars**.

 ## Style the bars

@@ -75,7 +78,7 @@ Fill opacity set to 95:

 ### Gradient mode

-Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) field option.
+Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}).

 Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.

@@ -99,7 +102,7 @@ Gradient color is generated based on the hue of the line color.

 #### Scheme

-In this mode the whole bar will use a color gradient defined by your [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
+In this mode the whole bar will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}). 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" >}}

@@ -11,8 +11,8 @@ This section explains how to use Time series field options to visualize time ser

 ## Create the panel

-1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
-1. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
+1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
+1. In the Panel editor side pane, click **Graph styles** to expand it.
 1. In Style, click **Lines**.

 ## Style the lines
@@ -83,7 +83,7 @@ Fill opacity set to 95:

 ### Gradient mode

-Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) field option.
+Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}) .

 Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.

@@ -107,13 +107,13 @@ Gradient color is generated based on the hue of the line color.

 #### Scheme

-In this mode the whole line will use a color gradient defined by your [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
+In this mode the whole line will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}). 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 "../../panels/standard-options.md#color-scheme" >}}) field option.
+Set the style of the line. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}})

 Line style appearance is influenced by the **Line width** and **Fill opacity** settings. In the screenshots below, **Line width** is set to 3 and **Fill opacity** is set to 20.

@@ -11,8 +11,8 @@ This section explains how to use Time series field options to visualize time ser

 ## Create the panel

-1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
-1. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
+1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
+1. In the Panel editor side pane, click **Graph styles** to expand it.
 1. In Style, click **Points**.

 ## Style the points
@@ -37,7 +37,7 @@ Enable stacking series on top of each other.

 The stacking group option is only available as an override.

-For more information about creating field overrides, refer to [Field overrides]({{< relref "../../panels/field-overrides.md" >}}).
+For more information about creating field overrides, refer to [About field overrides]({{< relref "../../panels/override-field-values/about-field-overrides.md" >}}).

 Stack series in the same group. In the Overrides section: