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