house, power, energy data generators, savers

client/dashboard/power_time_series.component.js

@@ -0,0 +1,51 @@
+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,
+            },
+          },
+        },
+      }
+    `,
+  },
+});