@redux-devtools/chart-monitor/lib/esm/Chart.js

Chart monitor for Redux DevTools

import React, { Component, createRef } from 'react';
import { tree } from 'd3-state-visualizer';
const wrapperStyle = {
  width: '100%',
  height: '100%'
};
class Chart extends Component {
  divRef = (() => /*#__PURE__*/createRef())();
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type

  componentDidMount() {
    const {
      select,
      state,
      defaultIsVisible
    } = this.props;
    this.renderChart = tree(this.divRef.current, this.props);
    if (defaultIsVisible) {
      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
      this.renderChart(select(state));
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const {
      state,
      select,
      monitorState
    } = nextProps;
    if (monitorState.isVisible !== false) {
      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
      this.renderChart(select(state));
    }
  }
  render() {
    return /*#__PURE__*/React.createElement("div", {
      style: wrapperStyle,
      ref: this.divRef
    });
  }
}
export default Chart;