react.js

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import Utils from '../../utils';
import Config from '../../config';

const brandPrimary =  '#20a8d8';
const brandSuccess =  '#4dbd74';
const brandInfo =     '#63c2de';
const brandDanger =   '#f86c6b';

let group = null,
    chartOptions = {
      maintainAspectRatio: false,
      legend: {
        display: true
      },
      scales: {
        xAxes: [{
          type: 'time',
          gridLines: {
            drawOnChartArea: false,
          },
        }],
        yAxes: [{
          ticks: {},
        }]
      },
      elements: {
        point: {
          radius: 4,
          hitRadius: 10,
          hoverRadius: 4,
          hoverBorderWidth: 3,
        },
      },
      labelsFilter: function(val) {
        return 'foo';
      }
    },
  data = null,
  chart = '';

class Dashboard extends Component {

  componentWillMount() {
    this.fetchData();
  }

  render() {
    return (
      <div className="animated fadeIn">
        {chart}
      </div>
    )
  }

  fetchData(date) {
    if (!date) {
      date = new Date();
      date.setHours(date.getHours() - 1);
    }

    fetch(`${Config.API_URL}/group/${this.props.params.id}/values/${date.getTime()}`)
      .then(response => response.json())
      .then(response => {
        group = response;
        switch (group.units) {
          case 'ms':
            chartOptions.scales.yAxes[0].ticks.userCallback = function(value) {
              return Utils.msToString(value);
            };
            break;
          default:
            chartOptions.scales.yAxes[0].ticks.userCallback = null;
            break;
        }
        this.buildChart();
      });
  }

  buildChart() {
    let data = {
      labels: [],
      datasets: [
        {
          label: 'Min',
          backgroundColor: convertHex(brandInfo,10),
          borderColor: brandInfo,
          pointHoverBackgroundColor: '#fff',
          borderWidth: 2,
          data: []
        },
        {
          label: 'Max',
          backgroundColor: 'transparent',
          borderColor: brandSuccess,
          pointHoverBackgroundColor: '#fff',
          borderWidth: 2,
          data: []
        },
        {
          label: 'Average',
          backgroundColor: 'transparent',
          borderColor: brandDanger,
          pointHoverBackgroundColor: '#fff',
          borderWidth: 1,
          borderDash: [8, 5],
          data: []
        }
      ]
    };

    for (let i = 0; i < group.values.length; i++) {
      data.labels.push(group.values[i].time);
      data.datasets[0].data.push(group.values[i].min);
      data.datasets[1].data.push(group.values[i].max);
      data.datasets[2].data.push(group.values[i].average);
    }

    if (group.values.length > 200) {
      chartOptions.elements.point.radius = 0;
    } else if (group.values.length > 100) {
      chartOptions.elements.point.radius = 1;
    } else if (group.values.length > 50) {
      chartOptions.elements.point.radius = 2;
    } else {
      chartOptions.elements.point.radius = 4;
    }

    chart = (
      <div className="card">
        <div className="card-block">
          <div className="row">
            <div className="col-sm-5">
              <h4 className="card-title mb-0">{group.name}</h4>
            </div>
            <div className="col-sm-7 hidden-sm-down">
              <button type="button" className="btn btn-primary float-right"><i className="icon-cloud-download"></i></button>
              <div className="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
                <div className="btn-group mr-1" data-toggle="buttons" aria-label="First group">
                  <label className="btn btn-outline-secondary">
                    <input type="radio" name="options" id="toggle-2-days" onClick={() => {
                      let date = new Date();
                      date.setDate(date.getDate() - 2);
                      this.fetchData(date);
                    }}/> 2 Days
                  </label>
                  <label className="btn btn-outline-secondary">
                    <input type="radio" name="options" id="toggle-1-day" onClick={() => {
                      let date = new Date();
                      date.setDate(date.getDate() - 1);
                      this.fetchData(date);
                    }}/> 1 Day
                  </label>
                  <label className="btn btn-outline-secondary">
                    <input type="radio" name="options" id="toggle-1-day" onClick={() => {
                      let date = new Date();
                      date.setHours(date.getHours() - 6);
                      this.fetchData(date);
                    }}/> 6hr
                  </label>
                  <label className="btn btn-outline-secondary">
                    <input type="radio" name="options" id="toggle-1-day" onClick={() => {
                      let date = new Date();
                      date.setHours(date.getHours() - 2);
                      this.fetchData(date);
                    }}/> 2hr
                  </label>
                  <label className="btn btn-outline-secondary">
                    <input type="radio" name="options" id="toggle-1-hour" onClick={() => this.fetchData()}/> 1hr
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
            <Line data={data} options={chartOptions} height={300}/>
          </div>
        </div>
        <div className="card-footer">
          {group.description}
        </div>
      </div>
    );

    this.setState({
      lastUpdate: new Date(),
    });
  }
}

function convertHex(hex,opacity) {
  hex = hex.replace('#','');
  var r = parseInt(hex.substring(0,2), 16);
  var g = parseInt(hex.substring(2,4), 16);
  var b = parseInt(hex.substring(4,6), 16);

  var result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
  return result;
}

export default Dashboard;