Docs: Add panel time zoom with mouse (#113721)

Co-authored-by: Jesse David Peterson <jesdavpet@users.noreply.github.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

docs/sources/shared/visualizations/panel-zoom.md

@@ -0,0 +1,19 @@
+---
+title: Panel mouse time zoom
+comments: |
+  This file is used in the following visualizations: candlestick, heatmap, state timeline, status history, time series.
+---
+
+You can zoom the panel time range in and out, which in turn, changes the dashboard time range.
+
+**Zoom in** - Click and drag on the panel to zoom in on a particular time range.
+
+**Zoom out** - Double-click anywhere on the panel to zoom out the time range.
+
+When you zoom out, the range doubles with each double-click, adding equal time to each side of the range.
+For example, if the original time range is from 9:00 to 9:59, the time range changes as follow with each double-click:
+
+- Next range: 8:30 - 10:29
+- Next range: 7:30 - 11:29
+
+For screen recordings showing these interactions, refer to the [Panel overview documentation](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/panel-overview/#zoom-panel-time-range).

docs/sources/visualizations/panels-visualizations/panel-overview/index.md

@@ -175,6 +175,52 @@ By hovering over a panel with the mouse you can use some shortcuts that will tar
 - `pl`: Hide or show legend
 - `pr`: Remove Panel
 
+## Zoom panel time range
+
+You can zoom the panel time range in and out, which in turn, changes the dashboard time range.
+
+This feature is supported for the following visualizations:
+
+- Candlestick
+- Heatmap
+- State timeline
+- Status history
+- Time series
+
+### Zoom in
+
+Click and drag on the panel to zoom in on a particular time range.
+
+The following screen recordings show this interaction in the time series and x visualizations:
+
+Time series
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-in-mouse.mp4" >}}
+
+Candlestick
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-candle-panel-time-zoom-in-mouse.mp4" >}}
+
+### Zoom out
+
+Double-click anywhere on the panel to zoom out the time range.
+
+The range doubles with each double-click, adding equal time to each side of the range.
+For example, if the original time range is from 9:00 to 9:59, the time range changes as follows with each double-click:
+
+- Next range: 8:30 - 10:29
+- Next range: 7:30 - 11:29
+
+The following screen recordings demonstrate the preceding example in the time series and x visualizations:
+
+Time series
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-out-mouse.mp4" >}}
+
+Heatmap
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-heatmap-panel-time-zoom-out-mouse.mp4" >}}
+
 ## Add a panel
 
 To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard:

docs/sources/visualizations/panels-visualizations/visualizations/candlestick/index.md

@@ -92,6 +92,10 @@ The data is converted as follows:
 
 {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-candles-volume-v11.6.png" max-width="750px" alt="A candlestick visualization showing the price movements of specific asset." >}}
 
+## Zoom panel time range
+
+{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 ## Configuration options
 
 {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/visualizations/panels-visualizations/visualizations/heatmap/index.md

@@ -79,6 +79,10 @@ The data is converted as follows:
 
 {{< figure src="/static/img/docs/heatmap-panel/heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
 
+## Zoom panel time range
+
+{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 ## Configuration options
 
 {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/visualizations/panels-visualizations/visualizations/state-timeline/index.md

@@ -93,6 +93,10 @@ You can also create a state timeline visualization using time series data. To do
 
 ![State timeline with time series](/media/docs/grafana/panels-visualizations/screenshot-state-timeline-time-series-v11.4.png)
 
+## Zoom panel time range
+
+{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 ## Configuration options
 
 {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/visualizations/panels-visualizations/visualizations/status-history/index.md

@@ -85,6 +85,10 @@ The data is converted as follows:
 
 {{< figure src="/static/img/docs/status-history-panel/status_history.png" max-width="1025px" alt="A status history panel with two time columns showing the status of two servers" >}}
 
+## Zoom panel time range
+
+{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 ## Configuration options
 
 {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/visualizations/panels-visualizations/visualizations/time-series/index.md

@@ -167,6 +167,10 @@ The following example shows three series: Min, Max, and Value. The Min and Max s
 
 {{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+2" >}}
 
+## Zoom panel time range
+
+{{< docs/shared lookup="visualizations/panel-zoom.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 ## Configuration options
 
 {{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}