Skip to content

Commit b323f77

Browse files
Methuselah96Methuselah96
authored
Upgrade D3 to v4 (#1307)
* Update packages * Fix after update * Update some types * Remove attr * Finish d3tooltip * Update style option * Updates * Zoom * Update * Update * Update * Fix * Update * Update * Update * Update * Update * Fixes * Update id type * Fix enter + update selections * Use this * Fix stringifying * Remove InputOptions * Use data.value * Updates * Remove UMD builds * Fix exit * No need to re-assign * Simplify d3tooltip API * Update redux-devtools-chart-monitor * Update redux-devtools-app * Update * Update * Remove @types/prop-types * Update prop types * Update d3tooltip docs * Update d3-state-visualizer docs * Update chart-monitor docs * Create weak-kings-brake.md * Create spicy-olives-compete.md * Create friendly-coats-trade.md * Create slimy-elephants-flash.md * Fix empty arrays
1 parent 40b024a commit b323f77

File tree

31 files changed

+822
-1047
lines changed

31 files changed

+822
-1047
lines changed

‎.changeset/friendly-coats-trade.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'd3-state-visualizer': major
3+
---
4+
5+
- Remove UMD build.
6+
- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
7+
- The shape of the argument passed to the option `onClickText` has been updated to match the d3 v4 node.
8+
- Rename `InputOptions` to `Options`, `Primitive` to `StyleValue`, and `NodeWithId` to `HierarchyPointNode<Node>`.

‎.changeset/slimy-elephants-flash.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@redux-devtools/chart-monitor': major
3+
---
4+
5+
- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
6+
- The shape of the argument passed to the option `onClickText` has been updated to match the d3 v4 node.

‎.changeset/spicy-olives-compete.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'd3tooltip': major
3+
---
4+
5+
- Remove UMD build.
6+
- Upgrade d3 peer dependency from v3 to v4.
7+
- Remove `attr` configuration method.
8+
- Rename `style` configuration method to `styles` and move to options.
9+
- Move `text` configuration method to options.
10+
- Remove d3 parameter as first parameter for `tooltip`.

‎.changeset/weak-kings-brake.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'map2tree': major
3+
---
4+
5+
- Remove UMD build.

‎packages/d3-state-visualizer/README.md‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), {
3535
isSorted: false,
3636
widthBetweenNodesCoeff: 1.5,
3737
heightBetweenNodesCoeff: 2,
38-
style: { border: '1px solid black' },
38+
chartStyles: { border: '1px solid black' },
3939
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
4040
});
4141

@@ -61,7 +61,7 @@ Other options are listed below and have reasonable default values if you want to
6161
| Option | Type | Default | Description |
6262
| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
6363
| `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 |
64+
| `chartStyles` | Object | `{}` | Sets the CSS style of the chart |
6565
| `size` | Number | `500` | Sets size of the chart in pixels |
6666
| `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 |
6767
| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |
@@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to
7474

7575
More to come...
7676

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-
8377
## Roadmap
8478

8579
- 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.

‎packages/d3-state-visualizer/examples/tree/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const render = tree(document.getElementById('root')!, {
2828
isSorted: false,
2929
widthBetweenNodesCoeff: 1.5,
3030
heightBetweenNodesCoeff: 2,
31-
style: { border: '1px solid black' },
31+
chartStyles: { border: '1px solid black' },
3232
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
3333
});
3434

‎packages/d3-state-visualizer/package.json‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,16 @@
2323
"main": "lib/cjs/index.js",
2424
"module": "lib/esm/index.js",
2525
"types": "lib/types/index.d.ts",
26-
"unpkg": "dist/d3-state-visualizer.umd.js",
2726
"sideEffects": false,
2827
"repository": {
2928
"type": "git",
3029
"url": "https://github.com/reduxjs/redux-devtools.git"
3130
},
3231
"scripts": {
33-
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
32+
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
3433
"build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
3534
"build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
3635
"build:types": "tsc --emitDeclarationOnly",
37-
"build:umd": "rollup -c",
3836
"clean": "rimraf lib",
3937
"lint": "eslint . --ext .ts",
4038
"type-check": "tsc --noEmit",
@@ -43,8 +41,8 @@
4341
},
4442
"dependencies": {
4543
"@babel/runtime": "^7.20.6",
46-
"@types/d3": "^3.5.47",
47-
"d3": "^3.5.17",
44+
"@types/d3": "^4.13.12",
45+
"d3": "^4.13.0",
4846
"d3tooltip": "^2.1.0",
4947
"deepmerge": "^4.2.2",
5048
"map2tree": "^2.1.0",
@@ -54,23 +52,14 @@
5452
"@babel/cli": "^7.19.3",
5553
"@babel/core": "^7.20.5",
5654
"@babel/eslint-parser": "^7.19.1",
57-
"@babel/plugin-transform-runtime": "^7.19.6",
5855
"@babel/preset-env": "^7.20.2",
5956
"@babel/preset-typescript": "^7.18.6",
60-
"@rollup/plugin-babel": "^6.0.3",
61-
"@rollup/plugin-commonjs": "^24.0.0",
62-
"@rollup/plugin-node-resolve": "^15.0.1",
63-
"@rollup/plugin-terser": "^0.2.1",
64-
"@types/node": "^18.11.17",
6557
"@types/ramda": "^0.28.20",
6658
"@typescript-eslint/eslint-plugin": "^5.47.0",
6759
"@typescript-eslint/parser": "^5.47.0",
6860
"eslint": "^8.30.0",
6961
"eslint-config-prettier": "^8.5.0",
7062
"rimraf": "^3.0.2",
71-
"rollup": "^3.7.5",
72-
"rollup-plugin-typescript2": "^0.34.1",
73-
"tslib": "^2.4.1",
7463
"typescript": "~4.9.4"
7564
}
7665
}

‎packages/d3-state-visualizer/rollup.config.mjs‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎packages/d3-state-visualizer/src/charts/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1+
export type { HierarchyPointNode } from 'd3';
2+
export type { StyleValue } from 'd3tooltip';
13
export { default as tree } from './tree/tree';
2-
export type { InputOptions, NodeWithId, Primitive } from './tree/tree';
4+
export type { Node, Options } from './tree/tree';

0 commit comments

Comments
 (0)