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

Comments
  • 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
  • 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
  • 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
  • Update all romseguy/ urls to reduxjs/

    Update all romseguy/ urls to reduxjs/

    Small house keeping PR to update CHANGELOG, README, and package.json urls to reduxjs/. GitHub does a good job and auto-redirects, but this breaks some automated tooling I use that doesn't follow redirects 🤷‍♂️.

    I did a find replace on all instances of github.com/romseguy/redux-devtools-chart-monitor in the codebase.

    Please let me know if I missed anything or need to contribute a CHANGELOG entry.

    opened by dlukeomalley 1
  • Support React 15.5.0

    Support React 15.5.0

    Fixes the warning about accessing PropTypes via the main React package, which is deprecated. Related to https://github.com/gaearon/redux-devtools/issues/359

    opened by zalmoxisus 1
  • Show the current state when time travelling

    Show the current state when time travelling

    This little change takes currentStateIndex into account, so the state on the monitor will correspond to store.getState(), which can be different to the last state in the history.

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

    opened by zalmoxisus 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
  • 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
  • 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
  • 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
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 240 Jul 25, 2022
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 312 Jun 25, 2022
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 13.3k Jan 2, 2023
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 402 Nov 10, 2022
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 13.3k Jan 1, 2023
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 Dec 31, 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 12 Aug 14, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 36 Dec 29, 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 11 Jul 10, 2022
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 3, 2023
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 30, 2022
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 May 24, 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 2 Jul 21, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 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 22.5k Jan 1, 2023
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 Dec 30, 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 8.9k Dec 31, 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 17.5k Dec 31, 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.7k Jan 1, 2023