improve ui for total page

src/components/asset-change.tsx

@@ -1,9 +1,8 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "@/utils/hook";
 import { timestampToDate } from "@/utils/date";
 import { AssetChangeData, CurrencyRateDetail } from "@/middlelayers/types";
-import _ from 'lodash'
-import { currencyWrapper } from '@/utils/currency'
+import _ from "lodash";
+import { currencyWrapper } from "@/utils/currency";
 
 const App = ({
   data,
@@ -14,30 +13,47 @@ const App = ({
 }) => {
   const lineColor = "rgba(255, 99, 71, 1)";
 
-  const size = useWindowSize();
-
   const options = {
     maintainAspectRatio: false,
     responsive: false,
     plugins: {
       title: {
-        display: true,
-        text: `Trend of Asset ${currency.currency} Value`,
+        display: false,
       },
       datalabels: {
         display: false,
       },
+      legend: {
+        display: false,
+      },
     },
     scales: {
       x: {
         title: {
-          display: true,
+          display: false,
           text: "Date",
         },
+        ticks: {
+          maxTicksLimit: 2,
+          autoSkip: false,
+          labelOffset: -5,
+          callback: function (val: number, index: number) {
+            console.log(index === 0 || index === _(data.timestamps).size() - 1);
+            const total = _(data.timestamps).size() - 1;
+
+            // only show start and end date
+            return index === 0 || index === total - 1
+              ? timestampToDate(data.timestamps[index])
+              : "";
+          },
+        },
+        grid: {
+          display: false,
+        },
       },
       y: {
         title: {
-          display: true,
+          display: false,
           text: currency.currency,
         },
         offset: true,
@@ -57,27 +73,23 @@ const App = ({
       datasets: [
         {
           label: "Value",
-          data: _(data.data).map(d => currencyWrapper(currency)(d)).value(),
+          data: _(data.data)
+            .map((d) => currencyWrapper(currency)(d))
+            .value(),
           borderColor: lineColor,
           backgroundColor: lineColor,
-          borderWidth: 5,
+          borderWidth: data.data.length > 20 ? 2 : 4,
           tension: 0.1,
-          pointRadius: 1,
+          pointRadius: data.data.length > 20 ? 0 : 0.3,
           pointStyle: "rotRect",
         },
       ],
     };
   }
 
   return (
-    <div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 350),
-        }}
-      >
-        <Line options={options} data={lineData()} />
-      </div>
+    <div className='h-30'>
+      <Line options={options as any} data={lineData()} />
     </div>
   );
 };

src/components/overview/index.tsx

@@ -15,6 +15,7 @@ import {
   TopCoinsRankData,
 } from "../../middlelayers/types";
 import { Separator } from "../ui/separator";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 
 const App = ({
   currency,
@@ -38,12 +39,14 @@ const App = ({
 }) => {
   return (
     <>
-      <TotalValue currency={currency} data={totalValueData} />
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+        <TotalValue currency={currency} data={totalValueData}>
+          <AssetChange currency={currency} data={assetChangeData} />
+        </TotalValue>
+      </div>
       {/* <hr className="nice-hr" /> */}
       <LatestAssetsPercentage data={latestAssetsPercentageData} />
       <Separator className="my-6" />
-      <AssetChange currency={currency} data={assetChangeData} />
-      <Separator className="my-6" />
       <CoinsAmountAndValueChange
         currency={currency}
         data={coinsAmountAndValueChangeData}

src/components/refresh-data/index.tsx

@@ -71,7 +71,7 @@ const App = ({
         <ReloadIcon
           className={`mr-2 h-4 w-4 ${refreshLoading && "animate-spin"}`}
         />
-        Refresh
+        <p className='hidden sm:inline-block'>Refresh</p>
       </Button>
     </div>
   );

src/components/total-value/index.tsx

@@ -10,12 +10,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 const App = ({
   data,
   currency,
+  children,
 }: {
   currency: CurrencyRateDetail;
   data: {
     totalValue: number;
     changePercentage: number;
   };
+  children: React.ReactNode;
 }) => {
   const [changedValueOrPercentage, setChangedValueOrPercentage] = useState("");
 
@@ -62,13 +64,13 @@ const App = ({
 
   function changePercentageColorClass() {
     if (data.changePercentage === 0) {
-      return "";
+      return "text-gray-500";
     }
-    return data.changePercentage > 0 ? "positive" : "negative";
+    return data.changePercentage > 0 ? "text-green-500" : "text-red-500";
   }
 
   return (
-    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+    <div>
       <Card
         onMouseEnter={() => setChangedValueOrPercentage(formatChangeValue())}
         onMouseLeave={() =>
@@ -93,13 +95,12 @@ const App = ({
         <CardContent>
           <div className="text-2xl font-bold">{formatTotalValue()}</div>
           <p className="text-xs text-muted-foreground">
-            <span
-              className={`changePercentage ${changePercentageColorClass()}`}
-            >
+            <span className={changePercentageColorClass()}>
               {changedValueOrPercentage}
             </span>{" "}
             from last time
           </p>
+          {children}
         </CardContent>
       </Card>
     </div>

src/middlelayers/charts.ts

@@ -30,7 +30,8 @@ async function queryCoinsData(): Promise<(WalletCoin & {
 		throw new Error("no configuration found,\n please add configuration first")
 	}
 	const assets = await loadPortfolios(config)
-	const priceMap = await queryCoinPrices(_(assets).map("symbol").push("USDT").uniq().value())
+	// always query btc and usdt price
+	const priceMap = await queryCoinPrices(_(assets).map("symbol").push("USDT").push("BTC").uniq().value())
 
 	let lastAssets = _.clone(assets)
 	const groupUSD: boolean = _(config).get(['configs', 'groupUSD']) || false