ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues 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 },
title: { type: String, required: true },
unit: { type: String, required: true },
categories: { type: Array<number>, required: true },
series: { type: Array<{ name: string; data: Array<number> }>, required: true },
series: { type: Array<{ name: string; data: Array<Array<number>> }>, 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
},

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

@@ -16,23 +16,19 @@
const start = ref(subHours(end.value, 24));
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 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]"></ValueChart>
</v-col>
<v-col
@@ -106,7 +101,6 @@
title="Humidity"
unit="%"
group="indoor"
:categories="categories"
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
</v-col>
<v-col
@@ -119,7 +113,6 @@
unit='"'
group="indoor"
:y-axis-decimal-points="1"
:categories="categories"
:series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
</v-col>
</v-row>

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

@@ -13,19 +13,16 @@
const readingsReady = ref(false);
const windReady = ref(false);
const readingsCategories = ref<number[]>([]);
const windCategories = ref<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 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]">
</ValueChart>
</v-col>
@@ -126,7 +120,6 @@
title="Humidity"
unit="%"
group="outdoor"
:categories="readingsCategories"
:series="[humiditySeries]">
</ValueChart>
</v-col>
@@ -141,7 +134,6 @@
unit='"'
group="outdoor"
:y-axis-decimal-points="1"
:categories="readingsCategories"
:series="[pressureSeries]">
</ValueChart>
</v-col>
@@ -155,7 +147,6 @@
title="Light"
unit=" lx"
group="outdoor"
:categories="readingsCategories"
:series="[lightSeries]">
</ValueChart>
</v-col>
@@ -172,7 +163,6 @@
:stepline="true"
:y-axis-decimal-points="3"
:value-decimal-points="2"
:categories="readingsCategories"
:series="[rainSeries]">
</ValueChart>
</v-col>
@@ -187,7 +177,6 @@
unit=" MPH"
group="outdoor"
:y-axis-decimal-points="0"
:categories="windCategories"
:series="[windMaximumSeries, windAverageSeries, windMinimumSeries]">
</ValueChart>
</v-col>
@@ -206,7 +195,6 @@
:y-axis-maximum="360"
:y-axis-label-formatter="ConvertDegreesToShortLabel"
:y-axis-value-formatter="ConvertDegreesToShortLabel"
:categories="windCategories"
:series="[windDirectionSeries]">
</ValueChart>
</v-col>

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

@@ -14,13 +14,10 @@
const powerReady = ref(false);
const lightReady = ref(false);
const powerCategories = ref<number[]>([]);
const lightCategories = ref<number[]>([]);
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]"></ValueChart>
</v-col>
<v-col
@@ -107,7 +101,6 @@
title="Light"
unit=" lx"
group="power"
:categories="lightCategories"
:series="[lightSeries]">
</ValueChart>
</v-col>