A React Component to display PieChart/ Column Chart or Table based on props from parent component!

React_Chart_Component.jsx

import React from 'react';
import ReactChartkick, { ColumnChart, PieChart } from 'react-chartkick'; // ReactChartkick library for charts
import Chart from 'chart.js';
import NoData from '../NoData'; // When the component don't have any data we create a commom component

ReactChartkick.addAdapter(Chart);

class AnalyticsChart extends React.Component {
  constructor(props) {
    super();
    this.state = {
      viewChartFor: 'sessions'
    }
    this.onSelectChange = this.onSelectChange.bind(this);
  }

  // Initialize selectpicker when the component is loaded into DOM
  componentDidMount() {
    $('.selectpicker').selectpicker();
  }

  mapData(data, column) {
    let returnValue = [];
    if (data != null) {
      data.slice(0, 10).map((item) => {
        returnValue.push([item.name, this.roundNumber(item[column])])
      });
    }
    if (returnValue.every(this.checkAllZero)) {
      returnValue = [];
    }
    return returnValue;
  }

  // Use React Controlled component
  onSelectChange(e) {
    this.setState({ viewChartFor: e.target.value });
  }

  checkAvailability(data, currentData) {
    return data != null && data.length > 0 && currentData.length > 0;
  }

  checkAllZero(currentValue) {
    return currentValue[1] == 0;
  }

  setLabelForChart(value) {
    return dashboard.analyticsPage.setLabelForChart(this.state.viewChartFor);
  }

  render() {
    let displayColumnChart = this.props.displayType == 'columnChart'; // when column chart is selected for display
    let displayPieChart = this.props.displayType == 'pieChart'; // when pie chart is selected for display
    let sourceMediumData = this.mapData(this.props.sourceMediumData, this.state.viewChartFor);
    let chartLabel = this.setLabelForChart(this.state.viewChartFor);

    return (
      <div>
        <select onChange={this.onSelectChange} className='selectpicker pull-right'>
          <option key='sessions' value='sessions' defaultValue='sessions'>Sessions</option>
          <option key='pages_sessions' value='pages_sessions'>Pages per Sessions</option>
          <option key='conversion_completion' value='conversion_completion'>Conversion Completion</option>
          <option key='conversion_rate' value='conversion_rate'>Conversion Rate</option>
        </select>
        <br />
        <h3 className='text-info'>Source/Medium</h3>
        {this.checkAvailability(this.props.sourceMediumData, sourceMediumData) ?
          [
            (displayColumnChart &&
              <ColumnChart key='col-sourcemedium' data={sourceMediumData} height='600px' label={chartLabel} />),
            (displayPieChart &&
              <PieChart key='pie-sourcemedium' data={sourceMediumData} height='600px' label={chartLabel} />)
          ]
          : <NoData />
        }
      </div>
    );
  }
}

export default AnalyticsChart;