mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-01-13 17:22:54 -05:00
More new UI
This commit is contained in:
188
WebDisplay/src/components/TimeRange.vue
Normal file
188
WebDisplay/src/components/TimeRange.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { subHours, addDays, startOfDay, endOfDay, isSameDay } from 'date-fns';
|
||||
import TimeSpan from '@/models/time-span';
|
||||
|
||||
const props = defineProps({
|
||||
timeSpan: { type: Number as PropType<TimeSpan>, required: true },
|
||||
start: { type: Date, required: true },
|
||||
end: { type: Date, required: true }
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [
|
||||
{
|
||||
timeSpan: TimeSpan;
|
||||
start: Date;
|
||||
end: Date;
|
||||
}
|
||||
];
|
||||
|
||||
refresh: [];
|
||||
}>();
|
||||
|
||||
const timeSpanItems: { [value: number]: string } = {
|
||||
[TimeSpan.Last24Hours]: 'Last 24 hours',
|
||||
[TimeSpan.Day]: 'Day'
|
||||
};
|
||||
|
||||
const addDay = (increment: number) => {
|
||||
const start = addDays(props.start, increment);
|
||||
const end = addDays(props.end, increment);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: props.timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
};
|
||||
|
||||
const handleTimeSpanChange = (timeSpan: TimeSpan) => {
|
||||
const date = new Date();
|
||||
|
||||
if (timeSpan == TimeSpan.Last24Hours) {
|
||||
const end = date;
|
||||
const start = subHours(end, 24);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
} else {
|
||||
const end = endOfDay(date);
|
||||
const start = startOfDay(date);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showDayBack = () => {
|
||||
return props.timeSpan === TimeSpan.Day;
|
||||
};
|
||||
|
||||
const showDayForward = () => {
|
||||
return props.timeSpan === TimeSpan.Day && !isSameDay(props.start, new Date());
|
||||
};
|
||||
|
||||
const refresh = () => {
|
||||
const date = new Date();
|
||||
|
||||
if (props.timeSpan == TimeSpan.Last24Hours) {
|
||||
const end = date;
|
||||
const start = subHours(end, 24);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: props.timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
} else {
|
||||
emit('refresh');
|
||||
}
|
||||
};
|
||||
|
||||
const setToday = () => {
|
||||
const date = new Date();
|
||||
|
||||
const end = endOfDay(date);
|
||||
const start = startOfDay(date);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: props.timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
};
|
||||
|
||||
const setDate = (value: Date) => {
|
||||
const end = endOfDay(value);
|
||||
const start = startOfDay(value);
|
||||
|
||||
emit('change', {
|
||||
timeSpan: props.timeSpan,
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app-bar
|
||||
class="bar"
|
||||
density="compact"
|
||||
fixed
|
||||
:elevation="0">
|
||||
<v-toolbar-items>
|
||||
<v-btn
|
||||
icon
|
||||
@click="refresh()">
|
||||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
color="primary"
|
||||
v-bind="props">
|
||||
{{ timeSpanItems[timeSpan] }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list :value="props.timeSpan">
|
||||
<v-list-item
|
||||
v-for="(item, index) in timeSpanItems"
|
||||
:key="index"
|
||||
:value="index"
|
||||
@click="handleTimeSpanChange(+index)">
|
||||
<v-list-item-title>{{ item }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
icon
|
||||
@click="addDay(-1)"
|
||||
v-show="showDayBack()">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<VueDatePicker
|
||||
class="date-picker"
|
||||
v-show="showDayBack()"
|
||||
auto-apply
|
||||
:model-value="props.start"
|
||||
@update:model-value="setDate"
|
||||
:clearable="false"
|
||||
:max-date="new Date()"
|
||||
:teleport="true"
|
||||
:enable-time-picker="false" />
|
||||
<v-btn
|
||||
icon
|
||||
@click="addDay(1)"
|
||||
v-show="showDayForward()">
|
||||
<v-icon>mdi-arrow-right</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
@click="setToday()"
|
||||
v-show="showDayForward()">
|
||||
Today
|
||||
</v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bar {
|
||||
background-color: #eeeeee;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,12 @@
|
||||
valueDecimalPoints: { type: Number, required: false, default: 2 },
|
||||
group: { type: String, required: false, default: undefined },
|
||||
stepline: { type: Boolean, required: false, default: false },
|
||||
ready: { type: Boolean, required: true }
|
||||
ready: { type: Boolean, required: true },
|
||||
yAxisMinimum: { type: Number, required: false, default: undefined },
|
||||
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 }
|
||||
});
|
||||
|
||||
var chartOptions: ApexOptions = {
|
||||
@@ -66,12 +71,18 @@
|
||||
formatter: (value) => {
|
||||
return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
tickAmount: props.tickAmount,
|
||||
min: props.yAxisMinimum,
|
||||
max: props.yAxisMaximum
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
width: props.lineSize,
|
||||
curve: props.stepline ? 'stepline' : 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: props.markerSize
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
@@ -96,7 +107,7 @@
|
||||
<apexchart
|
||||
v-else
|
||||
width="100%"
|
||||
height="300"
|
||||
height="250"
|
||||
:type="props.type"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"></apexchart>
|
||||
@@ -106,7 +117,7 @@
|
||||
<style scoped>
|
||||
.loading {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
|
||||
@@ -7,6 +7,9 @@ import { createPinia } from 'pinia';
|
||||
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
const pinia = createPinia();
|
||||
const app = createApp(App);
|
||||
|
||||
@@ -14,4 +17,7 @@ registerPlugins(app);
|
||||
|
||||
app.use(VueApexCharts);
|
||||
app.use(pinia);
|
||||
|
||||
app.component('VueDatePicker', VueDatePicker);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
7
WebDisplay/src/models/time-span.ts
Normal file
7
WebDisplay/src/models/time-span.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export enum TimeSpan {
|
||||
Last24Hours,
|
||||
Day,
|
||||
Custom
|
||||
}
|
||||
|
||||
export default TimeSpan;
|
||||
23
WebDisplay/src/models/weather/wind-direction-number.ts
Normal file
23
WebDisplay/src/models/weather/wind-direction-number.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
export enum WindDirectionNumber {
|
||||
None,
|
||||
North,
|
||||
East,
|
||||
South,
|
||||
West,
|
||||
NorthEast,
|
||||
SouthEast,
|
||||
SouthWest,
|
||||
NorthWest,
|
||||
NorthNorthEast,
|
||||
EastNorthEast,
|
||||
EastSouthEast,
|
||||
SouthSouthEast,
|
||||
SouthSouthWest,
|
||||
WestSouthWest,
|
||||
WestNorthWest,
|
||||
NorthNorthWest,
|
||||
Min = North,
|
||||
Max = NorthNorthWest
|
||||
}
|
||||
|
||||
export default WindDirectionNumber;
|
||||
@@ -5,11 +5,17 @@
|
||||
import { ConvertCToF } from '@/temperatureConverter';
|
||||
import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
import TimeRange from '@/components/TimeRange.vue';
|
||||
import TimeSpan from '@/models/time-span';
|
||||
|
||||
const indoorStore = createIndoorStore('charts');
|
||||
|
||||
const ready = ref(false);
|
||||
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
const timeSpan = ref(TimeSpan.Last24Hours);
|
||||
|
||||
const categories: number[] = [];
|
||||
|
||||
const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
@@ -21,73 +27,103 @@
|
||||
const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
|
||||
|
||||
const end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
const load = () => {
|
||||
ready.value = false;
|
||||
|
||||
indoorStore.getReadingValueHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
if (groupedReadings.name === 'main') {
|
||||
categories.push(new Date(groupedReadings.bucket).getTime());
|
||||
categories.length = 0;
|
||||
|
||||
mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
|
||||
mainHumiditySeries.data.push(groupedReadings.averageHumidity);
|
||||
mainPressureSeries.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));
|
||||
}
|
||||
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) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
if (groupedReadings.name === 'main') {
|
||||
categories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
|
||||
mainHumiditySeries.data.push(groupedReadings.averageHumidity);
|
||||
mainPressureSeries.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));
|
||||
}
|
||||
});
|
||||
|
||||
ready.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
ready.value = true;
|
||||
});
|
||||
load();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
class="container">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Temperature"
|
||||
unit="°F"
|
||||
group="indoor"
|
||||
:categories="categories"
|
||||
:series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Humidity"
|
||||
unit="%"
|
||||
group="indoor"
|
||||
:categories="categories"
|
||||
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Pressure"
|
||||
unit='"'
|
||||
group="indoor"
|
||||
:y-axis-decimal-points="1"
|
||||
:categories="categories"
|
||||
:series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<TimeRange
|
||||
:time-span="timeSpan"
|
||||
:start="start"
|
||||
:end="end"
|
||||
@change="
|
||||
(value) => {
|
||||
timeSpan = value.timeSpan;
|
||||
start = value.start;
|
||||
end = value.end;
|
||||
|
||||
load();
|
||||
}
|
||||
"
|
||||
@refresh="load"></TimeRange>
|
||||
<div class="content">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Temperature"
|
||||
unit="°F"
|
||||
group="indoor"
|
||||
:categories="categories"
|
||||
:series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Humidity"
|
||||
unit="%"
|
||||
group="indoor"
|
||||
:categories="categories"
|
||||
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="ready"
|
||||
type="line"
|
||||
title="Pressure"
|
||||
unit='"'
|
||||
group="indoor"
|
||||
:y-axis-decimal-points="1"
|
||||
:categories="categories"
|
||||
:series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -95,5 +131,10 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
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';
|
||||
|
||||
const weatherStore = useWeatherStore();
|
||||
|
||||
@@ -22,133 +25,192 @@
|
||||
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 end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
const timeSpan = ref(TimeSpan.Last24Hours);
|
||||
|
||||
weatherStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
readingsCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
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;
|
||||
|
||||
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);
|
||||
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());
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
readingsReady.value = true;
|
||||
});
|
||||
|
||||
readingsReady.value = true;
|
||||
});
|
||||
weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
windCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
weatherStore.getWindHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
windCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
windMinimumSeries.data.push(groupedReadings.minimumSpeed);
|
||||
windAverageSeries.data.push(groupedReadings.averageSpeed);
|
||||
windMaximumSeries.data.push(groupedReadings.maximumSpeed);
|
||||
|
||||
windMinimumSeries.data.push(groupedReadings.minimumSpeed);
|
||||
windAverageSeries.data.push(groupedReadings.averageSpeed);
|
||||
windMaximumSeries.data.push(groupedReadings.maximumSpeed);
|
||||
windDirectionSeries.data.push(groupedReadings.averageDirection);
|
||||
});
|
||||
|
||||
windReady.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
windReady.value = true;
|
||||
});
|
||||
load();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
class="container">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Temperature"
|
||||
unit="°F"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[temperatureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Humidity"
|
||||
unit="%"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[humiditySeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Pressure"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="1"
|
||||
:categories="readingsCategories"
|
||||
:series="[pressureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Rain"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:stepline="true"
|
||||
:y-axis-decimal-points="2"
|
||||
:categories="readingsCategories"
|
||||
:series="[rainSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="windReady"
|
||||
type="line"
|
||||
title="Wind"
|
||||
unit=" MPH"
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="0"
|
||||
:categories="windCategories"
|
||||
:series="[windMinimumSeries, windAverageSeries, windMaximumSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<TimeRange
|
||||
:time-span="timeSpan"
|
||||
:start="start"
|
||||
:end="end"
|
||||
@change="
|
||||
(value) => {
|
||||
timeSpan = value.timeSpan;
|
||||
start = value.start;
|
||||
end = value.end;
|
||||
|
||||
load();
|
||||
}
|
||||
"
|
||||
@refresh="load"></TimeRange>
|
||||
<div class="content">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Temperature"
|
||||
unit="°F"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[temperatureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Humidity"
|
||||
unit="%"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[humiditySeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Pressure"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="1"
|
||||
:categories="readingsCategories"
|
||||
:series="[pressureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Rain"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:stepline="true"
|
||||
:y-axis-decimal-points="3"
|
||||
:value-decimal-points="2"
|
||||
:categories="readingsCategories"
|
||||
:series="[rainSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="windReady"
|
||||
type="line"
|
||||
title="Wind Speed"
|
||||
unit=" MPH"
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="0"
|
||||
:categories="windCategories"
|
||||
:series="[windMaximumSeries, windAverageSeries, windMinimumSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="windReady"
|
||||
type="line"
|
||||
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"
|
||||
:categories="windCategories"
|
||||
:series="[windDirectionSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -156,5 +218,10 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
import { usePowerStore } from '@/stores/powerStore';
|
||||
import { useWeatherStore } from '@/stores/weatherStore';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
import TimeRange from '@/components/TimeRange.vue';
|
||||
import WeatherValueType from '@/models/weather/weather-value-type';
|
||||
import TimeSpan from '@/models/time-span';
|
||||
|
||||
const powerStore = usePowerStore();
|
||||
const weatherStore = useWeatherStore();
|
||||
@@ -20,66 +22,96 @@
|
||||
|
||||
const lightSeries = { name: 'Average Light', data: [] as number[] };
|
||||
|
||||
const end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
const timeSpan = ref(TimeSpan.Last24Hours);
|
||||
|
||||
powerStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
powerCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
const load = () => {
|
||||
powerReady.value = false;
|
||||
powerCategories.length = 0;
|
||||
generationSeries.data.length = 0;
|
||||
consumptionSeries.data.length = 0;
|
||||
|
||||
generationSeries.data.push(groupedReadings.averageGeneration);
|
||||
consumptionSeries.data.push(groupedReadings.averageConsumption);
|
||||
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());
|
||||
|
||||
generationSeries.data.push(groupedReadings.averageGeneration);
|
||||
consumptionSeries.data.push(groupedReadings.averageConsumption);
|
||||
});
|
||||
|
||||
powerReady.value = true;
|
||||
});
|
||||
|
||||
powerReady.value = true;
|
||||
});
|
||||
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
lightCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
lightCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
lightSeries.data.push(groupedReadings.averageValue);
|
||||
});
|
||||
|
||||
lightSeries.data.push(groupedReadings.averageValue);
|
||||
lightReady.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
lightReady.value = true;
|
||||
});
|
||||
load();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
class="container">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="powerReady"
|
||||
type="line"
|
||||
title="Power"
|
||||
unit=" W"
|
||||
group="power"
|
||||
:y-axis-decimal-points="0"
|
||||
:value-decimal-points="0"
|
||||
:categories="powerCategories"
|
||||
:series="[generationSeries, consumptionSeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="lightReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="power"
|
||||
:categories="lightCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<TimeRange
|
||||
:time-span="timeSpan"
|
||||
:start="start"
|
||||
:end="end"
|
||||
@change="
|
||||
(value) => {
|
||||
timeSpan = value.timeSpan;
|
||||
start = value.start;
|
||||
end = value.end;
|
||||
|
||||
load();
|
||||
}
|
||||
"
|
||||
@refresh="load"></TimeRange>
|
||||
<div class="content">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="powerReady"
|
||||
type="line"
|
||||
title="Power"
|
||||
unit=" W"
|
||||
group="power"
|
||||
:y-axis-decimal-points="0"
|
||||
:value-decimal-points="0"
|
||||
:categories="powerCategories"
|
||||
:series="[generationSeries, consumptionSeries]"></ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="lightReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="power"
|
||||
:categories="lightCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -87,5 +119,10 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user