reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 06:00:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update d3-state-visualizer docs

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 12:17:23 -05:00
parent fbe30c9c72
commit 3ad8021a65
1 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/d3-state-visualizer/README.md
View File

@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), {
isSorted: false,
widthBetweenNodesCoeff: 1.5,
heightBetweenNodesCoeff: 2,
style: { border: '1px solid black' },
chartStyles: { border: '1px solid black' },
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
});
@ -59,9 +59,9 @@ This chart is a bit special as it accepts either one of the two following option
Other options are listed below and have reasonable default values if you want to omit them:
| Option | Type | Default | Description |
| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|---------------------------| ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument |
| `style` | Object | `{}` | Sets the CSS style of the chart |
| `chartStyles` | Object | `{}` | Sets the CSS style of the chart |
| `size` | Number | `500` | Sets size of the chart in pixels |
| `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |
@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to
More to come...
## Bindings
### React
[example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation.
## Roadmap
- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.