From d69d69bf68f80ab49959d18116a5a083d2cfe3c4 Mon Sep 17 00:00:00 2001 From: Chris Kaczor Date: Thu, 28 Mar 2024 11:34:39 +0000 Subject: [PATCH] Change chart data format to account for missing data --- WebDisplay/src/components/ValueChart.vue | 4 +- WebDisplay/src/pages/indoor.vue | 35 +++++++--------- WebDisplay/src/pages/outdoor.vue | 52 +++++++++--------------- WebDisplay/src/pages/power.vue | 23 ++++------- 4 files changed, 43 insertions(+), 71 deletions(-) diff --git a/WebDisplay/src/components/ValueChart.vue b/WebDisplay/src/components/ValueChart.vue index 6ebb434..f964601 100644 --- a/WebDisplay/src/components/ValueChart.vue +++ b/WebDisplay/src/components/ValueChart.vue @@ -5,8 +5,7 @@ type: { type: String, required: true }, title: { type: String, required: true }, unit: { type: String, required: true }, - categories: { type: Array, required: true }, - series: { type: Array<{ name: string; data: Array }>, required: true }, + series: { type: Array<{ name: string; data: Array> }>, required: true }, yAxisDecimalPoints: { type: Number, required: false, default: 0 }, valueDecimalPoints: { type: Number, required: false, default: 2 }, group: { type: String, required: false, default: undefined }, @@ -60,7 +59,6 @@ }, xaxis: { type: 'datetime', - categories: props.categories, tooltip: { enabled: false }, diff --git a/WebDisplay/src/pages/indoor.vue b/WebDisplay/src/pages/indoor.vue index b4eb811..d5f3606 100644 --- a/WebDisplay/src/pages/indoor.vue +++ b/WebDisplay/src/pages/indoor.vue @@ -16,23 +16,19 @@ const start = ref(subHours(end.value, 24)); const timeSpan = ref(TimeSpan.Last24Hours); - const categories = ref([]); + const mainTemperatureSeries = ref({ name: 'Upstairs', data: [] as number[][] }); + const basementTemperatureSeries = ref({ name: 'Downstairs', data: [] as number[][] }); - const mainTemperatureSeries = ref({ name: 'Upstairs', data: [] as number[] }); - const basementTemperatureSeries = ref({ name: 'Downstairs', data: [] as number[] }); + const mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[][] }); + const basementHumiditySeries = ref({ name: 'Downstairs', data: [] as number[][] }); - const mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[] }); - const basementHumiditySeries = ref({ name: 'Downstairs', data: [] as number[] }); - - const mainPressureSeries = ref({ name: 'Upstairs', data: [] as number[] }); - const basementPressureSeries = ref({ 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; indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { - categories.value.length = 0; - mainTemperatureSeries.value.data.length = 0; basementTemperatureSeries.value.data.length = 0; @@ -43,16 +39,16 @@ basementPressureSeries.value.data.length = 0; groupedReadingsList.forEach((groupedReadings) => { - if (groupedReadings.name === 'main') { - categories.value.push(new Date(groupedReadings.bucket).getTime()); + const date = new Date(groupedReadings.bucket).getTime(); - mainTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature)); - mainHumiditySeries.value.data.push(groupedReadings.averageHumidity); - mainPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)); + if (groupedReadings.name === 'main') { + mainTemperatureSeries.value.data.push([date, ConvertCToF(groupedReadings.averageTemperature)]); + mainHumiditySeries.value.data.push([date, groupedReadings.averageHumidity]); + mainPressureSeries.value.data.push([date, ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)]); } else if (groupedReadings.name === 'basement') { - basementTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature)); - basementHumiditySeries.value.data.push(groupedReadings.averageHumidity); - basementPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)); + basementTemperatureSeries.value.data.push([date, ConvertCToF(groupedReadings.averageTemperature)]); + basementHumiditySeries.value.data.push([date, groupedReadings.averageHumidity]); + basementPressureSeries.value.data.push([date, ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)]); } }); @@ -94,7 +90,6 @@ title="Temperature" unit="°F" group="indoor" - :categories="categories" :series="[mainTemperatureSeries, basementTemperatureSeries]"> diff --git a/WebDisplay/src/pages/outdoor.vue b/WebDisplay/src/pages/outdoor.vue index 5eac876..af562ca 100644 --- a/WebDisplay/src/pages/outdoor.vue +++ b/WebDisplay/src/pages/outdoor.vue @@ -13,19 +13,16 @@ const readingsReady = ref(false); const windReady = ref(false); - const readingsCategories = ref([]); - const windCategories = ref([]); + 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 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 = 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 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)); @@ -36,7 +33,6 @@ windReady.value = false; weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { - readingsCategories.value.length = 0; temperatureSeries.value.data.length = 0; humiditySeries.value.data.length = 0; pressureSeries.value.data.length = 0; @@ -44,33 +40,32 @@ rainSeries.value.data.length = 0; groupedReadingsList.forEach((groupedReadings) => { - readingsCategories.value.push(new Date(groupedReadings.bucket).getTime()); + const date = 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); + temperatureSeries.value.data.push([date, groupedReadings.averageTemperature]); + humiditySeries.value.data.push([date, groupedReadings.averageHumidity]); + pressureSeries.value.data.push([date, ConvertPascalToInchesOfMercury(groupedReadings.averagePressure)]); + lightSeries.value.data.push([date, groupedReadings.averageLightLevel]); + rainSeries.value.data.push([date, 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.value.push(new Date(groupedReadings.bucket).getTime()); + const date = new Date(groupedReadings.bucket).getTime(); - windMinimumSeries.value.data.push(groupedReadings.minimumSpeed); - windAverageSeries.value.data.push(groupedReadings.averageSpeed); - windMaximumSeries.value.data.push(groupedReadings.maximumSpeed); + windMinimumSeries.value.data.push([date, groupedReadings.minimumSpeed]); + windAverageSeries.value.data.push([date, groupedReadings.averageSpeed]); + windMaximumSeries.value.data.push([date, groupedReadings.maximumSpeed]); - windDirectionSeries.value.data.push(ConvertWindDirectionToDegrees(groupedReadings.averageDirection)); + windDirectionSeries.value.data.push([date, ConvertWindDirectionToDegrees(groupedReadings.averageDirection)]); }); windReady.value = true; @@ -112,7 +107,6 @@ title="Temperature" unit="°F" group="outdoor" - :categories="readingsCategories" :series="[temperatureSeries]"> @@ -126,7 +120,6 @@ title="Humidity" unit="%" group="outdoor" - :categories="readingsCategories" :series="[humiditySeries]"> @@ -141,7 +134,6 @@ unit='"' group="outdoor" :y-axis-decimal-points="1" - :categories="readingsCategories" :series="[pressureSeries]"> @@ -155,7 +147,6 @@ title="Light" unit=" lx" group="outdoor" - :categories="readingsCategories" :series="[lightSeries]"> @@ -172,7 +163,6 @@ :stepline="true" :y-axis-decimal-points="3" :value-decimal-points="2" - :categories="readingsCategories" :series="[rainSeries]"> @@ -187,7 +177,6 @@ unit=" MPH" group="outdoor" :y-axis-decimal-points="0" - :categories="windCategories" :series="[windMaximumSeries, windAverageSeries, windMinimumSeries]"> @@ -206,7 +195,6 @@ :y-axis-maximum="360" :y-axis-label-formatter="ConvertDegreesToShortLabel" :y-axis-value-formatter="ConvertDegreesToShortLabel" - :categories="windCategories" :series="[windDirectionSeries]"> diff --git a/WebDisplay/src/pages/power.vue b/WebDisplay/src/pages/power.vue index 5cb05f4..23576f0 100644 --- a/WebDisplay/src/pages/power.vue +++ b/WebDisplay/src/pages/power.vue @@ -14,13 +14,10 @@ const powerReady = ref(false); const lightReady = ref(false); - const powerCategories = ref([]); - const lightCategories = ref([]); + const generationSeries = ref({ name: 'Generation', data: [] as number[][] }); + const consumptionSeries = ref({ name: 'Consumption', data: [] as number[][] }); - const generationSeries = ref({ name: 'Generation', data: [] as number[] }); - const consumptionSeries = ref({ name: 'Consumption', data: [] as number[] }); - - const lightSeries = ref({ 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)); @@ -31,28 +28,26 @@ lightReady.value = false; powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { - powerCategories.value.length = 0; generationSeries.value.data.length = 0; consumptionSeries.value.data.length = 0; groupedReadingsList.forEach((groupedReadings) => { - powerCategories.value.push(new Date(groupedReadings.bucket).getTime()); + const date = new Date(groupedReadings.bucket).getTime(); - generationSeries.value.data.push(groupedReadings.averageGeneration); - consumptionSeries.value.data.push(groupedReadings.averageConsumption); + generationSeries.value.data.push([date, groupedReadings.averageGeneration]); + consumptionSeries.value.data.push([date, groupedReadings.averageConsumption]); }); powerReady.value = true; }); weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => { - lightCategories.value.length = 0; lightSeries.value.data.length = 0; groupedReadingsList.forEach((groupedReadings) => { - lightCategories.value.push(new Date(groupedReadings.bucket).getTime()); + const date = new Date(groupedReadings.bucket).getTime(); - lightSeries.value.data.push(groupedReadings.averageValue); + lightSeries.value.data.push([date, groupedReadings.averageValue]); }); lightReady.value = true; @@ -95,7 +90,6 @@ group="power" :y-axis-decimal-points="0" :value-decimal-points="0" - :categories="powerCategories" :series="[generationSeries, consumptionSeries]">