Setup proxy, change scaling, and add chart zoom

Display/angular.json

@@ -68,7 +68,8 @@
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "options": {
-                        "browserTarget": "Display:build"
+                        "browserTarget": "Display:build",
+                        "proxyConfig": "proxy.conf.json"
                     },
                     "configurations": {
                         "production": {

Display/proxy.conf.json

@@ -0,0 +1,16 @@
+{
+    "/api/weather": {
+        "target": "http://172.23.10.3",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true
+    },
+    "/api/hub": {
+        "target": "ws://172.23.10.3:80",
+        "ws": true
+    },
+    "/socket.io": {
+        "target": "http://172.23.10.30:80",
+        "ws": true
+    }
+}

Display/src/app/app.module.ts

@@ -20,7 +20,7 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
 import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
 
-const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options: {} };
+const config: SocketIoConfig = { url: '/api/laundry', options: {} };
 
 @NgModule({
     declarations: [

Display/src/app/components/weather/charts/weather-charts.component.ts

@@ -114,7 +114,7 @@ export class WeatherChartsComponent implements OnInit {
         const startString = start.toISOString();
         const endString = end.toISOString();
 
-        const request = this.httpClient.get<WeatherReadingGrouped[]>(`http://172.23.10.3/api/weather/readings/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`);
+        const request = this.httpClient.get<WeatherReadingGrouped[]>(`/api/weather/readings/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`);
 
         request.subscribe(data => {
             const seriesData: Array<SeriesLineOptions> = [];
@@ -127,16 +127,17 @@ export class WeatherChartsComponent implements OnInit {
             data.forEach(dataElement => {
                 const date = Date.parse(dataElement.bucket);
                 seriesData[0].data.push([date, dataElement.averagePressureTemperature]);
-                seriesData[1].data.push([date, dataElement.averagePressure / 33.864]);
+                seriesData[1].data.push([date, dataElement.averagePressure / 33.864 / 100]);
                 seriesData[2].data.push([date, dataElement.averageHumidity]);
-                seriesData[3].data.push([date, dataElement.averageLightLevel]);
+                seriesData[3].data.push([date, dataElement.averageLightLevel * 100]);
             });
 
             const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
 
             this.chart = new Chart({
                 chart: {
-                    type: 'line'
+                    type: 'line',
+                    zoomType: "x"
                 },
                 title: {
                     text: title

Display/src/app/components/weather/current/weather-current.component.html

@@ -50,7 +50,7 @@
                     Light
                 </td>
                 <td>
-                    {{ latestReading.LightLevel.toFixed(2) }}
+                    {{ ((latestReading.LightLevel / latestReading.BatteryLevel) * 100).toFixed(2) }}%
                 </td>
             </tr>
         </table>

Display/src/app/services/weather/weather.service.ts

@@ -12,7 +12,7 @@ export class WeatherService {
 
     constructor() {
         this.connection = new HubConnectionBuilder()
-            .withUrl('http://172.23.10.3:80/api/hub/weather')
+            .withUrl('/api/hub/weather')
             .build();
 
         this.connection.on('LatestReading', (message: string) => {