optimize ui layout in overview page (#157)

domechn · Nov 11, 2023 · 71463a1 · 71463a1
1 parent 2fce5d3
commit 71463a1
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 186 deletions.
diff --git a/src/components/coins-amount-and-value-change.tsx b/src/components/coins-amount-and-value-change.tsx
@@ -10,7 +10,16 @@ import {
 } from "@/middlelayers/types";
 import { currencyWrapper } from "@/utils/currency";
 import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const prefix = "caaavc";
 
@@ -50,24 +59,26 @@ const App = ({
     responsive: false,
     plugins: {
       title: {
-        display: true,
+        display: false,
+        // text is set for resizing
         text: `Trend of Coin ${getLabel()}`,
       },
       datalabels: {
         display: false,
       },
+      legend: {
+        display: false,
+      },
     },
     scales: {
       x: {
         title: {
-          display: true,
-          text: "Date",
+          display: false,
         },
       },
       y: {
         title: {
-          display: true,
-          text: getLabel(),
+          display: false,
         },
         offset: true,
         ticks: {
@@ -101,9 +112,9 @@ const App = ({
                   .value(),
           borderColor: current.lineColor,
           backgroundColor: current.lineColor,
-          borderWidth: 5,
+          borderWidth: 4,
           tension: 0.1,
-          pointRadius: 1,
+          pointRadius: 0.2,
           pointStyle: "rotRect",
         },
       ],
@@ -131,44 +142,58 @@ const App = ({
   }
 
   return (
-    <>
-      <div className="flex">
-        <ButtonGroup
-          defaultValue="amount"
-          onValueChange={(val: string) => onTypeSelectChange(getWholeKey(val))}
-        >
-          <ButtonGroupItem value="amount">Amount</ButtonGroupItem>
-          <ButtonGroupItem value="value">Value</ButtonGroupItem>
-        </ButtonGroup>
-        <div className="ml-5 mt-1">
-          <Select
-            onValueChange={onCoinSelectChange}
-            value={currentCoinSelected}
+    <div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Trend of Coin {getLabel()}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex">
+            <ButtonGroup
+              defaultValue="amount"
+              onValueChange={(val: string) =>
+                onTypeSelectChange(getWholeKey(val))
+              }
+            >
+              <ButtonGroupItem value="amount">Amount</ButtonGroupItem>
+              <ButtonGroupItem value="value">Value</ButtonGroupItem>
+            </ButtonGroup>
+            <div className="ml-5">
+              <Select
+                onValueChange={onCoinSelectChange}
+                value={currentCoinSelected}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="Select Coin" />
+                </SelectTrigger>
+                <SelectContent className="overflow-y-auto max-h-[20rem]">
+                  <SelectGroup>
+                    <SelectLabel>Coins</SelectLabel>
+                    {data.map((d) => (
+                      <SelectItem key={d.coin} value={d.coin}>
+                        {d.coin}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 350),
+            }}
           >
-            <SelectTrigger className="w-[120px]">
-              <SelectValue placeholder="Select Coin" />
-            </SelectTrigger>
-            <SelectContent className="overflow-y-auto max-h-[20rem]">
-              <SelectGroup>
-                <SelectLabel>Coins</SelectLabel>
-                {data.map((d) => (
-                  <SelectItem key={d.coin} value={d.coin}>
-                    {d.coin}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 350),
-        }}
-      >
-        <Line options={options} data={chartDataByCoin(currentCoinSelected)} />
-      </div>
-    </>
+            <Line
+              options={options}
+              data={chartDataByCoin(currentCoinSelected)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 

diff --git a/src/components/index/index.tsx b/src/components/index/index.tsx
@@ -35,6 +35,7 @@ import {
   LatestAssetsPercentageData,
   TopCoinsPercentageChangeData,
   TopCoinsRankData,
+  TotalValueData,
 } from "@/middlelayers/types";
 import { useContext, useEffect, useState } from "react";
 import {
@@ -95,9 +96,9 @@ const App = () => {
     timestamps: [],
     data: [],
   } as AssetChangeData);
-  const [totalValueData, setTotalValueData] = useState({
+  const [totalValueData, setTotalValueData] = useState<TotalValueData>({
     totalValue: 0,
-    changePercentage: 0,
+    prevTotalValue: 0,
   });
   const [coinsAmountAndValueChangeData, setCoinsAmountAndValueChangeData] =
     useState([] as CoinsAmountAndValueChangeData);

diff --git a/src/components/latest-assets-percentage.tsx b/src/components/latest-assets-percentage.tsx
@@ -1,6 +1,7 @@
 import { Doughnut } from "react-chartjs-2";
 import { useWindowSize } from "@/utils/hook";
 import { LatestAssetsPercentageData } from "@/middlelayers/types";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const App = ({ data }: { data: LatestAssetsPercentageData }) => {
   const size = useWindowSize();
@@ -9,7 +10,8 @@ const App = ({ data }: { data: LatestAssetsPercentageData }) => {
     maintainAspectRatio: false,
     responsive: false,
     plugins: {
-      title: { display: true, text: "Percentage of Assets" },
+      // text is set for resizing
+      title: { display: false, text: "Percentage of Assets" },
       legend: { labels: { font: {} } },
       datalabels: {
         color: "white",
@@ -47,13 +49,22 @@ const App = ({ data }: { data: LatestAssetsPercentageData }) => {
 
   return (
     <div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 400),
-        }}
-      >
-        <Doughnut options={options as any} data={lineData()} />
-      </div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Percentage of Assets
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 400),
+            }}
+          >
+            <Doughnut options={options as any} data={lineData()} />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };

diff --git a/src/components/overview/index.css b/src/components/overview/index.css
diff --git a/src/components/overview/index.tsx b/src/components/overview/index.tsx
@@ -1,9 +1,8 @@
-import TotalValue from "../total-value";
+import TotalValue from "../total-value-and-change";
 import LatestAssetsPercentage from "../latest-assets-percentage";
 import CoinsAmountAndValueChange from "../coins-amount-and-value-change";
 import TopCoinsRank from "../top-coins-rank";
 import TopCoinsPercentageChange from "../top-coins-percentage-change";
-import "./index.css";
 
 import {
   AssetChangeData,
@@ -34,7 +33,7 @@ const App = ({
   topCoinsPercentageChangeData: TopCoinsPercentageChangeData;
 }) => {
   return (
-    <>
+    <div className="space-y-2">
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
         <TotalValue
           currency={currency}
@@ -43,16 +42,14 @@ const App = ({
         ></TotalValue>
       </div>
       <LatestAssetsPercentage data={latestAssetsPercentageData} />
-      <Separator className="my-6" />
       <CoinsAmountAndValueChange
         currency={currency}
         data={coinsAmountAndValueChangeData}
       />
-      <Separator className="my-6" />
       <TopCoinsRank data={topCoinsRankData} />
-      <Separator className="my-6" />
       <TopCoinsPercentageChange data={topCoinsPercentageChangeData} />
-    </>
+      <div className="mb-2"></div>
+    </div>
   );
 };
 

diff --git a/src/components/system-info.tsx b/src/components/system-info.tsx
@@ -17,6 +17,9 @@ const App = () => {
   const [licenseChanged, setLicenseChanged] = useState<boolean>(false);
   const [saveLicenseLoading, setSaveLicenseLoading] = useState(false);
 
+  // to show hidden function
+  const [versionClickTimes, setVersionClickTimes] = useState<number>(0);
+
   useEffect(() => {
     loadVersion();
     loadLicense();
@@ -64,15 +67,20 @@ const App = () => {
 
       <div className="space-y-3">
         <div className="text-l font-bold text-left">Version</div>
-        <div className="text-sm text-left text-gray-400">{version}</div>
+        <div
+          className="text-sm text-left text-gray-400"
+          onClick={() => setVersionClickTimes(versionClickTimes + 1)}
+        >
+          {version}
+        </div>
       </div>
 
       <div className="space-y-3">
         <div className="text-l font-bold text-left">Pro Version</div>
         <div className="text-sm text-left text-gray-400">
           Enter License Key To Active Pro Version ( Coming Soon )
         </div>
-        <div className="flex">
+        <div className={versionClickTimes >= 5 ? "flex" : "hidden"}>
           <Input
             id="license"
             value={license ?? ""}