Fixed a few bugs with the interface and the charts

Author: bottas

src/components/SensorView.tsx

@@ -3,13 +3,7 @@ import { Line } from 'react-chartjs-2';
 
 import '../styles/SensorView.scss'
 import { fetchMoisture } from '../deviceAPI';
-
-var timeInMs = Date.now(); //(ms) since 1 de janeiro de 1970 00:00:00 UTC
-const weekInMs = 518400000; //7 days 604800000 gives 8 results, using 6 days;
-var deviceID = ""
-const agregation = "day"
-const beginDate = timeInMs - weekInMs;
-const endDate = timeInMs;
+import calendar from '../resources/calendar.svg';
 
 function SensorView(props: any) {
     type ExpectedResponse = {
@@ -25,7 +19,12 @@ function SensorView(props: any) {
         y: number,
     }
 
-    deviceID = window.location.pathname.substring(15);
+    var deviceID = window.location.pathname.substring(15);
+    var timeInMs = Date.now(); //(ms) since 1 de janeiro de 1970 00:00:00 UTC
+    const weekInMs = 518400000; //7 days 604800000 gives 8 results, using 6 days;
+    const agregation = "day"
+    const beginDate = timeInMs - weekInMs;
+    const endDate = timeInMs;
 
     const [response, setResponse] = useState<Array<ExpectedResponse> | undefined>();
     const [isVisible, setVisible] = useState([true, true, true, true]);
@@ -108,7 +107,6 @@ function SensorView(props: any) {
     }
 
     var sumdata = {
-        labels: ["Time Frame", "Dia", "Dia", "Dia"], //x-axis 
         datasets: [{
             fill: false,
             label: "Total",
@@ -224,30 +222,23 @@ function SensorView(props: any) {
         }
     }
 
-    const options_sum = {
-
-        legend: {
-            display: false,
-        }
-    }
-
-
     if (response !== undefined) {
         return (
             <div className="sensorview">
                 <p className="title">Humidade do solo</p>
+                <img src={calendar} className="date-picker-icon" alt="date-icon" />
                 <Legend />
                 <Line
                     data={data}
                     options={options}
-                    width={960}
-                    height={400}
+                    width={1560}
+                    height={380}
                 />
                 <Line
                     data={sumdata}
-                    options={options_sum}
-                    width={960}
-                    height={400}
+                    options={options}
+                    width={1560}
+                    height={380}
                 />
             </div>
         );

src/resources/calendar.svg

@@ -80,8 +80,7 @@ body {
 
   .App-header {
     background-color: #EEEEEE;
-    min-height: 100vh;
-    display: flex;
+    display: contents;
     flex-direction: column;
     align-items: center;
     justify-content: center;

src/styles/AppStyle.scss

@@ -5,7 +5,6 @@
   background: rgb(255, 255, 255);
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14);
   border-radius: 2px;
-  margin: auto;
   margin-top: 16px;
 }
 

src/styles/Area.scss

@@ -4,9 +4,8 @@
     background: rgb(255, 255, 255);
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14);
     border-radius: 2px;
-    margin: auto;
-        margin-top: 16px;
-        margin-left: unset;
+    margin-top: 16px;
+    margin-left: unset;
     text-align: unset;
     font-size:20px;
 

src/styles/AreaForm.scss

@@ -3,13 +3,20 @@
   background-color: white;
 
   .title {
+    float: left;
+    margin-top: 10px;
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     padding-left: 15px;
-    display: flex;
     color: #00c4b3;
   }
+
+  .date-picker-icon {
+    float: right;
+    margin-top: 10px;
+    padding-right: 15px;
+  }
 }
 
 .legend-text {
@@ -35,10 +42,10 @@
 
 ul {
   list-style-type: none;
+  margin-top: 50px;
   margin-bottom: 15px;
   padding: 0;
   overflow: hidden;
-  //background-color: #333;
 }
 
 li {