Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement