RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/romseguy/redux-devtools-chart-monitor below:

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

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)

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

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

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.

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. 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.

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4