Dynamic sizes of charts about react-d3-components HOT 24 OPEN

import {ResponsiveBarChart
ResponsiveLineChart,
ResponsiveAreaChart,
ResponsiveScatterPlot,
ResponsivePieChart} from './ResponsiveChart';

// the <div> tag is used to position and wrap the chart.
<div style={myPositionStyle}>
    <ResponsiveLineChart data={myData} />
</div>

'use strict';

import React from 'react';
import D3 from 'react-d3-components';

let {
    BarChart,
    LineChart,
    AreaChart,
    ScatterPlot,
    PieChart
} = D3;

let createClass = function (chartType) {
    return React.createClass({
        getDefaultProps () {
            return {
                 margin: {top: 25, bottom: 25, left: 25, right: 25}
            };
        },

        getInitialState () {
            return {
                size: {w: 0, h: 0}
            };
        },

        componentDidMount () {
            this.fitToParentSize();
        },

        componentWillReceiveProps () {
            this.fitToParentSize();
        },

        fitToParentSize () {
            let elem = this.getDOMNode();
            let w = elem.parentNode.offsetWidth;
            let h = elem.parentNode.offsetHeight;
            let currentSize = this.state.size;

            if (w !== currentSize.w || h !== currentSize.h) {
                this.setState({
                    size: {
                        w: w,
                        h: h
                    }
                });
            }
        },

        getChartClass () {
            let Component;

            switch (chartType) {
                case 'BarChart':
                    Component = BarChart;
                    break;
                case 'LineChart':
                    Component = LineChart;
                    break;
                case 'AreaChart':
                    Component = AreaChart;
                    break;
                case 'ScatterPlot':
                    Component = ScatterPlot;
                    break;
                case 'PieChart':
                    Component = PieChart;
                    break;
                default:
                    console.error('Invalid Chart Type name.');
                    break;
            }

            return Component;
        },

        render () {
            // Component name has to start with CAPITAL
            let Component = this.getChartClass();

            let {width, height, margin, ...others} = this.props;

            width = this.state.size.w || 100;
            height = this.state.size.h || 100;

            return (
                <Component
                    width = {width}
                    height = {height}
                    margin = {margin}
                    {...others}
                />
            );
        }
    });
};

let ResponsiveBarChart = createClass('BarChart');
let ResponsiveLineChart = createClass('LineChart');
let ResponsiveAreaChart = createClass('AreaChart');
let ResponsiveScatterPlot = createClass('ScatterPlot');
let ResponsivePieChart = createClass('PieChart');

export {
    ResponsiveBarChart,
    ResponsiveLineChart,
    ResponsiveAreaChart,
    ResponsiveScatterPlot,
    ResponsivePieChart
};

export default {
    ResponsiveBarChart: ResponsiveBarChart,
    ResponsiveLineChart: ResponsiveLineChart,
    ResponsiveAreaChart: ResponsiveAreaChart,
    ResponsiveScatterPlot: ResponsiveScatterPlot,
    ResponsivePieChart: ResponsivePieChart
};

import React from 'react';
import ReactDOM from 'react-dom';
import D3 from 'react-d3-components';

const {
  BarChart,
  LineChart,
  AreaChart,
  ScatterPlot,
  PieChart,
} = D3;

const createClass = (chartType) => {
  class Chart extends React.Component {
    constructor() {
      super();
      this.state = { size: { w: 0, h: 0 } };
    }

    fitToParentSize() {
      const elem = ReactDOM.findDOMNode(this);
      const w = elem.parentNode.offsetWidth;
      const h = elem.parentNode.offsetHeight;
      const currentSize = this.state.size;
      if (w !== currentSize.w || h !== currentSize.h) {
        this.setState({
          size: { w, h },
        });
      }
    }

    getChartClass() {
      let Component;
      switch (chartType) {
        case 'BarChart':
          Component = BarChart;
          break;
        case 'LineChart':
          Component = LineChart;
          break;
        case 'AreaChart':
          Component = AreaChart;
          break;
        case 'ScatterPlot':
          Component = ScatterPlot;
          break;
        case 'PieChart':
          Component = PieChart;
          break;
        default:
          console.error('Invalid Chart Type name.');
          break;
      }
      return Component;
    }

    componentDidMount() {
      window.addEventListener('resize', ::this.fitToParentSize);
      this.fitToParentSize();
    }

    componentWillReceiveProps() {
      this.fitToParentSize();
    }

    componentWillUnmount() {
      window.removeEventListener('resize', ::this.fitToParentSize);
    }

    render() {
      let Component = this.getChartClass();
      let { width, height, margin, ...others } = this.props;

      width = this.state.size.w || 100;
      height = this.state.size.h || 100;

      return (
        <Component
          width = {width}
          height = {height}
          margin = {margin}
          {...others}
        />
      );
    }
  }
  Chart.defaultProps = {
    margin: {
      top: 50,
      bottom: 50,
      left: 50,
      right: 50,
    },
  };
  Chart.propTypes = {
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    margin: React.PropTypes.object,
  };
  return Chart;
};

const ResponsiveBarChart = createClass('BarChart');
const ResponsiveLineChart = createClass('LineChart');
const ResponsiveAreaChart = createClass('AreaChart');
const ResponsiveScatterPlot = createClass('ScatterPlot');
const ResponsivePieChart = createClass('PieChart');

export {
  ResponsiveBarChart,
  ResponsiveLineChart,
  ResponsiveAreaChart,
  ResponsiveScatterPlot,
  ResponsivePieChart,
};

export default {
  ResponsiveBarChart,
  ResponsiveLineChart,
  ResponsiveAreaChart,
  ResponsiveScatterPlot,
  ResponsivePieChart,
};

let AreaGraph = React.createClass({
    mixins: [React.addons.PureRenderMixin],

    getInitialState() {
        return {
            parentWidth: 0
        }
    },

    getDefaultProps() {
        return {
            width: '100%',
            height: 300,
            margin: { left: -1, top: 10, bottom: 0, right: 1 }
        }
    },

    handleResize(e) {
        let elem = this.getDOMNode();
        let width = elem.offsetWidth;

        this.setState({
            parentWidth: width
        });
    },

    componentDidMount() {
        if(this.props.width === '100%') {
            window.addEventListener('resize', this.handleResize);
        }
        this.handleResize();
    },

    componentWillUnmount() {
        if(this.props.width === '100%') {
            window.removeEventListener('resize', this.handleResize);
        }
    },

    render() {
        let { width, height, margin, xScale, yScale, xAxis, ...props } = this.props;

        // Determine the right graph width to use if it's set to be responsive
        if(width === '100%') {
            width = this.state.parentWidth || 400;
        }

        // Set scale ranges
        xScale && xScale.range([0, width - (margin.left + margin.right)]);
        yScale && yScale.range([height - (margin.top + margin.bottom), 0]);

        return (
            <div className={"usage__cpu__graph "+props.className}>
                <AreaChart
                    ref="chart"
                    width={width}
                    height={height}
                    margin={margin} 
                    xScale={xScale}
                    yScale={yScale}
                    xAxis={xAxis}
                    {...props} 
                />
            </div>
        );
    }
})