mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-01-28 09:35:39 -05:00
More new UI
This commit is contained in:
@@ -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