From efc3b6a4429b121d92575c693033263332e25521 Mon Sep 17 00:00:00 2001
From: Scott Fasone <scott181182@yahoo.com>
Date: Mon, 3 Jun 2024 12:17:18 -0400
Subject: [PATCH 1/5] fix(frontend): updated attribute timeseries query to
 actually get current value

---
 frontend/lib/graphql/equipment.graphql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/lib/graphql/equipment.graphql b/frontend/lib/graphql/equipment.graphql
index 7241252..c6ed492 100644
--- a/frontend/lib/graphql/equipment.graphql
+++ b/frontend/lib/graphql/equipment.graphql
@@ -75,7 +75,7 @@ fragment AttributeOverview on Attribute {
 
   # Also fetching latest Time Series value, in case "current" value isn't set
   getTimeSeries(
-    first: 1,
+    offset: 1,
     maxSamples: 1,
     startTime: $startTime,
     endTime: $endTime

From 4e87ffdf352d6e988af8f08660ba62afb82af125 Mon Sep 17 00:00:00 2001
From: Scott Fasone <scott181182@yahoo.com>
Date: Mon, 3 Jun 2024 12:18:52 -0400
Subject: [PATCH 2/5] refactor(frontend): exposed pending state on equipments
 query

---
 frontend/composables/useAsyncEquipmentWithOEE.ts | 9 ++++++++-
 frontend/pages/index.vue                         | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/composables/useAsyncEquipmentWithOEE.ts b/frontend/composables/useAsyncEquipmentWithOEE.ts
index affae85..f1a0281 100644
--- a/frontend/composables/useAsyncEquipmentWithOEE.ts
+++ b/frontend/composables/useAsyncEquipmentWithOEE.ts
@@ -6,7 +6,12 @@ import { parseEquipmentWithOEE } from "~/lib/equipment";
 
 
 export default function useAsyncEquipmentWithOEE() {
-  const { data: equipmentIds, refresh: idRefresh, status: idStatus } = useAsyncEquipmentIds();
+  const {
+    data: equipmentIds,
+    refresh: idRefresh,
+    status: idStatus,
+    pending: idPending,
+  } = useAsyncEquipmentIds();
 
   // TODO: Use equipment timezone instead of user timezone.
   const startTime = new Date();
@@ -39,10 +44,12 @@ export default function useAsyncEquipmentWithOEE() {
 
   // Compound status involving both queries.
   const status = computed(() => idStatus.value === "success" ? res.status.value : idStatus.value);
+  const pending = computed(() => idPending.value || res.pending.value);
 
   return {
     ...res,
     status,
+    pending,
     refresh: () => idRefresh().then(() => res.refresh()),
   };
 }
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index ae00066..86586ab 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <v-row class="ma-0 justify-center">
-      <v-col v-if="status === 'pending'" class="d-flex flex-column align-center ga-4">
+      <v-col v-if="pending" class="d-flex flex-column align-center ga-4">
         <span>Loading Equipment...</span>
         <v-progress-circular :size="75" color="primary" indeterminate/>
       </v-col>
@@ -63,5 +63,5 @@ definePageMeta({
   title: "Dashboard",
 });
 
-const { data: equipments, status } = useAsyncEquipmentWithOEE();
+const { data: equipments, status, pending } = useAsyncEquipmentWithOEE();
 </script>

From 8b3d9fe2a7c59638347b7edc4abe372c50e23805 Mon Sep 17 00:00:00 2001
From: Scott Fasone <scott181182@yahoo.com>
Date: Mon, 3 Jun 2024 12:54:53 -0400
Subject: [PATCH 3/5] fix(frontend): updated metric progress circular to react
 better to value changes

---
 .../components/metric-progress-circular.vue   | 22 +++++++++----------
 frontend/pages/equipment/[equipmentID].vue    |  5 +++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/components/metric-progress-circular.vue b/frontend/components/metric-progress-circular.vue
index 2255e4f..14b8575 100644
--- a/frontend/components/metric-progress-circular.vue
+++ b/frontend/components/metric-progress-circular.vue
@@ -1,16 +1,16 @@
 <template>
   <v-progress-circular
-    :size="size"
-    :width="width"
+    :size="props.size"
+    :width="props.width"
     class="text-center mt-2"
 
     :model-value="progressValue"
-    :color="typeof value === 'number' ? getColorState(value) : 'grey'"
+    :color="typeof props.value === 'number' ? getColorState(props.value) : 'grey'"
   >
-    <div :class="labelClass">
-      <h3 class="font-weight-medium">{{ label }}</h3>
-      <span v-if="typeof value === 'number'">{{value.toFixed(1)}}%</span>
-      <span v-else-if="typeof value === null || value === undefined">No Value</span>
+    <div :class="props.labelClass">
+      <h3 class="font-weight-medium">{{ props.label }}</h3>
+      <span v-if="typeof props.value === 'number'">{{props.value.toFixed(1)}}%</span>
+      <span v-else-if="typeof props.value === null || props.value === undefined">No Value</span>
       <span v-else>??</span>
     </div>
   </v-progress-circular>
@@ -30,17 +30,17 @@ interface Props {
   // Value Props.
   label: string;
   labelClass?: string;
-  value: unknown;
+  value: number | undefined | null;
 }
-const { label, labelClass, value, size, width } = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   size: 150,
   width: 20,
   labelClass: "text-subtitle-1",
 });
 
 const progressValue = computed(
-  () => typeof value === "number"
-    ? clamp(value, { min: 0, max: 100 })
+  () => typeof props.value === "number"
+    ? clamp(props.value, { min: 0, max: 100 })
     : 0,
 );
 </script>
diff --git a/frontend/pages/equipment/[equipmentID].vue b/frontend/pages/equipment/[equipmentID].vue
index 4e6c977..43f0d1f 100644
--- a/frontend/pages/equipment/[equipmentID].vue
+++ b/frontend/pages/equipment/[equipmentID].vue
@@ -26,7 +26,7 @@
         <MetricProgressCircular
           label="OEE"
           label-class="text-h4"
-          :value="oeeSummary.value"
+          :value="oeeValue"
           :size="250"
         />
       </v-col>
@@ -205,7 +205,8 @@ const { data: timeSeriesData, pending: timeSeriesPending } = useAsyncQuery({
 });
 
 
-const oeeSummary = computed(() => makePercentMetric("OEE", equipment.value?.oee.summary?.metric?.value));
+const oeeValue = computed(() => equipment.value?.oee.summary?.metric?.value);
+
 const metricTabs = computed(() => [
   {
     label: "OEE",

From d432ee3424f55d96f840a6c201294a3286310839 Mon Sep 17 00:00:00 2001
From: Scott Fasone <scott181182@yahoo.com>
Date: Mon, 3 Jun 2024 12:57:07 -0400
Subject: [PATCH 4/5] feat(frontend): added pending state for equipment OEE

---
 frontend/components/metric-progress-circular.vue | 5 ++++-
 frontend/pages/equipment/[equipmentID].vue       | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/components/metric-progress-circular.vue b/frontend/components/metric-progress-circular.vue
index 14b8575..1007bbe 100644
--- a/frontend/components/metric-progress-circular.vue
+++ b/frontend/components/metric-progress-circular.vue
@@ -5,11 +5,13 @@
     class="text-center mt-2"
 
     :model-value="progressValue"
+    :indeterminate="pending"
     :color="typeof props.value === 'number' ? getColorState(props.value) : 'grey'"
   >
     <div :class="props.labelClass">
       <h3 class="font-weight-medium">{{ props.label }}</h3>
-      <span v-if="typeof props.value === 'number'">{{props.value.toFixed(1)}}%</span>
+      <span v-if="pending">...</span>
+      <span v-else-if="typeof props.value === 'number'">{{props.value.toFixed(1)}}%</span>
       <span v-else-if="typeof props.value === null || props.value === undefined">No Value</span>
       <span v-else>??</span>
     </div>
@@ -31,6 +33,7 @@ interface Props {
   label: string;
   labelClass?: string;
   value: number | undefined | null;
+  pending?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 150,
diff --git a/frontend/pages/equipment/[equipmentID].vue b/frontend/pages/equipment/[equipmentID].vue
index 43f0d1f..577b88f 100644
--- a/frontend/pages/equipment/[equipmentID].vue
+++ b/frontend/pages/equipment/[equipmentID].vue
@@ -27,6 +27,7 @@
           label="OEE"
           label-class="text-h4"
           :value="oeeValue"
+          :pending="pending"
           :size="250"
         />
       </v-col>

From d75541f09ce01d274cd921afc624d74644ee40db Mon Sep 17 00:00:00 2001
From: Scott Fasone <scott181182@yahoo.com>
Date: Mon, 3 Jun 2024 12:57:40 -0400
Subject: [PATCH 5/5] chore(frontend): added package version

---
 frontend/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/package.json b/frontend/package.json
index df396a5..c1be78b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,5 +1,6 @@
 {
   "name": "smip-oee-dashboard",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "contributors": [