PlotlyRenderer

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';
import Plotly from 'plotly.js';

import style from 'PVWStyle/ReactRenderers/PlotlyRenderer.mcss';

import sizeHelper from '../../../Common/Misc/SizeHelper';

export default class PlotlyRenderer extends React.Component {
  constructor(props) {
    super(props);

    // Bind callback
    this.updateDimensions = this.updateDimensions.bind(this);
  }

  componentWillMount() {
    this.dataSubscription = this.props.chartBuilder.onDataReady((data) => {
      const container = this.chartRenderer;
      if (!container) {
        return;
      }
      if (
        !data.forceNewPlot &&
        container.data &&
        container.data.length > 0 &&
        container.data[0].type === data.traces[0].type
      ) {
        container.data = data.traces;
        Plotly.redraw(container);
      } else {
        const layout = {
          title: data.title,
          showlegend: true,
          legend: {
            // Somehow positions legend in lower right of div
            x: 100,
            y: 0,
          },
        };
        const config = {
          showLink: false,
          scrollZoom: true,
          displayModeBar: false,
        };

        Plotly.newPlot(
          container,
          data.traces,
          data.layout || layout,
          data.config || config
        );
      }

      if (data.hover && data.hover.enable === true) {
        Plotly.Fx.hover(container, data.hover.hoverList);
      }
    });
  }

  componentDidMount() {
    // Listen to window resize
    this.sizeSubscription = sizeHelper.onSizeChangeForElement(
      this.chartRenderer,
      this.updateDimensions
    );

    // Make sure we monitor window size if it is not already the case
    sizeHelper.startListening();

    this.updateDimensions();
  }

  componentDidUpdate(nextProps, nextState) {
    this.updateDimensions();
  }

  componentWillUnmount() {
    // Remove window listener
    if (this.sizeSubscription) {
      this.sizeSubscription.unsubscribe();
      this.sizeSubscription = null;
    }

    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
      this.dataSubscription = null;
    }
  }

  updateDimensions() {
    const elt = this.chartRenderer;
    if (elt.layout) {
      Plotly.relayout(elt, elt.layout);
    }
  }

  render() {
    return (
      <div
        className={style.chartContainer}
        ref={(c) => {
          this.chartRenderer = c;
        }}
      />
    );
  }
}

PlotlyRenderer.propTypes = {
  chartBuilder: PropTypes.object.isRequired,
};

PlotlyRenderer.defaultProps = {};