Feature/graphql current value fix

frontend/components/metric-progress-circular.vue

@@ -1,16 +1,18 @@
 <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'"
+    :indeterminate="pending"
+    :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="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>
   </v-progress-circular>
@@ -30,17 +32,18 @@ interface Props {
   // Value Props.
   label: string;
   labelClass?: string;
-  value: unknown;
+  value: number | undefined | null;
+  pending?: boolean;
 }
-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>

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()),
   };
 }

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

frontend/package.json

@@ -1,5 +1,6 @@
 {
   "name": "smip-oee-dashboard",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "contributors": [

frontend/pages/equipment/[equipmentID].vue

@@ -26,7 +26,8 @@
         <MetricProgressCircular
           label="OEE"
           label-class="text-h4"
-          :value="oeeSummary.value"
+          :value="oeeValue"
+          :pending="pending"
           :size="250"
         />
       </v-col>
@@ -205,7 +206,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",

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>