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
|
sed -i "s/style=\"display:none;\" class=\"next\"/class=\"next\"/g" $WEBPATH/history/index_$datePrevious.html
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Export JSON for graph
|
|
||||||
source $GPATH/lib/transform_json.sh
|
|
||||||
|
|
||||||
# chown www-data for nginx needs
|
# chown www-data for nginx needs
|
||||||
chown -R www-data:www-data $WEBPATH >/dev/null 2>&1
|
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 {
|
#charts {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1100px) {
|
@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">
|
<meta charset="utf-8">
|
||||||
<title>Ḡ1 Stats - Graphiques</title>
|
<title>Ḡ1 Stats - Graphiques</title>
|
||||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../css/charts.css">
|
<link rel="stylesheet" type="text/css" href="../css/charts.css">
|
||||||
<script type="text/javascript" src="../js/Chart.js"></script>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -22,121 +28,6 @@
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</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="blank"></div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<center><p>Les données démarrent le 15-11-19, jour de lancement du service g1-stats.<br>
|
<center><p>Les données démarrent le 15-11-19, jour de lancement du service g1-stats.<br>
|
||||||
|
|
Loading…
Reference in New Issue