@splunk/visualizations 28.6.0 → 28.7.0

package/docs-llm/network-graph/options.md

@@ -0,0 +1,50 @@
+# Network Graph Visualization Options
+
+**Component Reference:** Network Graph or @splunk/visualizations/networkGraph
+
+Source: `@splunk/visualization-schemas/networkGraphOptionsSchema`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backgroundColor` | string \| string | `> themes.defaultBackgroundColor` | Specify the color for the background. You may use a dataSource to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e". |
+| `chargeDistanceMax` | number \| string | — | When layout is "force", specify the maximum distance over which to apply the charge force. |
+| `chargeDistanceMin` | number \| string | `1` | When layout is "force", specify the minimum distance over which to apply the charge force. |
+| `chargeStrength` | number \| string | `-30` | When layout is "force", specify the strength of the charge between nodes. Positive value is attraction and negative value is replusion. |
+| `chargeTheta` | number \| string | `0.9` | When layout is "force", specify the Barnes-Hut approximation parameter. Higher value means faster performance but less predictable node positioning. |
+| `clusterStrength` | number \| string | `0.05` | When layout is "force", specify the strength of the clustering force between nodes of the same type. A higher value results in stronger clustering, causing nodes of the same type to be positioned closer together. Value is between 0 and 1 |
+| `collidePadding` | number \| string | `10` | When layout is "force", specify the additional distance around each node which the collider uses for node repulsion. When clustering is on, this value is used to increase collision distance for clusters. |
+| `collideStrength` | number \| string | `1` | When layout is "force", specify the strength of the collider used for node repulsion. A higher value results in stronger repulsion, causing nodes to spread out more. Ideally value should be between 0 - 1 but there is no hard limit. |
+| `gridColumns` | number \| string | — | When layout is "grid", specify the number of nodes to display per row. By default it uses the ceiling of the square root of the total number of nodes |
+| `hierarchyDirection` | unspecified \| string | `leftRight` | When layout is "hierarchical", specify the direction (topBottom, bottomTop, leftRight, rightLeft) of the hierarchy. |
+| `layout` | string \| string | `grid` | Specify the layout used for the graph. Choose between preset, grid, hierarchical |
+| `linkColors` | array<string> \| string \| string | `> themes.defaultLinkColor` | Specify the color used for links. You may use a dataSource to apply color dynamically. |
+| `linkColorValues` | array<string \| number> \| string | `> primary \| seriesByType("number")` | Specify the array of values used for dynamic link coloring. |
+| `linkDistance` | number \| string | `30` | When layout is "force", specify the ideal distance between linked nodes. A higher value results in more space between linked nodes. |
+| `linkStrength` | unspecified \| string | — | When layout is "force", specify the strength of the spring force between linked nodes. Higher value makes link lengths closer to the linkDistance value. |
+| `linkStyle` | string \| string | `straight` | Specify the link shape (s, z, c, straight). |
+| `linkWidth` | number \| array<number> \| string | `2` | Specify a number to set the same width of all links or an array of numbers to set a custom width for each link. Width is in pixels. |
+| `nodeColors` | string \| array<string> \| string | `> themes.defaultNodeColor` | Specify the color used for nodes. You may use a dataSource to apply color dynamically. |
+| `nodeColorValues` | array<string \| number> \| string | `> primary \| seriesByType("number")` | Specify the array of values used for dynamic node coloring. |
+| `nodeDragPositions` | object | — | Stores the positions for nodes by id when the user drags nodes to new positions using the UI. |
+| `nodeHorizontalPadding` | number \| string | `0` | Specify the additional horizontal padding between nodes in pixels (0 - 500). |
+| `nodeIconColors` | array<string> \| string \| string | `> themes.defaultNodeIconColor` | Specify the color used for each node icon. You may use a dataSource to apply color dynamically. |
+| `nodeIconColorValues` | array<string \| number> \| string | `> primary \| seriesByType("number")` | Specify the array of values used for dynamic node icon coloring. |
+| `nodeIcons` | array<string> \| string | — | Specify the icon used for each node (cylinder, portrait, magnifier, etc.). |
+| `nodeIds` | array<string> \| string | `> source` | Specify the array of node Ids to use for node styling. By default this is the same as the from array. |
+| `nodeSize` | number \| array<number> \| string | `48` | Specify a number to set the same diameter for all nodes or an array of numbers to set a custom diameter for each node. (8px - 200px) |
+| `nodeTexts` | array<string> \| string | `> primary \| frameBySeriesTypes("string") \| seriesByIndex(0)` | Specify the text to display under each node in the nodeIds array. |
+| `nodeTypes` | array<string> \| string | — | Specify the node type for each node in the nodeIds array. Needed for clustering when layout is "force". |
+| `nodeValues` | array<number> \| string | `> primary \| frameBySeriesTypes("number") \| seriesByIndex(0)` | Specify the node value for each node in the nodeIds array. |
+| `nodeVerticalPadding` | number \| string | `0` | Specify the additional vertical padding between nodes in pixels (0 - 500). |
+| `preferPorts` | string \| string | — | Specify the preferred port alignment for s and z links (horizontal, vertical, none). |
+| `resultLimit` | number \| string | `1000` | Specify the maximum number of link data points rendered (hard limit 10,000). |
+| `showDirection` | string \| string | `bidirection` | Specify the directionality of the links. Choose between bidirection, oneWay, none. z and s linkStyles look better with bidirection instead of oneWay. |
+| `showZoomControls` | boolean \| string | `true` | Specify whether to show the zoom controls on the graph. |
+| `source` | array<string> \| string | `> primary \| frameBySeriesTypes("string") \| seriesByIndex(0)` | Specify the array of node Ids that links start from. |
+| `target` | array<string> \| string | `> primary \| frameBySeriesTypes("string") \| seriesByIndex(1)` | Specify the array of node Ids that links go to. |
+| `tooltipHeaderField` | string \| string | — | Specify the field to add to the tooltip header. Tooltips appear when you hover over nodes. Only the value of this field for the node displays as the header. |
+| `tooltipNodeFields` | array<string> \| string | — | Specify the fields to add to the tooltips. Tooltips appear when you hover over nodes. These fields and their corresponding values display for each node in its tooltip. |
+| `xPositions` | array<number> \| string | `> primary \| frameBySeriesTypes("number") \| seriesByIndex(0)` | When layout is "preset", specify the x position for each node. |
+| `yPositions` | array<number> \| string | `> primary \| frameBySeriesTypes("number") \| seriesByIndex(1)` | When layout is "preset", specify the y position for each node. |
+
+_Auto-generated; do not edit by hand._

package/docs-llm/network-graph/overview.md

@@ -0,0 +1,28 @@
+# Network Graph Visualization Guide
+
+**Component Reference:** Network Graph or @splunk/visualizations/NetworkGraph
+
+## Overview
+
+Use a network graph to visualize entities and the relationships between them. A network graph represents each entity as a node with links (lines, arrows (unidirectional or bidirectional), or pairs of arrows) representing the relationships between nodes.
+
+## Details
+
+- **Category:** Flow
+- **Visualization Type:** splunk.networkGraph
+
+## Tips
+
+- Suitable for use cases like computer network diagrams, organizational charts, and supply chain diagrams.
+- Select the appropriate layout option to best highlight your data.
+- Use dynamic formatting options like dynamic coloring to easily highlight nodes or links with significant values.
+
+## Variations
+
+| Variation | Description | Key |
+| --- | --- | --- |
+| Preset | Use a preset layout to specify the x and y positions for each node in your network. Allows precise control over the graph’s appearance. | preset |
+| Hierarchical | Use a hierarchical layout to automatically arrange nodes into a vertical or horizontal hierarchy based on the node positions and links. Helpful for quickly identifying hierarchies and dependencies in the network. | hierarchical |
+| Force | Use a force layout to arrange nodes using a [physics-based algorithm](https://d3js.org/d3-force). Use the nodeTypes option to cluster certain nodes together. Suitable for graphs with a large number of nodes that are highly connected, dense, and/or non-hierarchical. | force |
+| Dynamic | Use dynamic formatting options, such as dynamic color, node size, and/or link width to emphasize key values or relationships in your graph. | dynamic |
+| Icons | Use any of our 74 built in icons or add your own with a remote Icon URL or data URI. | icons |