Merge pull request #35 from cesmii/develop

Final Draft

.github/workflows/check.yml

@@ -0,0 +1,41 @@
+name: Check
+on:
+  push:
+    branches: [ "develop" ]
+  pull_request:
+    branches: [ "develop" ]
+
+jobs:
+  check:
+    name: Check Code
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      actions: read
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Dependencies
+        working-directory: frontend
+        run: |
+          bun install --frozen-lockfile
+
+      - name: Code Generation
+        working-directory: frontend
+        run: |
+          bun predev
+
+      - name: Run ESLint
+        working-directory: frontend
+        run: bun lint
+        continue-on-error: true
+
+      - name: TypeScript Check
+        working-directory: frontend
+        run: bun check

.vscode/settings.json

@@ -4,7 +4,8 @@
         "vscode",
         "devops",
         "docker",
-        "graphql"
+        "graphql",
+        "cicd"
     ],
     "conventionalCommits.gitmoji": false,
     "conventionalCommits.promptFooter": false,

frontend/codegen.ts

@@ -4,9 +4,7 @@ import type { CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
   schema: "https://east.cesmii.net/graphql",
-  documents: [
-    "lib/graphql/**/*.graphql",
-  ],
+  documents: [ "lib/graphql/**/*.graphql" ],
   ignoreNoDocuments: true,
   generates: {
     "./generated/graphql/operations.ts": {

frontend/components/apexchart-timeseries.vue

@@ -0,0 +1,140 @@
+<template>
+  <ClientOnly>
+    <apexchart
+      type="line"
+      :series="series"
+      :options="options"
+    />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { ApexOptions } from "apexcharts";
+import dayjs from "dayjs";
+import type VueApexCharts from "vue3-apexcharts";
+import { useTheme } from "vuetify";
+
+
+
+interface Props {
+  series: typeof VueApexCharts["series"];
+  xmin?: number;
+  xmax?: number;
+  tzOffset?: number;
+}
+
+const {
+  series,
+  xmin,
+  xmax,
+  tzOffset,
+} = defineProps<Props>();
+
+const theme = useTheme();
+
+function formatAsPercent(val: number) {
+  return `${val.toFixed(1)}%`;
+}
+
+const adjustedXMin = computed(() => {
+  return dayjs(xmin).minute(0)
+    .valueOf();
+});
+
+const title = computed(() => {
+  const baseTitle = "OEE and Related Metrics";
+
+  if(xmin && tzOffset) {
+    const dateStr = dayjs(xmin).utcOffset(tzOffset)
+      .format("YYYY-MM-DD");
+
+    return `${baseTitle} (${dateStr})`;
+  }
+  return baseTitle;
+});
+
+const options = computed<ApexOptions>(() => ({
+  title: {
+    text: title.value,
+  },
+  chart: {
+    type: "line",
+    zoom: {
+      type: "x",
+      enabled: true,
+      autoScaleYaxis: true,
+    },
+    toolbar: {
+      autoSelected: "zoom",
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  markers: {
+    // Size of markers.
+    // Currently 0 since there are a lot of data points.
+    size: 0,
+  },
+  stroke: {
+    // Width of lines on plot.
+    width: 3,
+  },
+  xaxis: {
+    type: "datetime",
+    tickAmount: 12,
+    labels: {
+      datetimeUTC: false,
+      formatter: tzOffset
+        ? (_val, ts) => dayjs(ts).utcOffset(tzOffset)
+            .format("HH:mm")
+        : undefined,
+    },
+    min: adjustedXMin.value,
+    max: xmax,
+  },
+  yaxis: {
+    labels: {
+      formatter: formatAsPercent,
+    },
+    min: 0,
+    max: function (max: number) { return max > 100 ? Math.ceil(max + 5) : 100; },
+    type: "numeric",
+  },
+  tooltip: {
+    y: {
+      shared: false,
+      formatter: formatAsPercent,
+    },
+    x: {
+      formatter: (val) => renderDateTime(val, tzOffset),
+    },
+  },
+  theme: {
+    mode: theme.global.current.value.dark ? "dark" : "light",
+  },
+  annotations: {
+    yaxis: [
+      {
+        y: 100,
+        borderColor: theme.global.current.value.colors.success,
+        label: {
+          text: "100%",
+          borderColor: theme.global.current.value.colors.success,
+          offsetY: 20,
+          offsetX: -10,
+          position: "right",
+          textAnchor: "end",
+          style: {
+            color: theme.global.current.value.colors["on-surface"],
+            background: theme.global.current.value.colors.surface,
+          },
+        },
+      },
+    ],
+  },
+}));
+
+
+
+</script>

frontend/components/attribute-table.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="loading" class="d-flex flex-column align-center ga-4">
+    <span>Loading Attributes...</span>
+    <v-progress-circular :size="75" color="primary" indeterminate class="ml-2"/>
+  </div>
+  <div v-else>
+    <v-table>
+      <thead>
+        <th class="text-left">
+          Attribute
+        </th>
+        <th class="text-left">
+          Value
+        </th>
+        <th class="text-left">
+          Type
+        </th>
+        <th class="text-left">
+          Updated
+        </th>
+      </thead>
+
+      <tbody>
+        <tr v-for="attr in attributes" :key="attr.id">
+          <td>
+            {{attr.displayName}}
+            <v-tooltip v-if="attr.description" :text="attr.description" location="top">
+              <template #activator="{props}">
+                <v-btn icon="mdi-information-variant" class="rounded ml-2" size="1.25rem" color="info" v-bind="props"/>
+              </template>
+            </v-tooltip>
+          </td>
+          <td>
+            <attribute-value :attribute="attr"/>
+          </td>
+          <td>
+            {{ attr.dataType }}
+          </td>
+          <td>
+            <span v-if="attr.updatedTimestamp">
+              {{ renderDateTime(attr.updatedTimestamp, tzOffset) }}
+            </span>
+            <em v-else>unknown</em>
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
+    <div class="text-center">
+      <div v-if="attributes?.length === 0" class="mt-4">
+        <em>No Attributes</em>
+      </div>
+      <div v-if="!attributes" class="mt-4">
+        <em>Could Not Retrieve Attributes</em>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IAttribute } from "~/lib/equipment";
+
+
+
+interface Props {
+  attributes: IAttribute[] | null | undefined;
+  tzOffset?: number;
+  loading?: boolean;
+}
+const { attributes, loading, tzOffset } = defineProps<Props>();
+</script>

frontend/components/attribute-value.vue

@@ -0,0 +1,37 @@
+
+
+<template>
+  <template v-if="attribute.value !== null && attribute.value !== undefined">
+    <v-chip v-if="attribute.dataType === ScalarTypeEnum.Datetime">
+      {{ renderDateTime(attribute.value as string, tzOffset) }}
+    </v-chip>
+
+    <v-chip v-else-if="attribute.dataType === ScalarTypeEnum.Float">
+      {{ typeof attribute.value === "number" ? attribute.value.toFixed(2) : attribute.value }}
+      {{ attribute.maxValue === 100 ? '%' : ''}}
+    </v-chip>
+
+    <v-chip v-else>
+      {{attribute.value}}
+    </v-chip>
+  </template>
+
+  <em v-else>
+    No Value
+  </em>
+
+
+</template>
+
+<script setup lang="ts">
+import { ScalarTypeEnum } from "~/generated/graphql/operations";
+import type { IAttribute } from "~/lib/equipment";
+
+
+
+interface Props {
+  attribute: IAttribute;
+  tzOffset?: number;
+}
+const { attribute, tzOffset } = defineProps<Props>();
+</script>