reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 14:09:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 11:25:22 -05:00
parent 6c4520a185
commit b8e3faa1b5
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx
View File

@ -4,7 +4,10 @@ import { ChartMonitor } from '@redux-devtools/chart-monitor';
import type { HierarchyPointNode, Node } from 'd3-state-visualizer'; import type { HierarchyPointNode, Node } from 'd3-state-visualizer';
import { selectMonitorWithState } from '../../actions'; import { selectMonitorWithState } from '../../actions';
export function getPath(obj: HierarchyPointNode<Node>, inspectedStatePath: string[]) { export function getPath(
obj: HierarchyPointNode<Node>,
inspectedStatePath: string[]
) {
const parent = obj.parent; const parent = obj.parent;
if (!parent) return; if (!parent) return;
getPath(parent, inspectedStatePath); getPath(parent, inspectedStatePath);

39
packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/ChartTab.tsx
View File

@ -1,7 +1,8 @@
import React, { Component, RefCallback } from 'react'; import React, { Component, RefCallback } from 'react';
import { connect, ResolveThunks } from 'react-redux'; import { connect, ResolveThunks } from 'react-redux';
import { withTheme } from 'styled-components'; import { withTheme } from 'styled-components';
import { InputOptions, NodeWithId, tree } from 'd3-state-visualizer'; import { tree } from 'd3-state-visualizer';
import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';
import { getPath } from '../ChartMonitorWrapper'; import { getPath } from '../ChartMonitorWrapper';
import { updateMonitorState } from '../../../actions'; import { updateMonitorState } from '../../../actions';
import { ThemeFromProvider } from '@redux-devtools/ui'; import { ThemeFromProvider } from '@redux-devtools/ui';
@ -54,12 +55,12 @@ class ChartTab extends Component<Props> {
this.renderChart(props.data as {} | null | undefined); this.renderChart(props.data as {} | null | undefined);
} }
getChartTheme(theme: ThemeFromProvider): Partial<InputOptions> { getChartTheme(theme: ThemeFromProvider): Partial<Options> {
return { return {
heightBetweenNodesCoeff: 1, heightBetweenNodesCoeff: 1,
widthBetweenNodesCoeff: 1.3, widthBetweenNodesCoeff: 1.3,
tooltipOptions: { tooltipOptions: {
style: { styles: {
color: theme.base06, color: theme.base06,
'background-color': theme.base01, 'background-color': theme.base01,
opacity: '0.9', opacity: '0.9',
@ -69,29 +70,29 @@ class ChartTab extends Component<Props> {
offset: { left: 30, top: 10 }, offset: { left: 30, top: 10 },
indentationSize: 2, indentationSize: 2,
}, },
style: { chartStyles: {
width: '100%', width: '100%',
height: '100%', height: '100%',
node: { },
colors: { nodeStyleOptions: {
default: theme.base0B, colors: {
collapsed: theme.base0B, default: theme.base0B,
parent: theme.base0E, collapsed: theme.base0B,
}, parent: theme.base0E,
radius: 7, },
} as unknown as string, radius: 7,
text: { },
colors: { textStyleOptions: {
default: theme.base0D, colors: {
hover: theme.base06, default: theme.base0D,
}, hover: theme.base06,
} as unknown as string, },
}, },
onClickText: this.onClickText, onClickText: this.onClickText,
}; };
} }
onClickText = (data: NodeWithId) => { onClickText = (data: HierarchyPointNode<Node>) => {
const inspectedStatePath: string[] = []; const inspectedStatePath: string[] = [];
getPath(data, inspectedStatePath); getPath(data, inspectedStatePath);
this.props.updateMonitorState({ this.props.updateMonitorState({