A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Overview

Redux DevTools Chart Monitor

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests.

A chart monitor for Redux DevTools.
It shows a real-time view of the store aka the current state of the app.

🚀 Now with immutable-js support.

Demo (Source)

Chart Monitor

Installation

npm install --save-dev redux-devtools-chart-monitor

Usage

You can use ChartMonitor as the only monitor in your app:

containers/DevTools.js
import React from 'react';
import { createDevTools } from 'redux-devtools';
import ChartMonitor from 'redux-devtools-chart-monitor';

export default createDevTools(
  <ChartMonitor />
);

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Alternatively, you can use it together with DockMonitor to make it dockable.
Consult the DockMonitor README for details of this approach.

Read how to start using Redux DevTools.

Features

Props

ChartMonitor props

You can read the React component propTypes 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
  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.

Redux DevTools props

Name Description
theme Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
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

Issues
  • added immutable-js support via toMutable function

    added immutable-js support via toMutable function

    Love this dev-tool, IMHO it is the most useful one yet.

    Only problem for me is that I'm converting my state tree to use immutable-js and as soon as it hits a node in state tree that is immutable, the chart will not show the contents of the node or any of its children, instead it just says "error": "not-serializable". It also throws a bunch of warnings in the console about using size instead of length property on immutable objects is deprecated and will throw in future releases of immutable-js. I wrote a simple recursive function to walk the state tree, check if any of the objects are immutable, and if so convert them to plain objects. If it finds no immutables in state it will simply return equivalent simple state.

    The toMutable function can be found here

    What I see with the vanilla library when I try to inspect an immutable object:

    image

    What I see with the toMutable support added:

    image

    Given immutable-js is very commonly used, I'm submitting this as a pull request. If you are not looking to support immutable, you may disregard and I'll keep the alternate version published at https://www.npmjs.com/package/redux-devtools-chart-monitor-immutable

    Again, thanks for the awesome work!

    opened by cchamberlain 16
  • TypeError: Cannot read property 'object' of undefined

    TypeError: Cannot read property 'object' of undefined

    I just followed the instructions, pretty straight forward, but I'm getting these error:

    TypeError: Cannot read property 'object' of undefined
    ./node_modules/redux-devtools-chart-monitor/lib/Chart.js
    
      62 | }(_react.Component);
      63 | 
      64 | Chart.propTypes = {
    > 65 |   state: _react.PropTypes.object,
      66 |   rootKeyName: _react.PropTypes.string,
      67 |   pushMethod: _react.PropTypes.oneOf(['push', 'unshift']),
      68 |   tree: _react.PropTypes.shape({
    

    I'm getting these error even before use the component in my Monitor component, I'm only importing it import ChartMonitor from 'redux-devtools-chart-monitor'

    I am using the version 1.6.1

    opened by ghost 5
  • ChartMonitor doesn't work because monitorState is undefined

    ChartMonitor doesn't work because monitorState is undefined

    2016-06-26 11 39 28

    I used DockMonitor to make it dockable.

    const DevTools = createDevTools(
      <DockMonitor toggleVisibilityKey='ctrl-h'
                   changePositionKey='ctrl-q'
                   changeMonitorKey='ctrl-m'
                   defaultIsVisible={ false }>
        <LogMonitor />
        <SliderMonitor />
        <DiffMonitor />
        <ChartMonitor />
      </DockMonitor>
    );
    

    My DockMonitor version is 1.1.1, ChartMonitor version is 1.4.1. So how to fix it?

    opened by hronro 2
  • D3-related issues when using with the latest deps (__oldData__)

    D3-related issues when using with the latest deps (__oldData__)

    Hi Romain,

    I added redux-devtools-chart-monitor to a new project recently and noticed some rendering issues, which I did not see before. Here's the summary:

    issue with latest deps

    (VM6084:208 Uncaught TypeError: Cannot read property '__oldData__' of undefined appears on first render and each time I click on a node)

    To make sure it's not something about my project, I replicated the issue in your redux-store-visualizer demo after updating all deps (see https://github.com/romseguy/redux-store-visualizer/pull/4). It's still unclear to me how to fix it, so I'm submitting an issue instead of a PR. Missing edges between the nodes might give a clue.

    opened by kachkaev 2
  • Clickable Nodes w/ JSONTree Enhancement

    Clickable Nodes w/ JSONTree Enhancement

    I'm hooking into the TreeChart's onClickText prop and using JSONTree to render my object to the right....(using your ChartMonitor in a seperate window).

    Might be interesting to incorporate something like this as it sort of becomes a standalone dev tool (I've been using this on it's own all day and not even rendering the normal LogMonitor). Though hooking into the LogMonitor would probably be even cooler : )

    statetree

    Anyhow, thanks for this!

    opened by subpopular 1
  • circular structures

    circular structures

    Some complex data structures can't be serialized to be pretty-printed in the tooltip, replace json-pretty with our own function depending on answer over here https://github.com/michielbdejong/json-pretty/issues/3

    opened by romseguy 1
  • Add support for react >= 15.0.0

    Add support for react >= 15.0.0

    This will get rid of the peer dependency nag error when using react 15 on npm v3 and will allow npm v2 users to continue using.

    opened by cchamberlain 1
  • Support not having monitor's reducers included for Redux DevTools Extension

    Support not having monitor's reducers included for Redux DevTools Extension

    So, it will work also when monitorState.isVisible is undefined.

    Related to https://github.com/zalmoxisus/redux-devtools-extension/issues/92.

    opened by zalmoxisus 1
  • State differences calculated and optionally displayed in chart.

    State differences calculated and optionally displayed in chart.

    Below is the same description I left for the pull request to d3-state-visualizer that goes hand in hand with this one .... https://github.com/reduxjs/d3-state-visualizer/pull/17

    This is in tandem with a PR I will be making for redux-devtools-chart-monitor. In redux-devtools-chart-monitor I added an option 'stateDiff', by default off, which will calculate state differences between the current and the last active state (even if jumping around in timeline). I use two packages for this, Immutable for the quick state cloning and deep-diff for the object comparison.

    This is provided to d3-state-visualizer, where there are options to customize the color of the node and text for mutated properties. By default it is red, but users will have to provide the stateDiff flag to activate it. I didn't do too much performance testing on it, but I doubt it has much of an impact compared to the expensive graphing animations. I also updated the README for both repositories to reflect the changes. I have found that highlighting property changes between states in this manner along with assigning low opacity to empty values makes the chart much more useful and informative. Below is an animated GIF to demonstrate this.

    chartdiff

    opened by njhoffman 0
  • Nodes are not reused properly when adding/removing them

    Nodes are not reused properly when adding/removing them

    The issue is likely to be upstream (https://github.com/romseguy/d3-state-visualizer/issues/12), but I still decided to report it here as well until the dependency is upgraded. For those who're wondering if this is what they see too, here is a quick gif of the bug:

    anim

    opened by kachkaev 0
  • Use a noop reducer

    Use a noop reducer

    I see the reducer is handling TOGGLE_VISIBILITY, but it is not dispatched from anywhere. Is it an orphaned code that should be removed?

    opened by zalmoxisus 2
  • not work when set props defaultIsVisible={ true } with <DockMonitor>

    not work when set props defaultIsVisible={ true } with

    I'm using the , and this is my code.

      <DockMonitor toggleVisibilityKey='ctrl-h'
                   changePositionKey='ctrl-q'
                   changeMonitorKey='ctrl-m'
                   defaultIsVisible={ false }>
        <LogMonitor />
        <SliderMonitor />
        <DiffMonitor />
        <ChartMonitor />
      </DockMonitor>
    

    It will work when defaultIsVisible is true

    opened by hronro 1
  • Keep the position of the collapsed / expanded node

    Keep the position of the collapsed / expanded node

    This is somewhat related to #5 and #10. When a node contains too many children, clicking on it to expand or collapse causes a substantial shift of a tree. You have zoom out and search for the node you've just been looking at, which takes quite a lot of time. A solution could be in calculating x and y of a just-clicked node in two modes (when its children are hidden and visible) and then adjusting the global coordinate system accordingly.

    opened by kachkaev 0
  • Too many options causes extreme lag

    Too many options causes extreme lag

    Is there a way to set an initial "expandedNodes" prop to false so that it won't try and render the entire state tree? We sometimes load large json structures that we don't care to look at yet the monitor will try and render, causing it to slow down to a crawl and making the tool unusable :(

    opened by zekedroid 3
  • Persist collapsed nodes state

    Persist collapsed nodes state

    Steps to reproduce:

    • Collapse a node
    • Make a state change
    • Node isn't collapsed anymore
    opened by romseguy 0
Releases(1.6.1)
Owner
Redux
Redux is a predictable state container for JavaScript apps.
Redux
Another Redux DevTools Monitor

redux-devtools-inspector This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull

Alexander Kuznetsov 241 Aug 10, 2021
The default monitor for Redux DevTools with a tree view

Redux DevTools Log Monitor The default monitor for Redux DevTools with a tree view. It shows a log of states and actions, and lets you change their hi

Dan Abramov 310 Sep 17, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.3k Jan 13, 2022
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Dan Abramov 400 Dec 27, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.3k Jan 16, 2022
Redux DevTools remotely.

Remote Redux DevTools Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps. Installation npm install --save-dev re

Mihail Diordiev 1.8k Jan 13, 2022
React-query Devtools for swr

react-query devtools for swr under development Live Demo Installation yarn add @rendinjast/swr-devtools # or npm i @rendinjast/swr-devtools Usage impo

Erfan Khadivar 4 Jan 16, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 18, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 16, 2021
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 Jan 5, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 3 Jan 5, 2022
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.7k Jan 18, 2022
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Jan 15, 2022
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 7k Jan 22, 2022
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Redux 16.9k Jan 14, 2022
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.6k Jan 22, 2022
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.4k Jan 17, 2022
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 22k Jan 14, 2022