Refactor: DoughnutChart

shm11C3 · Dec 15, 2024 · 9ea5188 · 9ea5188
1 parent b9aaa27
commit 9ea5188
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/src/components/charts/DoughnutChart.tsx b/src/components/charts/DoughnutChart.tsx
@@ -1,6 +1,5 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
-import { displayHardType } from "@/consts/chart";
-import type { ChartDataType, HardwareDataType } from "@/types/hardwareDataType";
+import type { HardwareDataType } from "@/types/hardwareDataType";
 import { Lightning, Speedometer, Thermometer } from "@phosphor-icons/react";
 import {
   ArcElement,
@@ -16,14 +15,10 @@ ChartJS.register(ArcElement, Tooltip, Legend);
 
 const DoughnutChart = ({
   chartData,
-  hardType,
   dataType,
-  showTitle,
 }: {
   chartData: number;
-  hardType: ChartDataType;
   dataType: HardwareDataType;
-  showTitle: boolean;
 }) => {
   const { settings } = useSettingsAtom();
 
@@ -69,26 +64,19 @@ const DoughnutChart = ({
 
   return (
     <div className="p-2 w-36 relative">
-      <h3 className="text-lg font-bold">
-        {
-          showTitle
-            ? displayHardType[hardType]
-            : "　" /** [TODO] タイトルはコンポーネント外のほうが使いやすそう */
-        }
-      </h3>
       <Doughnut data={data} options={options} />
-      <div className="absolute inset-0 flex flex-col items-center justify-center">
+      <div className="absolute inset-x-0 flex flex-col items-center justify-center top-16">
         <span className="text-slate-800 dark:text-white text-xl font-semibold">
           {chartData}
           {dataTypeUnits[dataType]}
         </span>
       </div>
-      <span className="flex justify-center mt-4 text-gray-800 dark:text-gray-400">
+      <span className="flex justify-center my-4 text-gray-800 dark:text-gray-400">
         {dataTypeIcons[dataType]}
         {displayDataType[dataType]}
       </span>
     </div>
   );
 };
 
-export default DoughnutChart;
+export { DoughnutChart };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -38,7 +38,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-neutral-400 dark:bg-neutral-500" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
@@ -10,7 +10,7 @@ import {
   StorageBarChart,
   type StorageBarChartData,
 } from "@/components/charts/Bar";
-import DoughnutChart from "@/components/charts/DoughnutChart";
+import { DoughnutChart } from "@/components/charts/DoughnutChart";
 import { ProcessesTable } from "@/components/charts/ProcessTable";
 import type { StorageInfo } from "@/rspc/bindings";
 import type { NameValues } from "@/types/hardwareDataType";
@@ -35,12 +35,23 @@ const InfoTable = ({ data }: { data: { [key: string]: string | number } }) => {
   );
 };
 
-const DataArea = ({ children }: { children: React.ReactNode }) => {
+const DataArea = ({
+  children,
+  title,
+  border = true,
+}: { children: React.ReactNode; title?: string; border?: boolean }) => {
   return (
     <div className="p-4">
-      <div className="border rounded-2xl border-zinc-400 dark:border-zinc-600">
-        <div className="p-4">{children}</div>
-      </div>
+      {border ? (
+        <div className="border rounded-2xl border-zinc-400 dark:border-zinc-600">
+          {title && (
+            <h3 className="pt-4 pl-4 pb-2 text-xl font-bold">{title}</h3>
+          )}
+          <div className="px-4 pb-4">{children}</div>
+        </div>
+      ) : (
+        <>{children}</>
+      )}
     </div>
   );
 };
@@ -56,8 +67,6 @@ const CPUInfo = () => {
         <DoughnutChart
           chartData={cpuUsageHistory[cpuUsageHistory.length - 1]}
           dataType={"usage"}
-          hardType="cpu"
-          showTitle={true}
         />
         <InfoTable
           data={{
@@ -96,24 +105,12 @@ const GPUInfo = () => {
           <DoughnutChart
             chartData={graphicUsageHistory[graphicUsageHistory.length - 1]}
             dataType={"usage"}
-            hardType="gpu"
-            showTitle={true}
           />
           {targetTemperature && (
-            <DoughnutChart
-              chartData={targetTemperature}
-              dataType={"temp"}
-              hardType="gpu"
-              showTitle={false}
-            />
+            <DoughnutChart chartData={targetTemperature} dataType={"temp"} />
           )}
           {targetFanSpeed && (
-            <DoughnutChart
-              chartData={targetFanSpeed}
-              dataType={"clock"}
-              hardType="gpu"
-              showTitle={false}
-            />
+            <DoughnutChart chartData={targetFanSpeed} dataType={"clock"} />
           )}
         </div>
 
@@ -145,8 +142,6 @@ const MemoryInfo = () => {
         <DoughnutChart
           chartData={memoryUsageHistory[memoryUsageHistory.length - 1]}
           dataType={"usage"}
-          hardType="memory"
-          showTitle={true}
         />
         <InfoTable
           data={{
@@ -190,7 +185,6 @@ const StorageDataInfo = () => {
 
   return (
     <div className="pt-2">
-      <h3 className="text-lg font-bold">{t("shared.storage")}</h3>
       <div className="flex">
         <div className="w-1/2">
           {sortedStorage.map((storage) => {
@@ -225,6 +219,7 @@ const StorageDataInfo = () => {
 const Dashboard = () => {
   const { hardwareInfo } = useHardwareInfoAtom();
   const { init } = useHardwareInfoAtom();
+  const { t } = useTranslation();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
@@ -250,16 +245,31 @@ const Dashboard = () => {
     },
   ].filter((x) => x != null);
 
+  const dataAreaKey2Title: Record<string, string> = {
+    cpuInfo: "CPU",
+    memoryInfo: "RAM",
+    storageInfo: t("shared.storage"),
+    gpuInfo: "GPU",
+  };
+
   return (
     <div className="flex flex-wrap gap-4">
       <div className="flex-1 flex flex-col gap-4">
         {hardwareInfoListLeft.map(({ key, component }) => (
-          <DataArea key={key}>{component}</DataArea>
+          <DataArea key={key} title={dataAreaKey2Title[key]}>
+            {component}
+          </DataArea>
         ))}
       </div>
       <div className="flex-1 flex flex-col gap-4">
         {hardwareInfoListRight.map(({ key, component }) => (
-          <DataArea key={key}>{component}</DataArea>
+          <DataArea
+            key={key}
+            title={dataAreaKey2Title[key]}
+            border={key !== "processesTable"}
+          >
+            {component}
+          </DataArea>
         ))}
       </div>
     </div>