More UI work and start preparing for deployment

2026-01-13 17:22:54 -05:00 · 2024-03-12 01:25:41 +00:00
parent 21f5522950
commit 3087059e75
15 changed files with 442 additions and 123 deletions
--- a/WebDisplay/Dockerfile
+++ b/WebDisplay/Dockerfile
@@ -0,0 +1,14 @@
+# build stage
+FROM node:lts-alpine as build-stage
+RUN corepack enable && corepack prepare pnpm@latest --activate
+WORKDIR /app
+COPY package*.json ./
+RUN pnpm install
+COPY . .
+RUN pnpm run build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/WebDisplay/components.d.ts
+++ b/WebDisplay/components.d.ts
@@ -12,7 +12,6 @@ declare module 'vue' {
    CurrentPower: typeof import('./src/components/CurrentPower.vue')['default']
    CurrentWeather: typeof import('./src/components/CurrentWeather.vue')['default']
    DashboardItem: typeof import('./src/components/DashboardItem.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
    Indoor: typeof import('./src/components/Indoor.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/WebDisplay/deploy/azure-pipelines.yml
+++ b/WebDisplay/deploy/azure-pipelines.yml
@@ -0,0 +1,68 @@
+name: $(Rev:r)
+
+pr: none
+
+trigger:
+  batch: 'true'
+  branches:
+    include:
+    - master
+  paths:
+    include:
+    - WebDisplay
+
+stages:
+- stage: Build
+  jobs:
+  - job: Build
+    pool:
+      vmImage: 'ubuntu-latest'
+    steps:
+    - task: Docker@0
+      displayName: 'Build an image'
+      inputs:
+        containerregistrytype: 'Container Registry'
+        dockerRegistryConnection: 'Docker Hub'
+        dockerFile: 'WebDisplay/Dockerfile'
+        imageName: 'ckaczor/home-monitor-web-display:$(Build.BuildNumber)'
+        includeLatestTag: true
+    - task: Docker@0
+      displayName: 'Push an image'
+      inputs:
+        containerregistrytype: 'Container Registry'
+        dockerRegistryConnection: 'Docker Hub'
+        action: 'Push an image'
+        imageName: 'ckaczor/home-monitor-web-display:$(Build.BuildNumber)'
+        includeLatestTag: true
+    - task: Bash@3
+      inputs:
+        targetType: 'inline'
+        script: 'sed -i s/#BUILD_BUILDNUMBER#/$BUILD_BUILDNUMBER/ WebDisplay/deploy/manifest.yaml'
+    - task: PublishBuildArtifacts@1
+      inputs:
+        PathtoPublish: 'WebDisplay/deploy/manifest.yaml'
+        ArtifactName: 'Manifest'
+        publishLocation: 'Container'
+
+- stage: Deploy
+  jobs:
+  - job: Deploy
+    pool:
+      vmImage: 'ubuntu-latest'
+    steps:
+    - task: DownloadBuildArtifacts@0
+      inputs:
+        artifactName: 'Manifest'
+        buildType: 'current'
+        downloadType: 'single'
+        downloadPath: '$(System.ArtifactsDirectory)'
+    - task: Kubernetes@1
+      inputs:
+        connectionType: 'Kubernetes Service Connection'
+        kubernetesServiceEndpoint: 'Kubernetes'
+        namespace: 'home-monitor'
+        command: 'apply'
+        useConfigurationFile: true
+        configuration: '$(System.ArtifactsDirectory)/Manifest/manifest.yaml'
+        secretType: 'dockerRegistry'
+        containerRegistryType: 'Container Registry'
--- a/WebDisplay/deploy/manifest.yaml
+++ b/WebDisplay/deploy/manifest.yaml
@@ -0,0 +1,76 @@
+---
+kind: Deployment
+apiVersion: apps/v1
+metadata:
+  name: display
+  namespace: home-monitor
+  labels:
+    app: display
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: display
+  template:
+    metadata:
+      labels:
+        app: display
+    spec:
+      containers:
+      - name: display
+        image: ckaczor/home-monitor-web-display:#BUILD_BUILDNUMBER#
+        terminationMessagePath: "/dev/termination-log"
+        terminationMessagePolicy: File
+        imagePullPolicy: Always
+        securityContext:
+          privileged: true
+      restartPolicy: Always
+      terminationGracePeriodSeconds: 30
+      dnsPolicy: ClusterFirst
+      nodeSelector:
+        kubernetes.io/hostname: kubernetes
+      schedulerName: default-scheduler
+---
+kind: Service
+apiVersion: v1
+metadata:
+  name: display
+spec:
+  ports:
+  - name: client
+    port: 80
+  selector:
+    app: display
+  type: ClusterIP
+---
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  annotations:
+    kubernetes.io/ingress.class: traefik
+  creationTimestamp: null
+  name: display
+  namespace: home-monitor
+spec:
+  routes:
+  - kind: Rule
+    match: PathPrefix(`/`)
+    middlewares:
+    - name: display
+      namespace: home-monitor
+    services:
+    - kind: Service
+      name: display
+      namespace: home-monitor
+      port: 80
+---
+apiVersion: traefik.containo.us/v1alpha1
+kind: Middleware
+metadata:
+  creationTimestamp: null
+  name: display
+  namespace: home-monitor
+spec:
+  stripPrefix:
+    prefixes:
+    - /
--- a/WebDisplay/package.json
+++ b/WebDisplay/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "WebDisplay",
-    "version": "0.0.0",
+    "name": "web-display",
+    "version": "1.0.0",
    "scripts": {
        "dev": "cross-env NODE_OPTIONS='--no-warnings' vite",
        "build": "vue-tsc --noEmit && vite build",
--- a/WebDisplay/src/components/CurrentWeather.vue
+++ b/WebDisplay/src/components/CurrentWeather.vue
@@ -45,7 +45,7 @@
                        <td>
                            <div
                                v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
-                                className="weather-current-header">
+                                className="weather-current-header ml-8">
                                Feels like
                            </div>
                        </td>
--- a/WebDisplay/src/components/DashboardItem.vue
+++ b/WebDisplay/src/components/DashboardItem.vue
@@ -14,15 +14,9 @@
 <style scoped>
    .dashboard-item-header {
        padding: 2px 10px;
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
    }

    .dashboard-item-content {
        background-color: white;
-        border: 1px solid lightgray;
-        border-top: 0px;
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
    }
 </style>
--- a/WebDisplay/src/components/ValueChart.vue
+++ b/WebDisplay/src/components/ValueChart.vue
@@ -16,7 +16,9 @@
        yAxisMaximum: { type: Number, required: false, default: undefined },
        tickAmount: { type: Number, required: false, default: undefined },
        lineSize: { type: Number, required: false, default: 2 },
-        markerSize: { type: Number, required: false, default: 0 }
+        markerSize: { type: Number, required: false, default: 0 },
+        yAxisLabelFormatter: { type: Function, required: false, default: undefined },
+        yAxisValueFormatter: { type: Function, required: false, default: undefined }
    });

    var chartOptions: ApexOptions = {
@@ -48,6 +50,10 @@
            },
            y: {
                formatter: (value) => {
+                    if (props.yAxisValueFormatter) {
+                        return props.yAxisValueFormatter(value);
+                    }
+
                    return `${value.toFixed(props.valueDecimalPoints)}${props.unit}`;
                }
            }
@@ -69,6 +75,10 @@
        yaxis: {
            labels: {
                formatter: (value) => {
+                    if (props.yAxisLabelFormatter) {
+                        return props.yAxisLabelFormatter(value);
+                    }
+
                    return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
                }
            },
@@ -94,7 +104,7 @@
 <template>
    <div class="chart">
        <v-container
-            v-if="!props.ready"
+            v-show="!props.ready"
            class="fill-height loading">
            <v-responsive class="align-center text-center fill-height">
                <v-progress-circular
@@ -105,7 +115,6 @@
            </v-responsive>
        </v-container>
        <apexchart
-            v-else
            width="100%"
            height="250"
            :type="props.type"
@@ -118,9 +127,17 @@
    .loading {
        width: 100%;
        min-height: 250px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 99;
+        background-color: #eeeeee;
    }

    .chart {
+        position: relative;
        border: 1px solid lightgray;
        background-color: white;
        padding-top: 10px;
--- a/WebDisplay/src/models/weather/wind-history-grouped.ts
+++ b/WebDisplay/src/models/weather/wind-history-grouped.ts
@@ -1,7 +1,9 @@
+import WindDirectionNumber from './wind-direction-number';
+
 export default interface WindHistoryGrouped {
    bucket: string;
    minimumSpeed: number;
    averageSpeed: number;
    maximumSpeed: number;
-    averageDirection: number;
+    averageDirection: WindDirectionNumber;
 }
--- a/WebDisplay/src/pages/index.vue
+++ b/WebDisplay/src/pages/index.vue
@@ -4,30 +4,34 @@
 </script>

 <template>
-    <v-container fluid class="container">
-        <v-row dense align="start">
-            <v-col cols="3">
-                <CurrentWeather></CurrentWeather>
-            </v-col>
-            <v-col cols="3">
-                <Almanac></Almanac>
-            </v-col>
-            <v-col cols="2">
-                <CurrentPower></CurrentPower>
-            </v-col>
-            <v-col cols="2">
-                <CurrentLaundryStatus></CurrentLaundryStatus>
-            </v-col>
-            <v-col cols="4">
-                <WeatherSummary></WeatherSummary>
-            </v-col>
-            <v-col cols="2">
-                <Indoor title="Upstairs" deviceName="main"></Indoor>
-            </v-col>
-            <v-col cols="2">
-                <Indoor title="Downstairs" deviceName="basement"></Indoor>
-            </v-col>
-        </v-row>
+    <v-container
+        fluid
+        class="container">
+        <v-card class="current-weather">
+            <CurrentWeather></CurrentWeather>
+        </v-card>
+        <v-card class="almanac">
+            <Almanac></Almanac>
+        </v-card>
+        <v-card class="current-power">
+            <CurrentPower></CurrentPower>
+        </v-card>
+        <v-card class="current-laundry-status">
+            <CurrentLaundryStatus></CurrentLaundryStatus>
+        </v-card>
+        <v-card class="weather-summary">
+            <WeatherSummary></WeatherSummary>
+        </v-card>
+        <v-card class="upstairs">
+            <Indoor
+                title="Upstairs"
+                deviceName="main"></Indoor>
+        </v-card>
+        <v-card class="downstairs">
+            <Indoor
+                title="Downstairs"
+                deviceName="basement"></Indoor>
+        </v-card>
    </v-container>
 </template>

@@ -36,4 +40,66 @@
        height: 100%;
        background-color: #fafafa;
    }
+
+    @media (min-width: 700px) {
+        .container {
+            display: grid;
+            grid-template-columns: repeat(5, max-content);
+            grid-template-rows: repeat(5, max-content);
+            gap: 15px 15px;
+            grid-auto-flow: row;
+            grid-template-areas:
+                'current-weather current-weather almanac almanac current-power'
+                'current-weather current-weather almanac almanac current-laundry-status'
+                'weather-summary weather-summary weather-summary upstairs downstairs'
+                'weather-summary weather-summary weather-summary . .'
+                '. . . . .';
+        }
+    }
+
+    @media (max-width: 700px) {
+        .container {
+            padding: 7px;
+            display: grid;
+            grid-template-columns: repeat(1, max-content);
+            grid-template-rows: repeat(7, max-content);
+            gap: 10px 0px;
+            grid-template-areas:
+                'current-weather'
+                'almanac'
+                'current-power'
+                'current-laundry-status'
+                'weather-summary'
+                'upstairs'
+                'downstairs';
+        }
+    }
+
+    .current-weather {
+        grid-area: current-weather;
+    }
+
+    .almanac {
+        grid-area: almanac;
+    }
+
+    .current-power {
+        grid-area: current-power;
+    }
+
+    .current-laundry-status {
+        grid-area: current-laundry-status;
+    }
+
+    .weather-summary {
+        grid-area: weather-summary;
+    }
+
+    .upstairs {
+        grid-area: upstairs;
+    }
+
+    .downstairs {
+        grid-area: downstairs;
+    }
 </style>
--- a/WebDisplay/src/pages/indoor.vue
+++ b/WebDisplay/src/pages/indoor.vue
@@ -16,43 +16,43 @@
    const start = ref(subHours(end.value, 24));
    const timeSpan = ref(TimeSpan.Last24Hours);

-    const categories: number[] = [];
+    const categories = ref<number[]>([]);

-    const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
-    const basementTemperatureSeries = { name: 'Downstairs', data: [] as number[] };
+    const mainTemperatureSeries = ref({ name: 'Upstairs', data: [] as number[] });
+    const basementTemperatureSeries = ref({ name: 'Downstairs', data: [] as number[] });

-    const mainHumiditySeries = { name: 'Upstairs', data: [] as number[] };
-    const basementHumiditySeries = { name: 'Downstairs', data: [] as number[] };
+    const mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[] });
+    const basementHumiditySeries = ref({ name: 'Downstairs', data: [] as number[] });

-    const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
-    const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
+    const mainPressureSeries = ref({ name: 'Upstairs', data: [] as number[] });
+    const basementPressureSeries = ref({ name: 'Downstairs', data: [] as number[] });

    const load = () => {
        ready.value = false;

-        categories.length = 0;
-
-        mainTemperatureSeries.data.length = 0;
-        basementTemperatureSeries.data.length = 0;
-
-        mainHumiditySeries.data.length = 0;
-        basementHumiditySeries.data.length = 0;
-
-        mainPressureSeries.data.length = 0;
-        basementPressureSeries.data.length = 0;
-
        indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            categories.value.length = 0;
+
+            mainTemperatureSeries.value.data.length = 0;
+            basementTemperatureSeries.value.data.length = 0;
+
+            mainHumiditySeries.value.data.length = 0;
+            basementHumiditySeries.value.data.length = 0;
+
+            mainPressureSeries.value.data.length = 0;
+            basementPressureSeries.value.data.length = 0;
+
            groupedReadingsList.forEach((groupedReadings) => {
                if (groupedReadings.name === 'main') {
-                    categories.push(new Date(groupedReadings.bucket).getTime());
+                    categories.value.push(new Date(groupedReadings.bucket).getTime());

-                    mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
-                    mainHumiditySeries.data.push(groupedReadings.averageHumidity);
-                    mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
+                    mainTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature));
+                    mainHumiditySeries.value.data.push(groupedReadings.averageHumidity);
+                    mainPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
                } else if (groupedReadings.name === 'basement') {
-                    basementTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
-                    basementHumiditySeries.data.push(groupedReadings.averageHumidity);
-                    basementPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
+                    basementTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature));
+                    basementHumiditySeries.value.data.push(groupedReadings.averageHumidity);
+                    basementPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
                }
            });

