From 93b446e86f208a3bee2abd3d1b3169347ad35875 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 2 Jan 2023 11:33:20 -0500 Subject: [PATCH] Update --- .../redux-devtools-chart-monitor/package.json | 1 - .../src/Chart.tsx | 57 +----------- .../src/ChartMonitor.tsx | 93 +++++++------------ pnpm-lock.yaml | 2 - 4 files changed, 34 insertions(+), 119 deletions(-) diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json index c7ca1d71..c4176f0b 100644 --- a/packages/redux-devtools-chart-monitor/package.json +++ b/packages/redux-devtools-chart-monitor/package.json @@ -44,7 +44,6 @@ "@types/redux-devtools-themes": "^1.0.0", "d3-state-visualizer": "^1.6.0", "deepmerge": "^4.2.2", - "prop-types": "^15.8.1", "redux-devtools-themes": "^1.0.0" }, "devDependencies": { diff --git a/packages/redux-devtools-chart-monitor/src/Chart.tsx b/packages/redux-devtools-chart-monitor/src/Chart.tsx index 895fc5f2..85e82702 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.tsx +++ b/packages/redux-devtools-chart-monitor/src/Chart.tsx @@ -1,7 +1,6 @@ import React, { Component, createRef } from 'react'; -import PropTypes from 'prop-types'; import { tree } from 'd3-state-visualizer'; -import type { Node, StyleValue } from 'd3-state-visualizer'; +import type { HierarchyPointNode, Node, StyleValue } from 'd3-state-visualizer'; import { Action, Dispatch } from 'redux'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; import * as themes from 'redux-devtools-themes'; @@ -24,7 +23,7 @@ export interface Props> isSorted: boolean; heightBetweenNodesCoeff: number; widthBetweenNodesCoeff: number; - onClickText: (datum: Node) => void; + onClickText: (datum: HierarchyPointNode) => void; tooltipOptions: { disabled: boolean; offset: { @@ -39,58 +38,6 @@ export interface Props> } class Chart> extends Component> { - static propTypes = { - state: PropTypes.object, - rootKeyName: PropTypes.string, - pushMethod: PropTypes.oneOf(['push', 'unshift']), - tree: PropTypes.shape({ - name: PropTypes.string, - children: PropTypes.array, - }), - id: PropTypes.string, - style: PropTypes.shape({ - node: PropTypes.shape({ - colors: PropTypes.shape({ - default: PropTypes.string, - parent: PropTypes.string, - collapsed: PropTypes.string, - }), - radius: PropTypes.number, - }), - text: PropTypes.shape({ - colors: PropTypes.shape({ - default: PropTypes.string, - hover: PropTypes.string, - }), - }), - link: PropTypes.object, - }), - size: PropTypes.number, - aspectRatio: PropTypes.number, - margin: PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number, - }), - isSorted: PropTypes.bool, - heightBetweenNodesCoeff: PropTypes.number, - widthBetweenNodesCoeff: PropTypes.number, - transitionDuration: PropTypes.number, - onClickText: PropTypes.func, - tooltipOptions: PropTypes.shape({ - disabled: PropTypes.bool, - left: PropTypes.number, - top: PropTypes.number, - offset: PropTypes.shape({ - left: PropTypes.number, - top: PropTypes.number, - }), - indentationSize: PropTypes.number, - style: PropTypes.object, - }), - }; - divRef = createRef(); // eslint-disable-next-line @typescript-eslint/ban-types renderChart?: (state?: {} | null | undefined) => void; diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx index 18eb4feb..6af797a2 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx +++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx @@ -1,5 +1,4 @@ import React, { CSSProperties, PureComponent } from 'react'; -import PropTypes from 'prop-types'; import * as themes from 'redux-devtools-themes'; import { ActionCreators, @@ -8,7 +7,7 @@ import { } from '@redux-devtools/core'; import deepmerge from 'deepmerge'; import { Action, Dispatch } from 'redux'; -import { NodeWithId, Primitive } from 'd3-state-visualizer'; +import type { HierarchyPointNode, Node } from 'd3-state-visualizer'; import reducer, { ChartMonitorState } from './reducers'; import Chart, { Props } from './Chart'; @@ -52,7 +51,7 @@ export interface ChartMonitorProps> isSorted: boolean; heightBetweenNodesCoeff: number; widthBetweenNodesCoeff: number; - onClickText: (datum: NodeWithId) => void; + onClickText: (datum: HierarchyPointNode) => void; tooltipOptions: unknown; style: { width: number; @@ -80,23 +79,6 @@ class ChartMonitor> extends PureComponent< > { static update = reducer; - static propTypes = { - dispatch: PropTypes.func, - computedStates: PropTypes.array, - currentStateIndex: PropTypes.number, - actionsById: PropTypes.object, - stagedActionIds: PropTypes.array, - skippedActionIds: PropTypes.array, - monitorState: PropTypes.shape({ - initialScrollTop: PropTypes.number, - }), - - preserveScrollTop: PropTypes.bool, - select: PropTypes.func.isRequired, - theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - invertTheme: PropTypes.bool, - }; - static defaultProps = { select: (state: unknown) => state, theme: 'nicinabox', @@ -140,45 +122,10 @@ class ChartMonitor> extends PureComponent< return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; } - getChartStyle() { - const theme = this.getTheme(); - - return { - width: '100%', - height: '100%', - node: { - colors: { - default: theme.base0B, - collapsed: theme.base0B, - parent: theme.base0E, - }, - radius: 7, - }, - text: { - colors: { - default: theme.base0D, - hover: theme.base06, - }, - }, - }; - } - getChartOptions(props = this.props): Props { const { computedStates } = props; const theme = this.getTheme(); - const tooltipOptions = { - disabled: false, - offset: { left: 30, top: 10 }, - indentationSize: 2, - style: { - 'background-color': theme.base06, - opacity: '0.7', - 'border-radius': '5px', - padding: '5px', - }, - }; - const defaultOptions = { state: computedStates.length ? computedStates[props.currentStateIndex].state @@ -186,10 +133,35 @@ class ChartMonitor> extends PureComponent< isSorted: false, heightBetweenNodesCoeff: 1, widthBetweenNodesCoeff: 1.3, - tooltipOptions, - style: this.getChartStyle() as unknown as - | { [key: string]: Primitive } - | undefined, + tooltipOptions: { + disabled: false, + offset: { left: 30, top: 10 }, + indentationSize: 2, + styles: { + 'background-color': theme.base06, + opacity: '0.7', + 'border-radius': '5px', + padding: '5px', + }, + }, + chartStyles: { + width: '100%', + height: '100%', + }, + nodeStyleOptions: { + colors: { + default: theme.base0B, + collapsed: theme.base0B, + parent: theme.base0E, + }, + radius: 7, + }, + textStyleOptions: { + colors: { + default: theme.base0D, + hover: theme.base06, + }, + }, }; return deepmerge(defaultOptions, props); @@ -198,10 +170,9 @@ class ChartMonitor> extends PureComponent< render() { const theme = this.getTheme(); - const ChartAsAny = Chart as any; return (
- +
); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 700836f2..244b17c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -893,7 +893,6 @@ importers: eslint-config-prettier: ^8.5.0 eslint-plugin-react: ^7.31.11 eslint-plugin-react-hooks: ^4.6.0 - prop-types: ^15.8.1 react: ^18.2.0 redux: ^4.2.0 redux-devtools-themes: ^1.0.0 @@ -905,7 +904,6 @@ importers: '@types/redux-devtools-themes': 1.0.0 d3-state-visualizer: link:../d3-state-visualizer deepmerge: 4.2.2 - prop-types: 15.8.1 redux-devtools-themes: 1.0.0 devDependencies: '@babel/cli': 7.19.3_@babel+core@7.20.5