ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

More UI work and start preparing for deployment

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-12 01:25:41 +00:00
parent 21f5522950
commit 3087059e75
15 changed files with 442 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WebDisplay/src/components/CurrentWeather.vue
View File

@@ -45,7 +45,7 @@
<td>
<div
v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
className="weather-current-header">
className="weather-current-header ml-8">
Feels like
</div>
</td>

6
WebDisplay/src/components/DashboardItem.vue
View File

@@ -14,15 +14,9 @@
<style scoped>
.dashboard-item-header {
padding: 2px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.dashboard-item-content {
background-color: white;
border: 1px solid lightgray;
border-top: 0px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
</style>

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

@@ -16,7 +16,9 @@
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 }
markerSize: { type: Number, required: false, default: 0 },
yAxisLabelFormatter: { type: Function, required: false, default: undefined },
yAxisValueFormatter: { type: Function, required: false, default: undefined }
});
var chartOptions: ApexOptions = {
@@ -48,6 +50,10 @@
},
y: {
formatter: (value) => {
if (props.yAxisValueFormatter) {
return props.yAxisValueFormatter(value);
}
return `${value.toFixed(props.valueDecimalPoints)}${props.unit}`;
}
}
@@ -69,6 +75,10 @@
yaxis: {
labels: {
formatter: (value) => {
if (props.yAxisLabelFormatter) {
return props.yAxisLabelFormatter(value);
}
return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
}
},
@@ -94,7 +104,7 @@
<template>
<div class="chart">
<v-container
v-if="!props.ready"
v-show="!props.ready"
class="fill-height loading">
<v-responsive class="align-center text-center fill-height">
<v-progress-circular
@@ -105,7 +115,6 @@
</v-responsive>
</v-container>
<apexchart
v-else
width="100%"
height="250"
:type="props.type"
@@ -118,9 +127,17 @@
.loading {
width: 100%;
min-height: 250px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #eeeeee;
}
.chart {
position: relative;
border: 1px solid lightgray;
background-color: white;
padding-top: 10px;