--- a/WebDisplay/src/pages/outdoor.vue
+++ b/WebDisplay/src/pages/outdoor.vue
@@ -4,28 +4,28 @@
    import { useWeatherStore } from '@/stores/weatherStore';
    import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
    import ValueChart from '../components/ValueChart.vue';
-    import WindDirectionNumber from '@/models/weather/wind-direction-number';
    import TimeRange from '@/components/TimeRange.vue';
    import TimeSpan from '@/models/time-span';
+    import { ConvertDegreesToShortLabel, ConvertWindDirectionToDegrees } from '@/windConverter';

    const weatherStore = useWeatherStore();

    const readingsReady = ref(false);
    const windReady = ref(false);

-    const readingsCategories: number[] = [];
-    const windCategories: number[] = [];
+    const readingsCategories = ref<number[]>([]);
+    const windCategories = ref<number[]>([]);

-    const temperatureSeries = { name: 'Average Temperature', data: [] as number[] };
-    const humiditySeries = { name: 'Average Humidity', data: [] as number[] };
-    const pressureSeries = { name: 'Average Pressure', data: [] as number[] };
-    const lightSeries = { name: 'Average Light', data: [] as number[] };
-    const rainSeries = { name: 'Total Rain', data: [] as number[] };
+    const temperatureSeries = ref({ name: 'Average Temperature', data: [] as number[] });
+    const humiditySeries = ref({ name: 'Average Humidity', data: [] as number[] });
+    const pressureSeries = ref({ name: 'Average Pressure', data: [] as number[] });
+    const lightSeries = ref({ name: 'Average Light', data: [] as number[] });
+    const rainSeries = ref({ name: 'Total Rain', data: [] as number[] });

