From 0e81fdffbe0f01c333335917b3f2d11893afdc58 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Wed, 24 Apr 2024 12:40:27 -0400 Subject: [PATCH] Docs: add tooltips shared content (#86553) * Replaced shared tooltips file with text in xy chart * Added tooltip info for heatmap * Updated tooltip shared files, renamed one file, updated configure tooltips * updated tooltip shared file paths * Added tooltips shared files in relevant visualizations * Added where shared file is used in tooltip-options-1 * Added where shared file is used in tooltip-options-2 * Added intro text and justifications to shared files * Removed tooltips intro text from visualizations with shared files * Added names of files to comments in shared files --- .../configure-tooltips/index.md | 4 +++ .../visualizations/bar-chart/index.md | 10 ++++-- .../visualizations/candlestick/index.md | 4 +++ .../visualizations/heatmap/index.md | 22 +++++++++++-- .../visualizations/pie-chart/index.md | 4 ++- .../visualizations/state-timeline/index.md | 4 +++ .../visualizations/status-history/index.md | 4 +++ .../visualizations/time-series/index.md | 12 ++----- .../visualizations/trend/index.md | 4 +++ .../visualizations/xy-chart/index.md | 15 +++++++-- .../shared/visualizations/tooltip-mode.md | 13 -------- .../visualizations/tooltip-options-1.md | 31 +++++++++++++++++++ .../visualizations/tooltip-options-2.md | 21 +++++++++++-- 13 files changed, 116 insertions(+), 32 deletions(-) delete mode 100644 docs/sources/shared/visualizations/tooltip-mode.md create mode 100644 docs/sources/shared/visualizations/tooltip-options-1.md diff --git a/docs/sources/panels-visualizations/configure-tooltips/index.md b/docs/sources/panels-visualizations/configure-tooltips/index.md index 0c486671e99..4b2956e7dc9 100644 --- a/docs/sources/panels-visualizations/configure-tooltips/index.md +++ b/docs/sources/panels-visualizations/configure-tooltips/index.md @@ -67,6 +67,10 @@ Set the hover proximity (in pixels) to control how close the cursor must be to a ![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif) +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels. + ### Show histogram (Y axis) For the heatmap visualization only, when you set the **Tooltip mode** to **Single**, the **Show histogram (Y axis)** option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis. diff --git a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md index 918cae3a833..41536af170b 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -129,7 +129,13 @@ Transparency of the gradient is calculated based on the values on the y-axis. Op Gradient color is generated based on the hue of the line color. -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} + +## Legend options + +Legend options control the series names and statistics that appear under or to the right of the graph. {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} @@ -191,7 +197,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions][]. -{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} +{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} {{% docs/reference %}} [Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md index 29714790a88..715f20a246c 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -114,6 +114,10 @@ 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="" >}} + {{% 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/heatmap/index.md b/docs/sources/panels-visualizations/visualizations/heatmap/index.md index 70efed729ca..18c757800e4 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -150,9 +150,25 @@ Use these settings to refine your visualization. ### Tooltip -- **Show tooltip -** Show heatmap tooltip. -- **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp. -- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. +#### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +#### Show histogram (Y axis) + +When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis. + +#### Show color scale + +When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes the color scale that's also represented in the legend. When the color scale is included in the tooltip, it shows the hovered value on the scale: + +![Heatmap with a tooltip displayed showing the hovered value reflected in the color scale](/media/docs/grafana/panels-visualizations/screenshot-heatmap-tooltip-color-scale-v11.0.png) ### Legend diff --git a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md index ffb8f272911..20a6c3d63ac 100644 --- a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md @@ -80,7 +80,9 @@ The following example shows a pie chart with **Name** and **Percent** labels dis ![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png) -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} ## Legend options diff --git a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md index ff8ede7aeb5..6f47fa94a2f 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -136,6 +136,10 @@ 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="" >}} + {{% 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..12ad71fd1c3 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -116,6 +116,10 @@ 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="" >}} + {{% 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/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index 1846d877077..67d81494027 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -52,19 +52,13 @@ The following video guides you through the creation steps and common customizati ## Tooltip options -Tooltip options control the information overlay that appears when you hover over data points in the graph. - -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} - -### Hover proximity - -This option controls how close your cursor must be to a data point before the tooltip appears. Values are in pixels. +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} ## Legend options -Legend options control the series names and statistics that appear under or to the right of the graph. +Legend options control the series names and statistics that appear under or to the right of the visualization. -{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} ## Graph styles diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index c7ae5cef5e4..823c20745a6 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -38,6 +38,10 @@ 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="" >}} + {{% 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/xy-chart/index.md b/docs/sources/panels-visualizations/visualizations/xy-chart/index.md index fcf479b34a2..141e83966f7 100644 --- a/docs/sources/panels-visualizations/visualizations/xy-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/xy-chart/index.md @@ -132,9 +132,20 @@ Set the width of the lines in pixels. ## Tooltip options -Tooltip options control the information overlay that appears when you hover over data points in the graph. +Tooltip options control the information overlay that appears when you hover over data points in the visualization. -{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} +### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels. ## Legend options diff --git a/docs/sources/shared/visualizations/tooltip-mode.md b/docs/sources/shared/visualizations/tooltip-mode.md deleted file mode 100644 index 75c2c4d2358..00000000000 --- a/docs/sources/shared/visualizations/tooltip-mode.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Tooltip mode ---- - -### Tooltip mode - -When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. - -- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. -- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. -- **Hidden -** Do not display the tooltip when you interact with the visualization. - -Use an override to hide individual series from the tooltip. diff --git a/docs/sources/shared/visualizations/tooltip-options-1.md b/docs/sources/shared/visualizations/tooltip-options-1.md new file mode 100644 index 00000000000..1ff0a90c821 --- /dev/null +++ b/docs/sources/shared/visualizations/tooltip-options-1.md @@ -0,0 +1,31 @@ +--- +title: Tooltip mode +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. + This file is used in the following visualizations: bar chart, pie chart, state timeline, status history +--- + +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + +### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +### Values sort order + +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest. + +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels. diff --git a/docs/sources/shared/visualizations/tooltip-options-2.md b/docs/sources/shared/visualizations/tooltip-options-2.md index 9bb487fb9c5..2a5d35e2bd0 100644 --- a/docs/sources/shared/visualizations/tooltip-options-2.md +++ b/docs/sources/shared/visualizations/tooltip-options-2.md @@ -1,19 +1,36 @@ --- 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. + This file is used in the following visualizations: candlestick, time series, trend --- +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + ### Tooltip mode When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. - **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. - **Hidden -** Do not display the tooltip when you interact with the visualization. Use an override to hide individual series from the tooltip. -### Max width +### Values sort order -Set the maximum width of the tooltip box. The default is 300 pixels. +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest. + +### Hover proximity + +Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. + +![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif) ### Max height