|
|
|
'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;
|