From 105a62b07f2281b818cc134323b363327a7cbcda Mon Sep 17 00:00:00 2001 From: Carlos Wu Fei Date: Fri, 29 Dec 2023 11:17:42 +0100 Subject: [PATCH] Merge volume and gainers vs losers graph --- api/account/assets.py | 4 +- web/src/components/BarChart.jsx | 36 +++--- web/src/components/GainersLosersGraph.jsx | 4 +- web/src/components/VolumesRanking.jsx | 128 ++++++---------------- web/src/pages/dashboard/Dashboard.jsx | 16 +-- 5 files changed, 64 insertions(+), 124 deletions(-) diff --git a/api/account/assets.py b/api/account/assets.py index f7259ab9b..d0504ebf8 100644 --- a/api/account/assets.py +++ b/api/account/assets.py @@ -454,11 +454,11 @@ def get_market_domination(self, size=7): if "data" in item: for crypto in item["data"]: if float(crypto['priceChangePercent']) > 0: - gainers_percent += float(crypto['priceChangePercent']) + gainers_percent += float(crypto['volume']) gainers_count += 1 if float(crypto['priceChangePercent']) < 0: - losers_percent += abs(float(crypto['priceChangePercent'])) + losers_percent += abs(float(crypto['volume'])) losers_count += 1 if float(crypto['volume']) > 0: diff --git a/web/src/components/BarChart.jsx b/web/src/components/BarChart.jsx index 306270345..531c6f369 100644 --- a/web/src/components/BarChart.jsx +++ b/web/src/components/BarChart.jsx @@ -6,21 +6,28 @@ function computerPercent(data) { const losers = []; for (let i = 0; i < data.gainers_percent.length; i++) { const totalCount = data.gainers_count[i] + data.losers_count[i]; - const gainersCount = ((data.gainers_count[i] / totalCount) * 100).toFixed(2) + "%"; - const losersCount = ((data.losers_count[i] / totalCount) * 100).toFixed(2) + "%"; + const gainersCount = + ((data.gainers_count[i] / totalCount) * 100).toFixed(2) + "%"; + const losersCount = + ((data.losers_count[i] / totalCount) * 100).toFixed(2) + "%"; gainers.push(gainersCount); losers.push(losersCount); } return { gainers, losers }; } -export default function BarChart({ data, width = "100%", height = "100%", line1name='BTC prices', line2name="USDT balance"}) { - +export default function BarChart({ + data, + width = "100%", + height = "100%", + line1name = "BTC prices", + line2name = "USDT balance", +}) { const layout = { dragmode: "zoom", autosize: true, line_width: 50, - barmode: 'stack', + barmode: "stack", margin: { r: 6, t: 35, @@ -30,8 +37,8 @@ export default function BarChart({ data, width = "100%", height = "100%", line1n showlegend: true, legend: { x: 0, - xanchor: 'left', - y: 1 + xanchor: "left", + y: 1, }, xaxis: { autorange: true, @@ -51,20 +58,20 @@ export default function BarChart({ data, width = "100%", height = "100%", line1n data={[ { x: data.dates, - y: data.gainers_percent, - type: 'bar', - marker: {color: listCssColors[8]}, + y: data.total_volume, + type: "bar", + marker: { color: listCssColors[8] }, name: line1name, text: gainers, }, { x: data.dates, - y: data.losers_percent, - type: 'bar', - marker: {color: listCssColors[2]}, + y: data.total_volume, + type: "bar", + marker: { color: listCssColors[2] }, name: line2name, text: losers, - } + }, ]} layout={layout} useResizeHandler={true} @@ -73,4 +80,3 @@ export default function BarChart({ data, width = "100%", height = "100%", line1n ); } - \ No newline at end of file diff --git a/web/src/components/GainersLosersGraph.jsx b/web/src/components/GainersLosersGraph.jsx index e3c6f38ba..5a43d9c3c 100644 --- a/web/src/components/GainersLosersGraph.jsx +++ b/web/src/components/GainersLosersGraph.jsx @@ -25,9 +25,9 @@ export default function GainersLosersGraph({ data, legend }) { - Gainers vs. Losers + Gainers vs. Losers by Volume

- Market evolution of gainers vs losers. + Market evolution of gainers vs losers by volume.

diff --git a/web/src/components/VolumesRanking.jsx b/web/src/components/VolumesRanking.jsx index ffa24cddd..c55fcf048 100644 --- a/web/src/components/VolumesRanking.jsx +++ b/web/src/components/VolumesRanking.jsx @@ -5,108 +5,50 @@ import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; const computeTotalVolume = (data) => { - let total = { - gainerCount: 0, - gainerAccumulator: 0, - loserAccumulator: 0, - loserCount: 0, - }; - let average, totalVolume; - const totalCount = data.length; - data.reduce((c, a) => { - if (parseFloat(a.volume) > 0) { - totalVolume = c.gainerAccumulator + parseFloat(a.volume); - average = totalVolume / totalCount; + const sortedData = data.toSorted((a, b) => { + if (parseFloat(a.volume) > 0 && parseFloat(a.quoteVolume) > 0) { + const totalVolumeA = parseFloat(a.volume) + parseFloat(a.quoteVolume); + const totalVolumeB = parseFloat(b.volume) + parseFloat(b.quoteVolume); + return totalVolumeA - totalVolumeB; } - return total; - }, total); + return 0; + }); - const sortedData = data.toSorted((a, b) => { - if (parseFloat(a.volume) > average) { - total.gainerAccumulator = total.gainerAccumulator + parseFloat(a.volume); - total.gainerCount++; - console.log(a.gainerAccumulator) - return -1; - } else { - total.loserAccumulator = total.loserAccumulator + parseFloat(a.volume); - total.loserCount++; - return 1; - } - }); - - return { - total, sortedData - }; + return sortedData.reverse(-1).slice(0, 10); }; - -const VolumesRankingCard = ({ data, title }) => { - return ( - <> - - {title} - - {data.map((x, i) => ( - - - {x.symbol} - - 0 ? "success" : "danger"} - className="u-float-right" - > - {x.priceChangePercent + "%"} - - - ))} - - - - ); -}; - -export default function VolumesRanking({ data }) { - const { total: {gainerAccumulator, gainerCount, loserAccumulator, loserCount}, sortedData } = computeTotalVolume(data); - // Top 10 - const gainersData = sortedData.slice(0, 10); - const perGainers = ((gainerCount / sortedData.length) * 100).toFixed(2) + "%"; - // Bottom 10 - const losersData = sortedData.slice(-10).reverse(); - const perLosers = ((loserCount / sortedData.length) * 100).toFixed(2) + "%"; +export default function VolumesRankingCard({ data, title }) { + const sortedData = computeTotalVolume(data); return (
-
-
-
- {gainerAccumulator.toFixed(2)} -
-
- {loserAccumulator.toFixed(2)} -
-
-
-
- Top: {perGainers} -
-
- Bottom: {perLosers} -
-
-
- +
- - - - + + {title} + + {sortedData.map((x, i) => ( + + + + + {x.symbol} + + + + + {(parseFloat(x.quoteVolume) + parseFloat(x.volume)).toFixed(2)} + + + + + ))} + + diff --git a/web/src/pages/dashboard/Dashboard.jsx b/web/src/pages/dashboard/Dashboard.jsx index 116adf749..a993dc374 100644 --- a/web/src/pages/dashboard/Dashboard.jsx +++ b/web/src/pages/dashboard/Dashboard.jsx @@ -18,7 +18,7 @@ import { getGainersLosers, getGainersLosersSeries, } from "./saga"; -import VolumesRanking from "../../components/VolumesRanking"; +import VolumesRankingCard from "../../components/VolumesRanking"; class Dashboard extends React.Component { constructor(props) { @@ -338,7 +338,7 @@ class Dashboard extends React.Component {
- {this.props.benchmarkData && ( + {this.props.benchmarkData.dates?.btc && ( - {this.props.gainersLosersData?.length > 0 && ( - + {this.props.gainersLosersData && this.props.gainersLosersData.length > 0 && ( + )} - {/* - {gainersLosersSeries && ( - - )} - */} ) : (