From 937c82b579c3c0209015ba9d872c629d3232bc58 Mon Sep 17 00:00:00 2001
From: spereirag <sebastian.pereira@inria.cl>
Date: Thu, 20 Aug 2020 12:42:51 -0400
Subject: [PATCH 1/3] Add current wind speed value

---
 .../WeatherStation.container.jsx              |  3 ++-
 .../WeatherStation/WeatherStation.jsx         | 20 +++++++++++++++----
 .../WeatherStation/WeatherStation.module.css  |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/love/src/components/WeatherStation/WeatherStation.container.jsx b/love/src/components/WeatherStation/WeatherStation.container.jsx
index 9d0df19d0..a22d1ec2c 100644
--- a/love/src/components/WeatherStation/WeatherStation.container.jsx
+++ b/love/src/components/WeatherStation/WeatherStation.container.jsx
@@ -39,7 +39,8 @@ const WeatherStationContainer = ({ ...props }) => {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    weather: getStreamData(state, `telemetry-Environment-1-weather`),
+    weather: getStreamData(state, `telemetry-Environment-${ownProps.salindex}-weather`),
+    windSpeed: getStreamData(state, `telemetry-Environment-${ownProps.salindex}-windSpeed`),
   };
 };
 
diff --git a/love/src/components/WeatherStation/WeatherStation.jsx b/love/src/components/WeatherStation/WeatherStation.jsx
index 734e70f2b..66081895f 100644
--- a/love/src/components/WeatherStation/WeatherStation.jsx
+++ b/love/src/components/WeatherStation/WeatherStation.jsx
@@ -7,7 +7,10 @@ import styles from './WeatherStation.module.css';
 
 export default class WeatherStation extends Component {
   static propTypes = {
-    url: PropTypes.string,
+    /* Weather stream data */
+    weather: PropTypes.object,
+    /* Wind speed stream data */
+    windSpeed: PropTypes.object,
   };
 
   temperaturePlot = {
@@ -82,7 +85,6 @@ export default class WeatherStation extends Component {
     },
   };
 
-
   precipitationPlot = {
     Precipitation: {
       category: 'telemetry',
@@ -190,6 +192,8 @@ export default class WeatherStation extends Component {
     const currentTemperature = this.props.weather?.ambient_temp?.value;
     const currentHumidity = this.props.weather?.humidity?.value;
     const currentPressure = Math.round(this.props.weather?.pressure?.value * 100) / 100;
+    const currentWindSpeed = this.props.windSpeed?.value?.value;
+    const currentWindSpeedUnits = this.props.windSpeed?.value?.units;
     return (
       <div className={styles.container}>
         <div className={styles.section}>
@@ -197,16 +201,24 @@ export default class WeatherStation extends Component {
           <div className={styles.summary}>
             <div className={styles.summaryVariable}>
               <div className={styles.summaryLabel}>Temperature</div>
-              <div className={styles.summaryValue}>{currentTemperature ? `${currentTemperature}ºC` : '-'}</div>
+              <div className={styles.summaryValue}>{currentTemperature !== undefined ? `${currentTemperature}ºC` : '-'}</div>
             </div>
             <div className={styles.summaryVariable}>
               <div className={styles.summaryLabel}>Humidity</div>
-              <div className={styles.summaryValue}>{currentHumidity ? `${currentHumidity}%` : '-'}</div>
+              <div className={styles.summaryValue}>{currentHumidity !== undefined ? `${currentHumidity}%` : '-'}</div>
             </div>
             <div className={styles.summaryVariable}>
               <div className={styles.summaryLabel}>Pressure</div>
               <div className={styles.summaryValue}>{currentPressure ? `${currentPressure} pa` : '-'}</div>
             </div>
+            <div className={styles.summaryVariable}>
+              <div className={styles.summaryLabel}>Wind speed</div>
+              <div className={styles.summaryValue}>
+                {currentWindSpeed !== undefined
+                  ? `${currentWindSpeed} ${currentWindSpeedUnits !== 'unitless' ? currentWindSpeedUnits : ''}`
+                  : '-'}
+              </div>
+            </div>
           </div>
         </div>
 
diff --git a/love/src/components/WeatherStation/WeatherStation.module.css b/love/src/components/WeatherStation/WeatherStation.module.css
index 0b3586b6c..6f4368497 100644
--- a/love/src/components/WeatherStation/WeatherStation.module.css
+++ b/love/src/components/WeatherStation/WeatherStation.module.css
@@ -54,7 +54,7 @@
   border-radius: 0px;
   grid-column: 1 / span 2;
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr;
   justify-items: center;
   align-items: center;
 }

From ab76d32bc58de1203fa20b15c0973b13593ab690 Mon Sep 17 00:00:00 2001
From: spereirag <sebastian.pereira@inria.cl>
Date: Thu, 20 Aug 2020 13:06:42 -0400
Subject: [PATCH 2/3] Add option to change the position of the plot legend

---
 .../GeneralPurpose/Plot/Plot.container.jsx    |  8 +++++++
 .../components/GeneralPurpose/Plot/Plot.jsx   | 21 +++++++++++++++----
 .../GeneralPurpose/Plot/Plot.module.css       |  4 ++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/love/src/components/GeneralPurpose/Plot/Plot.container.jsx b/love/src/components/GeneralPurpose/Plot/Plot.container.jsx
index de0254ab6..1ee1f252e 100644
--- a/love/src/components/GeneralPurpose/Plot/Plot.container.jsx
+++ b/love/src/components/GeneralPurpose/Plot/Plot.container.jsx
@@ -89,6 +89,12 @@ export const schema = {
       default: '',
       isPrivate: false,
     },
+    legendPosition: {
+      type: 'string',
+      description: 'Whether to display the legend to the right of the plot or at the bottom. One of \'right\' or \'bottom\'',
+      default: 'right',
+      isPrivate: false,
+    }
   },
 };
 
@@ -102,6 +108,7 @@ const PlotContainer = function ({
   height,
   xAxisTitle,
   yAxisTitle,
+  legendPosition,
 }) {
   const [data, setData] = React.useState({});
 
@@ -232,6 +239,7 @@ const PlotContainer = function ({
     temporalXAxis: true,
     width: width,
     height: height,
+    legendPosition: legendPosition,
   };
   if (!width && !height && !containerNode) {
     return (
diff --git a/love/src/components/GeneralPurpose/Plot/Plot.jsx b/love/src/components/GeneralPurpose/Plot/Plot.jsx
index c5f48b09d..3a9749545 100644
--- a/love/src/components/GeneralPurpose/Plot/Plot.jsx
+++ b/love/src/components/GeneralPurpose/Plot/Plot.jsx
@@ -26,7 +26,18 @@ const defaultStyles = [
   },
 ];
 
-const Plot = ({ layers, legend, width, height, containerNode, xAxisTitle, yAxisTitle, units, marksStyles }) => {
+const Plot = ({
+  layers,
+  legend,
+  width,
+  height,
+  containerNode,
+  xAxisTitle,
+  yAxisTitle,
+  units,
+  marksStyles,
+  legendPosition = 'right',
+}) => {
   /** Fill marksStyles to satisfy the VegaTimeseriesPlot and VegaLegend APIs */
   const completedMarksStyles = React.useMemo(() => {
     return legend.map(({ name, markType }, index) => {
@@ -76,7 +87,7 @@ const Plot = ({ layers, legend, width, height, containerNode, xAxisTitle, yAxisT
 
   return (
     <div
-      className={styles.container}
+      className={[styles.container, legendPosition === 'bottom' ? styles.bottomLegend : ''].join(' ')}
       style={{
         width: `${containerSize.width}px`,
         height: `${containerSize.height}px`,
@@ -89,8 +100,8 @@ const Plot = ({ layers, legend, width, height, containerNode, xAxisTitle, yAxisT
         units={units}
         marksStyles={completedMarksStyles}
         temporalXAxis
-        width={containerSize.width - 150} // from the .autogrid grid-template-columns
-        height={containerSize.height}
+        width={legendPosition === 'right' ? containerSize.width - 150 : containerSize.width} // from the .autogrid grid-template-columns
+        height={legendPosition === 'bottom' ? containerSize.height - 25 : containerSize.height}
         className={styles.plot}
       />
       <VegaLegend listData={legend} marksStyles={completedMarksStyles} />
@@ -134,6 +145,8 @@ Plot.propTypes = {
       filled: PropTypes.bool,
     }),
   ),
+  /** Legend position: right or bottom */
+  legendPosition: PropTypes.oneOf(['right', 'bottom']),
 };
 
 export default Plot;
diff --git a/love/src/components/GeneralPurpose/Plot/Plot.module.css b/love/src/components/GeneralPurpose/Plot/Plot.module.css
index 21d41a501..d5908d41d 100644
--- a/love/src/components/GeneralPurpose/Plot/Plot.module.css
+++ b/love/src/components/GeneralPurpose/Plot/Plot.module.css
@@ -4,6 +4,10 @@
     overflow: hidden;
 }
 
+.bottomLegend {
+    flex-direction: column;
+}
+
 .plot {
     margin-right: 1rem;
 }
\ No newline at end of file

From 285ebb551053e6e2ff0f07fa14379889ce3eff79 Mon Sep 17 00:00:00 2001
From: spereirag <sebastian.pereira@inria.cl>
Date: Thu, 20 Aug 2020 13:06:53 -0400
Subject: [PATCH 3/3] Move legend below plots

---
 love/src/components/WeatherStation/WeatherStation.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/love/src/components/WeatherStation/WeatherStation.jsx b/love/src/components/WeatherStation/WeatherStation.jsx
index 66081895f..cb1dc5462 100644
--- a/love/src/components/WeatherStation/WeatherStation.jsx
+++ b/love/src/components/WeatherStation/WeatherStation.jsx
@@ -237,6 +237,7 @@ export default class WeatherStation extends Component {
               containerNode={this.temperaturePlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Temperature"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -248,6 +249,7 @@ export default class WeatherStation extends Component {
               containerNode={this.humidityPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Relative humidity"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -260,6 +262,7 @@ export default class WeatherStation extends Component {
               containerNode={this.precipitationPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Precipitation"
+              legendPosition="bottom"
             />
           </div>
 
@@ -269,6 +272,7 @@ export default class WeatherStation extends Component {
               containerNode={this.snowDepthPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Snow depth"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -281,6 +285,7 @@ export default class WeatherStation extends Component {
               containerNode={this.solarPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Solar radiation"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -293,6 +298,7 @@ export default class WeatherStation extends Component {
               containerNode={this.pressurePlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Air pressure"
+              legendPosition="bottom"
             />
           </div>
         </div>