forked from axiom-team/g1-stats
Visualize daily.json in graph
This commit is contained in:
parent
b93fb52450
commit
cc7dee7a7b
|
|
@ -69,9 +69,6 @@ web() {
|
|||
sed -i "s/style=\"display:none;\" class=\"next\"/class=\"next\"/g" $WEBPATH/history/index_$datePrevious.html
|
||||
fi
|
||||
|
||||
# Export JSON for graph
|
||||
source $GPATH/lib/transform_json.sh
|
||||
|
||||
# chown www-data for nginx needs
|
||||
chown -R www-data:www-data $WEBPATH >/dev/null 2>&1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Varialbes
|
||||
n=2 # Nombre de jours pour les pas en abscisse
|
||||
|
||||
#GPATH="$( cd "$(dirname "$0")" ; pwd -P )"
|
||||
#if [[ -e $GPATH/.env ]]; then source $GPATH/.env; else echo "Veuillez créer votre fichier .env inspiré de .env.example" && exit 1; fi
|
||||
|
||||
|
||||
## Ḡ1 reçus
|
||||
rWallets() {
|
||||
rWallets=$(grep -E "Date:|Reçus simples wallets|Reçus simples portefeuille|Reçus membres" $WEBPATH/history/index_*.html | awk -F '<b>' '{ print $2 }' | awk '{ print $1 }' | tr -d '.' | tr ',' '.')
|
||||
rWallets=$(sed '/-/i !' <<< $rWallets)
|
||||
|
||||
local j=0
|
||||
local IFS=$'!'
|
||||
for i in $rWallets; do
|
||||
((j++))
|
||||
[[ $j == 1 || ! $(( $j % $n )) == 0 ]] && continue
|
||||
local dateN=$(sed '2q;d' <<< $i)
|
||||
local RW=$(sed '3q;d' <<< $i)
|
||||
local RM=$(sed '4q;d' <<< $i)
|
||||
|
||||
local jsonTPL=$(sed s/_DATE/$dateN/g $GPATH/tpl/daily.json)
|
||||
local jsonTPL=$(sed s/_RWALLETS/$RW/g <<< $jsonTPL)
|
||||
local result+=$(sed s/_RMEMBERS/$RM/g <<< $jsonTPL)
|
||||
done
|
||||
|
||||
sed "s/_JSONDATA/$result/g" $GPATH/tpl/recus.html > $WEBPATH/graph/recus.html
|
||||
sed "s/_JSONDATARW/$result/g" $GPATH/tpl/mixed.html > $WEBPATH/graph/mixed.html
|
||||
}
|
||||
|
||||
nbrWallets() {
|
||||
## Nombre de wallets
|
||||
nbrWallets=$(grep -E "Date:|Nombre de membres|Nombre de simple portefeuille" $WEBPATH/history/index_*.html | awk -F '<b>' '{ print $2 }' | awk -F '</b>' '{ print $1 }' | awk '{ print $1 }')
|
||||
nbrWallets=$(sed '/-/i !' <<< $nbrWallets)
|
||||
|
||||
local j=0
|
||||
local IFS=$'!'
|
||||
for i in $nbrWallets; do
|
||||
((j++))
|
||||
[[ $j == 1 || ! $(( $j % $n )) == 0 ]] && continue
|
||||
local dateN=$(sed '2q;d' <<< $i)
|
||||
local NBRM=$(sed '3q;d' <<< $i)
|
||||
local NBRW=$(sed '4q;d' <<< $i)
|
||||
|
||||
local jsonTPL=$(sed s/_DATE/$dateN/g $GPATH/tpl/nbr_wallets.json)
|
||||
local jsonTPL=$(sed s/_NBRWALLETS/$NBRW/g <<< $jsonTPL)
|
||||
local result+=$(sed s/_NBRMEMBERS/$NBRM/g <<< $jsonTPL)
|
||||
done
|
||||
|
||||
sed "s/_JSONDATA/$result/g" $GPATH/tpl/nbr_wallets.html > $WEBPATH/graph/nbr_wallets.html
|
||||
sed -i "s/_JSONDATANBRW/$result/g" $WEBPATH/graph/mixed.html
|
||||
}
|
||||
|
||||
rWallets
|
||||
nbrWallets
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
#charts {
|
||||
width: 98%;
|
||||
margin-left: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
var jsonfileRW = $.getJSON( "daily.json", function(data) {
|
||||
var date = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
var rwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rWallets;
|
||||
});
|
||||
var rmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rMembers;
|
||||
});
|
||||
var nbrwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrWallets;
|
||||
});
|
||||
var nbrmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrMembers;
|
||||
});
|
||||
|
||||
//ReceivedGraph
|
||||
var ctx = document.getElementById("chartRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Ḡ1 reçus sur les simples portefeuilles',
|
||||
data: rwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Ḡ1 reçus sur les portefeuilles membres',
|
||||
data: rmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
var myChartRW = new Chart(ctx, config);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// NbrWallets Graph
|
||||
var ctx = document.getElementById("chartNBRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Nombre de simple portefeuilles',
|
||||
data: nbrwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Nombre de portefeuilles membres',
|
||||
data: nbrmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
|
||||
var myChartNBRW = new Chart(ctx, config);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*var jqxhr = $.getJSON( "example.json", function() {
|
||||
console.log( "success" );
|
||||
})
|
||||
.done(function() {
|
||||
console.log( "second success" );
|
||||
})
|
||||
.fail(function() {
|
||||
console.log( "error" );
|
||||
})
|
||||
.always(function() {
|
||||
console.log( "complete" );
|
||||
});*/
|
||||
125
tpl/mixed.html
125
tpl/mixed.html
|
|
@ -4,8 +4,14 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Ḡ1 Stats - Graphiques</title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/charts.css">
|
||||
<script type="text/javascript" src="../js/Chart.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../css/charts.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
|
||||
<script type="text/javascript" src="../js/Chart.js"></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://hammerjs.github.io/dist/hammer.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
|
||||
|
||||
<script type="text/javascript" src="graph.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -22,121 +28,6 @@
|
|||
</div>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
|
||||
// ### For received on wallets ###
|
||||
|
||||
var jsonfileRW = {
|
||||
"jsonarray": [
|
||||
_JSONDATARW
|
||||
]
|
||||
};
|
||||
|
||||
var date = jsonfileRW.jsonarray.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
var rwallets = jsonfileRW.jsonarray.map(function(e) {
|
||||
return e.rWallets;
|
||||
});
|
||||
var rmembres = jsonfileRW.jsonarray.map(function(e) {
|
||||
return e.rMembres;
|
||||
});
|
||||
|
||||
var ctx = document.getElementById("chartRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Ḡ1 reçus sur les simples portefeuilles',
|
||||
data: rwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Ḡ1 reçus sur les portefeuilles membres',
|
||||
data: rmembres,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
// maintainAspectRatio: false,
|
||||
// responsive: false
|
||||
}
|
||||
};
|
||||
|
||||
var myChartRW = new Chart(ctx, config);
|
||||
|
||||
// ### For numbers of wallets ###
|
||||
|
||||
var jsonfileNBRW = {
|
||||
"jsonarray": [
|
||||
_JSONDATANBRW
|
||||
]
|
||||
};
|
||||
|
||||
var date = jsonfileNBRW.jsonarray.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
var nbrwallets = jsonfileNBRW.jsonarray.map(function(e) {
|
||||
return e.nbrWallets;
|
||||
});
|
||||
var nbrmembres = jsonfileNBRW.jsonarray.map(function(e) {
|
||||
return e.nbrMembres;
|
||||
});
|
||||
|
||||
var ctx = document.getElementById("chartNBRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Nombre de simple portefeuilles',
|
||||
data: nbrwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Nombre de portefeuilles membres',
|
||||
data: nbrmembres,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
// maintainAspectRatio: false,
|
||||
// responsive: false
|
||||
}
|
||||
};
|
||||
|
||||
var myChartNBRW = new Chart(ctx, config);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div class="blank"></div>
|
||||
<div class="footer">
|
||||
<center><p>Les données démarrent le 15-11-19, jour de lancement du service g1-stats.<br>
|
||||
|
|
|
|||
Loading…
Reference in New Issue