use c3 for stacked spline

client/dashboard/power/graph/graph.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Templates from 'config/templates';
 
 import House from './../../../models/house';
-import SplineStackChart from './../../../d3/line/spline_stack';
+import c3 from 'c3';
 
 class GraphComponent extends React.Component {
 
@@ -28,53 +28,38 @@ class GraphComponent extends React.Component {
 
   updateGraph(){
     var power_graph = this,
-      house = power_graph.house;
+      house = power_graph.house,
+      data = {
+          x: 'x',
+          json: house.power_data,
+          keys: {
+            x: 'time_to_date',
+            value: ['net_consumption', 'production']
+          },
+          type: 'area-spline',
+          groups: [['net_consumption', 'production']],
+          names: {
+            net_consumption: 'Net Consumption',
+            production: 'Production'
+          }
+        };
     if (power_graph.graph === undefined){
-      power_graph.graph = new SplineStackChart({
-        container: '#power_graph',
-        outer_width: 800,
-        outer_height: 200,
-        color: '#0404B4',
-        time_series: true,
-        domain_attr: 'x',
-        range_attr: 'y',
-        include_dots: true,
-        titleizeDatum: (series, d)=>{
-          return series.title + '<br/>' + Math.round(d.y) + ' W<br/>' + house.formatDate(d.power_graph_datum.data.time, 'MMM D [at] HH:mm');
+      power_graph.chart = c3.generate({
+        bindto: '#power_graph',
+        data: data,
+        axis: {
+          x: {
+            type: 'timeseries',
+            tick: { format: d3.time.format('%d %B %y') }
+          }
         }
       });
-      jQuery('#power_graph').tooltip({
-        selector: 'circle',
-        container: 'body',
-        html: true,
-        title: function(){
-          return this.__data__.title;
-        }
+    } else {
+      power_graph.chart.load({
+        unload: true,
+        data: data
       });
     }
-    var net_power_graph = {
-        title: 'Net Power Consumption',
-        values: house.power_data.map((power_graph_datum)=>{
-          return {
-            power_graph_datum: power_graph_datum,
-            x: power_graph_datum.time_to_date,
-            y: Math.max(0, power_graph_datum.data.consumption - power_graph_datum.data.production) }
-        })
-      },
-      savings = {
-        title: 'Power Production',
-        values: house.power_data.map((power_graph_datum)=>{
-          return {
-            power_graph_datum: power_graph_datum,
-            x: power_graph_datum.time_to_date,
-            y: power_graph_datum.data.production }
-        })
-      };
-    power_graph.graph.drawData({
-      title: power_graph.graph_title,
-      css_class: '',
-      series: [net_power_graph, savings]
-    });
   }
 
   render() {