myems / myems-web

import React, { Component } from 'react';

import { Line } from 'react-chartjs-2';

import range from 'lodash/range';

import { Card, CardHeader, CardBody, ListGroup, ListGroupItem } from 'reactstrap';

import { rgbaColor } from '../../../helpers/utils';

import { withTranslation } from 'react-i18next';

const energyTrendLog = [

  11183,

  12116,

  13176,

  14172,

  15166,

  16161,

  17164,

  18159,

  19172,

  20173,

  21184,

  22163,

  23099,

  24173,

  25183,

  26167,

  27160,

  28183,

  29163,

  30176,

  31172,

  32166,

  33173,

  34188,

  35175

];

const dividerBorder = '1px solid rgba(255, 255, 255, 0.15)';

const listItemBorderColor = 'rgba(255, 255, 255, 0.05)';

const chartOptions = {

  legend: { display: false },

  scales: {

    yAxes: [

      {

        display: true,

        stacked: false

      }

    ],

    xAxes: [

      {

        stacked: false,

        ticks: { display: false },

        categoryPercentage: 1.0,

        gridLines: {

          color: rgbaColor('#fff', 0.1),

          display: true

        }

      }

    ]

  }

};

class RealtimeChart extends Component {

  refreshInterval;

  refreshTimeout;

  state = {

    energyTrendLog,

    currentEnergyValue: energyTrendLog[energyTrendLog.length - 1],

    chartData: {

      labels: range(1, 26),

      datasets: [

        {

          label: 'Users',

          backgroundColor: rgbaColor('#fff', 0.3),

          //data: []

        }

      ]

    },

    pointList: [{'id': 1231, 'name': '电流a (A)', 'value': 18.098},

        {'id': 1232, 'name': '电流b (A)', 'value': 15.001},

        {'id': 1233, 'name': '电流c (A)', 'value': 16.257},

        {'id': 1234, 'name': '有功瞬时功率 a (kW)', 'value': 25.98},

        {'id': 1235, 'name': '有功瞬时功率 b (kW)', 'value': 21.76},

        {'id': 1236, 'name': '有功瞬时功率 c (kW)', 'value': 29.12},

      ],

  };

  componentWillUnmount() {

    clearInterval(this.refreshInterval);

    clearTimeout(this.refreshTimeout);

  }

  componentDidMount() {

    this.refreshInterval = setInterval(() => {

      const currentEnergyValue = this.state.currentEnergyValue + Math.floor(Math.random() * (120 - 60) + 60);

      const energyTrendLog = [...this.state.energyTrendLog];

      energyTrendLog.shift();

      this.setState({ energyTrendLog }, () => {

        this.refreshTimeout = setTimeout(() => {

          const energyTrendLog = [...this.state.energyTrendLog];

          energyTrendLog.push(currentEnergyValue);

          this.setState({ energyTrendLog, currentEnergyValue });

        }, 500);

      });

    }, 1 * 1000);

  }

  render() {

    const { t } = this.props;

    const chartData = {

      ...this.state.chartData,

      datasets: [

        {

          ...this.state.chartData.datasets[0],

          data: this.state.energyTrendLog

        }

      ]

    };

    return (

      <Card className="h-100 bg-gradient">

        <CardHeader className="bg-transparent">

          <h5 className="text-white">{this.props.title}</h5>

          <div className="real-time-user display-1 font-weight-normal text-white">{this.state.currentEnergyValue}</div>

        </CardHeader>

        <CardBody className="text-white fs--1">

          <p className="pb-2" style={{ borderBottom: dividerBorder }}>

          {t('Realtime Value of Energy Value Point UNIT', {'UNIT': 'kWh'})}

          </p>

          <Line data={chartData} options={chartOptions} width={10} height={4} />

          <ListGroup flush className="mt-4">

            <ListGroupItem

              className="bg-transparent d-flex justify-content-between px-0 py-1 font-weight-semi-bold border-top-0"

              style={{ borderColor: listItemBorderColor }}

            >

              <p className="mb-0">{t('Related Parameters')}</p>

              <p className="mb-0">{t('Realtime Value')}</p>

            </ListGroupItem>

            {this.state.pointList.map(pointItem => (

              <ListGroupItem key={pointItem['id']}

                className="bg-transparent d-flex justify-content-between px-0 py-1"

                style={{ borderColor: listItemBorderColor }}

              >

                <p className="mb-0">{pointItem['name']}</p>

                <p className="mb-0">{pointItem['value']}</p>

              </ListGroupItem>

            ))}

          </ListGroup>

        </CardBody>

      </Card>

    );

  }

}

export default  withTranslation()(RealtimeChart);