From 8f0b7f52f18cdc11b72b3ee12f006b0e8ff4dc8a Mon Sep 17 00:00:00 2001 From: Cole Chamberlain Date: Tue, 2 Feb 2016 14:08:25 -0800 Subject: [PATCH 1/4] added immutable-js support via toMutable function --- README.md | 6 ++++-- package.json | 6 +++++- src/Chart.js | 5 +++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index da5c9d4..56321fd 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ Redux DevTools Chart Monitor ========================= -A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools). +A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools). It shows a real-time view of the store aka the current state of the app. +:rocket: Now with immutable-js support. + [Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer) ![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966) @@ -32,7 +34,7 @@ export default createDevTools( Then you can render `` to any place inside app or even into a separate popup window. -Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable. +Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable. Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach. [Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools) diff --git a/package.json b/package.json index 89de353..ecafbb6 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,9 @@ "chart" ], "author": "romseguy", + "contributors": [ + "Cole Chamberlain (https://github.com/cchamberlain)" + ], "license": "MIT", "bugs": { "url": "https://github.com/romseguy/redux-devtools-chart-monitor/issues" @@ -49,6 +52,7 @@ "d3-state-visualizer": "^1.0.2", "deepmerge": "^0.2.10", "react-pure-render": "^1.0.2", - "redux-devtools-themes": "^1.0.0" + "redux-devtools-themes": "^1.0.0", + "tomutable": "^0.1.3" } } diff --git a/src/Chart.js b/src/Chart.js index 70b038a..16bb9c9 100644 --- a/src/Chart.js +++ b/src/Chart.js @@ -1,6 +1,7 @@ import React, { PropTypes, Component } from 'react'; import { findDOMNode } from 'react-dom'; import { tree } from 'd3-state-visualizer'; +import toMutable from 'tomutable'; const wrapperStyle = { width: '100%', @@ -67,12 +68,12 @@ class Chart extends Component { componentDidMount() { const { select, state } = this.props; this.renderChart = tree(findDOMNode(this), this.props); - this.renderChart(select(state)); + this.renderChart(select(toMutable(state))); } componentWillReceiveProps(nextProps) { const { state, select } = nextProps; - this.renderChart(select(state)); + this.renderChart(select(toMutable(state))); } render() { From 74c9f73c0d0a7666fbb8babf9f51962c4b88f0e0 Mon Sep 17 00:00:00 2001 From: Cole Chamberlain Date: Wed, 3 Feb 2016 11:03:02 -0800 Subject: [PATCH 2/4] made mutable conversion opt in via hasImmutables prop and added invertTheme prop --- src/Chart.js | 9 ++------- src/ChartMonitor.js | 36 ++++++++++++++++++++++++++++-------- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/Chart.js b/src/Chart.js index 16bb9c9..c98e99b 100644 --- a/src/Chart.js +++ b/src/Chart.js @@ -1,7 +1,6 @@ import React, { PropTypes, Component } from 'react'; import { findDOMNode } from 'react-dom'; import { tree } from 'd3-state-visualizer'; -import toMutable from 'tomutable'; const wrapperStyle = { width: '100%', @@ -61,19 +60,15 @@ class Chart extends Component { }) }; - constructor(props) { - super(props); - } - componentDidMount() { const { select, state } = this.props; this.renderChart = tree(findDOMNode(this), this.props); - this.renderChart(select(toMutable(state))); + this.renderChart(select(state)); } componentWillReceiveProps(nextProps) { const { state, select } = nextProps; - this.renderChart(select(toMutable(state))); + this.renderChart(select(state)); } render() { diff --git a/src/ChartMonitor.js b/src/ChartMonitor.js index dbb23f6..a4b280b 100644 --- a/src/ChartMonitor.js +++ b/src/ChartMonitor.js @@ -3,6 +3,7 @@ import shouldPureComponentUpdate from 'react-pure-render/function'; import * as themes from 'redux-devtools-themes'; import { ActionCreators } from 'redux-devtools'; import deepmerge from 'deepmerge'; +import toMutable from 'tomutable'; import reducer from './reducers'; import Chart from './Chart'; @@ -19,6 +20,20 @@ const styles = { } }; +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; @@ -37,13 +52,17 @@ class ChartMonitor extends Component { theme: PropTypes.oneOfType([ PropTypes.object, PropTypes.string - ]) + ]), + invertTheme: PropTypes.bool, + hasImmutables: PropTypes.bool }; static defaultProps = { select: (state) => state, theme: 'nicinabox', - preserveScrollTop: true + preserveScrollTop: true, + invertTheme: false, + hasImmutables: false }; shouldComponentUpdate = shouldPureComponentUpdate; @@ -78,17 +97,17 @@ class ChartMonitor extends Component { } getTheme() { - let { theme } = this.props; + let { theme, invertTheme } = this.props; if (typeof theme !== 'string') { - return theme; + return invertTheme ? invertColors(theme) : theme; } if (typeof themes[theme] !== 'undefined') { - return themes[theme]; + return invertTheme ? invertColors(themes[theme]) : theme; } console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox'); - return themes.nicinabox; + return invertTheme ? invertColors(themes.nicinabox) : theme; } getChartStyle() { @@ -115,7 +134,7 @@ class ChartMonitor extends Component { } getChartOptions(props = this.props) { - const { computedStates } = props; + const { computedStates, hasImmutables } = props; const tooltipOptions = { disabled: false, @@ -129,8 +148,9 @@ class ChartMonitor extends Component { } }; + let defaultState = computedStates[computedStates.length - 1].state; const defaultOptions = { - state: computedStates[computedStates.length - 1].state, + state: hasImmutables ? toMutable(defaultState) : defaultState, isSorted: false, heightBetweenNodesCoeff: 1, widthBetweenNodesCoeff: 1.3, From 3d2c1cd08bffc26f4b5fe7d48b85e98723f3daf9 Mon Sep 17 00:00:00 2001 From: Cole Chamberlain Date: Wed, 3 Feb 2016 11:10:40 -0800 Subject: [PATCH 3/4] overlooked minor theme inversion bug --- src/ChartMonitor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ChartMonitor.js b/src/ChartMonitor.js index a4b280b..518643d 100644 --- a/src/ChartMonitor.js +++ b/src/ChartMonitor.js @@ -103,11 +103,11 @@ class ChartMonitor extends Component { } if (typeof themes[theme] !== 'undefined') { - return invertTheme ? invertColors(themes[theme]) : theme; + return invertTheme ? invertColors(themes[theme]) : themes[theme]; } console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox'); - return invertTheme ? invertColors(themes.nicinabox) : theme; + return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; } getChartStyle() { From 32819cf4069df22d8b8e457defeabfedfd65d52e Mon Sep 17 00:00:00 2001 From: Cole Chamberlain Date: Wed, 3 Feb 2016 11:23:04 -0800 Subject: [PATCH 4/4] updated usage --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 56321fd..9a57086 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,9 @@ Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-doc Name | Description ------------- | ------------- `theme` | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). +`invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false` `select` | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`. +`hasImmutables` | Boolean value that will walk state tree and convert immutable-js objects to normal objects so that they can be displayed. Optional. By default, set to `false` ### License