mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-09-22 11:59:11 +03:00
36 lines
715 B
JavaScript
36 lines
715 B
JavaScript
|
import { tree } from 'd3-state-visualizer';
|
||
|
|
|
||
|
|
const appState = {
|
||
|
|
todoStore: {
|
||
|
|
todos: [
|
||
|
|
{ title: 'd3'},
|
||
|
|
{ title: 'state' },
|
||
|
|
{ title: 'visualizer' },
|
||
|
|
{ title: 'tree' }
|
||
|
|
],
|
||
|
|
completedCount: 1,
|
||
|
|
alphabeticalOrder: true
|
||
|
|
},
|
||
|
|
someStore: {
|
||
|
|
someProperty: 0,
|
||
|
|
someObject: {
|
||
|
|
anotherProperty: 'value',
|
||
|
|
someArray: [0, 1, 2]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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();
|