From 300b60a8b1f92a6d7c78510a1bea304490aa23be Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 20 Sep 2020 19:29:13 -0400
Subject: [PATCH] feat(d3-state-visualizer): convert example to TypeScript
(#641)
---
.../examples/tree/{index.js => index.ts} | 0
.../examples/tree/package.json | 31 +++++------
.../{webpack.config.js => webpack.config.ts} | 20 +++----
.../src/charts/tree/tree.ts | 54 +++++++++++++++----
4 files changed, 67 insertions(+), 38 deletions(-)
rename packages/d3-state-visualizer/examples/tree/{index.js => index.ts} (100%)
rename packages/d3-state-visualizer/examples/tree/{webpack.config.js => webpack.config.ts} (76%)
diff --git a/packages/d3-state-visualizer/examples/tree/index.js b/packages/d3-state-visualizer/examples/tree/index.ts
similarity index 100%
rename from packages/d3-state-visualizer/examples/tree/index.js
rename to packages/d3-state-visualizer/examples/tree/index.ts
diff --git a/packages/d3-state-visualizer/examples/tree/package.json b/packages/d3-state-visualizer/examples/tree/package.json
index 43a24992..56170c6b 100644
--- a/packages/d3-state-visualizer/examples/tree/package.json
+++ b/packages/d3-state-visualizer/examples/tree/package.json
@@ -2,8 +2,17 @@
"name": "d3-state-visualizer-tree-example",
"version": "0.0.2",
"description": "Visualize your app state as a tree",
- "private": true,
- "main": "index.js",
+ "keywords": [
+ "d3",
+ "state",
+ "store",
+ "visualization"
+ ],
+ "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/tree",
+ "bugs": {
+ "url": "https://github.com/reduxjs/redux-devtools/issues"
+ },
+ "license": "MIT",
"scripts": {
"start": "webpack-dev-server --open"
},
@@ -11,25 +20,9 @@
"type": "git",
"url": "https://github.com/reduxjs/redux-devtools.git"
},
- "keywords": [
- "d3",
- "state",
- "store",
- "visualization"
- ],
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/reduxjs/redux-devtools/issues"
- },
- "homepage": "https://github.com/reduxjs/redux-devtools",
"dependencies": {
"d3-state-visualizer": "^1.3.4",
"map2tree": "^1.4.2"
},
- "devDependencies": {
- "@babel/core": "^7.11.1",
- "babel-loader": "^8.1.0",
- "webpack": "^4.44.1",
- "webpack-dev-server": "^3.11.0"
- }
+ "private": true
}
diff --git a/packages/d3-state-visualizer/examples/tree/webpack.config.js b/packages/d3-state-visualizer/examples/tree/webpack.config.ts
similarity index 76%
rename from packages/d3-state-visualizer/examples/tree/webpack.config.js
rename to packages/d3-state-visualizer/examples/tree/webpack.config.ts
index 9c710375..54df34db 100644
--- a/packages/d3-state-visualizer/examples/tree/webpack.config.js
+++ b/packages/d3-state-visualizer/examples/tree/webpack.config.ts
@@ -1,9 +1,8 @@
-var path = require('path');
-var webpack = require('webpack');
+import * as path from 'path';
+import * as webpack from 'webpack';
-module.exports = {
+export default {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
- devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
@@ -14,23 +13,24 @@ module.exports = {
filename: 'bundle.js',
publicPath: '/static/',
},
- plugins: [new webpack.HotModuleReplacementPlugin()],
- resolve: {
- extensions: ['.js'],
- },
module: {
rules: [
{
- test: /\.js$/,
- loaders: ['babel-loader'],
+ test: /\.(js|ts)$/,
+ loaders: 'babel-loader',
exclude: /node_modules/,
include: __dirname,
},
],
},
+ resolve: {
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ },
+ plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
hot: true,
port: 3000,
},
+ devtool: 'eval-source-map',
};
diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts
index 246d2df8..e7eb7ac5 100644
--- a/packages/d3-state-visualizer/src/charts/tree/tree.ts
+++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts
@@ -10,6 +10,44 @@ import {
} from './utils';
import d3tooltip from 'd3tooltip';
+interface InputOptions {
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ state?: {};
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ tree?: NodeWithId | {};
+
+ rootKeyName: string;
+ pushMethod: 'push' | 'unshift';
+ id: string;
+ style: { [key: string]: Primitive };
+ size: number;
+ aspectRatio: number;
+ initialZoom: number;
+ margin: {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ };
+ isSorted: boolean;
+ heightBetweenNodesCoeff: number;
+ widthBetweenNodesCoeff: number;
+ transitionDuration: number;
+ blinkDuration: number;
+ onClickText: () => void;
+ tooltipOptions: {
+ disabled?: boolean;
+ left?: number | undefined;
+ top?: number | undefined;
+ offset?: {
+ left: number;
+ top: number;
+ };
+ style?: { [key: string]: Primitive } | undefined;
+ indentationSize?: number;
+ };
+}
+
interface Options {
// eslint-disable-next-line @typescript-eslint/ban-types
state?: {};
@@ -63,6 +101,7 @@ interface Options {
top: number;
};
style: { [key: string]: Primitive } | undefined;
+ indentationSize?: number;
};
}
@@ -141,7 +180,10 @@ interface NodePosition {
y: number | undefined;
}
-export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
+export default function (
+ DOMNode: HTMLElement,
+ options: Partial<InputOptions> = {}
+) {
const {
id,
style,
@@ -160,7 +202,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
tree,
tooltipOptions,
onClickText,
- } = deepmerge(defaultOptions, options);
+ } = deepmerge(defaultOptions, options) as Options;
const width = size - margin.left - margin.right;
const height = size * aspectRatio - margin.top - margin.bottom;
@@ -363,13 +405,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
if (!tooltipOptions.disabled) {
nodeEnter.call(
d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
- .text((d, i) =>
- getTooltipString(
- d,
- i,
- (tooltipOptions as unknown) as { indentationSize: number }
- )
- )
+ .text((d, i) => getTooltipString(d, i, tooltipOptions))
.style(tooltipOptions.style)
);
}