de novo eu aqui

This commit is contained in:
anon 2022-08-14 21:36:43 -03:00
parent b18c65520d
commit 2e886b15d4
40 changed files with 1381 additions and 4232 deletions

View file

@ -9,82 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Miner Fees (Fees excluded new coins, Native Units)
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Miner Fees (Fees excluded new coins, Native Units)
</h6> </h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
XMR Miner Fees (XMR)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
BTC Miner Fees (BTC)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -236,11 +183,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -290,11 +237,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -321,11 +268,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Miner Revenue (Dollars / day)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Miner Revenue (Dollars / day)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Daily XMR Miner Revenue</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} / day</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Daily BTC Miner Revenue</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} / day</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -235,11 +183,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -289,11 +237,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -320,11 +268,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,82 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Annualized Miner Revenue / Marketcap (Fees plus new coins, percentage)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Annualized Miner Revenue / Marketcap (Fees plus new coins,
percentage)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
XMR Miner Revenue (%)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
BTC Miner Revenue (%)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -233,15 +180,14 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2008-11-14', '2024-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -287,15 +233,14 @@
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2008-11-14', '2024-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -322,11 +267,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,82 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Daily Miner Revenue (Fees plus new coins, Native Units / day)
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Daily Miner Revenue (Fees plus new coins, Native Units / day)
</h6> </h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
XMR Miner Revenue </div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} XMR / day</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
BTC Miner Revenue (BTC)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} BTC / day</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -237,11 +184,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -291,11 +238,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -322,11 +269,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monero's Dominance Over Other 'Privacy' Coins (%)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monero's Dominance Over Other 'Privacy' Coins (%)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dominance }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ top_dominance }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -210,10 +158,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -264,10 +212,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -295,11 +243,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -1,414 +0,0 @@
{% extends 'charts/base.html' %}
{% block header %}
<title>Moneroj.net - Price</title>
{% endblock %}
{% block content %}
<!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Price (log scale, USD)</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i>
</a>
</div>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price (USD)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price (USD)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Price To Date (USD)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation (%)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
<!-- Modal -->
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal">Help about the chart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
This chart shows the price of the coin on a log scale. The color of the points indicate their position
on the Bitcoin pair, being red as overbought and blue as cheap.<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Fim do Modal -->
<!-- Page level plugins -->
<script>
var data4 = {
type: "scatter",
mode: "markers",
name: 'Average price on date',
x: {{ dates|safe }},
y: {{ values|safe }},
line: {color: '#7f421d'},
marker: {
color: {{ color|safe }},
colorbar: {
title: {
text: 'Cycle on the Bitcoin pair (%)',
side: 'right'
,font: {
color: 'white'
,size: 14
}
}
,thickness: 10
,tickfont: {
color: 'white'
,size: 14
}
,borderwidth: 0
},
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
sizemode: 'area',
size: 5,
cmax: 100,
cmin: 0
}
};
var data4_mobile = {
type: "scatter",
mode: "markers",
name: 'Average price on date',
x: {{ dates|safe }},
y: {{ values|safe }},
line: {color: '#7f421d'},
marker: {
color: {{ color|safe }},
colorbar: {
thickness: 4
,tickfont: {
color: 'white'
,size: 6
}
,borderwidth: 0
},
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
sizemode: 'area',
size: 3,
cmax: 100,
cmin: 0
}
};
var data3 = {
type: "scatter",
mode: "lines",
name: 'Resistance',
x: {{ dates|safe }},
y: {{ average2|safe }},
line: {
color: '#662222'
,width: 3
}
};
var data3_mobile = {
type: "scatter",
mode: "lines",
name: 'Resistance',
x: {{ dates|safe }},
y: {{ average2|safe }},
line: {
color: '#662222'
,width: 3
}
};
var data2 = {
type: "scatter",
mode: "lines",
name: 'Buy line',
x: {{ dates|safe }},
y: {{ average1|safe }},
line: {
color: '#225522'
,width: 3
}
};
var data2_mobile = {
type: "scatter",
mode: "lines",
name: 'Buy line',
x: {{ dates|safe }},
y: {{ average1|safe }},
line: {
color: '#225522'
,width: 3
}
};
var data = [data3, data4, data2];
var data_mobile = [data4_mobile, data2_mobile, data3_mobile];
var layout = {
plot_bgcolor:"#252221",
paper_bgcolor:"#252221",
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.98,
xanchor: 'auto',
y: 0.05,
yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false,
borderwidth: 1,
bordercolor: '#5f5f5f',
bgcolor: '#333333',
borderpad: 5,
align: 'center',
font: {
color: "white",
size: 12
}
}],
separators: ",.",
legend: {
x: 0.80,
y: 0.05,
bgcolor: '#333333',
bordercolor: '#5f5f5f',
borderwidth: 1,
font: {
color: 'white',
size: 12
},
traceorder: 'normal',
xanchor: 'auto',
yanchor: 'auto'
},
hoverlabel: {
namelength: -1
},
yaxis: {
type: "log",
title: {
text: 'USD',
font: {
size: 20,
color: 'white'
}
},
tickformat :",.2f"
,nticks: 10
,tickfont: {
color: "#ffffff"
,size: 12
}
,gridcolor: "#333333"
},
xaxis: {
hoverformat: "%Y-%m-%d",
showgrid: true,
type: 'date',
nticks: 10
,tickfont: {
color: "#dddddd"
,size: 13
}
,gridcolor: "#333333"
,range: ['2014-05-01', '2023-01-01']
,zeroline: true
},
margin: {
l: 120,
r: 60,
b: 35,
t: 10,
pad: 4
}
};
var layout_mobile = {
plot_bgcolor:"black",
paper_bgcolor:"black",
separators: ",.",
hoverlabel: {
namelength: -1
},
legend: {
x: 0.98,
y: 0.05,
bgcolor: '#000000',
bordercolor: '#5f5f5f',
borderwidth: 1,
font: {
color: 'white',
size: 5
},
traceorder: 'normal',
xanchor: 'auto',
yanchor: 'auto'
},
showlegend: false,
yaxis: {
type: "log",
tickformat :",.0f"
,nticks: 10
,tickfont: {
color: "#ffffff"
,size: 7
}
,gridcolor: "#444444"
},
xaxis: {
hoverformat: "%Y",
showgrid: true,
type: 'date',
nticks: 10
,tickfont: {
color: "#dddddd"
,size: 7
}
,gridcolor: "#444444"
,range: ['2009-12-20', '2026-01-10']
,zeroline: true
},
margin: {
l: 40,
r: 0,
b: 35,
t: 10,
pad: 0
}
};
function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
let el = document.createElement('div');
document.body.appendChild(el);
let curEnv = envs.shift();
for (let env of envs.reverse()) {
el.classList.add(`d-${env}-none`);
if (window.getComputedStyle(el).display === 'none') {
curEnv = env;
break;
}
}
document.body.removeChild(el);
return curEnv;
}
env_size = findBootstrapEnvironment();
if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
}
else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
}
</script>
{% endblock %}

