public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NodeGraph: Edge color and stroke-dasharray support (#83855)

Browse Source 
* Adds color and stroke-dasharray support for node graph edges

Adds support for providing color, highlighted color, and visual display of node graph edges as dashed lines via stroke-dasharray.

* Updates node graph documentation

* Updates documentation

Adds default for `highlightedColor`

* Update docs/sources/panels-visualizations/visualizations/node-graph/index.md

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>

* Update packages/grafana-data/src/utils/nodeGraph.ts

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>

* Update docs/sources/panels-visualizations/visualizations/node-graph/index.md

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

* Removes highlightedColor; deprecates highlighted

Per [request](https://github.com/grafana/grafana/pull/83855#issuecomment-1999810826), deprecates `highlighted` in code and documentation, and removes `highlightedColor` as an additional property. `highlighted` will continue to be supported in its original state (makes the edge red), but is superseded if `color` is provided.

* Update types.ts

Missed a file in my last commit. Removes `highlightedColor` and deprecates `highlighted`.

* Add test scenario in test data source

---------

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>
This commit is contained in:
Rob
2024-03-18 10:26:22 -05:00
committed by GitHub
parent e96836d19e
commit 677b765dab
13 changed files with 239 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/panels-visualizations/visualizations/node-graph/index.md
+15 -7
View File
@@ -104,13 +104,21 @@ Required fields:
Optional fields:
| Field name | Type | Description |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mainstat | string/number | First stat shown in the overlay when hovering over the edge. It can be a string showing the value as is or it can be a number. If it is a number, any unit associated with that field is also shown |
| secondarystat | string/number | Same as mainStat, but shown right under it. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
| thickness | number | The thickness of the edge. Default: `1` |
| highlighted | boolean | Sets whether the edge should be highlighted. Useful, for example, to represent a specific path in the graph by highlighting several nodes and edges. Default: `false` |
| Field name | Type | Description |
| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mainstat | string/number | First stat shown in the overlay when hovering over the edge. It can be a string showing the value as is or it can be a number. If it is a number, any unit associated with that field is also shown |
| secondarystat | string/number | Same as mainStat, but shown right under it. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
| thickness | number | The thickness of the edge. Default: `1` |
| highlighted | boolean | Sets whether the edge should be highlighted. Useful, for example, to represent a specific path in the graph by highlighting several nodes and edges. Default: `false` |
| color | string | Sets the default color of the edge. It can be an acceptable HTML color string. Default: `#999` |
| strokeDasharray | string | Sets the pattern of dashes and gaps used to render the edge. If unset, a solid line is used as edge. For more information and examples, refer to the [`stroke-dasharray` MDN documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray). |
{{< admonition type="caution" >}}
Starting with 10.5, `highlighted` is deprecated.
It will be removed in a future release.
Use `color` to indicate a highlighted edge state instead.
{{< /admonition >}}
### Nodes data frame structure