add annotation label for the high marks

dashboard/src/components/GraphItem.vue

@@ -27,6 +27,7 @@ const props = defineProps({
   memory: Number,
   cpuCount: Number,
   highMark: Number,
+  highMarkLabel: String,
 });
 
 function createGraphOptions({ yscale, period, highMark }) {
@@ -112,7 +113,18 @@ function createGraphOptions({ yscale, period, highMark }) {
             yMin: highMark,
             yMax: highMark,
             borderColor: 'rgb(139, 0, 0)',
-            borderWidth: 0.5
+            borderWidth: 0.5,
+            label: {
+              display: true,
+              content: props.highMarkLabel,
+              position: 'end', // 'start', 'center', or 'end'
+              backgroundColor: 'transparent',
+              color: 'rgb(139, 0, 0)',
+              yAdjust: -6,
+              font: {
+                size: 10
+              }
+            }
           }
         }
       },
@@ -302,7 +314,7 @@ defineExpose({
 </script>
 
 <template>
-  <div>
+  <div class="graph-container">
     <label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
     <div class="graph">
       <canvas ref="graphNode"></canvas>
@@ -314,6 +326,10 @@ defineExpose({
 
 <style scoped>
 
+.graph-container {
+  margin-bottom: 30px;
+}
+
 .graphs label {
   margin: 16px 0;
 }
@@ -327,6 +343,7 @@ defineExpose({
 .footer {
   text-align: center;
   font-weight: bold;
+  font-size: 12px;
 }
 
 </style>

dashboard/src/components/app/Graphs.vue

@@ -144,6 +144,7 @@ onUnmounted(async () => {
         yscale="cpu"
         :cpu-count="systemCpus.length"
         :high-mark="systemCpus.length * app.cpuQuota/100"
+        high-mark-label="Max CPU"
         >
       </GraphItem>
 
@@ -153,6 +154,7 @@ onUnmounted(async () => {
         yscale="memory"
         :memory="appMemory"
         :high-mark="appMemory"
+        high-mark-label="Max Memory"
         >
       </GraphItem>