Bunch more new UI

2026-06-17 18:55:08 -04:00 · 2024-03-07 02:24:23 +00:00
parent d396ec785f
commit 9fbe350a68
33 changed files with 889 additions and 161 deletions
--- a/WebDisplay/src/components/ValueChart.vue
+++ b/WebDisplay/src/components/ValueChart.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+    import { ApexOptions } from 'apexcharts';
+
+    const props = defineProps({
+        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 },
+        yAxisDecimalPoints: { type: Number, required: false, default: 0 },
+        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 }
+    });
+
+    var chartOptions: ApexOptions = {
+        chart: {
+            id: props.title,
+            animations: {
+                enabled: false
+            },
+            group: props.group,
+            toolbar: {
+                tools: {
+                    pan: false
+                }
+            }
+        },
+        title: {
+            text: props.title,
+            align: 'center'
+        },
+        legend: {
+            itemMargin: {
+                vertical: 5
+            },
+            showForSingleSeries: true
+        },
+        tooltip: {
+            x: {
+                format: 'MMMM d h:mm TT'
+            },
+            y: {
+                formatter: (value) => {
+                    return `${value.toFixed(props.valueDecimalPoints)}${props.unit}`;
+                }
+            }
+        },
+        xaxis: {
+            type: 'datetime',
+            categories: props.categories,
+            tooltip: {
+                enabled: false
+            },
+            labels: {
+                datetimeUTC: false,
+                datetimeFormatter: {
+                    day: 'MMM d',
+                    hour: 'h:mm TT'
+                }
+            }
+        },
+        yaxis: {
+            labels: {
+                formatter: (value) => {
+                    return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
+                }
+            }
+        },
+        stroke: {
+            width: 2,
+            curve: props.stepline ? 'stepline' : 'smooth'
+        },
+        dataLabels: {
+            enabled: false
+        }
+    };
+
+    var chartSeries: ApexAxisChartSeries = props.series;
+</script>
+
+<template>
+    <v-container
+        v-if="!props.ready"
+        class="fill-height loading">
+        <v-responsive class="align-center text-center fill-height">
+            <v-progress-circular
+                :size="50"
+                :width="5"
+                color="primary"
+                indeterminate></v-progress-circular>
+        </v-responsive>
+    </v-container>
+    <apexchart
+        v-else
+        width="100%"
+        height="300"
+        :type="props.type"
+        :options="chartOptions"
+        :series="chartSeries"></apexchart>
+</template>
+
+<style scoped>
+    .loading {
+        width: 100%;
+        min-height: 300px;
+    }
+</style>