Merge pull request #248 from lsst-ts/weather-tweaks

Weather tweaks
lsst-ts · Aug 20, 2020 · 7b39ab9 · 7b39ab9
2 parents 61fdb53 + 285ebb5
commit 7b39ab9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 10 deletions.
diff --git 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
@@ -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
@@ -4,6 +4,10 @@
     overflow: hidden;
 }
 
+.bottomLegend {
+    flex-direction: column;
+}
+
 .plot {
     margin-right: 1rem;
 }
diff --git 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
@@ -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,23 +192,33 @@ 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}>
           <div className={styles.sectionTitle}>Current values</div>
           <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>
 
@@ -225,6 +237,7 @@ export default class WeatherStation extends Component {
               containerNode={this.temperaturePlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Temperature"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -236,6 +249,7 @@ export default class WeatherStation extends Component {
               containerNode={this.humidityPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Relative humidity"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -248,6 +262,7 @@ export default class WeatherStation extends Component {
               containerNode={this.precipitationPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Precipitation"
+              legendPosition="bottom"
             />
           </div>
 
@@ -257,6 +272,7 @@ export default class WeatherStation extends Component {
               containerNode={this.snowDepthPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Snow depth"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -269,6 +285,7 @@ export default class WeatherStation extends Component {
               containerNode={this.solarPlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Solar radiation"
+              legendPosition="bottom"
             />
           </div>
         </div>
@@ -281,6 +298,7 @@ export default class WeatherStation extends Component {
               containerNode={this.pressurePlotRef?.current}
               xAxisTitle="Time"
               yAxisTitle="Air pressure"
+              legendPosition="bottom"
             />
           </div>
         </div>

diff --git 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;
 }