From eeafa3a34278307ef5261bd7e4709b3f54d82bb6 Mon Sep 17 00:00:00 2001 From: Nikita Rokotyan Date: Fri, 5 Jan 2024 14:06:51 -0800 Subject: [PATCH] Website | Docs | Graph: Adding information about new features #319 #320 #321 --- .../website/docs/networks-and-flows/Graph.mdx | 52 ++++++++++++------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/website/docs/networks-and-flows/Graph.mdx b/packages/website/docs/networks-and-flows/Graph.mdx index 9e4a62702..cd612edd7 100644 --- a/packages/website/docs/networks-and-flows/Graph.mdx +++ b/packages/website/docs/networks-and-flows/Graph.mdx @@ -167,16 +167,26 @@ provided to `nodeStrokeWidth`. ### Icons and Labels #### In the center -Nodes can have icons (when using an icon font) in the center, which you can set by providing the -`nodeIcon` accessor function in the config. By default, the icon will fit to the size of the node. You can set custom -icon size in pixels with the `nodeIconSize` property. - -The component will automatically choose the icon color (dark or light) based on the node's fill color. You can change -the dark and light colors with the `--vis-graph-node-icon-fill-color-bright` and `--vis-graph-node-icon-fill-color-dark` +Nodes can have icons in the center, set by providing the `nodeIcon` accessor function, which returns +either a character (if you're using an icon font) or an internal href (if you're defining your icons as +[custom SVG defs](http://localhost:9300/docs/containers/Single_Container#svg-defs)). By default, +the icon will fit to the size of the node. You can set custom icon size in pixels with the `nodeIconSize` +property. + +When using an icon font or when your SVG icon `fill` is set to `currentColor`, the component will automatically +choose the icon color (dark or light) based on the node's fill color. You can change the dark and light colors with the `--vis-graph-node-icon-fill-color-bright` and `--vis-graph-node-icon-fill-color-dark` CSS variables. The icon font can be set via the `--vis-graph-icon-font-family` CSS variable. +:::note + +Icon fonts have different baseline values and sometime you might need to specify a custom `dominant-baseline` +to make the icons be vertically centered. You can achieve that by changing the `--vis-graph-node-dominant-baseline` +CSS variable value (usually between `middle` and `central`). The default value is `middle` + +::: + getNodeIconByIndex(i)} @@ -184,6 +194,7 @@ The icon font can be set via the `--vis-graph-icon-font-family` CSS variable. nodeFill={(n, i) => getColorByIndex(i) } /> + #### At the bottom Node label and sub-label can be set by providing the `nodeLabel` and `nodeSubLabel` accessor functions. @@ -250,7 +261,6 @@ You can configure the default appearance of the side labels with the following C --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey); ``` - ### Gauge Outline Nodes can also have a gauge outline on top of stroke, if you provide an accessor function to `nodeGaugeValue` returning a number in the range of [0, 1]. The width of the gauge is linked to the `nodeStrokeWidth` value. @@ -287,29 +297,33 @@ either `GraphLinkStyle.Dashed` (`"dashed"`) or `GraphLinkStyle.Solid` (`"solid"` changed with the `--vis-graph-link-dashed-stroke-dasharray` CSS variable. sample(['dashed', 'solid'])} linkWidth={(d, i) => 2 + i / 2} /> +### Curvature +You can control link curvature by setting the `linkCurvature` property to a number in the range of [0, 2]. +The default value is 0 which means straight lines. + + ### Arrows Providing an accessor function to `linkArrow` will turn on arrows display on links. The function should return -`GraphLinkArrowStyle.Single` (`"single"`) or `GraphLinkArrowStyle.Double` (`"double"`) or `null`. +`GraphLinkArrowStyle.Single` (`"single"` or simply `true`) or `GraphLinkArrowStyle.Double` (`"double"`) or `null`. sample([undefined, 'single', 'double'])} /> ### Labels -Links can have one small circular labels similar to node's [side labels](Graph#on-the-side). Provide a function to -`linkLabel` returning a `GraphCircleLabel` object to display the label. - ({ text: i })} /> +Links can have textual label. When the label is short (two characters or less) it'll be rendered with a circular +background similarly to node's [side labels](Graph#on-the-side). Longer labels will have a rectangular background. +To enable links labels you'll need to provide a function to `linkLabel` returning a `GraphLinkLabel` object to display. + ({ text: i*i*i })} /> The default appearance of the labels is controlled with the following CSS variables: ```css ---vis-graph-link-label-stroke-color: #fff; ---vis-graph-link-label-fill-color: #e6e9f3; ---vis-graph-link-label-text-color-dark: #494b56; ---vis-graph-link-label-text-color-bright: #fff; ---vis-graph-link-label-text-color: var(--vis-graph-link-label-text-color-dark); +--vis-graph-link-label-font-size: 9pt; + +--vis-graph-link-label-background: #e6e9f3; +--vis-graph-link-label-text-color: #18181B; // Dark Theme ---vis-dark-graph-link-label-stroke-color: #222; ---vis-dark-graph-link-label-fill-color: var(--vis-color-grey); ---vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright) +--vis-dark-graph-link-label-background: #3f3f45; +--vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright); ``` ### Band