more chart

client/assets/scss/main.scss

@@ -25,7 +25,6 @@ h5,
 h6 {
     margin: 0;
     font-weight: 400;
-    line-height: 1em;
 }
 
 p {

client/js/components/sensors/SensorInfo.css

@@ -1,15 +0,0 @@
-.SensorInfo {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-wrap: wrap;
-  min-width: 0;
-  width: 80%; }
-  .SensorInfo .selector-row {
-    margin-left: auto;
-    margin-right: auto; }
-    .SensorInfo .selector-row select + select {
-      margin-left: 5px; }
-
-/*# sourceMappingURL=SensorInfo.css.map */

client/js/components/sensors/SensorInfo.css.map

@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AAAA,WAAW;EACP,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,CAAC;EACZ,KAAK,EAAE,GAAG;EACV,yBAAa;IACT,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,yCAAa;MACT,WAAW,EAAE,GAAG",
-"sources": ["SensorInfo.scss"],
-"names": [],
-"file": "SensorInfo.css"
-}

client/js/components/sensors/SensorInfo.js

@@ -3,8 +3,8 @@ import Loading from '../utils/Loading';
 import _chartjs from 'chart.js';
 import Chart from 'react-chartjs';
 import {
-    Options,
+    ChartOptions,
-    Data
+    DataTemplate
 }
 from './chartOptions';
 
@@ -62,8 +62,9 @@ export default class SensorInfo extends React.Component {
     }
 
     filterData(data) {
-        let temp = JSON.parse(JSON.stringify(Data));
+        let temp = JSON.parse(JSON.stringify(DataTemplate));
         
+        console.log(temp);
         for (let d of data) {
             let label = `${d.month}/${d.day}`;
             temp.labels.push(label);
@@ -77,11 +78,11 @@ export default class SensorInfo extends React.Component {
     render() {
         let sensor = this.props.sensor;
         let data = this.filterData(sensor.info);
-
         return (
             <div class="SensorInfo">
                 {sensor.fetchedUniqueDates ?
                     <div class="selector-row">
+                        <h2>{this.props.params.location}</h2>
                         <select onChange={(e) => {this.onChange(e, 'year')}}>
                             {sensor.uniqueDates.map(this.loadYearOptions)}
                         </select>
@@ -92,7 +93,9 @@ export default class SensorInfo extends React.Component {
                     </div>
                 : <Loading/>}
                 
-                {sensor.fetchedUniqueDates ? <LineChart data={data} options={Options}/> : null}
+                {sensor.fetchedUniqueDates && sensor.fetchedInfo
+                    ? <LineChart data={data} options={ChartOptions} redraw/>
+                    : null}
             </div>
         );
     }

client/js/components/sensors/SensorInfo.scss

@@ -6,10 +6,10 @@
     min-width: 0;
     width: 80%;
     .selector-row{
-        margin-left: auto;
+        display: flex;
-        margin-right: auto;
+        justify-content: center;
         margin-bottom: 1em;
-        select+select{
+        select{
             margin-left: 5px;
         }
     }

client/js/components/sensors/chartOptions.js

@@ -1,21 +1,21 @@
-export const Options = {
+export const ChartOptions = {
     responsive: true,
-    scaleOverride: true,
+    // scaleOverride: true,
-    scaleSteps: 20,
+    //scaleSteps: 20,
-    scaleStartValue: 0,
+    // scaleStartValue: 0,
-    scaleStepWidth: 5
+    //scaleStepWidth: 5
 };
 
-export let Data = {
+export let DataTemplate = {
     labels: [],
     datasets: [{
         label: "Max Temperature °F",
-        fillColor: "rgba(255,100,100,0)",
+        fillColor: "rgba(220,220,220,0.2)",
-        strokeColor: "rgba(255,100,100,1)",
+        strokeColor: "rgba(220,220,220,1)",
-        pointColor: "rgba(255,100,100,1)",
+        pointColor: "rgba(220,220,220,1)",
         pointStrokeColor: "#fff",
         pointHighlightFill: "#fff",
-        pointHighlightStroke: "rgba(255,100,100,1)",
+        pointHighlightStroke: "rgba(220,220,220,1)",
         data: []
     }, {
         label: "Min Temperature °F",