From a9c0afcc1fd09418953c9afb343cd97259c246f7 Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Tue, 11 Oct 2022 06:34:49 -0700 Subject: [PATCH] Canvas: Docs for 9.2 (#56219) Co-authored-by: Adela Almasan --- docs/sources/visualizations/canvas.md | 65 ++++++++++++++++++++++ docs/sources/whatsnew/whats-new-in-v9-2.md | 13 +++++ 2 files changed, 78 insertions(+) create mode 100644 docs/sources/visualizations/canvas.md diff --git a/docs/sources/visualizations/canvas.md b/docs/sources/visualizations/canvas.md new file mode 100644 index 00000000000..169e9bf6cee --- /dev/null +++ b/docs/sources/visualizations/canvas.md @@ -0,0 +1,65 @@ +--- +aliases: + - /docs/grafana/latest/features/panels/canvas/ + - /docs/grafana/latest/visualizations/canvas/ +description: Canvas visualization documentation +keywords: + - grafana + - canvas + - panel + - documentation +title: Canvas +weight: 600 +--- + +# Canvas + +Canvas is a new panel that combines the power of Grafana with the flexibility of custom elements. Canvas visualizations are extensible form-built panels that allow you to explicitly place elements within static and dynamic layouts. This empowers you to design custom visualizations and overlay data in ways that aren't possible with standard Grafana panels, all within Grafana's UI. If you've used popular UI and web design tools, then designing Canvas panels will feel very familiar. + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-beta-overview-9-2-0.mov" max-width="750px" caption="Canvas panel beta overview" >}} + +## Elements + +### Metric value + +The metric value element allows you to easily select the data you want to display on canvas. This element has a unique “edit” mode that can be triggered either through the context menu “Edit” option or by double clicking. When in edit mode you can select which field data that you want to display. + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-metric-value-9-2-0.mov" max-width="750px" caption="Metric value element demo" >}} + +### Text + +The text element allows you to easily add text to the canvas. The element also supports an editing mode, triggered via either double clicking or the edit menu option in the context menu. + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-text-9-2-0.mov" max-width="750px" caption="Text element demo" >}} + +### Rectangle + +The rectangle element allows you to add a basic rectangle to the canvas. Rectangle elements support displaying text (both fixed and field data) as well as can change background color based on data thresholds. + +### Icon + +The icon element allows you to add a supported icon to the canvas. Icons can have their color set based on thresholds / value mappings. + +## Canvas Editing + +### Inline editor + +Canvas introduces a new editing experience. You can now edit your canvas panel inline while in the context of dashboard mode. + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editor-9-2-0.mov" max-width="750px" caption="Inline editor demo" >}} + +### Context menu + +Related to a fresh look at panel editing, the context menu allows you to perform common tasks quickly and efficiently. Supported functionality includes opening / closing the inline editor, duplicating an element, deleting an element, and more. + +The context menu is triggered by a right click action over the panel / over a given canvas element + +{{< figure src="/static/img/docs/canvas-panel/canvas-context-menu-9-2-0.png" max-width="750px" caption="Canvas context menu" >}} + +## Canvas Options + +### Inline editing + +The inline editing toggle allows you to lock or unlock the canvas panel. When turned off the canvas panel becomes “locked”, freezing elements in place and preventing unintended modifications. + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-inline-editing-toggle-9-2-0.mov" max-width="750px" caption="Inline editing toggle demo" >}} diff --git a/docs/sources/whatsnew/whats-new-in-v9-2.md b/docs/sources/whatsnew/whats-new-in-v9-2.md index 5c608abb0bb..b6bcfa9ea14 100644 --- a/docs/sources/whatsnew/whats-new-in-v9-2.md +++ b/docs/sources/whatsnew/whats-new-in-v9-2.md @@ -33,6 +33,19 @@ For details, see [GitHub issue #55005](https://github.com/grafana/grafana/issues {{< figure src="/static/img/docs/panels/panel-help-9-2.gif" max-width="750px" caption="Retrieving a panel's query response data and panel settings" >}} +## Canvas panel + +_Available in beta in Grafana Open Source._ + +Introducing the Canvas panel, a new panel that combines the power of Grafana with the flexibility of custom elements. +Canvas visualizations are extensible form-built panels that allow you to explicitly place elements within static and dynamic layouts. This empowers you to design custom visualizations and overlay data in ways that aren't possible with standard Grafana panels, all within Grafana's UI. If you've used popular UI and web design tools, then designing Canvas panels will feel very familiar. + +For example, you can place image layers and then overlay text that's updated by Grafana data sources, and display icons that can change color conditionally based on data. + +We've planned additional features and design elements for future releases to make Canvas panels even more powerful tools for creating custom, interactive, data-driven visualizations. To learn more about the Canvas panel, see the [documentation]({{< relref "../visualizations/canvas/" >}}). + +{{< video-embed src="/static/img/docs/canvas-panel/canvas-beta-overview-9-2-0.mov" max-width="750px" caption="Canvas panel beta overview" >}} + ## Support for Google Analytics 4 properties _Generally available in Grafana Open Source._