From a74b28a6cbdf5bb164000ff4631f389b9d0e85e2 Mon Sep 17 00:00:00 2001 From: poka Date: Thu, 1 Oct 2020 05:06:44 +0200 Subject: [PATCH] Update templates --- tpl/css/charts.css | 38 +++++++++++-- tpl/graph.js | 134 --------------------------------------------- tpl/js/graph.js | 134 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 167 insertions(+), 139 deletions(-) delete mode 100644 tpl/graph.js create mode 100644 tpl/js/graph.js diff --git a/tpl/css/charts.css b/tpl/css/charts.css index d664528..3f07906 100644 --- a/tpl/css/charts.css +++ b/tpl/css/charts.css @@ -2,12 +2,40 @@ width: 98%; margin-left: 0px; overflow-x: scroll; +/* display: none; */ } + +.chartWrapper { + position: relative; + background-color: #DFCFBE; + border-radius: 30px; + padding: 10px; +} + +.chartWrapper > canvas { + position: absolute; + left: 0; + top: 0; + pointer-events:none; +} +.chartAreaWrapper { + overflow-x: scroll; + position: relative; + width: 100%; + height: 400px; +} +.chartAreaWrapper2 { + + position: relative; + height: 300px; + width: 3000px; +} + + + @media only screen and (max-width: 1100px) { - -#charts { - width: 95%; -} - + #charts { + width: 95%; + } } diff --git a/tpl/graph.js b/tpl/graph.js deleted file mode 100644 index 7bc110d..0000000 --- a/tpl/graph.js +++ /dev/null @@ -1,134 +0,0 @@ -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" ); - });*/ \ No newline at end of file diff --git a/tpl/js/graph.js b/tpl/js/graph.js new file mode 100644 index 0000000..9fc5683 --- /dev/null +++ b/tpl/js/graph.js @@ -0,0 +1,134 @@ +var jsonfileRW = $.getJSON( "../data/cum-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: false, + 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" ); + });*/