update: デザイン修正

biome.json

@@ -1,16 +1,19 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true
-		}
-	},
-	"formatter": {
-		"indentStyle": "space",
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "nursery": {
+        "useSortedClasses": "off"
+      }
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
     "indentWidth": 2
-	}
+  }
 }

src/atom/useHardwareInfoAtom.ts

@@ -3,7 +3,7 @@ import type { HardwareInfo } from "@/types/hardwareDataType";
 import { atom, useAtom } from "jotai";
 import { useEffect } from "react";
 
-const hardInfoAtom = atom<HardwareInfo | null>();
+const hardInfoAtom = atom<HardwareInfo>();
 
 export const useHardwareInfoAtom = () => {
   const [hardwareInfo, setHardInfo] = useAtom(hardInfoAtom);

src/components/charts/CustomLegend.tsx

@@ -11,12 +11,9 @@ const CustomLegend = ({
 }) => {
   return (
     <div className="custom-legend">
-      <div
-        className="legend-item"
-        style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
-      >
+      <div className="cursor-default flex items-center">
         {item.icon}
-        <span style={{ marginLeft: "8px" }}>{item.label}</span>
+        <span className="ml-2">{item.label}</span>
       </div>
     </div>
   );

src/components/charts/LineChart.tsx

@@ -45,7 +45,7 @@ const LineChart = ({
     scales: {
       x: { display: false },
       y: {
-        display: true,
+        display: false,
         suggestedMin: 0,
         suggestedMax: 100,
         grid: { color: "rgba(255, 255, 255, 0.2)" },
@@ -107,21 +107,21 @@ const LineChart = ({
 
   const legendItems: Record<ChartDataType, LegendItem> = {
     cpu: {
-      label: "CPU Usage",
+      label: "CPU",
       icon: (
         <Cpu size={20} color="rgb(75, 192, 192)" className="text-teal-400" />
       ),
       datasetIndex: 0,
     },
     memory: {
-      label: "Memory Usage",
+      label: "Memory",
       icon: (
         <Memory size={20} color="rgb(255, 99, 132)" className="text-pink-400" />
       ),
       datasetIndex: 1,
     },
     gpu: {
-      label: "GPU Usage",
+      label: "GPU",
       icon: (
         <GraphicsCard
           size={20}
@@ -134,9 +134,9 @@ const LineChart = ({
   };
 
   return (
-    <div className="chart-container">
+    <div className="border-2 rounded-xl border-slate-400 dark:border-zinc-600 border-ra mt-5 max-w-screen-xl mx-auto">
       <Line ref={chartRef} data={data[dataType]} options={options} />
-      <div className="flex justify-center mt-4">
+      <div className="flex justify-center mt-4 mb-2">
         <CustomLegend item={legendItems[dataType]} />
       </div>
     </div>

src/template/Chart.tsx

@@ -57,7 +57,7 @@ const ChartTemplate = () => {
     );
   }, [settings]);
 
-  return <div className="chart-container">{renderedCharts}</div>;
+  return <div className="p-8">{renderedCharts}</div>;
 };
 
 export default ChartTemplate;