diff --git a/babel.config.js b/babel.config.js index 274c7b18..56d4e85e 100755 --- a/babel.config.js +++ b/babel.config.js @@ -4,11 +4,11 @@ module.exports = { [ '@babel/plugin-transform-runtime', { - regenerator: true - } + regenerator: true, + }, ], ['@babel/plugin-proposal-decorators', { legacy: true }], '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-export-default-from' - ] + '@babel/plugin-proposal-export-default-from', + ], }; diff --git a/docs/Integrations/Remote.md b/docs/Integrations/Remote.md index d154e4c7..f2c80d59 100644 --- a/docs/Integrations/Remote.md +++ b/docs/Integrations/Remote.md @@ -19,7 +19,7 @@ The client driver provides a way to connect to the server via websockets (see th ```js var socket = socketCluster.connect({ hostname: 'localhost', - port: 8000 + port: 8000, }); ``` @@ -39,13 +39,13 @@ SocketCluster client handles reconnecting for you, but you still might want to k ##### JavaScript ```js -socket.on('connect', status => { +socket.on('connect', (status) => { // Here will come the next step }); -socket.on('disconnect', code => { +socket.on('disconnect', (code) => { console.warn('Socket disconnected with code', code); }); -socket.on('error', error => { +socket.on('error', (error) => { console.warn('Socket error', error); }); ``` @@ -125,7 +125,7 @@ const message = { payload: state, id: socket.id, instanceId: window.btoa(location.href), - name: document.title + name: document.title, }; socket.emit(socket.id ? 'log' : 'log-noid', message); ``` diff --git a/jest.config.js b/jest.config.js index d05ce4eb..7e1daca2 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,3 @@ module.exports = { - setupFiles: ['devui/tests/setup.js'] + setupFiles: ['devui/tests/setup.js'], }; diff --git a/package.json b/package.json index b21e9da9..f927d1f4 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "jest": "^26.2.2", "lerna": "^3.22.1", "lint-staged": "^10.2.11", - "prettier": "^1.19.1" + "prettier": "^2.0.5" }, "scripts": { "lerna": "lerna", diff --git a/packages/d3-state-visualizer/README.md b/packages/d3-state-visualizer/README.md index 6addc6a4..b74dc149 100644 --- a/packages/d3-state-visualizer/README.md +++ b/packages/d3-state-visualizer/README.md @@ -1,5 +1,5 @@ -d3-state-visualizer -=================== +# d3-state-visualizer + Enables real-time visualization of your application state. Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer). @@ -18,13 +18,13 @@ import { tree } from 'd3-state-visualizer'; const appState = { todoStore: { todos: [ - { title: 'd3'}, + { title: 'd3' }, { title: 'state' }, { title: 'visualizer' }, - { title: 'tree' } + { title: 'tree' }, ], - completedCount: 1 - } + completedCount: 1, + }, }; const render = tree(document.getElementById('root'), { @@ -35,40 +35,42 @@ const render = tree(document.getElementById('root'), { isSorted: false, widthBetweenNodesCoeff: 1.5, heightBetweenNodesCoeff: 2, - style: {border: '1px solid black'}, - tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 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**: - +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](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree) - `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). 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](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 -`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](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 -`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 +| 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](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 | +| `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](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 | +| `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... @@ -80,4 +82,4 @@ More to come... ## 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. +- 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. diff --git a/packages/d3-state-visualizer/examples/tree/index.html b/packages/d3-state-visualizer/examples/tree/index.html index 4fea9f22..579dbccb 100644 --- a/packages/d3-state-visualizer/examples/tree/index.html +++ b/packages/d3-state-visualizer/examples/tree/index.html @@ -1,42 +1,39 @@ -
-