update change from last time to first time

domechn · May 12, 2024 · 97db7e7 · 97db7e7
1 parent ba7073d
commit 97db7e7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 74 deletions.
diff --git a/src/components/ath-value.tsx b/src/components/ath-value.tsx
@@ -36,7 +36,6 @@ const App = ({
   );
   const [totalValueData, setTotalValueData] = useState<TotalValueData>({
     totalValue: 0,
-    prevTotalValue: 0,
   });
 
   function updateLoading(val: boolean) {

diff --git a/src/components/total-value-and-change.tsx b/src/components/total-value-and-change.tsx
@@ -173,10 +173,8 @@ const App = ({
   const [totalValueLoading, setTotalValueLoading] = useState(false);
   const [chartLoading, setChartLoading] = useState(false);
 
-  const [changedValueOrPercentage, setChangedValueOrPercentage] = useState("");
   const [totalValueData, setTotalValueData] = useState<TotalValueData>({
     totalValue: 0,
-    prevTotalValue: 0,
   });
   const [assetChangeData, setAssetChangeData] = useState<AssetChangeData>({
     timestamps: [],
@@ -189,21 +187,39 @@ const App = ({
 
   const [showValue, setShowValue] = useState(false);
 
+  const totalValue = useMemo(() => totalValueData.totalValue, [totalValueData]);
+  const firstTotalValue = useMemo(() => assetChangeData.data[0]?.usdValue ?? 0, [assetChangeData]);
+
+  const totalValueShower = useMemo(
+    () =>
+      getTotalValueShower(
+        btcAsBase,
+        firstTotalValue,
+        totalValue,
+        assetChangeData
+      ),
+    [assetChangeData, firstTotalValue, totalValue, btcAsBase]
+  );
+
+  const changedValueOrPercentage = useMemo(() => {
+    if (showValue) {
+      return totalValueShower.formatChangeValue();
+    }
+    let val = getPercentageChange(totalValueShower, totalValue, firstTotalValue);
+    const p = getUpOrDown(val);
+    if (val < 0) {
+      val = -val;
+    }
+    return `${p}${prettyNumberToLocaleString(val)}%`;
+  }, [showValue, firstTotalValue, totalValue, totalValueShower]);
+
   useEffect(() => {
     loadData(dateRange).then(() => {
       resizeChartWithDelay(chartName);
       setInitialLoaded(true);
     });
   }, [dateRange]);
 
-  useEffect(() => {
-    if (showValue) {
-      setChangedValueOrPercentage(formatChangeValue());
-      return;
-    }
-    setChangedValueOrPercentage(formatChangePercentage());
-  }, [totalValueData, btcAsBase, showValue]);
-
   useEffect(() => resizeChart(chartName), [needResize]);
 
   async function loadData(dr: TDateRange) {
@@ -242,70 +258,46 @@ const App = ({
     }
   }
 
-  const totalValueShower = useMemo(
-    () => getTotalValueShower(),
-    [totalValueData, btcAsBase]
-  );
 
-  function getTotalValueShower() {
+  function getTotalValueShower(
+    btcAsBase: boolean,
+    firstTotalValue: number,
+    totalValue: number,
+    assetChangeData: AssetChangeData
+  ) {
     if (btcAsBase) {
       return new BTCTotalValue(
-        totalValueData.prevTotalValue,
-        totalValueData.totalValue,
-        getPreviousBTCPrice(),
-        getLatestBTCPrice()
+        firstTotalValue,
+        totalValue,
+        assetChangeData.data[0]?.btcPrice ?? 0,
+        assetChangeData.data[assetChangeData.data.length - 1]?.btcPrice ?? 0
       );
     }
     return new FiatTotalValue(
       currency,
-      totalValueData.prevTotalValue,
-      totalValueData.totalValue
+      firstTotalValue,
+      totalValue
     );
   }
 
-  function formatTotalValue() {
-    return totalValueShower.formatTotalValue();
-  }
-
-  function getLatestBTCPrice() {
-    return assetChangeData.data[assetChangeData.data.length - 1]?.btcPrice ?? 0;
-  }
-
-  function getPreviousBTCPrice() {
-    return assetChangeData.data[assetChangeData.data.length - 2]?.btcPrice ?? 0;
-  }
-
   function getUpOrDown(val: number) {
     const p = val > 0 ? "+" : val === 0 ? "" : "-";
     return p;
   }
 
-  function formatCurrencyName() {
-    return totalValueShower.currencyName();
-  }
-
-  function getPercentageChange() {
+  function getPercentageChange(
+    ts: TotalValueShower,
+    totalValue: number,
+    firstTotalValue: number
+  ) {
     // to handle empty data
-    if (totalValueData.totalValue === totalValueData.prevTotalValue) {
+    if (totalValue === firstTotalValue) {
       return 0;
     }
-    if (totalValueData.prevTotalValue === 0) {
+    if (firstTotalValue === 0) {
       return 100;
     }
-    return totalValueShower.changePercentage();
-  }
-
-  function formatChangePercentage() {
-    let val = getPercentageChange();
-    const p = getUpOrDown(val);
-    if (val < 0) {
-      val = -val;
-    }
-    return `${p}${prettyNumberToLocaleString(val)}%`;
-  }
-
-  function formatChangeValue() {
-    return totalValueShower.formatChangeValue();
+    return ts.changePercentage();
   }
 
   function formatLineData() {
@@ -335,8 +327,12 @@ const App = ({
       .value();
   }
 
-  function changePercentageColorClass() {
-    const pc = getPercentageChange();
+  function changePercentageColorClass(
+    ts: TotalValueShower,
+    totalValue: number,
+    firstTotalValue: number
+  ) {
+    const pc = getPercentageChange(ts, totalValue, firstTotalValue);
     const c = positiveNegativeColor(pc, quoteColor);
     return `text-${c}-500`;
   }
@@ -460,7 +456,7 @@ const App = ({
       >
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="text-sm font-medium">
-            Total Value In {formatCurrencyName()}
+            Total Value In {totalValueShower.currencyName()}
           </CardTitle>
           <div className="flex space-x-2">
             <svg
@@ -501,16 +497,22 @@ const App = ({
         <CardContent>
           {loadingWrapper(
             totalValueLoading,
-            <div className="text-2xl font-bold">{formatTotalValue()}</div>,
+            <div className="text-2xl font-bold">{totalValueShower.formatTotalValue()}</div>,
             "w-[80%] h-[32px]"
           )}
           {loadingWrapper(
             totalValueLoading,
             <p className="text-xs text-muted-foreground mb-2">
-              <span className={changePercentageColorClass()}>
+              <span
+                className={changePercentageColorClass(
+                  totalValueShower,
+                  totalValue,
+                  firstTotalValue
+                )}
+              >
                 {changedValueOrPercentage}
               </span>{" "}
-              from last time
+              from first time
             </p>,
             "w-[60%] h-[16px] mt-2"
           )}

diff --git a/src/middlelayers/charts.ts b/src/middlelayers/charts.ts
@@ -405,31 +405,20 @@ async function deleteAssetPriceByID(id: number): Promise<void> {
 }
 
 export async function queryTotalValue(): Promise<TotalValueData> {
-	const results = await ASSET_HANDLER.listSymbolGroupedAssets(2)
+	const results = await ASSET_HANDLER.listSymbolGroupedAssets(1)
 
 	if (results.length === 0) {
 		return {
 			totalValue: 0,
-			prevTotalValue: 0
 		}
 	}
 
 	const latest = results[0]
 
 	const latestTotal = _(latest).sumBy("value") || 0
 
-	let previousTotal = 0
-
-	if (results.length === 2) {
-		const previous = results[1]
-
-		previousTotal = _(previous).sumBy("value")
-
-	}
-
 	return {
 		totalValue: latestTotal,
-		prevTotalValue: previousTotal,
 	}
 }
 

diff --git a/src/middlelayers/types.d.ts b/src/middlelayers/types.d.ts
@@ -104,7 +104,6 @@ export type TopCoinsPercentageChangeData = {
 
 export type TotalValueData = {
 	totalValue: number
-	prevTotalValue: number
 }
 
 export type MaxTotalValueData = {