initial commit

2024-02-13 01:17:03 +01:00
commit f40b27fd8b
136 changed files with 16023 additions and 0 deletions
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { HumanReadable } from '@/plugins/utils';
+import { computed } from 'vue';
+
+const props = defineProps({
+  tilesData: <any>{},
+  type: String
+})
+
+const data = computed(() => {
+  const d = props.tilesData
+  if (!d.mem && !d.cpu) return { percent: 0, text: '-' }
+  switch (props.type) {
+    case 'g-cpu':
+      return { percent: d.cpu, text: Math.ceil(d.cpu) + "%" }
+    case 'g-mem':
+      const curr = HumanReadable.sizeFormat(d.mem.current,0).split(' ')
+      const total = HumanReadable.sizeFormat(d.mem.total,0).split(' ')
+      if (curr[1] == total[1]) curr[1] = ''
+      return {
+        percent: Math.ceil(d.mem.current*100/d.mem.total),
+        text: curr[0] + "<sup>" + (curr[1]?? ' ') + "</sup>/" +  total[0] + "<sup>" + (total[1]?? '') + "</sup>"
+      }
+  }
+  return { percent: 0, text: '-'}
+})
+
+const cssTransformRotateValue = computed(() => {
+  const percentageAsFraction = data.value.percent / 100
+  const halfPercentage = percentageAsFraction / 2
+
+  return `${halfPercentage}turn`
+})
+
+const gaugeColor = computed(() => {
+  if (data.value.percent > 90) return 'error'
+  if (data.value.percent > 70) return 'warning'
+  return 'primary'
+})
+</script>
+
+<template>
+  <div class="gauge__outer">
+    <div class="gauge__inner">
+      <div
+        class="gauge__fill" 
+        :style="{ 
+          transform: `rotate(${cssTransformRotateValue})`,
+          background: `rgb(var(--v-theme-${gaugeColor}))`
+          }">
+      </div>
+      <span class="gauge__cover" dir="ltr" v-html="data.text">
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gauge__outer {
+  width: 100%;
+  max-width: 250px;
+}
+
+.gauge__inner {
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%;
+  background: rgb(var(--v-theme-surface));
+  position: relative;
+  border-top-left-radius: 100% 200%;
+  border-top-right-radius: 100% 200%;
+  overflow: hidden;
+}
+
+.gauge__fill {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: inherit;
+  height: 100%;
+  background: rgb(var(--v-theme-primary));
+  transform-origin: center top;
+  transform: rotate(0turn);
+  transition: transform 0.2s ease-out;
+}
+
+.gauge__cover {
+  width: 75%;
+  height: 150%;
+  background: rgb(var(--v-theme-background));
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+
+  /* Text */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 25%;
+  box-sizing: border-box;
+  font-family: 'Lexend', sans-serif;
+  font-weight: bold;
+  font-size: 32px;
+}
+
+sup {
+  font-size: 16px;
+}
+</style>