Skip to content

Implement Chart Service for Currency Trend Visualization #253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hossein-ab99 merged 1 commit into from
Feb 21, 2025
Merged

Implement Chart Service for Currency Trend Visualization #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/main/Browser/Pages/AllMarket/components/AllMarketInfo/AllMarketInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ const AllMarketInfo = () => {
if (error || quoteCurrenciesError) return <div style={{height: "40vh"}}><Error/></div>
else return <>
{card ?
<AllMarketInfoCard data={overview} activeCurrency={activeCurrency}/>
<AllMarketInfoCard data={overview} activeCurrency={activeCurrency} interval={interval}/>
:
<AllMarketInfoTable data={overview} activeCurrency={activeCurrency}/>
<AllMarketInfoTable data={overview} activeCurrency={activeCurrency} interval={interval}/>
}
</>
}
Expand Down
27 changes: 18 additions & 9 deletions ...ages/AllMarket/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import {Panel} from "../../../../../../Routes/routes";
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import i18n from "i18next";
import {useGetChartData} from "../../../../../../../../queries";

const AllMarketInfoCard = ({data, activeCurrency}) => {
const AllMarketInfoCard = ({data, activeCurrency, interval}) => {


const {t} = useTranslation();
Expand All @@ -22,6 +23,11 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {

const [showButton, setShowButton] = useState(null)

const pairsList = useSelector((state) => state.exchange.pairsList)
const symbols = Object.keys(pairsList);

const { data: ChartData, isLoading: ChartDataIsLoading, error: ChartDataError } = useGetChartData(symbols, interval);

const backgroundBar = (percent) => {
if (percent > 0) {
return {
Expand All @@ -46,11 +52,20 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
navigate(Panel)
}

const chartView = (chartInfo) => {
if (ChartDataIsLoading) {
return <span className="flashit ">-----</span>
}
if (ChartDataError || !(chartInfo?.svgData)) {
return
}
return <img src={`data:image/svg+xml;base64,${chartInfo?.svgData}`} alt={chartInfo?.symbol} className={`${classes.chart} ${chartInfo?.isTrendUp ? classes.filterUp : classes.filterDown }`}/>
}

return (
<div className={`${classes.container} my-1 px-1`}>

{data.map((tr, index) => {
const chartInfo = ChartData?.find(chart => chart.symbol.replace("_", "") === tr.symbol);
return (
<div key={index} className={`${classes.item} card-border card-bg column cursor-pointer`} style={backgroundBar(tr.priceChangePercent.toString())}
onMouseEnter={()=>MouseEnterEventHandler(index)} onMouseLeave={MouseLeaveEventHandler}>
Expand Down Expand Up @@ -108,13 +123,7 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
</div>
:
<div className={`column jc-center ai-center position-relative`}>
<img
className={`img-lg-2 mb-05 ${classes.filter}`}
src={images.chart}
alt={""}
title={""}
/>
<span className={`fs-0-6 position-absolute`} style={{left:`${i18n.language !== "fa" ? "20%" : "40%"}`}}>{t("comingSoon")}</span>
{chartView(chartInfo)}
</div>
}
</div>
Expand Down
12 changes: 10 additions & 2 deletions ...Market/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@
bottom: 0;
}

.filter {
filter: blur(4px);
.chart {
width: 100%;
}

.filterUp {
filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);

}
.filterDown {
filter: invert(50%) sepia(53%) saturate(2527%) hue-rotate(337deg) brightness(68%) contrast(175%);
}
28 changes: 20 additions & 8 deletions ...es/AllMarket/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import {setActivePairInitiate} from "../../../../../../../../store/actions";
import {Panel} from "../../../../../../Routes/routes";
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {useGetChartData} from "../../../../../../../../queries";

const AllMarketInfTable = ({data, activeCurrency}) => {
const AllMarketInfTable = ({data, activeCurrency, interval}) => {

const {t} = useTranslation();
const navigate = useNavigate();
Expand All @@ -20,6 +21,12 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
const language = i18n.language
const currencies = useSelector((state) => state.exchange.currencies)

const pairsList = useSelector((state) => state.exchange.pairsList)
const symbols = Object.keys(pairsList);

const { data: ChartData, isLoading: ChartDataIsLoading, error: ChartDataError } = useGetChartData(symbols, interval);


const navigateToPanel = (symbol) => {
const selectedPair = allExchangeSymbols.find( s => s.symbol === symbol)
dispatch(setActivePairInitiate(selectedPair, 0))
Expand All @@ -42,9 +49,20 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
</div>
);

const chartView = (chartInfo) => {
if (ChartDataIsLoading) {
return <span className="flashit ">-----</span>
}
if (ChartDataError || !(chartInfo?.svgData)) {
return
}
return <img src={`data:image/svg+xml;base64,${chartInfo?.svgData}`} alt={chartInfo?.symbol} className={`${classes.chart} ${chartInfo?.isTrendUp ? classes.filterUp : classes.filterDown }`}/>
}

let body = (
<>
{data.map((tr, index) => {
const chartInfo = ChartData?.find(chart => chart.symbol.replace("_", "") === tr.symbol);
return (
<div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
<span className="width-20 row jc-start ai-center">
Expand Down Expand Up @@ -77,13 +95,7 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
<span className="width-10 flex jc-start ai-center">{tr.highPrice}</span>*/}

<span className="width-9 flex jc-start ai-center position-relative">
<img
className={`img-lg-2 ${classes.filter}`}
src={images.chart}
alt={""}
title={""}
/>
<span className={`fs-0-6 position-absolute`} style={{left:`${i18n.language !== "fa" ? "20%" : "48%"}`}}>{t("comingSoon")}</span>
{chartView(chartInfo)}
</span>

<span className="width-8 flex jc-end ai-center">
Expand Down
11 changes: 9 additions & 2 deletions ...rket/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@
bottom: 0;
}

.filter {
filter: blur(4px);
.chart {
width: 100%;
}
.filterUp {
filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);

}
.filterDown {
filter: invert(50%) sepia(53%) saturate(2527%) hue-rotate(337deg) brightness(68%) contrast(175%);
}
10 changes: 5 additions & 5 deletions src/main/Browser/Pages/Landing/components/MarketInfo/MarketInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import MarketInfoTable from "./components/MarketInfoTable/MarketInfoTable";
import MarketInfoCard from "./components/MarketInfoCard/MarketInfoCard";
import * as Routes from "../../../../Routes/routes";
import {Link} from "react-router-dom";
import {useGetQuoteCurrencies, useOverview} from "../../../../../../queries";
import {useGetChartData, useGetQuoteCurrencies, useOverview} from "../../../../../../queries";
import Loading from "../../../../../../components/Loading/Loading";
import Error from "../../../../../../components/Error/Error";
import {useTranslation} from "react-i18next";
Expand All @@ -23,11 +23,10 @@ const MarketInfo = () => {

const interval = "24h"



const quote = activeCurrency === "" ? null : activeCurrency

const currencies = useSelector((state) => state.exchange.currencies)

const language = i18n.language

const {data: overview, isLoading, error} = useOverview(null, interval, quote)
Expand All @@ -46,14 +45,15 @@ const MarketInfo = () => {
if (error || quoteCurrenciesError) return <div style={{height: "40vh"}}><Error/></div>
else return <>
{card ?
<MarketInfoCard data={overview.slice(0, 5)} activeCurrency={activeCurrency}/>
<MarketInfoCard data={overview.slice(0, 5)} activeCurrency={activeCurrency} interval={interval}/>
:
<MarketInfoTable data={overview.slice(0, 5)} activeCurrency={activeCurrency}/>
<MarketInfoTable data={overview.slice(0, 5)} activeCurrency={activeCurrency} interval={interval}/>
}
</>
}



return (
<div className={`${classes.container} card-bg card-border width-90 my-4`}>
<div className={`${classes.header} card-header-bg row jc-between ai-center px-2 py-2`}>
Expand Down
29 changes: 20 additions & 9 deletions ...n/Browser/Pages/Landing/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import {Panel} from "../../../../../../Routes/routes";
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import i18n from "i18next";
import {useGetChartData} from "../../../../../../../../queries";

const MarketInfoCard = ({data, activeCurrency}) => {
const MarketInfoCard = ({data, activeCurrency, interval}) => {

const {t} = useTranslation();
const navigate = useNavigate();
Expand All @@ -18,6 +19,12 @@ const MarketInfoCard = ({data, activeCurrency}) => {
const currencies = useSelector((state) => state.exchange.currencies)
const allExchangeSymbols = useSelector((state) => state.exchange.symbols)

const pairsList = useSelector((state) => state.exchange.pairsList)
const symbols = Object.keys(pairsList);

const { data: ChartData, isLoading: ChartDataIsLoading, error: ChartDataError } = useGetChartData(symbols, interval);


const backgroundBar = (percent) => {
if (percent > 0) {
return {
Expand All @@ -35,9 +42,20 @@ const MarketInfoCard = ({data, activeCurrency}) => {
navigate(Panel)
}

const chartView = (chartInfo) => {
if (ChartDataIsLoading) {
return <span className="flashit ">-----</span>
}
if (ChartDataError || !(chartInfo?.svgData)) {
return
}
return <img src={`data:image/svg+xml;base64,${chartInfo?.svgData}`} alt={chartInfo?.symbol} className={`${classes.chart} ${chartInfo?.isTrendUp ? classes.filterUp : classes.filterDown }`}/>
}

return (
<div className={`${classes.container} my-3 px-1`}>
{data.map((tr, index) => {
const chartInfo = ChartData?.find(chart => chart.symbol.replace("_", "") === tr.symbol);
return (
<div className={`${classes.item} card-border card-bg column jc-between ai-center py-3 cursor-pointer`} style={backgroundBar(tr.priceChangePercent.toString())} key={index} onClick={() => navigateToPanel(tr.symbol)}>
<div className={`row jc-center ai-center width-100`}>
Expand All @@ -60,14 +78,7 @@ const MarketInfoCard = ({data, activeCurrency}) => {
<span className={`mr-05`}>{new BN(tr.volume).decimalPlaces(currencies[tr?.base]?.precision ?? 0).toFormat()} <span className={`text-gray fs-0-8 mr-05`}>{tr?.base}</span></span>
</div>
<div className={`column jc-center ai-center position-relative`}>
<img
className={`img-lg-2 mb-05 ${classes.filter}`}
src={images.chart}
alt={""}
title={""}
/>
<span className={`fs-0-6 position-absolute`}
style={{left: "35%"}}>{t("comingSoon")}</span>
{chartView(chartInfo)}
</div>
</div>
)
Expand Down
12 changes: 10 additions & 2 deletions ...r/Pages/Landing/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@
background-color: var(--container) !important;
}

.filter {
filter: blur(4px);
.chart {
width: 100%;
}

.filterUp {
filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);

}
.filterDown {
filter: invert(50%) sepia(53%) saturate(2527%) hue-rotate(337deg) brightness(68%) contrast(175%);
}
25 changes: 19 additions & 6 deletions ...Browser/Pages/Landing/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 8 additions & 3 deletions ...Pages/Landing/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@
.row:hover {
background-color: var(--container);
}
.chart {
width: 55%;
}
.filterUp {
filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);

.filter {
/*filter: invert(51%) sepia(94%) saturate(370%) hue-rotate(109deg) brightness(87%) contrast(92%);*/
filter: invert(38%) sepia(77%) saturate(5872%) hue-rotate(347deg) brightness(93%) contrast(79%);
}
.filterDown {
filter: invert(50%) sepia(53%) saturate(2527%) hue-rotate(337deg) brightness(68%) contrast(175%);
}
2 changes: 2 additions & 0 deletions src/main/Browser/Pages/Landing/components/MarketView/MarketView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ const MarketView = () => {


const content = () => {


if (isLoading) return <Loading/>
if (error) return <Error/>
if ( mostVolume === null && mostTrades === null) return <span className={`column height-100 py-5 jc-around ai-center`}>
Expand Down
45 changes: 45 additions & 0 deletions src/queries/hooks/useGetChartData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useQuery } from "@tanstack/react-query";
import { fetchChartData } from "js-api-client";
import axios from "axios";

const apiBaseUrl = window.env.REACT_APP_API_BASE_URL


/*export const useGetChartData = (symbols = [], period = "WEEKLY", config = {}) => {
return useQuery({
queryKey: ["chartData", symbols, period],
queryFn: async () => {
const { data } = await fetchChartData({ symbols, period });
return data;
},
enabled: symbols.length > 0,
staleTime: 1000 * 60 * 5,
retry: 1,
...config,
});
};*/

export const useGetChartData = (symbols = [], period = "WEEKLY", config = {}) => {
return useQuery({
queryKey: ["chartData", symbols, period],

queryFn: async () => {
const params = new URLSearchParams();
params.append("symbols", symbols.join(","));
params.append("period", period);

const { data } = await axios.get(`${apiBaseUrl}/market/v1/chart/spark-line?${params.toString()}`, {
headers: {
"Content-Type": "application/json",
},
});

return data;
},
enabled: symbols.length > 0,
staleTime: 1000 * 60 * 5,
retry: 1,
...config,
});
};

3 changes: 2 additions & 1 deletion src/queries/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@ export {useGetBuyAndSellHistory} from "./hooks/useGetBuyAndSellHistory";
export {useGetWithdrawHistory} from "./hooks/useGetWithdrawHistory";
export {useGetDepositHistory} from "./hooks/useGetDepositHistory";
export {useGetTransactionsHistory} from "./hooks/useGetTransactionsHistory";
export {useGetGatewaysByCurrency} from "./hooks/useGetGatewaysByCurrency";
export {useGetGatewaysByCurrency} from "./hooks/useGetGatewaysByCurrency";
export {useGetChartData} from "./hooks/useGetChartData";
4 changes: 2 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9486,8 +9486,8 @@ __metadata:

"js-api-client@https://github.com/opexdev/js-api-client.git#develop":
version: 1.0.0-beta2
resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=e3bb06671718e426e03d618c6a742e079c6a1449"
checksum: 6dd6286f1df7fa812ed56d5fe20f16dadc057cfda979d349379e90a2b76e189cfcda6aba48bdc974f7722bdb7f24233c4a631c89038d7b8192d7e90e3e3fc351
resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=80c1affbcf83d7da6962e541c5cbb5cdcf0933a1"
checksum: 5e5aca483a1c18eca58fb229d318de06f1200323ce122d18f42704b154a53592af1cf32f9a7e74dcb28375e8a29d644cc69ccc28d733dfeba302096f0bdcd297
languageName: node
linkType: hard

Expand Down
Loading