;
+ }
+}
+
+export default Chart;
diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.js b/packages/redux-devtools-chart-monitor/src/ChartMonitor.js
new file mode 100644
index 00000000..e6602913
--- /dev/null
+++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.js
@@ -0,0 +1,175 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import shouldPureComponentUpdate from 'react-pure-render/function';
+import * as themes from 'redux-devtools-themes';
+import { ActionCreators } from 'redux-devtools';
+import deepmerge from 'deepmerge';
+
+import reducer from './reducers';
+import Chart from './Chart';
+const { reset, rollback, commit, sweep, toggleAction } = ActionCreators;
+
+const styles = {
+ container: {
+ fontFamily: 'monaco, Consolas, Lucida Console, monospace',
+ position: 'relative',
+ overflowY: 'hidden',
+ width: '100%',
+ height: '100%',
+ minWidth: 300
+ }
+};
+
+function invertColors(theme) {
+ return {
+ ...theme,
+ base00: theme.base07,
+ base01: theme.base06,
+ base02: theme.base05,
+ base03: theme.base04,
+ base04: theme.base03,
+ base05: theme.base02,
+ base06: theme.base01,
+ base07: theme.base00
+ };
+}
+
+class ChartMonitor extends Component {
+ 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) => state,
+ theme: 'nicinabox',
+ preserveScrollTop: true,
+ invertTheme: false
+ };
+
+ shouldComponentUpdate = shouldPureComponentUpdate;
+
+ constructor(props) {
+ super(props);
+ this.handleToggleAction = this.handleToggleAction.bind(this);
+ this.handleReset = this.handleReset.bind(this);
+ this.handleRollback = this.handleRollback.bind(this);
+ this.handleSweep = this.handleSweep.bind(this);
+ this.handleCommit = this.handleCommit.bind(this);
+ }
+
+ handleRollback() {
+ this.props.dispatch(rollback());
+ }
+
+ handleSweep() {
+ this.props.dispatch(sweep());
+ }
+
+ handleCommit() {
+ this.props.dispatch(commit());
+ }
+
+ handleToggleAction(id) {
+ this.props.dispatch(toggleAction(id));
+ }
+
+ handleReset() {
+ this.props.dispatch(reset());
+ }
+
+ getTheme() {
+ let { theme, invertTheme } = this.props;
+ if (typeof theme !== 'string') {
+ return invertTheme ? invertColors(theme) : theme;
+ }
+
+ if (typeof themes[theme] !== 'undefined') {
+ return invertTheme ? invertColors(themes[theme]) : themes[theme];
+ }
+
+ // eslint-disable-next-line no-console
+ console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
+ 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) {
+ 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 : null,
+ isSorted: false,
+ heightBetweenNodesCoeff: 1,
+ widthBetweenNodesCoeff: 1.3,
+ tooltipOptions,
+ style: this.getChartStyle()
+ };
+
+ return deepmerge(defaultOptions, props);
+ }
+
+ render() {
+ const theme = this.getTheme();
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default ChartMonitor;
diff --git a/packages/redux-devtools-chart-monitor/src/actions.js b/packages/redux-devtools-chart-monitor/src/actions.js
new file mode 100644
index 00000000..ec09b91b
--- /dev/null
+++ b/packages/redux-devtools-chart-monitor/src/actions.js
@@ -0,0 +1 @@
+export const TOGGLE_VISIBILITY = '@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';
diff --git a/packages/redux-devtools-chart-monitor/src/index.js b/packages/redux-devtools-chart-monitor/src/index.js
new file mode 100644
index 00000000..47f35f02
--- /dev/null
+++ b/packages/redux-devtools-chart-monitor/src/index.js
@@ -0,0 +1 @@
+export default from './ChartMonitor';
diff --git a/packages/redux-devtools-chart-monitor/src/reducers.js b/packages/redux-devtools-chart-monitor/src/reducers.js
new file mode 100644
index 00000000..7d31752a
--- /dev/null
+++ b/packages/redux-devtools-chart-monitor/src/reducers.js
@@ -0,0 +1,19 @@
+import { TOGGLE_VISIBILITY } from './actions';
+
+function toggleVisibility(props, state = props.defaultIsVisible, action) {
+ if (action.type === TOGGLE_VISIBILITY) {
+ return !state;
+ }
+
+ if (props.defaultIsVisible !== undefined) {
+ return props.defaultIsVisible;
+ }
+
+ return true;
+}
+
+export default function reducer(props, state = {}, action) {
+ return {
+ isVisible: toggleVisibility(props, state.isVisible, action)
+ };
+}
diff --git a/yarn.lock b/yarn.lock
index 7acd361b..1855327d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5860,7 +5860,7 @@ cyclist@^1.0.1:
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-d3-state-visualizer@^1.3.1, d3-state-visualizer@^1.3.2:
+d3-state-visualizer@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-state-visualizer/-/d3-state-visualizer-1.3.2.tgz#8e3ac418aa7ee7e3f46025309f9d1c215ee385eb"
integrity sha512-XgTRC6FXeoTt8l79cc2f3Zaah+K7DUQb3GL0zfbvoIi7zWWHV4l7OfuX9/JxxvwilKApMZwHMBJ7cJ2yWAc5IQ==
@@ -13734,17 +13734,6 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"
-redux-devtools-chart-monitor@^1.7.0:
- version "1.7.0"
- resolved "https://registry.yarnpkg.com/redux-devtools-chart-monitor/-/redux-devtools-chart-monitor-1.7.0.tgz#bf6356f480142e3576f5bbbeead433a1598c5e7f"
- integrity sha512-1knxXASbo7ukukyf1rGNnME7gOgKY1XVZ4hoSzUjY6QFIC8iEneivXznCupxjfX5TDXLjZgQrFBrbGano1WK7g==
- dependencies:
- d3-state-visualizer "^1.3.1"
- deepmerge "^0.2.10"
- prop-types "^15.6.0"
- react-pure-render "^1.0.2"
- redux-devtools-themes "^1.0.0"
-
redux-devtools-dock-monitor@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/redux-devtools-dock-monitor/-/redux-devtools-dock-monitor-1.1.3.tgz#1205e823c82536570aac8551a1c4b70972cba6aa"