From 71463a1f0d6cb702f35a6701dfdf1970405cf979 Mon Sep 17 00:00:00 2001 From: domchan <31119455+domechn@users.noreply.github.com> Date: Sat, 11 Nov 2023 09:21:29 -0600 Subject: [PATCH] optimize ui layout in overview page (#157) --- .../coins-amount-and-value-change.tsx | 115 +++++++++------- src/components/index/index.tsx | 5 +- src/components/latest-assets-percentage.tsx | 27 ++-- src/components/overview/index.css | 8 -- src/components/overview/index.tsx | 11 +- src/components/system-info.tsx | 12 +- .../top-coins-percentage-change.tsx | 58 ++++---- src/components/top-coins-rank.tsx | 44 ++++-- ...l-value.tsx => total-value-and-change.tsx} | 15 ++- src/components/wallet-analyzer.tsx | 5 +- src/components/wallet-assets-change.tsx | 125 ++++++++++-------- src/components/wallet-assets-percentage.tsx | 38 ++++-- 12 files changed, 277 insertions(+), 186 deletions(-) delete mode 100644 src/components/overview/index.css rename src/components/{total-value.tsx => total-value-and-change.tsx} (88%) diff --git a/src/components/coins-amount-and-value-change.tsx b/src/components/coins-amount-and-value-change.tsx index d7ac5e3..4205d06 100644 --- 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 ( - <> -
- onTypeSelectChange(getWholeKey(val))} - > - Amount - Value - -
- + + + + + + Coins + {data.map((d) => ( + + {d.coin} + + ))} + + + +
+
+
- - - - - - Coins - {data.map((d) => ( - - {d.coin} - - ))} - - - -
- -
- -
- + + + + + ); }; diff --git a/src/components/index/index.tsx b/src/components/index/index.tsx index 87b8825..61c5b76 100644 --- 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({ 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 index 29fbe5e..511feec 100644 --- 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 (
-
- -
+ + + + Percentage of Assets + + + +
+ +
+ +
); }; diff --git a/src/components/overview/index.css b/src/components/overview/index.css deleted file mode 100644 index 4f54e64..0000000 --- a/src/components/overview/index.css +++ /dev/null @@ -1,8 +0,0 @@ -.nice-hr { - margin-top: 20px; - margin-bottom: 20px; - height: 2px; - border: none; - background-color: #eeeeee; - width: 95%; -} diff --git a/src/components/overview/index.tsx b/src/components/overview/index.tsx index 4df213f..f09002a 100644 --- 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 ( - <> +
- - - - +
+
); }; diff --git a/src/components/system-info.tsx b/src/components/system-info.tsx index bdff88c..43db77f 100644 --- a/src/components/system-info.tsx +++ b/src/components/system-info.tsx @@ -17,6 +17,9 @@ const App = () => { const [licenseChanged, setLicenseChanged] = useState(false); const [saveLicenseLoading, setSaveLicenseLoading] = useState(false); + // to show hidden function + const [versionClickTimes, setVersionClickTimes] = useState(0); + useEffect(() => { loadVersion(); loadLicense(); @@ -64,7 +67,12 @@ const App = () => {
Version
-
{version}
+
setVersionClickTimes(versionClickTimes + 1)} + > + {version} +
@@ -72,7 +80,7 @@ const App = () => {
Enter License Key To Active Pro Version ( Coming Soon )
-
+
= 5 ? "flex" : "hidden"}> { responsive: false, plugins: { title: { - display: true, + display: false, text: `Change of Top Coins ${getLabel()} Percentage`, }, datalabels: { @@ -41,13 +42,13 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => { scales: { x: { title: { - display: true, + display: false, text: "Date", }, }, y: { title: { - display: true, + display: false, text: "Percentage", }, offset: true, @@ -92,9 +93,9 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => { data: coinPercentageData(data.timestamps, coin.percentageData), borderColor: coin.lineColor, backgroundColor: coin.lineColor, - borderWidth: 5, + borderWidth: 4, tension: 0.1, - pointRadius: 1, + pointRadius: 0.2, pointStyle: "rotRect", })), }; @@ -121,24 +122,35 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => { } return ( - <> -
- onTypeSelectChange(getWholeKey(val))} - > - Value - Price - -
-
- -
- +
+ + + + Change of Top Coins {getLabel()} Percentage + + + +
+ + onTypeSelectChange(getWholeKey(val)) + } + > + Value + Price + +
+
+ +
+ + +
); }; diff --git a/src/components/top-coins-rank.tsx b/src/components/top-coins-rank.tsx index 11ce1ba..f1e8394 100644 --- a/src/components/top-coins-rank.tsx +++ b/src/components/top-coins-rank.tsx @@ -7,6 +7,7 @@ import { ChartJSOrUndefined } from "react-chartjs-2/dist/types"; import { BubbleDataPoint, Point } from "chart.js"; import _ from "lodash"; import { legendOnClick } from "@/utils/legend"; +import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"; const App = ({ data }: { data: TopCoinsRankData }) => { const size = useWindowSize(); @@ -24,7 +25,7 @@ const App = ({ data }: { data: TopCoinsRankData }) => { responsive: false, plugins: { title: { - display: true, + display: false, text: "Trend of Top Coins Rank", }, datalabels: { @@ -37,19 +38,25 @@ const App = ({ data }: { data: TopCoinsRankData }) => { scales: { x: { title: { - display: true, + display: false, text: "Date", }, + ticks: { + autoSkip: true, + }, }, y: { title: { - display: true, + display: false, text: "Rank", }, offset: true, reverse: true, ticks: { precision: 0, + callback: function (value: number) { + return "#" + value; + }, }, grid: { display: false, @@ -77,24 +84,33 @@ const App = ({ data }: { data: TopCoinsRankData }) => { data: coinRankData(data.timestamps, coin.rankData), borderColor: coin.lineColor, backgroundColor: coin.lineColor, - borderWidth: 5, + borderWidth: 4, tension: 0.1, - pointRadius: 1, + pointRadius: 0.2, pointStyle: "rotRect", })), }; } return ( - <> -
- -
- +
+ + + + Trend of Top Coins Rank + + + +
+ +
+ + +
); }; diff --git a/src/components/total-value.tsx b/src/components/total-value-and-change.tsx similarity index 88% rename from src/components/total-value.tsx rename to src/components/total-value-and-change.tsx index 21f38e1..c3fca4a 100644 --- a/src/components/total-value.tsx +++ b/src/components/total-value-and-change.tsx @@ -239,6 +239,8 @@ const App = ({ plugins: { title: { display: false, + // text is set for resizing + text: "Trend of Asset", }, datalabels: { display: false, @@ -251,7 +253,6 @@ const App = ({ x: { title: { display: false, - text: "Date", }, ticks: { maxTicksLimit: 2, @@ -317,17 +318,21 @@ const App = ({ Total Value In {formatCurrencyName()} setBtcAsBase(!btcAsBase)} > - + diff --git a/src/components/wallet-analyzer.tsx b/src/components/wallet-analyzer.tsx index ed731af..a227ebc 100644 --- a/src/components/wallet-analyzer.tsx +++ b/src/components/wallet-analyzer.tsx @@ -29,14 +29,13 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => { } return ( - <> +
- - +
); }; diff --git a/src/components/wallet-assets-change.tsx b/src/components/wallet-assets-change.tsx index 8e1ce84..cddecaa 100644 --- a/src/components/wallet-assets-change.tsx +++ b/src/components/wallet-assets-change.tsx @@ -13,6 +13,7 @@ import { TableBody, Table, } from "@/components/ui/table"; +import { Card, CardContent, CardHeader, CardTitle } from './ui/card' const App = ({ data, @@ -51,63 +52,73 @@ const App = ({ } return ( - <> -

Value Changes

-
-
- - - - Wallet Type - Wallet Alias - Percentage - Value - - - - {data.map((d) => ( - - - {!d.walletType || d.walletType === "null" - ? "Unknown" - : tweakWalletType(d.walletType)} - - - {d.walletAlias ?? - insertEllipsis( - !d.wallet || d.wallet === "null" ? "Unknown" : d.wallet, - 32 - )} - - - {getArrow(d.changePercentage)} - {prettyNumberToLocaleString( - getPositiveValue(d.changePercentage) - )} - % - - - {getArrow(d.changeValue)} - {currency.symbol} - {prettyNumberToLocaleString( - currencyWrapper(currency)(getPositiveValue(d.changeValue)) - )} - - - ))} - -
-
-
- +
+ + + Value Changes + + +
+
+ + + + Wallet Type + Wallet Alias + Percentage + Value + + + + {data.map((d) => ( + + + {!d.walletType || d.walletType === "null" + ? "Unknown" + : tweakWalletType(d.walletType)} + + + {d.walletAlias ?? + insertEllipsis( + !d.wallet || d.wallet === "null" + ? "Unknown" + : d.wallet, + 32 + )} + + + {getArrow(d.changePercentage)} + {prettyNumberToLocaleString( + getPositiveValue(d.changePercentage) + )} + % + + + {getArrow(d.changeValue)} + {currency.symbol} + {prettyNumberToLocaleString( + currencyWrapper(currency)( + getPositiveValue(d.changeValue) + ) + )} + + + ))} + +
+
+
+ + +
); }; diff --git a/src/components/wallet-assets-percentage.tsx b/src/components/wallet-assets-percentage.tsx index ad7121e..3a212dc 100644 --- a/src/components/wallet-assets-percentage.tsx +++ b/src/components/wallet-assets-percentage.tsx @@ -7,7 +7,8 @@ import { import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency"; import _ from "lodash"; import { useEffect, useState } from "react"; -import { insertEllipsis } from '@/utils/string' +import { insertEllipsis } from "@/utils/string"; +import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"; const App = ({ data, @@ -31,7 +32,7 @@ const App = ({ barPercentage: 0.9, plugins: { title: { - display: true, + display: false, text: `Percentage And Total Value of Each Wallet`, }, legend: { @@ -69,14 +70,18 @@ const App = ({ }, grid: { display: false, - } - } + }, + }, }, }; function lineData() { return { - labels: data.map((d) => d.walletAlias ? `${d.walletType}-${d.walletAlias}` : insertEllipsis(d.wallet, 16)), + labels: data.map((d) => + d.walletAlias + ? `${d.walletType}-${d.walletAlias}` + : insertEllipsis(d.wallet, 16) + ), datasets: [ { alias: "y", @@ -92,13 +97,22 @@ const App = ({ return (
-
- -
+ + + + Percentage And Total Value of Each Wallet + + + +
+ +
+ +
); };