From 32d7b0f1e20821ee04eb7a11f9b8429d7e79caa9 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Thu, 23 May 2024 12:57:07 -0400 Subject: [PATCH] [v10.3.x] Docs: Add data links shared content (#88237) * Docs: Add data links shared content (#86893) * Added data link options shared file and added file to relevant visualizations * Updated some text and links in canvas * Added shared file to xy chart * Fixed list of visualizations using shared file * Removed unneeded level offset * Removed future tense * Update data links description * Updated wording * Removed redundant sentence (cherry picked from commit 1ef0e240e9a1b7af8f06e92d0241053676c2ac8f) * Removed xy chart and toolitip options files and data links docs ref from bar chart --- .../configure-data-links/index.md | 2 +- .../visualizations/bar-chart/index.md | 4 ++++ .../visualizations/bar-gauge/index.md | 4 ++++ .../visualizations/candlestick/index.md | 6 +++++- .../visualizations/canvas/index.md | 12 ++++++++++-- .../visualizations/gauge/index.md | 4 ++++ .../visualizations/geomap/index.md | 4 ++++ .../visualizations/heatmap/index.md | 4 ++++ .../visualizations/histogram/index.md | 4 ++++ .../visualizations/stat/index.md | 4 ++++ .../visualizations/state-timeline/index.md | 4 ++++ .../visualizations/status-history/index.md | 7 +++++++ .../visualizations/table/index.md | 4 ++++ .../visualizations/time-series/index.md | 4 ++++ .../visualizations/trend/index.md | 4 ++++ .../shared/visualizations/datalink-options.md | 15 +++++++++++++++ 16 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 docs/sources/shared/visualizations/datalink-options.md diff --git a/docs/sources/panels-visualizations/configure-data-links/index.md b/docs/sources/panels-visualizations/configure-data-links/index.md index 9996e398e38..fae270b517b 100644 --- a/docs/sources/panels-visualizations/configure-data-links/index.md +++ b/docs/sources/panels-visualizations/configure-data-links/index.md @@ -26,7 +26,7 @@ weight: 80 # Configure data links -Data links allow you to provide more granular context to your links. You can create links that include the series name or even the value under the cursor. For example, if your visualization shows four servers, you can add a data link to one or two of them. You can also link panels using data links. +Data links allow you to link to other panels, dashboards, and external resources while maintaining the context of the source panel. You can create links that include the series name or even the value under the cursor. For example, if your visualization shows four servers, you can add a data link to one or two of them. The link itself is accessible in different ways depending on the visualization. For the time series visualization you need to click a data point or line: diff --git a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md index 6f950bf12e4..daa1fd0fbdf 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -189,6 +189,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" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md index 2ab212c0e26..a55e0a60622 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 %}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md index 90a2c813987..fbe3b3553ef 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -110,12 +110,16 @@ If your data can't be mapped to these dimensions for some reason (for example, b ![Open, High, Low, and Close fields in the panel editor](/media/docs/grafana/panels-visualizations/screenshot-olhc-options-10.3.png) -## Additional fields +### Additional fields 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. {{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/canvas/index.md b/docs/sources/panels-visualizations/visualizations/canvas/index.md index dc42c00577e..b25a12f15e9 100644 --- a/docs/sources/panels-visualizations/visualizations/canvas/index.md +++ b/docs/sources/panels-visualizations/visualizations/canvas/index.md @@ -121,7 +121,7 @@ The inline editing toggle lets you lock or unlock the canvas. When turned off th ### Data links -Canvases support [data links](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-data-links/). You can create a data link for a metric-value element and display it for all elements that use the field name by following these steps: +Canvases support [data links][] for all elements except drone and button elements. You can add a data link by following these steps: 1. Set an element to be tied to a field value. 1. Turn off the inline editing toggle. @@ -132,7 +132,7 @@ Canvases support [data links](https://grafana.com/docs/grafana/latest/panels-vis 1. Hover over the element to display the data link tooltip. 1. Click on the element to be able to open the data link. -If multiple elements use the same field name, and you want to control which elements display the data link, you can create a unique field name using the [add field from calculation transform](https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/transform-data/#add-field-from-calculation). The alias you create in the transformation will appear as a field you can use with an element. +If multiple elements use the same field name, and you want to control which elements display the data link, you can create a unique field name using the [add field from calculation transform][]. The alias you create in the transformation will appear as a field you can use with an element. 1. In the panel editor for the canvas, click the **Transform** tab. 1. Select **Add field from calculation** from the list of transformations, or click **+ Add transformation** to display the list first. @@ -150,3 +150,11 @@ If multiple elements use the same field name, and you want to control which elem ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} + +{{% docs/reference %}} +[data links]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-data-links" +[data links]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-data-links" + +[add field from calculation transform]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#add-field-from-calculation" +[add field from calculation transform]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/transform-data#add-field-from-calculation" +{{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/gauge/index.md b/docs/sources/panels-visualizations/visualizations/gauge/index.md index 423372a9e76..66fff2e0675 100644 --- a/docs/sources/panels-visualizations/visualizations/gauge/index.md +++ b/docs/sources/panels-visualizations/visualizations/gauge/index.md @@ -105,6 +105,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. +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/geomap/index.md b/docs/sources/panels-visualizations/visualizations/geomap/index.md index e63961ec710..fcbc11a346f 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. +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/panels-visualizations/visualizations/heatmap/index.md index cad116b07d3..41bba6d7c02 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -160,6 +160,10 @@ Use these settings to refine your visualization. Choose whether you want to display the heatmap legend on the visualization by toggling the **Show legend** switch. +### Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ### Exemplars Set the color used to show exemplar data. diff --git a/docs/sources/panels-visualizations/visualizations/histogram/index.md b/docs/sources/panels-visualizations/visualizations/histogram/index.md index 0504d28dacd..700f49818be 100644 --- a/docs/sources/panels-visualizations/visualizations/histogram/index.md +++ b/docs/sources/panels-visualizations/visualizations/histogram/index.md @@ -135,6 +135,10 @@ Gradient color is generated based on the hue of the line color. {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-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-cloud/visualizations/panels-visualizations/configure-standard-options#color-scheme" diff --git a/docs/sources/panels-visualizations/visualizations/stat/index.md b/docs/sources/panels-visualizations/visualizations/stat/index.md index b54980a6bad..fe320a7cf8c 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. +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md index 79d7a8e710c..163a88ac5e7 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -134,6 +134,10 @@ The visualization can be used with time series data as well. In this case, the t {{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/status-history/index.md b/docs/sources/panels-visualizations/visualizations/status-history/index.md index 91dbefe149c..141f55d481a 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -114,6 +114,10 @@ To assign colors to boolean or string values, use the [Value mappings][]. {{< docs/shared lookup="visualizations/legend-options-2.md" source="grafana" version="" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} @@ -125,4 +129,7 @@ To assign colors to boolean or string values, use the [Value mappings][]. {{% docs/reference %}} [Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" [Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings" + +[Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#color-scheme" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md index 0d8bfef2559..85a9f48f89e 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**. +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index 8b754649bfb..bac6fad9548 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -303,6 +303,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" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index fbdfdcd451c..0cc76dc5711 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -42,6 +42,10 @@ For example, you could represent engine power and torque versus speed where spee {{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} +## Data links + +{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} + ## Thresholds {{< docs/shared lookup="visualizations/thresholds-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/shared/visualizations/datalink-options.md b/docs/sources/shared/visualizations/datalink-options.md new file mode 100644 index 00000000000..e3d77551cf5 --- /dev/null +++ b/docs/sources/shared/visualizations/datalink-options.md @@ -0,0 +1,15 @@ +--- +title: Data link options +comments: | + This file is used in the following visualizations: bar chart, bar gauge, candlestick, gauge, geomap, heatmap, histogram, stat, state timeline, status history, table, time series, trend, xy chart +--- + +Data links allow you to link to other panels, dashboards, and external resources while maintaining the context of the source panel. You can create links that include the series name or even the value under the cursor. + +For each data link, set the following options: + +- **Title** +- **URL** +- **Open in new tab** + +To learn more, refer to [Configure data links](../../configure-data-links/).