mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-10 19:56:54 +03:00
beb02ebe6d
* chore(deps): update all non-major dependencies * Combine react types Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Nathan Bierema <nbierema@gmail.com> |
||
---|---|---|
.. | ||
examples/tree | ||
src | ||
.babelrc | ||
.eslintignore | ||
.eslintrc.js | ||
CHANGELOG.md | ||
LICENSE.md | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.webpack.json | ||
webpack.config.umd.ts |
d3-state-visualizer
Enables real-time visualization of your application state.
Created by @romseguy and merged from reduxjs/d3-state-visualizer
.
Installation
yarn install d3-state-visualizer
Usage
import { tree } from 'd3-state-visualizer';
const appState = {
todoStore: {
todos: [
{ title: 'd3' },
{ title: 'state' },
{ title: 'visualizer' },
{ title: 'tree' },
],
completedCount: 1,
},
};
const render = tree(document.getElementById('root'), {
state: appState,
id: 'treeExample',
size: 1000,
aspectRatio: 0.5,
isSorted: false,
widthBetweenNodesCoeff: 1.5,
heightBetweenNodesCoeff: 2,
style: { border: '1px solid black' },
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
});
render();
Charts API
The APIs are minimal and consists of a single function you provide with:
- a DOM element
- a plain old JS object for options.
Tree
This chart is a bit special as it accepts either one of the two following options, but not both:
tree
: a properly formed tree structure such as one generated by map2tree or react2treestate
: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using map2tree.
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 |
size |
Number | 500 |
Sets size of the chart in pixels |
aspectRatio |
Float | 1.0 |
Sets the chart height to size * aspectRatio and viewBox in order to preserve the aspect ratio of the chart. Great video if you want to learn more about how SVG works |
widthBetweenNodesCoeff |
Float | 1.0 |
Alters the horizontal space between each node |
heightBetweenNodesCoeff |
Float | 1.0 |
Alters the vertical space between each node |
isSorted |
Boolean | false |
Sorts the chart in alphabetical order |
transitionDuration |
Number | 750 |
Sets the duration of all the transitions used by the chart |
tooltipOptions |
Object | here | Sets the options for the tooltip that is showing up when you're hovering the nodes |
rootKeyName |
String | 'state' |
Sets the first node's name of the resulting tree structure. Warning: only works if you provide a state option |
pushMethod |
String | 'push' |
Sets the method that shall be used to add array children to the tree. Warning: only works if you provide a state option |
More to come...
## Bindings
React
example 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.