redux-devtools/packages/d3-state-visualizer
Nathan Bierema b82de74592
Add ESM builds (#997)
* Use rollup for d3tooltip

* Use rollup for map2tree

* Set moduleResolution

* Use rollup for d3-state-visualizer

* Use rollup for react-base16-styling

* Use rollup for react-dock

* Use rollup for react-json-tree

* Use rollup for redux-devtools

* Use rollup for redux-devtools-intrument

* Use rollup for redux-devtools-chart-monitor

* Update export

* Use rollup for redux-devtools-dock-monitor

* Use rollup for redux-devtools-inspector-monitor

* Fix inspector demo

* Fix invalid eslint config

* Use rollup for inspector-monitor-test-tab

* Use rollup for inspector-monitor-trace-tab

* Use rollup for redux-devtools-log-monitor

* Use rollup for redux-devtools-remote

* Use rollup in redux-devtools-rtk-query-monitor

* Use rollup for redux-devtools-serialize

* Fix redux-devtools examples

* Use rollup for redux-devtools-slider-monitor

* Fix slider examples

* Use rollup for redux-devtools-ui

* Use rollup for redux-devtools-utils

* Use rollup for redux-devtools-extension

* Use rollup for redux-devtools-app

* Fix Webpack app build

* Fix extension build

* Turn on minimization

* Update CLI
2022-01-10 15:41:53 +00:00
..
examples/tree Publish 2022-01-07 21:24:58 -05:00
src Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.babelrc Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintignore Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintrc.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
CHANGELOG.md chore(*): run prettier 2021-03-06 10:17:55 -05:00
LICENSE.md chore(*): add back license files (#578) 2020-08-09 01:11:43 -04:00
package.json Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
README.md chore(*): upgrade prettier (#570) 2020-08-08 16:26:39 -04:00
rollup.config.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
tsconfig.json chore(d3-state-visualizer): fix example build (#875) 2021-09-20 00:33:29 +00:00

d3-state-visualizer

Enables real-time visualization of your application state.

Created by @romseguy and merged from reduxjs/d3-state-visualizer.

Demo

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 react2tree
  • state: 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.