ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-08 17:24:54 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Change chart data format to account for missing data

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-28 11:34:39 +00:00
parent 7d95bfc27a
commit d69d69bf68
4 changed files with 43 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
WebDisplay/src/components/ValueChart.vue
View File

@@ -5,8 +5,7 @@
type: { type: String, required: true }, type: { type: String, required: true },
title: { type: String, required: true }, title: { type: String, required: true },
unit: { type: String, required: true }, unit: { type: String, required: true },
categories: { type: Array<number>, required: true }, series: { type: Array<{ name: string; data: Array<Array<number>> }>, required: true },
series: { type: Array<{ name: string; data: Array<number> }>, required: true },
yAxisDecimalPoints: { type: Number, required: false, default: 0 }, yAxisDecimalPoints: { type: Number, required: false, default: 0 },
valueDecimalPoints: { type: Number, required: false, default: 2 }, valueDecimalPoints: { type: Number, required: false, default: 2 },
group: { type: String, required: false, default: undefined }, group: { type: String, required: false, default: undefined },
@@ -60,7 +59,6 @@
}, },
xaxis: { xaxis: {
type: 'datetime', type: 'datetime',
categories: props.categories,
tooltip: { tooltip: {
enabled: false enabled: false
}, },

35
WebDisplay/src/pages/indoor.vue
View File

@@ -16,23 +16,19 @@
const start = ref(subHours(end.value, 24)); const start = ref(subHours(end.value, 24));
const timeSpan = ref(TimeSpan.Last24Hours); const timeSpan = ref(TimeSpan.Last24Hours);
const categories = ref<number[]>([]); 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 mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[][] });
const basementTemperatureSeries = ref({ name: 'Downstairs', data: [] as number[] }); const basementHumiditySeries = ref({ name: 'Downstairs', data: [] as number[][] });
const mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[] }); const mainPressureSeries = ref({ name: 'Upstairs', data: [] as number[][] });
const basementHumiditySeries = ref({ name: 'Downstairs', 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 = () => { const load = () => {
ready.value = false; ready.value = false;
indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
categories.value.length = 0;
mainTemperatureSeries.value.data.length = 0; mainTemperatureSeries.value.data.length = 0;
basementTemperatureSeries.value.data.length = 0; basementTemperatureSeries.value.data.length = 0;
@@ -43,16 +39,16 @@
basementPressureSeries.value.data.length = 0; basementPressureSeries.value.data.length = 0;
groupedReadingsList.forEach((groupedReadings) => { groupedReadingsList.forEach((groupedReadings) => {
if (groupedReadings.name === 'main') { const date = new Date(groupedReadings.bucket).getTime();
categories.value.push(new Date(groupedReadings.bucket).getTime());
mainTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature)); if (groupedReadings.name === 'main') {
mainHumiditySeries.value.data.push(groupedReadings.averageHumidity); mainTemperatureSeries.value.data.push([date, ConvertCToF(groupedReadings.averageTemperature)]);
mainPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)); mainHumiditySeries.value.data.push([date, groupedReadings.averageHumidity]);
mainPressureSeries.value.data.push([date, ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)]);
} else if (groupedReadings.name === 'basement') { } else if (groupedReadings.name === 'basement') {
basementTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature)); basementTemperatureSeries.value.data.push([date, ConvertCToF(groupedReadings.averageTemperature)]);
basementHumiditySeries.value.data.push(groupedReadings.averageHumidity); basementHumiditySeries.value.data.push([date, groupedReadings.averageHumidity]);
basementPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)); basementPressureSeries.value.data.push([date, ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure)]);
} }
}); });
@@ -94,7 +90,6 @@
title="Temperature" title="Temperature"
unit="°F" unit="°F"
group="indoor" group="indoor"
:categories="categories"
:series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart> :series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
</v-col> </v-col>
<v-col <v-col
@@ -106,7 +101,6 @@
title="Humidity" title="Humidity"
unit="%" unit="%"
group="indoor" group="indoor"
:categories="categories"
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart> :series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
</v-col> </v-col>
<v-col <v-col
@@ -119,7 +113,6 @@
unit='"' unit='"'
group="indoor" group="indoor"
:y-axis-decimal-points="1" :y-axis-decimal-points="1"
:categories="categories"
:series="[mainPressureSeries, basementPressureSeries]"></ValueChart> :series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
</v-col> </v-col>
</v-row> </v-row>

