From 3265838c39524dd925e90abfd1e39b8da42b40e7 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 27 Jul 2017 01:54:34 +0200
Subject: [PATCH] Add signal legend. Add time format.

---
 package.json                       |  1 +
 src/components/widget-plot.js      | 16 +++++++++-------
 src/components/widget-plot/plot.js | 17 ++++++++++-------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index e71b043..308d8c3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "d3-scale": "^1.0.6",
     "d3-selection": "^1.1.0",
     "d3-shape": "^1.2.0",
+    "d3-time-format": "^2.0.5",
     "es6-promise": "^4.0.5",
     "flux": "^3.1.2",
     "gaugeJS": "^1.3.2",
diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js
index 0c3d641..fb89a07 100644
--- a/src/components/widget-plot.js
+++ b/src/components/widget-plot.js
@@ -22,32 +22,32 @@
 import React from 'react';
 
 import Plot from './widget-plot/plot';
-//import PlotLegend from './widget-plot/plot-legend';
+import PlotLegend from './widget-plot/plot-legend';
 
 class WidgetPlot extends React.Component {
   render() {
     const simulator = this.props.widget.simulator;
     const simulation = this.props.simulation;
-    //let legendSignals = [];
+    let legendSignals = [];
     let simulatorData = [];
 
     // Proceed if a simulation with models and a simulator are available
     if (simulator && simulation && simulation.models.length > 0) {
 
-      //const model = simulation.models.find( model => model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator );
-      //const chosenSignals = this.props.widget.signals;
+      const model = simulation.models.find( model => model.simulator.node === simulator.node && model.simulator.simulator === simulator.simulator );
+      const chosenSignals = this.props.widget.signals;
 
       simulatorData = this.props.data[simulator.node][simulator.simulator].values.filter((values, index) => (
         this.props.widget.signals.findIndex(value => value === index) !== -1
       ));
 
       // Query the signals that will be displayed in the legend
-      /*legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
+      legendSignals = model.mapping.reduce( (accum, model_signal, signal_index) => {
         if (chosenSignals.includes(signal_index)) {
           accum.push({ index: signal_index, name: model_signal.name });
         }
         return accum;
-      }, []);*/
+      }, []);
     }
 
     return (
@@ -57,11 +57,13 @@ class WidgetPlot extends React.Component {
         <div className="widget-plot">
           <Plot
             data={simulatorData}
-            height={this.props.widget.height - 80}
+            height={this.props.widget.height - 100}
             width={this.props.widget.width - 20}
             time={this.props.widget.time}
           />
         </div>
+
+        <PlotLegend signals={legendSignals} />
       </div>
     );
   }
diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js
index 7749f48..8af08f4 100644
--- a/src/components/widget-plot/plot.js
+++ b/src/components/widget-plot/plot.js
@@ -8,11 +8,12 @@
  **********************************************************************************/
 
 import React from 'react';
-import { scaleLinear, scaleTime } from 'd3-scale';
+import { scaleLinear, scaleTime, scaleOrdinal, schemeCategory10 } from 'd3-scale';
 import { extent } from 'd3-array';
 import { line } from 'd3-shape';
 import { axisBottom, axisLeft } from  'd3-axis';
 import { select } from 'd3-selection';
+import { timeFormat } from 'd3-time-format';
 
 const leftMargin = 30;
 const bottomMargin = 20;
@@ -59,16 +60,18 @@ class Plot extends React.Component {
       return values;
     });
     
+    // create scale functions for both axes
     const xScale = scaleTime().domain(xRange).range([leftMargin, nextProps.width]);
     const yScale = scaleLinear().domain(yRange).range([nextProps.height, bottomMargin]);
-
-    const xAxis = axisBottom().scale(xScale).ticks(5);
+    
+    const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
     const yAxis = axisLeft().scale(yScale).ticks(5);
 
-    const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
-
     // generate paths from data
-    const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} />);
+    const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y));
+    const lineColor = scaleOrdinal(schemeCategory10);
+
+    const lines = data.map((values, index) => <path d={sparkLine(values)} key={index} style={{ fill: 'none', stroke: lineColor(index) }} />);
 
     this.setState({ data: lines, xAxis, yAxis });
   }
@@ -81,7 +84,7 @@ class Plot extends React.Component {
         <g ref={node => select(node).call(this.state.xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
         <g ref={node => select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
 
-        <g style={{ fill: 'none', stroke: 'blue' }}>
+        <g>
           {this.state.data}
         </g>
       </svg>