-    const windMinimumSeries = { name: 'Minimum', data: [] as number[] };
-    const windAverageSeries = { name: 'Average', data: [] as number[] };
-    const windMaximumSeries = { name: 'Maximum', data: [] as number[] };
-    const windDirectionSeries = { name: 'Average Direction', data: [] as number[] };
+    const windMinimumSeries = ref({ name: 'Minimum', data: [] as number[] });
+    const windAverageSeries = ref({ name: 'Average', data: [] as number[] });
+    const windMaximumSeries = ref({ name: 'Maximum', data: [] as number[] });
+    const windDirectionSeries = ref({ name: 'Average Direction', data: [] as number[] });

    const end = ref(new Date());
    const start = ref(subHours(end.value, 24));
@@ -33,43 +33,44 @@

    const load = () => {
        readingsReady.value = false;
-        readingsCategories.length = 0;
-        temperatureSeries.data.length = 0;
-        humiditySeries.data.length = 0;
-        pressureSeries.data.length = 0;
-        lightSeries.data.length = 0;
-        rainSeries.data.length = 0;
-
        windReady.value = false;
-        windCategories.length = 0;
-        windMinimumSeries.data.length = 0;
-        windAverageSeries.data.length = 0;
-        windMaximumSeries.data.length = 0;
-        windDirectionSeries.data.length = 0;

        weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
-            groupedReadingsList.forEach((groupedReadings) => {
-                readingsCategories.push(new Date(groupedReadings.bucket).getTime());
+            readingsCategories.value.length = 0;
+            temperatureSeries.value.data.length = 0;
+            humiditySeries.value.data.length = 0;
+            pressureSeries.value.data.length = 0;
+            lightSeries.value.data.length = 0;
+            rainSeries.value.data.length = 0;

-                temperatureSeries.data.push(groupedReadings.averageTemperature);
-                humiditySeries.data.push(groupedReadings.averageHumidity);
-                pressureSeries.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
-                lightSeries.data.push(groupedReadings.averageLightLevel);
-                rainSeries.data.push(groupedReadings.rainTotal);
+            groupedReadingsList.forEach((groupedReadings) => {
+                readingsCategories.value.push(new Date(groupedReadings.bucket).getTime());
+
+                temperatureSeries.value.data.push(groupedReadings.averageTemperature);
+                humiditySeries.value.data.push(groupedReadings.averageHumidity);
+                pressureSeries.value.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
+                lightSeries.value.data.push(groupedReadings.averageLightLevel);
+                rainSeries.value.data.push(groupedReadings.rainTotal);
            });

            readingsReady.value = true;
        });

        weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            windCategories.value.length = 0;
+            windMinimumSeries.value.data.length = 0;
+            windAverageSeries.value.data.length = 0;
+            windMaximumSeries.value.data.length = 0;
+            windDirectionSeries.value.data.length = 0;
+
            groupedReadingsList.forEach((groupedReadings) => {
-                windCategories.push(new Date(groupedReadings.bucket).getTime());
+                windCategories.value.push(new Date(groupedReadings.bucket).getTime());

-                windMinimumSeries.data.push(groupedReadings.minimumSpeed);
-                windAverageSeries.data.push(groupedReadings.averageSpeed);
-                windMaximumSeries.data.push(groupedReadings.maximumSpeed);
+                windMinimumSeries.value.data.push(groupedReadings.minimumSpeed);
+                windAverageSeries.value.data.push(groupedReadings.averageSpeed);
+                windMaximumSeries.value.data.push(groupedReadings.maximumSpeed);

-                windDirectionSeries.data.push(groupedReadings.averageDirection);
+                windDirectionSeries.value.data.push(ConvertWindDirectionToDegrees(groupedReadings.averageDirection));
            });

            windReady.value = true;
@@ -200,11 +201,11 @@
                        title="Wind Direction"
                        unit=""
                        group="outdoor"
-                        :tick-amount="3"
-                        :marker-size="3"
-                        :line-size="0"
-                        :y-axis-minimum="WindDirectionNumber.Min"
-                        :y-axis-maximum="WindDirectionNumber.Max"
+                        :tick-amount="4"
+                        :y-axis-minimum="0"
+                        :y-axis-maximum="360"
+                        :y-axis-label-formatter="ConvertDegreesToShortLabel"
+                        :y-axis-value-formatter="ConvertDegreesToShortLabel"
                        :categories="windCategories"
                        :series="[windDirectionSeries]">
                    </ValueChart>
--- a/WebDisplay/src/pages/power.vue
+++ b/WebDisplay/src/pages/power.vue
@@ -14,13 +14,13 @@
    const powerReady = ref(false);
    const lightReady = ref(false);

-    const powerCategories: number[] = [];
-    const lightCategories: number[] = [];
+    const powerCategories = ref<number[]>([]);
+    const lightCategories = ref<number[]>([]);

-    const generationSeries = { name: 'Generation', data: [] as number[] };
-    const consumptionSeries = { name: 'Consumption', data: [] as number[] };
+    const generationSeries = ref({ name: 'Generation', data: [] as number[] });
+    const consumptionSeries = ref({ name: 'Consumption', data: [] as number[] });

-    const lightSeries = { name: 'Average Light', data: [] as number[] };
+    const lightSeries = ref({ name: 'Average Light', data: [] as number[] });

    const end = ref(new Date());
    const start = ref(subHours(end.value, 24));
@@ -28,30 +28,31 @@

    const load = () => {
        powerReady.value = false;
-        powerCategories.length = 0;
-        generationSeries.data.length = 0;
-        consumptionSeries.data.length = 0;
-
        lightReady.value = false;
-        lightCategories.length = 0;
-        lightSeries.data.length = 0;

        powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
-            groupedReadingsList.forEach((groupedReadings) => {
-                powerCategories.push(new Date(groupedReadings.bucket).getTime());
+            powerCategories.value.length = 0;
+            generationSeries.value.data.length = 0;
+            consumptionSeries.value.data.length = 0;

-                generationSeries.data.push(groupedReadings.averageGeneration);
-                consumptionSeries.data.push(groupedReadings.averageConsumption);
+            groupedReadingsList.forEach((groupedReadings) => {
+                powerCategories.value.push(new Date(groupedReadings.bucket).getTime());
+
+                generationSeries.value.data.push(groupedReadings.averageGeneration);
+                consumptionSeries.value.data.push(groupedReadings.averageConsumption);
            });

            powerReady.value = true;
        });

        weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
-            groupedReadingsList.forEach((groupedReadings) => {
-                lightCategories.push(new Date(groupedReadings.bucket).getTime());
+            lightCategories.value.length = 0;
+            lightSeries.value.data.length = 0;

-                lightSeries.data.push(groupedReadings.averageValue);
+            groupedReadingsList.forEach((groupedReadings) => {
+                lightCategories.value.push(new Date(groupedReadings.bucket).getTime());
+
+                lightSeries.value.data.push(groupedReadings.averageValue);
            });

            lightReady.value = true;
--- a/WebDisplay/src/windConverter.ts
+++ b/WebDisplay/src/windConverter.ts
@@ -0,0 +1,81 @@
+import WindDirectionNumber from './models/weather/wind-direction-number';
+
+export function ConvertWindDirectionToDegrees(windDirection: WindDirectionNumber): number {
+    switch (windDirection) {
+        case WindDirectionNumber.None:
+            return -1;
+        case WindDirectionNumber.North:
+            return 0;
+        case WindDirectionNumber.East:
+            return 90;
+        case WindDirectionNumber.South:
+            return 180;
+        case WindDirectionNumber.West:
+            return 270;
+        case WindDirectionNumber.NorthEast:
+            return 45;
+        case WindDirectionNumber.SouthEast:
+            return 135;
+        case WindDirectionNumber.SouthWest:
+            return 225;
+        case WindDirectionNumber.NorthWest:
+            return 315;
+        case WindDirectionNumber.NorthNorthEast:
+            return 22.5;
+        case WindDirectionNumber.EastNorthEast:
+            return 67.5;
+        case WindDirectionNumber.EastSouthEast:
+            return 112.5;
+        case WindDirectionNumber.SouthSouthEast:
+            return 157.5;
+        case WindDirectionNumber.SouthSouthWest:
+            return 202.5;
+        case WindDirectionNumber.WestSouthWest:
+            return 247.5;
+        case WindDirectionNumber.WestNorthWest:
+            return 292.5;
+        case WindDirectionNumber.NorthNorthWest:
+            return 337.5;
+    }
+    return -1;
+}
+
+export function ConvertDegreesToShortLabel(degrees: number): string {
+    switch (degrees) {
+        case 0:
+        case 360:
+            return 'N';
+        case 90:
+            return 'E';
+        case 180:
+            return 'S';
+        case 270:
+            return 'W';
+        case 45:
+            return 'NE';
+        case 135:
+            return 'SE';
+        case 225:
+            return 'SW';
+        case 315:
+            return 'NW';
+        case 22.5:
+            return 'NNE';
+        case 67.5:
+            return 'ENE';
+        case 112.5:
+            return 'ESE';
+        case 157.5:
+            return 'SSE';
+        case 202.5:
+            return 'SSW';
+        case 247.5:
+            return 'WSW';
+        case 292.5:
+            return 'WNW';
+        case 337.5:
+            return 'NNW';
+    }
+
+    return '';
+}
--- a/WebDisplay/tsconfig.json
+++ b/WebDisplay/tsconfig.json
@@ -17,7 +17,7 @@
            "@/*": ["src/*"]
        }
    },
-    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "typed-router.d.ts"],
    "references": [{ "path": "./tsconfig.node.json" }],
    "exclude": ["node_modules"]
 }