Skip to content

Commit

Permalink
opt historical data page (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@domechn
domechn authored Oct 7, 2023
1 parent b7499d0 commit 8492f64
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 67 deletions.
13 changes: 10 additions & 3 deletions src/components/common/table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ const App = ({
columns,
data,
onRowClick,
colorChangedOnRowClick,
}: {
columns: ColumnData[];
data: ({ id: string | number } & unknown)[];
onRowClick?: (id: string | number) => unknown;
colorChangedOnRowClick?: boolean;
}) => {
const randomId = useMemo(() => "" + Math.floor(Math.random() * 1000000), []);
const getColStyle = (column: ColumnData): React.CSSProperties => {
Expand All @@ -40,10 +42,15 @@ const App = ({
const realId = (i: string | number) => "row-" + i + "-" + randomId;

// set clicked background
if (clickedRow !== null) {
document.getElementById(realId(clickedRow))?.classList.remove("clicked");
if (colorChangedOnRowClick) {
if (clickedRow !== null) {
document
.getElementById(realId(clickedRow))
?.classList.remove("clicked");
}
document.getElementById(realId(idx))?.classList.add("clicked");
}
document.getElementById(realId(idx))?.classList.add("clicked");

setClickedRow(idx);
}

Expand Down
64 changes: 64 additions & 0 deletions src/components/historical-data/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.historical-data-card {
width: 60%;
height: 50px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px 20px;
margin-bottom: 15px;
cursor: pointer;
box-shadow: 0 0 5px #ccc;

min-width: 390px;
}

.historical-data-card:hover {
box-shadow: 0 0 5px #aaa;

.historical-data-card-bottom .historical-data-card-bottom-operations {
display: flex;
}
}

.historical-data-card-total {
font-size: 1.4rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

float: right;
}

.historical-data-card-created-at {
float: left;

margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* left bottom */
.historical-data-card-bottom {
width: 100%;
height: 40px;
align-items: center;

position: relative;

display: flex;
}

.historical-data-card-bottom-operations {
display: none;
}

/* fix bottom right */
.historical-data-card-bottom-changes {
position: absolute;
font-size: 0.9em;
top: 5px;
right: 0;
color: gray;
}
191 changes: 130 additions & 61 deletions src/components/historical-data/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { toast } from "react-hot-toast";
import { LoadingContext } from "../../App";
import { timestampToDate } from "../../utils/date";
import { currencyWrapper } from "../../utils/currency";
import Modal from "../common/modal";

type RankData = {
id: number;
Expand All @@ -33,59 +34,10 @@ const App = ({
const [data, setData] = useState([] as HistoricalData[]);
const [rankData, setRankData] = useState([] as RankData[]);
const { setLoading } = useContext(LoadingContext);
const [isModalOpen, setIsModalOpen] = useState(false);

const columns = [
{
key: "createdAt",
dataIndex: "createdAt",
title: "Date",
render: (id: number | string) => (
<>
{timestampToDate(
new Date(
_(data).find((d) => d.id === id)!.createdAt as string
).getTime(),
true
)}
</>
),
},
{
key: "total",
dataIndex: "total",
title: "Total",
render: (id: number | string) => {
const curData = _(data).find((d) => d.id === id);

return (
<>
{curData
? currency.symbol +
currencyWrapper(currency)(curData.total).toFixed(2)
: "-"}
</>
);
},
},
{
title: "Opt",
dataIndex: "id",
key: "operations",
render: (id: number | string) => (
<a href="#" onClick={() => onDeleteClick(id as string)}>
<img
src={deleteIcon}
alt="delete"
style={{
border: 0,
height: 20,
width: 20,
}}
/>
</a>
),
},
];
const [pageNum, setPageNum] = useState(1);
const pageSize = 10;

const rankColumns = [
{
Expand Down Expand Up @@ -186,12 +138,109 @@ const App = ({
.sortBy("rank")
.value()
);

setIsModalOpen(true);
}

function onModalClose() {
setIsModalOpen(false);
}

function getUpOrDown(val: number) {
const p = val > 0 ? "+" : val === 0 ? "" : "-";
return p;
}

function renderHistoricalDataList() {
// split data into pages
const idx = (pageNum - 1) * pageSize;
return _(data)
.slice(idx, idx + pageSize)
.map((d, idx) => {
return (
<div
key={d.id}
className="historical-data-card"
onClick={() => onRowClick(d.id)}
>
<div>
<div className="historical-data-card-created-at">
{timestampToDate(new Date(d.createdAt).getTime(), true)}
</div>
<div className="historical-data-card-total">
{currency.symbol +
currencyWrapper(currency)(d.total).toFixed(2)}
</div>
</div>

<div className="historical-data-card-bottom">
<div className="historical-data-card-bottom-operations">
<a href="#" onClick={() => onDeleteClick(d.id)}>
<img
src={deleteIcon}
alt="delete"
style={{
border: 0,
height: 20,
width: 20,
}}
/>
</a>
</div>
<div
className="historical-data-card-bottom-changes"
style={{
color: d.total - data[idx + 1]?.total > 0 ? "green" : "red",
}}
>
{idx < data.length - 1
? getUpOrDown(d.total - data[idx + 1].total) +
currency.symbol +
currencyWrapper(currency)(
Math.abs(d.total - data[idx + 1].total)
).toFixed(2)
: ""}
</div>
</div>
</div>
);
})
.value();
}

function page() {
return _(data.length / pageSize)
.range()
.map((i) => {
const curPageNum = i + 1;

return (
<a
href="#"
key={"his-page-" + curPageNum}
onClick={() => setPageNum(curPageNum)}
style={{
color: curPageNum === pageNum ? "rgb(37, 37, 244)" : "gray",
marginRight: 10,
}}
>
{curPageNum}
</a>
);
})
.value();
}

return (
<div>
<h2>Historical Data</h2>
<div className="historical-data">
<h2
style={{
marginBottom: 5,
}}
>
Historical Data
</h2>
<Modal visible={isModalOpen} onClose={onModalClose}>
<div
id="detail-view"
style={{
Expand All @@ -201,18 +250,38 @@ const App = ({
}}
>
<Table data={rankData} columns={rankColumns} />
<h3>👆 Details</h3>
</div>
<div
id="simple-view"
</Modal>
<div
style={{
marginBottom: 10,
color: "gray",
}}
>
<a
href="#"
onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
style={{
display: "inline-block",
verticalAlign: "top",
marginRight: 10,
color: "gray",
}}
>
<Table data={data} columns={columns} onRowClick={onRowClick} />
</div>
{"<"}
</a>
{page()}
<a
href="#"
onClick={() =>
pageNum < data.length / pageSize ? setPageNum(pageNum + 1) : null
}
style={{
color: "gray",
}}
>
{">"}
</a>
</div>
<div className="historical-data">{renderHistoricalDataList()}</div>
</div>
);
};
Expand Down
13 changes: 10 additions & 3 deletions src/components/index/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ const App = () => {
setTopCoinsPercentageChangeData(tcpcd);

const lra = await queryLastRefreshAt();
setLastRefreshAt(lra)
setLastRefreshAt(lra);
}

function loadAllData(size = 10) {
Expand Down Expand Up @@ -256,7 +256,11 @@ const App = () => {
<ReactTooltip
id="last-refresh-at"
place="bottom"
content={lastRefreshAt ? "Last Refresh At: " + lastRefreshAt : "Never Refresh Before"}
content={
lastRefreshAt
? "Last Refresh At: " + lastRefreshAt
: "Never Refresh Before"
}
/>
<div className="top-buttons-wrapper">
<div className="left-buttons">
Expand All @@ -281,7 +285,10 @@ const App = () => {
</div>
</div>
<div className="right-buttons">
<div style={{ display: "inline-block" }} data-tooltip-id="last-refresh-at">
<div
style={{ display: "inline-block" }}
data-tooltip-id="last-refresh-at"
>
<RefreshData
afterRefresh={() => {
loadAllData(querySize);
Expand Down

0 comments on commit 8492f64

Please sign in to comment.