From dcce9bdbd24c7b2b74a3e47c629f6c475ec3fec5 Mon Sep 17 00:00:00 2001 From: "grafana-delivery-bot[bot]" <132647405+grafana-delivery-bot[bot]@users.noreply.github.com> Date: Wed, 7 Aug 2024 09:49:54 -0400 Subject: [PATCH] [v10.4.x] docs: added missing panel options to node graph docs (#91626) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Co-authored-by: Señor Performo - Leandro Melendez <54183040+srperf@users.noreply.github.com> --- .../visualizations/node-graph/index.md | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/node-graph/index.md b/docs/sources/panels-visualizations/visualizations/node-graph/index.md index 5721ab72824..3f5581aa1aa 100644 --- a/docs/sources/panels-visualizations/visualizations/node-graph/index.md +++ b/docs/sources/panels-visualizations/visualizations/node-graph/index.md @@ -25,12 +25,37 @@ Node graphs can visualize directed graphs or networks. They use a directed force ![Node graph visualization](/static/img/docs/node-graph/node-graph-8-0.png 'Node graph') +## Configure a node graph visualization + The following video provides beginner steps for creating node panel visualizations. You'll learn the data requirements and caveats, special customizations, and much more: {{< youtube id="VrvsMkRwoKw" >}} {{< docs/play title="Node graph panel" url="https://play.grafana.org/d/bdodfbi3d57uoe/" >}} +## Panel options + +{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} + +## Nodes options + +The **Nodes** options section provides configurations for node behaviors. + +- **Main stat unit** - Choose which unit the main stat displays in the graph's nodes. +- **Secondary stat unit** - Choose which unit the secondary stat displays in the graph's nodes. +- **Arc sections** - Configure which fields define the size of the colored circle around the node and select a color for each. You can add multiple fields. + +{{< admonition type="note" >}} +Defining arc sections overrides the automatic detection of `arc__*` and `color` fields described in the **Optional fields** section of [Nodes data frame structure](#nodes-data-frame-structure). +{{< /admonition >}} + +## Edges options + +The **Edges** options section provides configurations for node edges behaviors. + +- **Main stat unit** - Choose which unit the main stat displays in the graph's edges. +- **Secondary stat unit** - Choose which unit the secondary stat displays in the graph's edges. + ## Data requirements A node graph requires a specific shape of the data to be able to display its nodes and edges. This means not every data source or query can be visualized with this graph. If you want to use this as a data source developer see the section about data API. @@ -140,7 +165,3 @@ Optional fields: | icon | string | Name of the icon to show inside the node instead of the default stats. Only Grafana built in icons are allowed (see the available icons [here](https://developers.grafana.com/ui/latest/index.html?path=/story/docs-overview-icon--icons-overview)). | | nodeRadius | number | Radius value in pixels. Used to manage node size. | | highlighted | boolean | Sets whether the node should be highlighted. Useful for example to represent a specific path in the graph by highlighting several nodes and edges. Default: `false` | - -## Panel options - -{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}}