ADD: chart cpu widget

launcher/public/output.css

@@ -4220,11 +4220,6 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
-.bg-red-50{
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }

launcher/src/components/UI/control-page/components/widgets/ChartCpu.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    class="theCpuParent flex w-full h-full justify-center items-center"
+    @mouseenter="footerStore.cursorLocation = t('controlPage.cpuUsageIs', { usage: cpu })"
+    @mouseleave="footerStore.cursorLocation = ''"
+  >
+    <div class="cpuIco w-1/3 h-full flex flex-col justify-center items-center">
+      <div class="cpuIco-container flex justify-center items-center w-full h-4/5">
+        <img class="w-3/4" src="/img/icon/control-page-icons/cpuIcon.svg" />
+      </div>
+      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">CPU</span>
+    </div>
+    <div class="cpuCountPart w-2/3 h-full flex justify-center items-center">
+      <VueApexCharts :options="chartOptions" :series="chartSeries" class="full-size-chart" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import VueApexCharts from "vue3-apexcharts";
+import { useControlStore } from "@/store/theControl";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+const controlStore = useControlStore();
+const footerStore = useFooter();
+
+const cpu = computed(() => controlStore.cpu);
+const chartData = ref([]);
+let pollingInterval;
+
+const chartSeries = computed(() => [{ name: "CPU Usage", data: chartData.value }]);
+
+const chartOptions = {
+  chart: {
+    type: "area",
+    width: "100%",
+    height: "100%",
+    toolbar: { show: false },
+    animations: {
+      enabled: true,
+      easing: "linear",
+      dynamicAnimation: { speed: 1000 },
+    },
+  },
+  xaxis: {
+    type: "datetime",
+    labels: { show: false },
+    axisTicks: { show: false },
+    axisBorder: { show: false },
+    tooltip: { enabled: false },
+    crosshairs: { show: false },
+  },
+  yaxis: {
+    labels: { show: false },
+    axisTicks: { show: false },
+    axisBorder: { show: false },
+    min: 0,
+    max: 100,
+  },
+  grid: {
+    borderColor: "gray",
+    strokeDashArray: 5,
+    xaxis: { lines: { show: true } },
+    yaxis: { lines: { show: true } },
+    padding: { top: -5, bottom: -5 },
+  },
+  stroke: { width: 1, colors: ["#00ff00"] },
+  markers: { size: 5 },
+  dataLabels: { enabled: false },
+  tooltip: { enabled: false },
+};
+
+const updateChartData = () => {
+  const currentTime = Date.now();
+  chartData.value.push([currentTime, cpu.value]);
+
+  if (chartData.value.length > 10) {
+    chartData.value.shift();
+  }
+};
+
+onMounted(() => {
+  pollingInterval = setInterval(updateChartData, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(pollingInterval);
+});
+</script>
+<style scoped>
+.full-size-chart {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+</style>

launcher/src/components/UI/control-page/sections/CommonSidebar.vue

@@ -4,7 +4,7 @@
   >
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3"><InfoWidget /></WidgetCard>
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3"><VolumeWidget /></WidgetCard>
-    <WidgetCard class="cpu-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheCpu /></WidgetCard>
+    <WidgetCard class="cpu-widget col-start-1 col-span-6 row-start-7 row-span-3"><!--<TheCpu />--><ChartCpu /></WidgetCard>
     <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheRam /></WidgetCard>
     <WidgetCard class="network-widget col-start-1 col-span-6 row-start-13 row-span-3"><TheNetwork /></WidgetCard>
   </div>
@@ -14,7 +14,8 @@
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import TheNetwork from "../components/widgets/TheNetwork.vue";
 import TheRam from "../components/widgets/TheRam.vue";
-import TheCpu from "../components/widgets/TheCpu.vue";
+// import TheCpu from "../components/widgets/TheCpu.vue";
+import ChartCpu from "../components/widgets/ChartCpu.vue";
 import InfoWidget from "../components/widgets/InfoWidget.vue";
 import VolumeWidget from "../components/widgets/VolumeWidget.vue";
 </script>