From 1ef0e240e9a1b7af8f06e92d0241053676c2ac8f Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Wed, 1 May 2024 16:51:12 -0400 Subject: [PATCH] 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 --- .../configure-data-links/index.md | 2 +- .../visualizations/bar-chart/index.md | 7 +++++++ .../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 ++++ .../visualizations/xy-chart/index.md | 8 ++++---- .../shared/visualizations/datalink-options.md | 15 +++++++++++++++ .../shared/visualizations/tooltip-options-1.md | 2 +- 18 files changed, 90 insertions(+), 9 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 aae72a662a4..be04b938c5c 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 d4179a2d70e..ec121fda0f4 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -191,6 +191,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="" >}} @@ -208,4 +212,7 @@ You can set standard min/max options to define hard limits of the Y-axis. For mo [Standard options definitions]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" [Standard options definitions]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#max" + +[Configure data links]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-data-links" +[Configure data links]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-data-links" {{% /docs/reference %}} 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 3cb2c3b68e9..b56c02ac444 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -110,7 +110,7 @@ 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. @@ -122,6 +122,10 @@ The candlestick visualization is based on the time series visualization. It can {{< docs/shared lookup="visualizations/tooltip-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-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 38fa234f92a..fa6a3b77716 100644 --- a/docs/sources/panels-visualizations/visualizations/canvas/index.md +++ b/docs/sources/panels-visualizations/visualizations/canvas/index.md @@ -151,7 +151,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/), but only for all elements except drone and button elements. You can add a data link 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. @@ -162,7 +162,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. @@ -180,3 +180,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 beed636532a..f084d86a324 100644 --- a/docs/sources/panels-visualizations/visualizations/geomap/index.md +++ b/docs/sources/panels-visualizations/visualizations/geomap/index.md @@ -603,6 +603,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 a71b5305f6d..8f6d62c41b3 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -174,6 +174,10 @@ When you set the **Tooltip mode** to **Single**, this option is displayed. This 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 e23659936f7..d3b58bc2c63 100644 --- a/docs/sources/panels-visualizations/visualizations/histogram/index.md +++ b/docs/sources/panels-visualizations/visualizations/histogram/index.md @@ -133,6 +133,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 b73a78f843b..7a0c47c2dad 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -138,6 +138,10 @@ The visualization can be used with time series data as well. In this case, the t {{< docs/shared lookup="visualizations/tooltip-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-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 c384af6c381..bf614a737a4 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -118,6 +118,10 @@ To assign colors to boolean or string values, use the [Value mappings][]. {{< docs/shared lookup="visualizations/tooltip-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-2.md" source="grafana" version="" >}} @@ -129,4 +133,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 49ae76acc53..8a6a61fa24b 100644 --- a/docs/sources/panels-visualizations/visualizations/table/index.md +++ b/docs/sources/panels-visualizations/visualizations/table/index.md @@ -234,6 +234,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 0ec3fa32b44..f3075b35994 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -301,6 +301,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 747c5c39385..84a6b9381e8 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -46,6 +46,10 @@ For example, you could represent engine power and torque versus speed where spee {{< docs/shared lookup="visualizations/tooltip-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-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/xy-chart/index.md b/docs/sources/panels-visualizations/visualizations/xy-chart/index.md index b66bda35b23..a789d0b6d13 100644 --- a/docs/sources/panels-visualizations/visualizations/xy-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/xy-chart/index.md @@ -230,6 +230,10 @@ The transform option is only available as an override. {{< 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="" >}} + ## Other visualization options ### Panel options @@ -240,10 +244,6 @@ Learn about [panel options][] that you can set for a visualization. Learn about [standard options][] that you can set for a visualization. -### Data links - -Learn about [data links][] that you can set for a visualization. - ### Field overrides Learn about [field overrides][Configure field overrides] that you can set for a visualization. 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/). diff --git a/docs/sources/shared/visualizations/tooltip-options-1.md b/docs/sources/shared/visualizations/tooltip-options-1.md index 1ff0a90c821..31f35524625 100644 --- a/docs/sources/shared/visualizations/tooltip-options-1.md +++ b/docs/sources/shared/visualizations/tooltip-options-1.md @@ -1,5 +1,5 @@ --- -title: Tooltip mode +title: Tooltip options comments: | There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content.