View file

@ -9,56 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Total Pageviews and Unique Visitors (Moneroj.net, linear)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Pageviews and Unique Visitors (Moneroj.net, linear)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
<br>
</div> </div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -162,8 +135,8 @@ var layout = {
}], }],
separators: ",.", separators: ",.",
legend: { legend: {
x: 0.98, x: 0.02,
y: 0.50, y: 0.98,
bgcolor: '#333333', bgcolor: '#333333',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -208,10 +181,10 @@ var layout = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 80, l: 100,
r: 30, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -262,10 +235,10 @@ var layout_mobile = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -293,11 +266,9 @@ var layout_mobile = {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Transaction Percentage (XMR's tx / BTC's tx)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Transaction Percentage (XMR's tx / BTC's tx)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Percentage</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Percentage</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -211,11 +159,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -265,11 +213,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -296,11 +244,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,85 +9,34 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monthly Percentage (XMR's tx / BTC's tx)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monthly Percentage (XMR's tx / BTC's tx)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monthly Percentage</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Percentage of Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true"> <div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
@ -225,15 +174,14 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -279,15 +227,14 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -314,11 +261,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,101 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Power Law
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Power Law</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Daily Close</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -350,11 +278,11 @@ var layout = {
}, },
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 60, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -411,11 +339,11 @@ var layout_mobile = {
}, },
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -442,11 +370,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,101 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Price (linear scale, USD)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Price (linear scale, USD)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Daily Close</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -263,15 +191,14 @@ var layout = {
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -317,15 +244,14 @@ var layout_mobile = {
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2009-12-20', '2026-01-10']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -352,11 +278,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,101 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Price (log scale, USD)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Price (log scale, USD)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Daily Close</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -119,8 +47,8 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
This chart shows the price of the coin on a log scale. The color of the points indicate their position This chart shows the price of the coin on a linear scale. The color of the points indicate their
on the Bitcoin pair, being red as overbought and blue as cheap.<br> position on the Bitcoin pair, being red as overbought and blue as cheap.<br>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@ -131,9 +59,9 @@
<!-- Fim do Modal --> <!-- Fim do Modal -->
<!-- Page level plugins --> <!-- Page level plugins -->
<script> <script>
var data4 = { var data4 = {
type: "scatter", type: "scatter",
mode: "markers", mode: "markers",
@ -202,7 +130,7 @@ var layout = {
{ {
xref: 'paper', xref: 'paper',
yref: 'paper', yref: 'paper',
x: 0.50, x: 0.98,
xanchor: 'auto', xanchor: 'auto',
y: 0.02, y: 0.02,
yanchor: 'auto', yanchor: 'auto',
@ -263,15 +191,14 @@ var layout = {
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -317,15 +244,14 @@ var layout_mobile = {
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2009-12-20', '2026-01-10']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -352,11 +278,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -5,95 +5,32 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Price (BTC)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Price (BTC)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bottom</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ bottom }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Top</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -310,11 +247,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -341,11 +278,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -5,95 +5,32 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Price (BTC)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Price (BTC)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bottom</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ bottom }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Top</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -310,11 +247,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -341,11 +278,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,100 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Total Dominance of Privacy Coins Over the Cryptocurrency Market (%)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Dominance of Privacy Coins Over the Cryptocurrency Market (%)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Latest Privacy Marketcap</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_marketcap }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Privacy Marketcap</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ top_marketcap }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Latest Privacy Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dominance }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Top Privacy Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ top_dominance }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -248,11 +177,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -302,11 +231,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -333,11 +262,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,100 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Total Marketcap of Privacy Coins (USD)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Marketcap of Privacy Coins (USD)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Latest Privacy Marketcap</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_marketcap }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Privacy Marketcap</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ top_marketcap }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Latest Privacy Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dominance }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Top Privacy Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ top_dominance }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -250,15 +179,15 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-04-14', '2024-01-01'] ,range: ['2014-04-14', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -304,15 +233,15 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-04-14', '2024-01-01'] ,range: ['2014-04-14', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -339,11 +268,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monero's Coinmarketcap Rank
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monero's Coinmarketcap Rank</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Rank</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_value }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Rank</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -256,10 +204,10 @@ var layout = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -321,10 +269,10 @@ var layout_mobile = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -352,11 +300,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Security Budget for Monero and Bitcoin (Dollars/second)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Security Budget for Monero and Bitcoin (Dollars/second)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Monero Security Budget</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} / second</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Bitcoin Security Budget</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} / second</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -174,7 +122,7 @@
yref: 'paper', yref: 'paper',
x: 1, x: 1,
xanchor: 'auto', xanchor: 'auto',
y: 0.6, y: 0.25,
yanchor: 'auto', yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net', text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false, showarrow: false,
@ -191,7 +139,7 @@
separators: ",.", separators: ",.",
legend: { legend: {
x: 1, x: 1,
y: 0.95, y: 0.02,
bgcolor: '#333333', bgcolor: '#333333',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -233,15 +181,15 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2009-01-01', '2026-01-01'] ,range: ['2009-01-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -287,15 +235,15 @@
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2009-01-01', '2026-01-01'] ,range: ['2009-01-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -322,11 +270,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,99 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Stock-to-flow Model
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12">
<div class="alert alert-danger" role="alert">
Warning: the price described by the gray line is just a suggestion of future behavior based on
past price-action pattern (adjusted for variable inflation).
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Stock-to-flow Model (log scale)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -315,11 +245,11 @@ var layout = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -369,11 +299,11 @@ var layout_mobile = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -400,11 +330,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,91 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Stock-to-flow Model
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Stock-to-flow Model (linear scale)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Last Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Price</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Annual Inflation</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -111,7 +49,7 @@
<div class="modal-body"> <div class="modal-body">
This chart shows the price of the coin on each date, coloring the points indicating their position on This chart shows the price of the coin on each date, coloring the points indicating their position on
the Bitcoin pair, being red as overbought and blue as cheap. the Bitcoin pair, being red as overbought and blue as cheap.
This chart is plotted on a log scale. The formula is Stocktoflow = (100/Inflation)^Multiplier, This chart is plotted on a linear scale. The formula is Stocktoflow = (100/Inflation)^Multiplier,
Multiplier is 1.65 for Monero (it's higher for Bitcoin's stock-to-flow Multiplier is 1.65 for Monero (it's higher for Bitcoin's stock-to-flow
model, for example).<br> model, for example).<br>
</div> </div>
@ -279,15 +217,15 @@ var layout = {
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-01-01'] ,range: ['2014-05-01', '2023-07-31']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -333,15 +271,15 @@ var layout_mobile = {
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2014-05-01', '2023-01-01'] ,range: ['2014-05-01', '2023-07-31']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -368,11 +306,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,80 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Stock-to-flow Multiple (Price / SF Model)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Stock-to-flow Multiple (Price / SF Model)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Stock-to-flow Multiple</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Top Stock-to-flow Multiple Last Cycle</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -296,11 +245,11 @@ var layout = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -350,11 +299,11 @@ var layout_mobile = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -381,11 +330,9 @@ function findBootstrapEnvironment() {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,54 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Sharpe Ratio
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Sharpe Ratio</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
<br>
</div> </div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -161,7 +136,7 @@
yref: 'paper', yref: 'paper',
x: 0.02, x: 0.02,
xanchor: 'auto', xanchor: 'auto',
y: 0.50, y: 0.85,
yanchor: 'auto', yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net', text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false, showarrow: false,
@ -243,10 +218,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -308,10 +283,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -339,11 +314,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="800px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Shielded Transactions
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Shielded Transactions</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monero Monthly Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ monthly }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monero Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ dominance }}%</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -315,11 +263,11 @@ var data1 = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -368,11 +316,11 @@ var data1 = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -399,11 +347,9 @@ var data1 = {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,100 +9,45 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Total Number of Reddit Subscribers for Bitcoin and CryptoCurrency
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Bitcoin and CryptoCurrency
</h6> </h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<div class="row"> <div class="dropdown no-arrow">
<div class="col-xl-12 col-lg-12"> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="card" id="graph_2"> About this chart?
<div </a>
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Monero</h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph2" style="height: 100%; width:100%;"></div>
</div> </div>
</div> </div>
<br> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div> </div>
</div> </div>
<!-- Content Row --> <!-- Content Row -->
<div class="row"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph_2" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Total Number of Reddit Subscribers for Monero
</h6>
<!-- Earnings (Monthly) Card Example --> <div class="dropdown no-arrow">
<div class="col-xl-4 col-md-6 mb-4"> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="card border-left-new h-100 py-2"> About this chart?
<div class="card-body"> </a>
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> </div>
Monero Subscribers</div> </div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bitcoin Subscribers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
CryptoCurrency Subscribers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -368,14 +313,10 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
document.getElementById("graph_2").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
document.getElementById("graph_2").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Marketcap Divided by Number of Reddit Subscribers
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Marketcap Divided by Number of Reddit Subscribers</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Marketcap / Redditors for Monero</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Marketcap / Redditors for Bitcoin</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -237,11 +185,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -291,11 +239,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -322,11 +270,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,90 +9,45 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Reddit Subscribers of /CryptoCurrency as a Percentage of /Bitcoin
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Reddit Subscribers of /CryptoCurrency as a Percentage of /Bitcoin
</h6> </h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph12">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Reddit Subscribers of /Monero as a Percentage of /Bitcoin</h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph2" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<div class="dropdown no-arrow">
<!-- Content Row --> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="row"> About this chart?
</a>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Monero Subscribers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
</div> </div>
</div> </div>
</div> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<!-- Earnings (Monthly) Card Example --> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
<div class="col-xl-64 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current CryptoCurrency Subscribers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Content Row --> <!-- Content Row -->
<div class="row"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="col-xl-11 col-md-6 mb-4"> <div class="card" id="graph_2" style="width: 100%; height: 100%;">
<div class="alert alert-dark" role="alert"> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
Not financial advice. <h6 class="m-0 text-light">
For information about the chart, click the button > Reddit Subscribers of /Monero as a Percentage of /Bitcoin
</div> </h6>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
<div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
</div>
</div>
<div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div> </div>
<!-- /.container-fluid -->
</div> </div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -123,9 +78,9 @@
</div> </div>
<!-- Fim do Modal --> <!-- Fim do Modal -->
<!-- Page level plugins --> <!-- Page level plugins -->
<script> <script>
var data1 = { var data1 = {
type: "scatter", type: "scatter",
mode: "lines", mode: "lines",
@ -179,7 +134,6 @@
var data_mobile = [data2_mobile]; var data_mobile = [data2_mobile];
var data_2 = [data1]; var data_2 = [data1];
var data_mobile_2 = [data1_mobile]; var data_mobile_2 = [data1_mobile];
var layout = { var layout = {
plot_bgcolor:"#252221", plot_bgcolor:"#252221",
paper_bgcolor:"#252221", paper_bgcolor:"#252221",
@ -206,7 +160,7 @@
separators: ",.", separators: ",.",
legend: { legend: {
x: 1, x: 1,
y: 0.85, y: 0.40,
bgcolor: '#333333', bgcolor: '#333333',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -224,7 +178,7 @@
yaxis: { yaxis: {
type: "linear", type: "linear",
title: { title: {
text: 'Subscribers Percentage', text: 'Percentage',
font: { font: {
size: 20, size: 20,
color: 'white' color: 'white'
@ -248,7 +202,7 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-01-01'] ,range: ['2014-10-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
@ -284,7 +238,7 @@
showlegend: false, showlegend: false,
yaxis: { yaxis: {
type: "linear", type: "linear",
tickformat :",.1f" tickformat :",.0f"
,nticks: 10 ,nticks: 10
,tickfont: { ,tickfont: {
color: "#ffffff" color: "#ffffff"
@ -294,15 +248,15 @@
}, },
xaxis: { xaxis: {
hoverformat: "%Y", hoverformat: "%Y",
showgrid: false, showgrid: true,
type: 'date', type: 'date',
nticks: 3 nticks: 10
,tickfont: { ,tickfont: {
color: "#dddddd" color: "#dddddd"
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2014-05-01', '2023-01-01'] ,range: ['2014-10-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
@ -337,19 +291,14 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
document.getElementById("graph12").style.height="350px";
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="750px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
document.getElementById("graph12").style.height="750px";
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>
{% endblock %} {% endblock %}

View file

@ -9,100 +9,45 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> /Bitcoin, /CryptoCurrency and /Monero Monthly New Subscribers
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">/Bitcoin, /CryptoCurrency and /Monero Monthly New Subscribers
</h6> </h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="dropdown no-arrow">
<div id="graph" style="height: 100%; width:100%;"></div> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
</div> </div>
</div> </div>
<br> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph12">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">/Bitcoin, /CryptoCurrency and /Monero Monthly Percentage Increase
in Subscribers</h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph2" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row --> <!-- Content Row -->
<div class="row"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph_2" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
/Bitcoin, /CryptoCurrency and /Monero Monthly Percentage Increase
</h6>
<!-- Earnings (Monthly) Card Example --> <div class="dropdown no-arrow">
<div class="col-xl-4 col-md-6 mb-4"> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="card border-left-new h-100 py-2"> About this chart?
<div class="card-body"> </a>
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> </div>
New Monero Subscribers (Last 30 days)</div> </div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
New Bitcoin Subscribers (Last 30 days)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
New CryptoCurrency Subscribers (Last 30 days)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -569,19 +514,14 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
document.getElementById("graph12").style.height="350px";
Plotly.newPlot('graph2', data_mobile_2, layout_mobile_2, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
document.getElementById("graph12").style.height="700px";
Plotly.newPlot('graph2', data_2, layout_2, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>
{% endblock %} {% endblock %}

View file

@ -9,80 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Total Number of Reddit Subscribers for Monero and Number of Transactions
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Monero and Number of Transactions</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="height: 100%; width:100%;"></div> <div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monero Subscribers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Daily Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -255,11 +204,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 100,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -320,11 +269,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 100,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -351,11 +300,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -1,7 +1,7 @@
{% extends 'charts/base.html' %} {% extends 'charts/base.html' %}
{% block header %} {% block header %}
<title>Moneroj.net - Reddit Comments</title> <title>Moneroj.net - Reddit Subscribers</title>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -9,100 +9,45 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Comments per day on Subreddits /Bitcoin and /CryptoCurrency
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Comments per day on Subreddits /Bitcoin and /CryptoCurrency
</h6> </h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="dropdown no-arrow">
<div id="graph" style="height: 100%; width:100%;"></div> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
</div> </div>
</div> </div>
<br> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph_2">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Comments per day on Subreddit /Monero</h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph2" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row --> <!-- Content Row -->
<div class="row"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph_2" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Comments per day on Subreddit /Monero
</h6>
<!-- Earnings (Monthly) Card Example --> <div class="dropdown no-arrow">
<div class="col-xl-4 col-md-6 mb-4"> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="card border-left-new h-100 py-2"> About this chart?
<div class="card-body"> </a>
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> </div>
Monero Daily Comments</div> </div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bitcoin Daily Comments</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
CryptoCurrency Daily Comments</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -118,9 +63,13 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
These charts show the total number of daily comments for Subreddits: Monero, CryptoCurrency and Bitcoin. The more These charts show the total number of users for subreddits /Monero ang /CryptoCurrency as a percentage
users the subreddit has, more likely it is to of the total users of /Bitcoin subreddit.
achieve mass adoption.</div> Sudden spikes in total percentage indicate there's a new wave of people getting into other
cryptocurrencies, not only in Bitcoin. When /CryptoCurrency dominance increase,
it makes sense to expect that such projects will appreciate against the BTC pair. However, this is just
and idea to observe.
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> </div>
@ -216,9 +165,9 @@
{ {
xref: 'paper', xref: 'paper',
yref: 'paper', yref: 'paper',
x: 1, x: 0.02,
xanchor: 'auto', xanchor: 'auto',
y: 0.05, y: 0.98,
yanchor: 'auto', yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net', text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false, showarrow: false,
@ -234,8 +183,8 @@
}], }],
separators: ",.", separators: ",.",
legend: { legend: {
x: 1, x: 0.02,
y: 0.40, y: 0.80,
bgcolor: '#333333', bgcolor: '#333333',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -297,8 +246,8 @@
namelength: -1 namelength: -1
}, },
legend: { legend: {
x: 0.98, x: 0.02,
y: 0.05, y: 0.98,
bgcolor: '#000000', bgcolor: '#000000',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -343,6 +292,7 @@
} }
}; };
function findBootstrapEnvironment() { function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl']; let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
@ -366,17 +316,14 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
document.getElementById("graph_2").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
document.getElementById("graph_2").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>
{% endblock %} {% endblock %}

View file

@ -1,7 +1,7 @@
{% extends 'charts/base.html' %} {% extends 'charts/base.html' %}
{% block header %} {% block header %}
<title>Moneroj.net - Reddit Posts</title> <title>Moneroj.net - Reddit Subscribers</title>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -9,99 +9,45 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<!-- Begin Page Content --> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<div class="container-fluid"><br> <h6 class="m-0 text-light">
<div class="row"> Posts per day on Subreddits /Bitcoin and /CryptoCurrency
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Posts per day on Subreddits /Bitcoin and /CryptoCurrency
</h6> </h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="dropdown no-arrow">
<div id="graph" style="height: 100%; width:100%;"></div> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
</div> </div>
</div> </div>
<br> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph_2">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Posts per day on Reddit /Monero</h6>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph2" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row --> <!-- Content Row -->
<div class="row"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph_2" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Posts per day on Reddit /Monero
</h6>
<!-- Earnings (Monthly) Card Example --> <div class="dropdown no-arrow">
<div class="col-xl-4 col-md-6 mb-4"> <a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
<div class="card border-left-new h-100 py-2"> About this chart?
<div class="card-body"> </a>
<div class="text-xs font-weight-bold text-info text-uppercase mb-1"> </div>
Monero Posts (24h)</div> </div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph2" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bitcoin Posts (24h)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-4 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
CryptoCurrency Posts (24h)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -117,9 +63,13 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
These charts show the total number of daily posts for Subreddits: Monero, CryptoCurrency and Bitcoin. The more These charts show the total number of users for subreddits /Monero ang /CryptoCurrency as a percentage
users the subreddit has, more likely it is to of the total users of /Bitcoin subreddit.
achieve mass adoption.</div> Sudden spikes in total percentage indicate there's a new wave of people getting into other
cryptocurrencies, not only in Bitcoin. When /CryptoCurrency dominance increase,
it makes sense to expect that such projects will appreciate against the BTC pair. However, this is just
and idea to observe.
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> </div>
@ -215,9 +165,9 @@
{ {
xref: 'paper', xref: 'paper',
yref: 'paper', yref: 'paper',
x: 1, x: 0.02,
xanchor: 'auto', xanchor: 'auto',
y: 0.05, y: 0.80,
yanchor: 'auto', yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net', text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false, showarrow: false,
@ -233,8 +183,8 @@
}], }],
separators: ",.", separators: ",.",
legend: { legend: {
x: 1, x: 0.02,
y: 0.40, y: 0.98,
bgcolor: '#333333', bgcolor: '#333333',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -296,8 +246,8 @@
namelength: -1 namelength: -1
}, },
legend: { legend: {
x: 0.98, x: 0.02,
y: 0.05, y: 0.98,
bgcolor: '#000000', bgcolor: '#000000',
bordercolor: '#5f5f5f', bordercolor: '#5f5f5f',
borderwidth: 1, borderwidth: 1,
@ -365,17 +315,14 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
document.getElementById("graph_2").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
document.getElementById("graph_2").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>
{% endblock %} {% endblock %}

View file

@ -9,70 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monero's Tail Emission
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monero's Tail Emission</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-12 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Monero Annualized Inflation (%)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -200,11 +159,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -254,11 +213,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -285,11 +244,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,54 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Thermocap Multiple
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Thermocap Multiple</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div> </div>
</div> </div>
<br>
</div> </div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -323,8 +298,8 @@
margin: { margin: {
l: 120, l: 120,
r: 120, r: 120,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -386,10 +361,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 100,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -417,11 +392,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="800px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monero's Dominance Over the Number of Transactions on the Privacy Market (%)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monero's Dominance Over the Number of Transactions on the Privacy Market (%)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Dominance</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -211,10 +159,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -265,10 +213,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -296,11 +244,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Average Transaction Size for both Monero and Bitcoin (Bytes)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Average Transaction Size for both Monero and Bitcoin (Bytes)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Monero Average Transaction Size</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Bitcoin Average Transaction Size</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -173,7 +121,7 @@
yref: 'paper', yref: 'paper',
x: 1, x: 1,
xanchor: 'auto', xanchor: 'auto',
y: 0.6, y: 0.8,
yanchor: 'auto', yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net', text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false, showarrow: false,
@ -232,15 +180,15 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2009-01-01', '2026-01-01'] ,range: ['2009-01-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -286,15 +234,15 @@
,size: 7 ,size: 7
} }
,gridcolor: "#444444" ,gridcolor: "#444444"
,range: ['2009-01-01', '2026-01-01'] ,range: ['2009-01-01', '2023-01-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -321,11 +269,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -1,311 +0,0 @@
{% extends 'charts/base.html' %}
{% block header %}
<title>Moneroj.net - Transactions</title>
{% endblock %}
{% block content %}
<!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monero's Daily Transaction Count in Log Scale</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i>
</a>
</div>
</div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
<div id="graph" style="height: 100%; width:100%;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Current Daily Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Number of Daily Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
<!-- Modal -->
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal">Help about the chart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
This chart shows the total transactions Monero has each day on a log scale. Higher transaction count
means the coin is being increasingly used, and since Metcalfe's Law
proposes that more information being exchanged in a network means the network itself should be worth
more, it also means the coin should increase in price.<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Fim do Modal -->
<!-- Page level plugins -->
<script>
var data3 = {
type: "scatter",
mode: "lines",
name: 'Fractal of past price',
x: {{ dates|safe }},
y: {{ transactions|safe }},
line: {
color: '#dd1d1d'
,width: 1
}
};
var data3_mobile = {
type: "scatter",
mode: "lines",
name: 'Fractal of past price',
x: {{ dates|safe }},
y: {{ transactions|safe }},
line: {
color: '#dd1d1d'
,width: 1
}
};
var data = [data3];
var data_mobile = [data3_mobile];
var layout = {
plot_bgcolor:"#252221",
paper_bgcolor:"#252221",
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.98,
xanchor: 'auto',
y: 0.05,
yanchor: 'auto',
text: 'Moneroj<br>https://www.moneroj.net',
showarrow: false,
borderwidth: 1,
bordercolor: '#5f5f5f',
bgcolor: '#333333',
borderpad: 5,
align: 'center',
font: {
color: "white",
size: 12
}
}],
separators: ",.",
legend: {
x: 0.8,
y: 0.05,
bgcolor: '#333333',
bordercolor: '#5f5f5f',
borderwidth: 1,
font: {
color: 'white',
size: 12
},
traceorder: 'normal',
xanchor: 'auto',
yanchor: 'auto'
},
hoverlabel: {
namelength: -1
},
yaxis: {
type: "log",
title: {
text: 'Transactions/day',
font: {
size: 20,
color: 'white'
}
},
tickformat :",.0f"
,nticks: 10
,tickfont: {
color: "#ffffff"
,size: 12
}
,gridcolor: "#333333"
},
xaxis: {
hoverformat: "%Y-%m-%d",
showgrid: true,
type: 'date',
nticks: 10
,tickfont: {
color: "#dddddd"
,size: 13
}
,gridcolor: "#333333"
,range: ['2014-05-01', '2022-01-01']
,zeroline: true
},
margin: {
l: 120,
r: 60,
b: 35,
t: 10,
pad: 4
}
};
var layout_mobile = {
plot_bgcolor:"black",
paper_bgcolor:"black",
separators: ",.",
hoverlabel: {
namelength: -1
},
legend: {
x: 0.98,
y: 0.05,
bgcolor: '#000000',
bordercolor: '#5f5f5f',
borderwidth: 1,
font: {
color: 'white',
size: 5
},
traceorder: 'normal',
xanchor: 'auto',
yanchor: 'auto'
},
showlegend: false,
yaxis: {
type: "log",
tickformat :",.0f"
,nticks: 10
,tickfont: {
color: "#ffffff"
,size: 7
}
,gridcolor: "#444444"
},
xaxis: {
hoverformat: "%Y",
showgrid: true,
type: 'date',
nticks: 10
,tickfont: {
color: "#dddddd"
,size: 7
}
,gridcolor: "#444444"
,range: ['2014-05-01', '2022-01-01']
,zeroline: true
},
margin: {
l: 40,
r: 0,
b: 35,
t: 10,
pad: 0
}
};
function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
let el = document.createElement('div');
document.body.appendChild(el);
let curEnv = envs.shift();
for (let env of envs.reverse()) {
el.classList.add(`d-${env}-none`);
if (window.getComputedStyle(el).display === 'none') {
curEnv = env;
break;
}
}
document.body.removeChild(el);
return curEnv;
}
env_size = findBootstrapEnvironment();
if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
}
else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
}
</script>
{% endblock %}

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Average Transaction Cost
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Average Transaction Cost</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monero's Transaction Cost</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bitcoin's Transaction Cost</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -235,11 +183,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -289,11 +237,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -320,11 +268,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Average Transaction Cost (Native Units)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Average Transaction Cost (Native Units)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monero's Transaction Cost</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} XMR</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Bitcoin's Transaction Cost</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} BTC</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -236,11 +184,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -290,11 +238,11 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -321,11 +269,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Transaction Count (linear)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Transaction Count (linear)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Daily Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Number of Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -258,10 +206,10 @@ var layout = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -323,10 +271,10 @@ var layout_mobile = {
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -354,11 +302,9 @@ var layout_mobile = {
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Transaction Count (log scale)
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Transaction Count (log scale)</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Daily Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Number of Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -258,10 +206,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 120, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -323,10 +271,10 @@
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 100, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 10 pad: 10
} }
}; };
@ -354,11 +302,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>

View file

@ -9,81 +9,29 @@
<!-- Content Wrapper --> <!-- Content Wrapper -->
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)"> <div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
<!-- Main Content --> <!-- Content Row -->
<div id="content"> <div class="row" style="height: 92%; margin: 10px 10px 10px 10px;">
<div class="card" id="graph1" style="width: 100%; height: 100%;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">
Monthly Transactions
</h6>
<!-- Begin Page Content -->
<div class="container-fluid"><br>
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card" id="graph1">
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
<h6 class="m-0 text-light">Monthly Transactions</h6>
<div class="dropdown no-arrow"> <div class="dropdown no-arrow">
<a data-toggle="modal" href="#" class="link_graph" data-target="#id_Modal">
About this chart?
</a>
<a class="dropdown-toggle" href="#" role="button" <a class="dropdown-toggle" href="#" role="button"
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));"> onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
<i class="bx bx-expand text-gray-400"></i> <i class="bx bx-expand text-gray-400"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;"> <div class="card-body" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<div id="graph" style="height: 100%; width:100%;"></div> <div id="graph" style="width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"></div>
</div>
</div>
<br>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Monthly Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Card -->
<div class="col-xl-6 col-md-6 mb-4">
<div class="card border-left-new h-100 py-2">
<div class="card-body">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Highest Number of Transactions</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<div class="col-xl-11 col-md-6 mb-4">
<div class="alert alert-dark" role="alert">
Not financial advice.
For information about the chart, click the button >
</div>
</div>
<div class="col-xl-1">
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
data-target="#id_Modal">
<div class="col-auto">
+
</div>
</button>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div> </div>
<!-- End of Content Wrapper --> <!-- End of Content Wrapper -->
@ -225,15 +173,14 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 120, l: 100,
r: 60, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 4 pad: 10
} }
}; };
@ -279,15 +226,14 @@
,size: 13 ,size: 13
} }
,gridcolor: "#333333" ,gridcolor: "#333333"
,range: ['2014-05-01', '2023-06-01']
,zeroline: true ,zeroline: true
}, },
margin: { margin: {
l: 40, l: 100,
r: 0, r: 50,
b: 35, b: 50,
t: 10, t: 20,
pad: 0 pad: 10
} }
}; };
@ -314,11 +260,9 @@
} }
env_size = findBootstrapEnvironment(); env_size = findBootstrapEnvironment();
if (env_size == "xs") { if (env_size == "xs") {
document.getElementById("graph1").style.height="350px";
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
else { else {
document.getElementById("graph1").style.height="700px";
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false}); Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
} }
</script> </script>