osem_dash/app/assets/scripts/components/sensor-widget.js

'use strict';
import React from 'react';
import ChartLine from './charts/chart-line';
import { numDisplay, formatDate } from '../utils/format';

var SensorWidget = React.createClass({
  displayName: 'SensorWidget',

  propTypes: {
    fetching: React.PropTypes.bool,
    fetched: React.PropTypes.bool,
    className: React.PropTypes.string,
    title: React.PropTypes.string,
    lastReading: React.PropTypes.object,
    avgs: React.PropTypes.object,
    sums: React.PropTypes.object,
    plotData: React.PropTypes.array,
    axisLineVal: React.PropTypes.number,
    axisLineMax: React.PropTypes.number,
    axisLineMin: React.PropTypes.number,
    unit: React.PropTypes.string
  },

  render: function () {
    let {
      className,
      fetching, fetched,
      title,
      lastReading,
      avgs, sums,
      plotData,
      axisLineVal, axisLineMax, axisLineMin,
      unit } = this.props;

    if (!fetched && !fetching) {
      return null;
    }

    return (
      <article className={'card ' + className}>
        <header className='card__header'>
          <div className='card__headline'>
            <h1 className='card__title'>{title} {fetching ? '...' : null}</h1>
            <dl className='stats'>
              <dd className='stats__label'>Last update</dd>
              <dt className='stats__date'>{lastReading !== null ? formatDate(lastReading.timestep) : '--'}</dt>
              <dd className='stats__label'>Current temperature</dd>
              <dt className='stats__value'>{lastReading !== null ? numDisplay(lastReading.value, 1) : '--'}{unit}</dt>
            </dl>
          </div>
        </header>
        <div className='card__body'>
          <div className='infographic'>
            {plotData.length ? (
            <div className='line-chart-wrapper'>
              <ChartLine
                className='line-chart'
                axisLineVal={axisLineVal}
                axisLineMax={axisLineMax}
                axisLineMin={axisLineMin}
                dataUnitSuffix={unit}
                data={plotData} />
            </div>
            ) : null}
            {!plotData.length ? <p className='card__loading'>
              {fetching ? 'Lade Daten...' : 'Keine Daten verfügbar'}
            </p> : null}
          </div>
          <div className='metrics'>
            <ul className='metrics__list'>
              {sums ? (<div>
                <li><strong>{numDisplay(sums.today, 1, unit)}</strong> ∑ heute</li>
                <li><strong>{numDisplay(sums.yesterday, 1, unit)}</strong> ∑ gestern</li>
              </div>
              ) : null}

              {avgs ? (<div>
                <li><strong>{numDisplay(avgs.today, 1, unit)}</strong> ∅ heute</li>
                <li><strong>{numDisplay(avgs.yesterday, 1, unit)}</strong> ∅ gestern</li>
              </div>) : null}

              {!(avgs || sums) ? (<div>
                <li><strong>--</strong></li>
                <li><strong>--</strong></li>
              </div>) : null}
            </ul>
          </div>
        </div>
      </article>
    );
  }
});

module.exports = SensorWidget;