| 1 | # d3-state-visualizer
|
| 2 |
|
| 3 | Enables real-time visualization of your application state.
|
| 4 |
|
| 5 | Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer).
|
| 6 |
|
| 7 | [Demo](http://reduxjs.github.io/d3-state-visualizer)
|
| 8 |
|
| 9 | ## Installation
|
| 10 |
|
| 11 | `yarn install d3-state-visualizer`
|
| 12 |
|
| 13 | ## Usage
|
| 14 |
|
| 15 | ```javascript
|
| 16 | import { tree } from 'd3-state-visualizer';
|
| 17 |
|
| 18 | const appState = {
|
| 19 | todoStore: {
|
| 20 | todos: [
|
| 21 | { title: 'd3' },
|
| 22 | { title: 'state' },
|
| 23 | { title: 'visualizer' },
|
| 24 | { title: 'tree' },
|
| 25 | ],
|
| 26 | completedCount: 1,
|
| 27 | },
|
| 28 | };
|
| 29 |
|
| 30 | const render = tree(document.getElementById('root'), {
|
| 31 | state: appState,
|
| 32 | id: 'treeExample',
|
| 33 | size: 1000,
|
| 34 | aspectRatio: 0.5,
|
| 35 | isSorted: false,
|
| 36 | widthBetweenNodesCoeff: 1.5,
|
| 37 | heightBetweenNodesCoeff: 2,
|
| 38 | style: { border: '1px solid black' },
|
| 39 | tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
|
| 40 | });
|
| 41 |
|
| 42 | render();
|
| 43 | ```
|
| 44 |
|
| 45 | ## Charts API
|
| 46 |
|
| 47 | The APIs are minimal and consists of a single function you provide with:
|
| 48 |
|
| 49 | - a DOM element
|
| 50 | - a plain old JS object for options.
|
| 51 |
|
| 52 | #### Tree
|
| 53 |
|
| 54 | This chart is a bit special as it accepts either one of the two following options, but **not both**:
|
| 55 |
|
| 56 | - `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree)
|
| 57 | - `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree).
|
| 58 |
|
| 59 | Other options are listed below and have reasonable default values if you want to omit them:
|
| 60 |
|
| 61 | | Option | Type | Default | Description |
|
| 62 | | ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 63 | | `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 |
|
| 64 | | `style` | Object | `{}` | Sets the CSS style of the chart |
|
| 65 | | `size` | Number | `500` | Sets size of the chart in pixels |
|
| 66 | | `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 |
|
| 67 | | `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |
|
| 68 | | `heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node |
|
| 69 | | `isSorted` | Boolean | `false` | Sorts the chart in alphabetical order |
|
| 70 | | `transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart |
|
| 71 | | `tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes |
|
| 72 | | `rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option |
|
| 73 | | `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 |
|
| 74 |
|
| 75 | More to come...
|
| 76 |
|
| 77 | ## Bindings
|
| 78 |
|
| 79 | ### React
|
| 80 |
|
| 81 | [example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation.
|
| 82 |
|
| 83 | ## Roadmap
|
| 84 |
|
| 85 | - 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.
|