Improve jsonify mechanics with several values, few stuff

This commit is contained in:
poka 2020-06-18 20:34:33 +02:00
parent 1aaf1b3bc5
commit 47a9ae5744
12 changed files with 349 additions and 70 deletions

12
css/charts.css Normal file
View File

@ -0,0 +1,12 @@
#charts {
width: 98%;
margin-left: 0px;
}
@media only screen and (max-width: 1100px) {
#charts {
width: 95%;
}
}

View File

@ -2,7 +2,7 @@ body {
background-color: #c4a787;
margin: 30px;
font-family: "Gill Sans", sans-serif;
min-width: 1100px;
/* min-width: 1100px; */
}
.footer img {
@ -20,8 +20,8 @@ pre {
letter-spacing: 0.04em;
}
#mainbloc, #statsHistory {
margin-top: 60px;
#mainbloc, #statsHistory, #charts {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 300px;
margin-right: 300px;
@ -63,8 +63,6 @@ a:hover {
right: 30px;
}
@media only screen and (max-width: 1100px) {
body {
margin: 15px;
@ -75,7 +73,7 @@ a:hover {
#mainbloc {
margin: 5px;
margin-top: 50px;
margin-top: 20px;
}
a {
font-size: 1em;

View File

@ -103,6 +103,7 @@ pourcentWallets=$(echo "scale=1; $nbrSimpleWallets*100/$nbrTotalWallets/1" | bc)
web() {
[ ! -d $WEBPATH/history/ ] && mkdir -p $WEBPATH/history/
[ ! -d $WEBPATH/graph/ ] && mkdir -p $WEBPATH/graph/
[ ! -d $WEBPATH/css ] && cp -r $SCRIPTPATH/css $WEBPATH/
cp $SCRIPTPATH/tpl/index.html $indexhtml

View File

@ -1,48 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/require.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<canvas id="myChart" width="1000" height="500"></canvas>
<script>
var jsonfile = {
"jsonarray": [
_JSONDATA
]
};
var date = jsonfile.jsonarray.map(function(e) {
return e.date;
});
var rwallet = jsonfile.jsonarray.map(function(e) {
return e.rWallet;
});;
var ctx = document.getElementById("myChart");
var config = {
type: 'line',
data: {
labels: date,
datasets: [{
label: 'Ḡ1 reçus sur les simples portefeuilles',
data: rwallet,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
},
options: {
maintainAspectRatio: false
}
};
var myChart = new Chart(ctx, config);
</script>
</body>
</html>

View File

@ -1 +0,0 @@
{\n \"date\": \"_DATE\",\n \"rWallet\": \"_RWALLET\"\n },

View File

@ -7,10 +7,11 @@
<body>
<div class="header">
<center><h1>La Ḡ1 en quelques chiffres</h1></center>
<center><h1>La Ḡ1 en quelques chiffres</h1>
<a href="/graph/mixed.html">Voir les graphiques</a></center>
</div>
<div id=mainbloc>
<div id="mainbloc">
<pre>
Date: <b>_day - _heure</b>
Noeud scanné: <b>https://duniter-g1.p2p.legal</b>
@ -19,11 +20,11 @@ Nombre total de wallet: <b>_nbrTotalWallets</b>
Nombre de membres: <b>_nbrMembers</b> (_pourcentMbrs%)
Nombre de simple portefeuille: <b>_nbrSimpleWallets</b> (_pourcentWallets%)
---
Reçus simples portefeuille: <b>_txInSimple Ḡ1</b> <a href="/graph.html">Voir le graphique</a>
Reçus simples portefeuille: <b>_txInSimple Ḡ1</b> <a href="/graph/recus.html">Voir le graphique</a>
Envoyé simples portefeuille: <b>_txOutSimple Ḡ1</b>
Soldes simples portefeuille: <b>_soldeSimple Ḡ1</b> (_pourcentSimpleWallet% de la masse monétaire totale)
---
Reçus membres: <b>_txInMembers Ḡ1</b> (sans les DU)
Reçus membres: <b>_txInMembers Ḡ1</b> (sans les DU) <a href="/graph/recus.html">Voir le graphique</a>
Envoyé membres: <b>_txOutMembers Ḡ1</b>
Soldes membres: <b>_soldeMembers Ḡ1</b> (sans les DU)
---

145
tpl/mixed.html Normal file
View File

@ -0,0 +1,145 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<center>
<h1>Graphiques</h1>
<div id="charts">
<center><h2 id="titleRW">Ḡ1 reçus sur les wallets</h2></center>
<canvas id="chartRW" width="1600" height="500"></canvas>
</div>
<div id="charts">
<center><h2 id="titleRW">Nombre de wallets</h2></center>
<canvas id="chartNBRW" width="1600" height="500"></canvas>
</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><a href=/><img src="../logo-axiom-team.svg" alt="Ḡ1" /></a></center>
</div>
</body>
</html>

67
tpl/nbr_wallets.html Normal file
View File

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="1000" height="500"></canvas>
<script>
var jsonfile = {
"jsonarray": [
_JSONDATA
]
};
var date = jsonfile.jsonarray.map(function(e) {
return e.date;
});
var nbrwallets = jsonfile.jsonarray.map(function(e) {
return e.nbrWallets;
});
var nbrmembres = jsonfile.jsonarray.map(function(e) {
return e.nbrMembres;
});
var ctx = document.getElementById("myChart");
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
}
};
var myChart = new Chart(ctx, config);
</script>
</body>
</html>

1
tpl/nbr_wallets.json Normal file
View File

@ -0,0 +1 @@
{\n \"date\": \"_DATE\",\n \"nbrWallets\": \"_NBRWALLETS\",\n \"nbrMembres\": \"_NBRMEMBRES\"\n },

67
tpl/recus.html Normal file
View File

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="1000" height="500"></canvas>
<script>
var jsonfile = {
"jsonarray": [
_JSONDATA
]
};
var date = jsonfile.jsonarray.map(function(e) {
return e.date;
});
var rwallets = jsonfile.jsonarray.map(function(e) {
return e.rWallets;
});
var rmembres = jsonfile.jsonarray.map(function(e) {
return e.rMembres;
});
var ctx = document.getElementById("myChart");
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
}
};
var myChart = new Chart(ctx, config);
</script>
</body>
</html>

1
tpl/recus.json Normal file
View File

@ -0,0 +1 @@
{\n \"date\": \"_DATE\",\n \"rWallets\": \"_RWALLETS\",\n \"rMembres\": \"_RMEMBRES\"\n },

View File

@ -6,18 +6,53 @@ n=2 # Nombre de jours pour les pas en abscisse
SCRIPTPATH="$( cd "$(dirname "$0")" ; pwd -P )"
if [[ -e $SCRIPTPATH/.env ]]; then source $SCRIPTPATH/.env; else echo "Veuillez créer votre fichier .env inspiré de .env.example" && exit 1; fi
rWallets=$(grep -E "Date:|Reçus simples wallets|Reçus simples portefeuille" $WEBPATH/history/index_*.html | awk -F '<b>' '{ print $2 }' | awk '{ print $1 }' | tr -d '.' | tr ',' '.')
j=1
## Ḡ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 =~ ^(0|1)$ ]] && ((j--))
if [[ $j == 1 ]]; then
jsonTPL=$(sed s/_DATE/$i/g tpl/graph.json)
j=0
elif [[ $j == 0 ]]; then
result+=$(sed s/_RWALLET/$i/g <<< $jsonTPL)
[[ $n == 1 ]] && j=1 || j=$((n*2))
fi
((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 $SCRIPTPATH/tpl/recus.json)
local jsonTPL=$(sed s/_RWALLETS/$RW/g <<< $jsonTPL)
local result+=$(sed s/_RMEMBRES/$RM/g <<< $jsonTPL)
done
sed "s/_JSONDATA/$result/g" $SCRIPTPATH/tpl/graph.html > $WEBPATH/graph.html
sed "s/_JSONDATA/$result/g" $SCRIPTPATH/tpl/recus.html > $WEBPATH/graph/recus.html
sed "s/_JSONDATARW/$result/g" $SCRIPTPATH/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 $SCRIPTPATH/tpl/nbr_wallets.json)
local jsonTPL=$(sed s/_NBRWALLETS/$NBRW/g <<< $jsonTPL)
local result+=$(sed s/_NBRMEMBRES/$NBRM/g <<< $jsonTPL)
done
sed "s/_JSONDATA/$result/g" $SCRIPTPATH/tpl/nbr_wallets.html > $WEBPATH/graph/nbr_wallets.html
sed -i "s/_JSONDATANBRW/$result/g" $WEBPATH/graph/mixed.html
}
rWallets
nbrWallets