From 18791143e1eb0d3b617d3d5734c6f92f03a826b3 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Wed, 22 May 2024 16:28:24 -0400 Subject: [PATCH] [v10.3.x] Docs: Add value mappings shared content (#88192) Docs: Add value mappings shared content (#86996) * Added value mappings shared file * Fixed name of file * Fixed list of visualizations using shared file * Added shared file to visualizations * Updated shared file and added to canvas * Updated shared file intro text * Removed future tense (cherry picked from commit d5fde99c6d46ee17725aa01213f2b779a5728df8) --- .../visualizations/bar-chart/index.md | 4 ++++ .../visualizations/bar-gauge/index.md | 4 ++++ .../visualizations/candlestick/index.md | 8 ++++++++ .../visualizations/canvas/index.md | 4 ++++ .../visualizations/gauge/index.md | 6 +++++- .../visualizations/geomap/index.md | 4 ++++ .../visualizations/histogram/index.md | 4 ++++ .../visualizations/pie-chart/index.md | 4 ++++ .../visualizations/stat/index.md | 4 ++++ .../visualizations/state-timeline/index.md | 8 ++++++++ .../visualizations/status-history/index.md | 8 ++++++++ .../visualizations/table/index.md | 4 ++++ .../visualizations/time-series/index.md | 4 ++++ .../visualizations/trend/index.md | 8 ++++++++ .../visualizations/value-mappings-options.md | 20 +++++++++++++++++++ 15 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 docs/sources/shared/visualizations/value-mappings-options.md diff --git a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md index 918cae3a833..a1b697d8f2c 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -193,6 +193,10 @@ You can set standard min/max options to define hard limits of the Y-axis. For mo {{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" [Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" diff --git a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md index 263d56c3c11..41198f0bb72 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md @@ -130,6 +130,10 @@ Automatically show y-axis scrollbar when there's a large amount of data. This option only applies when bar size is set to manual. {{% /admonition %}} +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md index 29714790a88..099222aa64b 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -114,6 +114,14 @@ If your data can't be mapped to these dimensions for some reason (for example, b The candlestick visualization is based on the time series visualization. It can visualize additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow it to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series][time series visualization] visualization. +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} + +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" [time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/visualizations/time-series" diff --git a/docs/sources/panels-visualizations/visualizations/canvas/index.md b/docs/sources/panels-visualizations/visualizations/canvas/index.md index f83e78f3083..50fc8157bfc 100644 --- a/docs/sources/panels-visualizations/visualizations/canvas/index.md +++ b/docs/sources/panels-visualizations/visualizations/canvas/index.md @@ -142,3 +142,7 @@ If multiple elements use the same field name, and you want to control which elem 1. Reference the new unique field alias to create the element and field override. {{< video-embed src="/media/docs/grafana/canvas-data-links-9-4-0.mp4" max-width="750px" caption="Data links demo" >}} + +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/gauge/index.md b/docs/sources/panels-visualizations/visualizations/gauge/index.md index aa2b3224058..047f33eaccc 100644 --- a/docs/sources/panels-visualizations/visualizations/gauge/index.md +++ b/docs/sources/panels-visualizations/visualizations/gauge/index.md @@ -105,7 +105,11 @@ Adjust the sizes of the gauge text. - **Title -** Enter a numeric value for the gauge title size. - **Value -** Enter a numeric value for the gauge value size. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} -[Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" +[Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/geomap/index.md b/docs/sources/panels-visualizations/visualizations/geomap/index.md index d95a62fdce0..390ac17753b 100644 --- a/docs/sources/panels-visualizations/visualizations/geomap/index.md +++ b/docs/sources/panels-visualizations/visualizations/geomap/index.md @@ -583,6 +583,10 @@ Displays debug information in the upper right corner. This can be useful for deb - **None** displays tooltips only when a data point is clicked. - **Details** displays tooltips when a mouse pointer hovers over a data point. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [provisioning docs page]: "/docs/grafana/ -> /docs/grafana//administration/provisioning" [provisioning docs page]: "/docs/grafana-cloud/ -> /docs/grafana//administration/provisioning" diff --git a/docs/sources/panels-visualizations/visualizations/histogram/index.md b/docs/sources/panels-visualizations/visualizations/histogram/index.md index 0f8cc45f4f2..bfe8f70bddb 100644 --- a/docs/sources/panels-visualizations/visualizations/histogram/index.md +++ b/docs/sources/panels-visualizations/visualizations/histogram/index.md @@ -129,6 +129,10 @@ Gradient color is generated based on the hue of the line color. Choose a [standard calculations][] to show in the legend. You can select more than one. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" [color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" diff --git a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md index ffb8f272911..a02dd7d23e5 100644 --- a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md @@ -111,6 +111,10 @@ Select values to display in the legend. You can select more than one. - **Percent:** The percentage of the whole. - **Value:** The raw numerical value. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" diff --git a/docs/sources/panels-visualizations/visualizations/stat/index.md b/docs/sources/panels-visualizations/visualizations/stat/index.md index 87e74088d0b..8a7bc8632e4 100644 --- a/docs/sources/panels-visualizations/visualizations/stat/index.md +++ b/docs/sources/panels-visualizations/visualizations/stat/index.md @@ -189,6 +189,10 @@ Adjust the sizes of the gauge text. - **Title -** Enter a numeric value for the gauge title size. - **Value -** Enter a numeric value for the gauge value size. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" diff --git a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md index ff8ede7aeb5..3bf01a2a768 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -136,6 +136,14 @@ When the legend option is enabled it can show either the value mappings or the t {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} + +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" [Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" diff --git a/docs/sources/panels-visualizations/visualizations/status-history/index.md b/docs/sources/panels-visualizations/visualizations/status-history/index.md index e73cf0b3281..c478ee225f7 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -116,6 +116,14 @@ When the legend option is enabled it can show either the value mappings or the t {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} + +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" [Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-value-mappings" diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md index 63c5cc5628e..8edd2bd5463 100644 --- a/docs/sources/panels-visualizations/visualizations/table/index.md +++ b/docs/sources/panels-visualizations/visualizations/table/index.md @@ -226,6 +226,10 @@ The system applies the calculation to all numeric fields if you do not select a If you want to show the number of rows in the dataset instead of the number of values in the selected fields, select the **Count** calculation and enable **Count rows**. +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [calculations]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" diff --git a/docs/sources/panels-visualizations/visualizations/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index 49af519c392..013b219d3f4 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -305,6 +305,10 @@ The following image shows a bar chart with the **Green-Yellow-Red (by value)** c {{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Color scheme: Green-Yellow-Red" >}} +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" [Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index c7ae5cef5e4..1fa72c8d947 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -38,6 +38,14 @@ For example, you could represent engine power and torque versus speed where spee {{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} + +## Value mappings + +{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + {{% docs/reference %}} [Time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" [Time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/visualizations/time-series" diff --git a/docs/sources/shared/visualizations/value-mappings-options.md b/docs/sources/shared/visualizations/value-mappings-options.md new file mode 100644 index 00000000000..937801addec --- /dev/null +++ b/docs/sources/shared/visualizations/value-mappings-options.md @@ -0,0 +1,20 @@ +--- +title: Value mappings options +comments: | + This file is used in the following visualizations: bar chart, bar gauge, candlestick, canvas, gauge, geomap, histogram, pie chart, stat, state timeline, status history, table, time series, trend +--- + +Value mapping is a technique you can use to change how data appears in a visualization. + +For each value mapping, set the following options: + +- **Condition** - Choose what's mapped to the display text and (optionally) color: + - **Value** - Specific values + - **Range** - Numerical ranges + - **Regex** - Regular expressions + - **Special** - Special values like `Null`, `NaN` (not a number), or boolean values like `true` and `false` +- **Display text** +- **Color** (Optional) +- **Icon** (Canvas only) + +To learn more, refer to [Configure value mappings](../../configure-value-mappings/).