add dynamic icon showing report status

components/Card.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import IconTick from "~icons/carbon/checkmark-filled"
 import { PropType } from "vue"
-import { formatUptime } from "~~/utils/function"
+import { formatUptime, statusString, statusColor } from "~~/utils/function"
 import { ParsedContent } from "@nuxt/content/dist/runtime/types"
 
 const props = defineProps({
@@ -16,7 +15,7 @@ const status = ref()
     <div class="mb-4 flex items-center justify-between">
       <div class="mx-0.5">
         <div class="flex items-center">
-          <IconTick class="text-xl text-purple-500"></IconTick>
+          <StatusIcon :uptime="status?.overallUptime"></StatusIcon>
           <h2 class="ml-2 text-xl">{{ meta_data.title }}</h2>
         </div>
         <h4 class="text-sm text-gray-400">{{ meta_data.url }}</h4>

components/OverallStatus.vue

@@ -1,19 +1,34 @@
 <script setup lang="ts">
-import IconTick from "~icons/carbon/checkmark-filled"
 import { ParsedContent } from "@nuxt/content/dist/runtime/types"
 import { PropType } from "vue"
+import { isSameDate } from "~~/utils/function"
+import { Report } from "~~/utils/interface"
 
 const props = defineProps({
   report_data: Object as PropType<ParsedContent[]>,
 })
+
+const overallUptime = computed(() => {
+  let uptime = 1
+  props.report_data.forEach((i) => {
+    let todayData: number[] = i.body
+      .filter((j: Report) => isSameDate(j.time, new Date()))
+      .map((j: Report) => (j.status === "success" ? 1 : 0))
+    let averageUptime = todayData.reduce((a, v) => a + v, 0) / todayData.length
+    if (averageUptime >= 0 && averageUptime < 0.5) {
+      uptime = 0
+    }
+  })
+  return uptime
+})
 </script>
 
 <template>
   <div class="flex justify-center">
     <div
       class="w-full bg-white p-8 flex items-center rounded-xl shadow-lg shadow-purple-100 text-purple-500 text-3xl font-medium"
     >
-      <IconTick></IconTick>
+      <StatusIcon :uptime="overallUptime" class="text-3xl" />
       <h2 class="ml-6">All Systems Operational</h2>
     </div>
   </div>

components/Status.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
+import { statusColor } from "~~/utils/function"
+
 const props = defineProps({
   date: Date,
   uptime: Number,
 })
 
-const uptimeClass = computed(() => {
-  if (props.uptime == 1) {
-    return "bg-purple-500"
-  } else if (props.uptime >= 0.5) {
-    return "bg-yellow-400"
-  } else if (props.uptime >= 0) {
-    return "bg-red-400"
-  } else {
-    return "bg-gray-200"
-  }
-})
+const uptimeClass = computed(() => statusColor(props.uptime))
 </script>
 
 <template>

components/StatusGrid.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { PropType } from "vue"
+import { isSameDate } from "~~/utils/function"
 import { Report } from "~~/utils/interface"
 
 const props = defineProps({
@@ -20,10 +21,7 @@ const computedData = computed(() => {
   let dates = getDateArray(new Date(), 45)
   return dates.map((i) => {
     let dataGroupByDates: number[] = props.data
-      ?.filter((j) => {
-        let ndt = new Date(j.time)
-        return ndt.getDate() === i.getDate() && ndt.getMonth() === i.getMonth() && ndt.getFullYear() === i.getFullYear()
-      })
+      ?.filter((j) => isSameDate(i, j.time))
       .map((i) => (i.status === "success" ? 1 : 0))
 
     let uptime = dataGroupByDates?.length ? dataGroupByDates.reduce((a, v) => a + v, 0) / dataGroupByDates.length : -1

components/StatusIcon.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import IconTick from "~icons/carbon/checkmark-filled"
+import IconWarning from "~icons/carbon/warning-filled"
+import IconDanger from "~icons/carbon/face-dizzy-filled"
+import IconUnknown from "~icons/carbon/help-filled"
+import { statusString } from "~~/utils/function"
+
+const props = defineProps({
+  uptime: Number,
+})
+</script>
+
+<template>
+  <div class="inline-flex text-xl">
+    <IconTick v-if="statusString(uptime) == 'success'" class="text-purple-500"></IconTick>
+    <IconWarning v-else-if="statusString(uptime) == 'warning'" class="text-yellow-300"></IconWarning>
+    <IconDanger v-else-if="statusString(uptime) == 'danger'" class="text-red-400"></IconDanger>
+    <IconUnknown v-else-if="statusString(uptime) == 'unknown'" class="text-gray-300"></IconUnknown>
+  </div>
+</template>

utils/function.ts

@@ -1,3 +1,33 @@
 export const formatUptime = (data: number) => {
   return ((data ?? 0) * 100).toFixed(2) + "%"
 }
+
+export const isSameDate = (a: string | Date, b: string | Date) => {
+  let adt = new Date(a)
+  let bdt = new Date(b)
+  return adt.getDate() === bdt.getDate() && adt.getMonth() === bdt.getMonth() && adt.getFullYear() === bdt.getFullYear()
+}
+
+export const statusColor = (uptime: number, type = "bg") => {
+  if (uptime >= 0.75) {
+    return `${type}-purple-500`
+  } else if (uptime >= 0.5) {
+    return `${type}-yellow-400`
+  } else if (uptime >= 0) {
+    return `${type}-red-400`
+  } else {
+    return `${type}-gray-200`
+  }
+}
+
+export const statusString = (uptime: number, type = "bg") => {
+  if (uptime >= 0.75) {
+    return "success"
+  } else if (uptime >= 0.5) {
+    return "warning"
+  } else if (uptime >= 0) {
+    return "danger"
+  } else {
+    return "unknown"
+  }
+}

windi.config.ts

@@ -2,5 +2,14 @@ import { defineConfig } from "windicss/helpers"
 
 export default defineConfig({
   plugins: [require("windicss/plugin/typography")],
-  safelist: ["bg-purple-500", "bg-yellow-300", "bg-red-400", "bg-gray-200"],
+  safelist: [
+    "bg-purple-500",
+    "bg-yellow-400",
+    "bg-red-400",
+    "bg-gray-200",
+    "text-purple-500",
+    "text-yellow-400",
+    "text-red-400",
+    "text-gray-200",
+  ],
 })