diff --git a/README.md b/README.md index da5c9d4..9a57086 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) @@ -102,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 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..c98e99b 100644 --- a/src/Chart.js +++ b/src/Chart.js @@ -60,10 +60,6 @@ class Chart extends Component { }) }; - constructor(props) { - super(props); - } - componentDidMount() { const { select, state } = this.props; this.renderChart = tree(findDOMNode(this), this.props); diff --git a/src/ChartMonitor.js b/src/ChartMonitor.js index dbb23f6..518643d 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]) : themes[theme]; } console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox'); - return themes.nicinabox; + return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; } 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,