# redux-devtools-chart-monitor > Chart monitor for Redux DevTools Latest version **1.7.2** (published 2020-09-07) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install redux-devtools-chart-monitor pnpm add redux-devtools-chart-monitor yarn add redux-devtools-chart-monitor bun add redux-devtools-chart-monitor ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.7.2 | | Published | 2020-09-07 | | First published | 2015-09-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 40.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 14366 | | Author | romseguy | | Maintainers | timdorr, romseguy, zalmoxisus, kachkaev, methuselah96 | | Keywords | redux, devtools, flux, react, chart | ## Links - npm: https://www.npmjs.com/package/redux-devtools-chart-monitor - Repository: https://github.com/reduxjs/redux-devtools - Issues: https://github.com/reduxjs/redux-devtools/issues - npm.io page: https://npm.io/package/redux-devtools-chart-monitor ## Dependencies (5) - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [react-pure-render](https://npm.io/package/react-pure-render.md) ^1.0.2 - [d3-state-visualizer](https://npm.io/package/d3-state-visualizer.md) ^1.3.4 - [redux-devtools-themes](https://npm.io/package/redux-devtools-themes.md) ^1.0.0 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.7.2 (latest) — 2020-09-07 - 1.7.1 — 2020-08-14 - 1.7.0 — 2018-01-09 - 1.6.1 — 2016-11-25 - 1.6.0 — 2016-11-21 - 1.5.1 — 2016-10-14 - 1.5.0 — 2016-10-14 - 1.4.2 — 2016-08-01 - 1.4.1 — 2016-04-16 - 1.4.0 — 2016-04-10 - 1.3.0 — 2016-04-10 - 1.2.2 — 2016-04-06 - 1.2.1 — 2016-03-30 - 1.2.0 — 2016-02-28 - 1.1.3 — 2016-01-12 - … 7 more at https://npm.io/package/redux-devtools-chart-monitor/versions ## README # Redux DevTools Chart Monitor A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools). Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/reduxjs/redux-devtools-chart-monitor). 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) ### Installation ``` yarn add --dev redux-devtools-chart-monitor ``` ### Usage You can use `ChartMonitor` as the only monitor in your app: ##### `containers/DevTools.js` ```js import React from 'react'; import { createDevTools } from 'redux-devtools'; import ChartMonitor from 'redux-devtools-chart-monitor'; export default createDevTools(); ``` Then you can render `` to any place inside app or even into a separate popup window. Alternatively, 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/reduxjs/redux-devtools) ### Features ### Props #### ChartMonitor props You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below: | Name | Description | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultIsVisible` | By default, set to `true`. | | `transitionDuration` | By default, set to `750`, in milliseconds. | | `heightBetweenNodesCoeff` | By default, set to `1`. | | `widthBetweenNodesCoeff` | By default, set to `1.3`. | | `isSorted` | By default, set to `false`. | | `style` | {
  width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)
  text: {
    colors: {
      'default': `theme.base0D`,
      hover: `theme.base06`
    }
  },
  node: {
    colors: {
      'default': `theme.base0B`,
      collapsed: `theme.base0B`,
      parent: `theme.base0E`
    },
    radius: 7
  }
} | | `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. | | `tooltipOptions` | {
  disabled: false,
  indentationSize: 2,
  style: {
    'background-color': `theme.base06`,
    'opacity': '0.7',
    'border-radius': '5px',
    'padding': '5px'
  }
}
[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). | #### Redux DevTools props | 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`. | ### License MIT --- _Source: https://npm.io/package/redux-devtools-chart-monitor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._