52
WebDisplay/src/pages/outdoor.vue
View File

@@ -13,19 +13,16 @@
const readingsReady = ref(false); const readingsReady = ref(false);
const windReady = ref(false); const windReady = ref(false);
const readingsCategories = ref<number[]>([]); const temperatureSeries = ref({ name: 'Average Temperature', data: [] as number[][] });
const windCategories = ref<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 windMinimumSeries = ref({ name: 'Minimum', data: [] as number[][] });
const humiditySeries = ref({ name: 'Average Humidity', data: [] as number[] }); const windAverageSeries = ref({ name: 'Average', data: [] as number[][] });
const pressureSeries = ref({ name: 'Average Pressure', data: [] as number[] }); const windMaximumSeries = ref({ name: 'Maximum', data: [] as number[][] });
const lightSeries = ref({ name: 'Average Light', data: [] as number[] }); const windDirectionSeries = ref({ name: 'Average Direction', 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 end = ref(new Date()); const end = ref(new Date());
const start = ref(subHours(end.value, 24)); const start = ref(subHours(end.value, 24));
@@ -36,7 +33,6 @@
windReady.value = false; windReady.value = false;
weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
readingsCategories.value.length = 0;
temperatureSeries.value.data.length = 0; temperatureSeries.value.data.length = 0;
humiditySeries.value.data.length = 0; humiditySeries.value.data.length = 0;
pressureSeries.value.data.length = 0; pressureSeries.value.data.length = 0;
@@ -44,33 +40,32 @@
rainSeries.value.data.length = 0; rainSeries.value.data.length = 0;
groupedReadingsList.forEach((groupedReadings) => { groupedReadingsList.forEach((groupedReadings) => {
readingsCategories.value.push(new Date(groupedReadings.bucket).getTime()); const date = new Date(groupedReadings.bucket).getTime();
temperatureSeries.value.data.push(groupedReadings.averageTemperature); temperatureSeries.value.data.push([date, groupedReadings.averageTemperature]);
humiditySeries.value.data.push(groupedReadings.averageHumidity); humiditySeries.value.data.push([date, groupedReadings.averageHumidity]);
pressureSeries.value.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure)); pressureSeries.value.data.push([date, ConvertPascalToInchesOfMercury(groupedReadings.averagePressure)]);
lightSeries.value.data.push(groupedReadings.averageLightLevel); lightSeries.value.data.push([date, groupedReadings.averageLightLevel]);
rainSeries.value.data.push(groupedReadings.rainTotal); rainSeries.value.data.push([date, groupedReadings.rainTotal]);
}); });
readingsReady.value = true; readingsReady.value = true;
}); });
weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
windCategories.value.length = 0;
windMinimumSeries.value.data.length = 0; windMinimumSeries.value.data.length = 0;
windAverageSeries.value.data.length = 0; windAverageSeries.value.data.length = 0;
windMaximumSeries.value.data.length = 0; windMaximumSeries.value.data.length = 0;
windDirectionSeries.value.data.length = 0; windDirectionSeries.value.data.length = 0;
groupedReadingsList.forEach((groupedReadings) => { groupedReadingsList.forEach((groupedReadings) => {
windCategories.value.push(new Date(groupedReadings.bucket).getTime()); const date = new Date(groupedReadings.bucket).getTime();
windMinimumSeries.value.data.push(groupedReadings.minimumSpeed); windMinimumSeries.value.data.push([date, groupedReadings.minimumSpeed]);
windAverageSeries.value.data.push(groupedReadings.averageSpeed); windAverageSeries.value.data.push([date, groupedReadings.averageSpeed]);
windMaximumSeries.value.data.push(groupedReadings.maximumSpeed); 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; windReady.value = true;
@@ -112,7 +107,6 @@
title="Temperature" title="Temperature"
unit="°F" unit="°F"
group="outdoor" group="outdoor"
:categories="readingsCategories"
:series="[temperatureSeries]"> :series="[temperatureSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -126,7 +120,6 @@
title="Humidity" title="Humidity"
unit="%" unit="%"
group="outdoor" group="outdoor"
:categories="readingsCategories"
:series="[humiditySeries]"> :series="[humiditySeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -141,7 +134,6 @@
unit='"' unit='"'
group="outdoor" group="outdoor"
:y-axis-decimal-points="1" :y-axis-decimal-points="1"
:categories="readingsCategories"
:series="[pressureSeries]"> :series="[pressureSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -155,7 +147,6 @@
title="Light" title="Light"
unit=" lx" unit=" lx"
group="outdoor" group="outdoor"
:categories="readingsCategories"
:series="[lightSeries]"> :series="[lightSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -172,7 +163,6 @@
:stepline="true" :stepline="true"
:y-axis-decimal-points="3" :y-axis-decimal-points="3"
:value-decimal-points="2" :value-decimal-points="2"
:categories="readingsCategories"
:series="[rainSeries]"> :series="[rainSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -187,7 +177,6 @@
unit=" MPH" unit=" MPH"
group="outdoor" group="outdoor"
:y-axis-decimal-points="0" :y-axis-decimal-points="0"
:categories="windCategories"
:series="[windMaximumSeries, windAverageSeries, windMinimumSeries]"> :series="[windMaximumSeries, windAverageSeries, windMinimumSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>
@@ -206,7 +195,6 @@
:y-axis-maximum="360" :y-axis-maximum="360"
:y-axis-label-formatter="ConvertDegreesToShortLabel" :y-axis-label-formatter="ConvertDegreesToShortLabel"
:y-axis-value-formatter="ConvertDegreesToShortLabel" :y-axis-value-formatter="ConvertDegreesToShortLabel"
:categories="windCategories"
:series="[windDirectionSeries]"> :series="[windDirectionSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>

23
WebDisplay/src/pages/power.vue
View File

@@ -14,13 +14,10 @@
const powerReady = ref(false); const powerReady = ref(false);
const lightReady = ref(false); const lightReady = ref(false);
const powerCategories = ref<number[]>([]); const generationSeries = ref({ name: 'Generation', data: [] as number[][] });
const lightCategories = ref<number[]>([]); const consumptionSeries = ref({ name: 'Consumption', data: [] as number[][] });
const generationSeries = ref({ name: 'Generation', data: [] as number[] }); const lightSeries = ref({ name: 'Average Light', data: [] as number[][] });
const consumptionSeries = ref({ name: 'Consumption', data: [] as number[] });
const lightSeries = ref({ name: 'Average Light', data: [] as number[] });
const end = ref(new Date()); const end = ref(new Date());
const start = ref(subHours(end.value, 24)); const start = ref(subHours(end.value, 24));
@@ -31,28 +28,26 @@
lightReady.value = false; lightReady.value = false;
powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => { powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
powerCategories.value.length = 0;
generationSeries.value.data.length = 0; generationSeries.value.data.length = 0;
consumptionSeries.value.data.length = 0; consumptionSeries.value.data.length = 0;
groupedReadingsList.forEach((groupedReadings) => { groupedReadingsList.forEach((groupedReadings) => {
powerCategories.value.push(new Date(groupedReadings.bucket).getTime()); const date = new Date(groupedReadings.bucket).getTime();
generationSeries.value.data.push(groupedReadings.averageGeneration); generationSeries.value.data.push([date, groupedReadings.averageGeneration]);
consumptionSeries.value.data.push(groupedReadings.averageConsumption); consumptionSeries.value.data.push([date, groupedReadings.averageConsumption]);
}); });
powerReady.value = true; powerReady.value = true;
}); });
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => { weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
lightCategories.value.length = 0;
lightSeries.value.data.length = 0; lightSeries.value.data.length = 0;
groupedReadingsList.forEach((groupedReadings) => { 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; lightReady.value = true;
@@ -95,7 +90,6 @@
group="power" group="power"
:y-axis-decimal-points="0" :y-axis-decimal-points="0"
:value-decimal-points="0" :value-decimal-points="0"
:categories="powerCategories"
:series="[generationSeries, consumptionSeries]"></ValueChart> :series="[generationSeries, consumptionSeries]"></ValueChart>
</v-col> </v-col>
<v-col <v-col
@@ -107,7 +101,6 @@
title="Light" title="Light"
unit=" lx" unit=" lx"
group="power" group="power"
:categories="lightCategories"
:series="[lightSeries]"> :series="[lightSeries]">
</ValueChart> </ValueChart>
</v-col> </v-col>