Skip to content

Commit

Permalink
Merge volume and gainers vs losers graph
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlos Wu Fei authored and Carlos Wu Fei committed Dec 29, 2023
1 parent 03de884 commit 105a62b
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 124 deletions.
4 changes: 2 additions & 2 deletions api/account/assets.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
36 changes: 21 additions & 15 deletions web/src/components/BarChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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}
Expand All @@ -73,4 +80,3 @@ export default function BarChart({ data, width = "100%", height = "100%", line1n
</>
);
}

4 changes: 2 additions & 2 deletions web/src/components/GainersLosersGraph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export default function GainersLosersGraph({ data, legend }) {
</div>
</Col>
<Col lg="11" md="11" sm="11">
<CardTitle tag="h5">Gainers vs. Losers</CardTitle>
<CardTitle tag="h5">Gainers vs. Losers by Volume</CardTitle>
<p className="card-category u-text-left">
Market evolution of gainers vs losers.
Market evolution of gainers vs losers by volume.
</p>
</Col>
</Row>
Expand Down
128 changes: 35 additions & 93 deletions web/src/components/VolumesRanking.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Card.Body>
<Card.Title>{title}</Card.Title>
<ListGroup className="list-group-flush">
{data.map((x, i) => (
<ListGroup.Item key={i}>
<Card.Link href={`/admin/bots/new/${x.symbol}`}>
{x.symbol}
</Card.Link>
<Badge
bg={parseFloat(x.priceChangePercent) > 0 ? "success" : "danger"}
className="u-float-right"
>
{x.priceChangePercent + "%"}
</Badge>
</ListGroup.Item>
))}
</ListGroup>
</Card.Body>
</>
);
};

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 (
<div>
<Card border="success">
<div className="p-line-chart">
<div className="p-line-chart__box">
<div className="p-line-chart--left" style={{ width: perGainers }}>
<span>{gainerAccumulator.toFixed(2)}</span>
</div>
<div className="p-line-chart--right" style={{ width: perLosers }}>
<span>{loserAccumulator.toFixed(2)}</span>
</div>
</div>
<div className="p-line-chart--legend">
<div>
Top: <span>{perGainers}</span>
</div>
<div>
Bottom: <span>{perLosers}</span>
</div>
</div>
</div>

<div className="p-line-chart"></div>
<Row>
<Col>
<VolumesRankingCard
data={gainersData}
title="Today's highest volumes in USDT market"
/>
</Col>
<Col>
<VolumesRankingCard
data={losersData}
title="Today's low volume in USDT market"
/>
<Card.Body>
<Card.Title>{title}</Card.Title>
<ListGroup className="list-group-flush">
{sortedData.map((x, i) => (
<ListGroup.Item key={i}>
<Row>
<Col>
<Card.Link href={`/admin/bots/new/${x.symbol}`}>
{x.symbol}
</Card.Link>
</Col>
<Col>
<Badge
bg="success"
className="u-float-right"
>
{(parseFloat(x.quoteVolume) + parseFloat(x.volume)).toFixed(2)}
</Badge>
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
</Card.Body>
</Col>
</Row>
</Card>
Expand Down
16 changes: 4 additions & 12 deletions web/src/pages/dashboard/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -338,7 +338,7 @@ class Dashboard extends React.Component {
</div>
</Col>
<Col lg="9">
{this.props.benchmarkData && (
{this.props.benchmarkData.dates?.btc && (
<PortfolioBenchmarkChart
data={this.props.benchmarkData}
legend={this.state.lineChartLegend}
Expand Down Expand Up @@ -373,18 +373,10 @@ class Dashboard extends React.Component {
</Row>
<Row>
<Col lg="6" md="12">
{this.props.gainersLosersData?.length > 0 && (
<VolumesRanking data={this.props.gainersLosersData} />
{this.props.gainersLosersData && this.props.gainersLosersData.length > 0 && (
<VolumesRankingCard data={this.props.gainersLosersData} title="Today's highest volumes in USDT market"/>
)}
</Col>
{/* <Col lg="6" md="12">
{gainersLosersSeries && (
<GainersLosersGraph
data={gainersLosersSeries}
legend={this.state.lineChartLegend}
/>
)}
</Col> */}
</Row>
</>
) : (
Expand Down

0 comments on commit 105a62b

Please sign in to comment.