52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import Relay from 'react-relay';
|
|
|
|
class PowerTimeSeries extends React.Component {
|
|
|
|
get timeframes(){
|
|
return [
|
|
{display: "Today", value: 'today'},
|
|
{display: "1 week", value: 'week'},
|
|
{display: "1 month", value: 'month'},
|
|
{display: "6 months", value: 'half_year'},
|
|
{display: "1 year", value: 'year'}
|
|
];
|
|
}
|
|
|
|
render() {
|
|
var power_time_series = this;
|
|
return (
|
|
<div>
|
|
<h1>Power Time Series</h1>
|
|
<ul>
|
|
{power_time_series.props.viewer.widgets.edges.map(edge =>
|
|
<li key={edge.node.id}>{edge.node.name} (ID: {edge.node.id})</li>
|
|
)}
|
|
</ul>
|
|
<div class="spk-power-time-series-timeframes">
|
|
{power_time_series.timeframes.map(timeframe =>
|
|
<div data-value="{timeframe.value}" class="spk-power-time-series-timeframe">{timeframe.display}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Relay.createContainer(PowerTimeSeries, {
|
|
fragments: {
|
|
viewer: () => Relay.QL`
|
|
fragment on User {
|
|
widgets(first: 10) {
|
|
edges {
|
|
node {
|
|
id,
|
|
name,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
},
|
|
});
|