From 1fd980bf56f5e2654e8d02e2bea6616699848454 Mon Sep 17 00:00:00 2001 From: Azareal Date: Wed, 8 May 2019 15:56:18 +1000 Subject: [PATCH] Reduce the number of labels to reduce the amount of clutter another way. --- public/analytics.js | 19 +++++++++++++++++-- templates/panel_analytics_memory.html | 24 ++++++++++++++---------- templates/panel_analytics_script.html | 22 +++++++++++++--------- themes/cosora/public/panel.css | 7 +++++++ 4 files changed, 51 insertions(+), 21 deletions(-) diff --git a/public/analytics.js b/public/analytics.js index 0cfa3df6..4b33a114 100644 --- a/public/analytics.js +++ b/public/analytics.js @@ -39,12 +39,14 @@ function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes = } else if(timeRange=="three-months") { labels = [aphrases["analytics.now"],"3" + aphrases["analytics.days_short"]] for(let i = 6; i < 90; i = i + 3) { - labels.push(i + aphrases["analytics.days_short"]); + if (i%2==0) labels.push(""); + else labels.push(i + aphrases["analytics.days_short"]); } } else if(timeRange=="one-month") { labels = [aphrases["analytics.now"],"1" + aphrases["analytics.days_short"]]; for(let i = 2; i < 30; i++) { - labels.push(i + aphrases["analytics.days_short"]); + if (i%2==0) labels.push(""); + else labels.push(i + aphrases["analytics.days_short"]); } } else if(timeRange=="one-week") { labels = [aphrases["analytics.now"]]; @@ -52,6 +54,19 @@ function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes = if (i%2==0) labels.push(""); else labels.push(Math.floor(i/2) + aphrases["analytics.days"]); } + } else if (timeRange=="two-days" || timeRange == "one-day" || timeRange == "twelve-hours") { + for(const i in rawLabels) { + if (i%2==0) { + labels.push(""); + continue; + } + let date = new Date(rawLabels[i]*1000); + console.log("date: ", date); + let minutes = "0" + date.getMinutes(); + let label = date.getHours() + ":" + minutes.substr(-2); + console.log("label:", label); + labels.push(label); + } } else { for(const i in rawLabels) { let date = new Date(rawLabels[i]*1000); diff --git a/templates/panel_analytics_memory.html b/templates/panel_analytics_memory.html index 758f983c..362fb0e8 100644 --- a/templates/panel_analytics_memory.html +++ b/templates/panel_analytics_memory.html @@ -80,20 +80,24 @@ }; }(window, document, Chartist)); + const noPre = ["twelve-hours","one-day","two-days","one-week","one-month"]; + const preStats = () => { + if((!"{{.TimeRange}}" in noPre) && seriesData.length > 0 && seriesData[0].length > 12) { + let elem = document.getElementsByClassName("colstack_graph_holder")[0]; + let w = elem.clientWidth; + console.log("w:",w); + elem.classList.add("scrolly"); + console.log("elem.clientWidth:",elem.clientWidth); + elem.setAttribute("style","width:"+w+"px;"); + console.log("elem.clientWidth:",elem.clientWidth); + } + }; addInitHook("after_phrases", () => { addInitHook("end_init", () => { addInitHook("analytics_loaded", () => { - if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) { - let elem = document.getElementsByClassName("colstack_graph_holder")[0]; - let w = elem.clientWidth; - console.log("w:",w); - elem.classList.add("scrolly"); - console.log("elem.clientWidth:",elem.clientWidth); - elem.setAttribute("style","width:"+w+"px;"); - console.log("elem.clientWidth:",elem.clientWidth); - } + preStats(); buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true); - }); + }); }); }); \ No newline at end of file diff --git a/templates/panel_analytics_script.html b/templates/panel_analytics_script.html index eb1575a6..a41951f4 100644 --- a/templates/panel_analytics_script.html +++ b/templates/panel_analytics_script.html @@ -10,18 +10,22 @@ let seriesData = [{{range .Graph.Series}}[{{range .}} let legendNames = [{{range .Graph.Legends}} {{.}},{{end}} ]; +const noPre = ["twelve-hours","one-day","two-days","one-week","one-month"]; +const preStats = () => { + if((!"{{.TimeRange}}" in noPre) && seriesData.length > 0 && seriesData[0].length > 12) { + let elem = document.getElementsByClassName("colstack_graph_holder")[0]; + let w = elem.clientWidth; + console.log("w:",w); + elem.classList.add("scrolly"); + console.log("elem.clientWidth:",elem.clientWidth); + elem.setAttribute("style","width:"+w+"px;"); + console.log("elem.clientWidth:",elem.clientWidth); + } +}; addInitHook("after_phrases", () => { addInitHook("end_init", () => { addInitHook("analytics_loaded", () => { - if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) { - let elem = document.getElementsByClassName("colstack_graph_holder")[0]; - let w = elem.clientWidth; - console.log("w:",w); - elem.classList.add("scrolly"); - console.log("elem.clientWidth:",elem.clientWidth); - elem.setAttribute("style","width:"+w+"px;"); - console.log("elem.clientWidth:",elem.clientWidth); - } + preStats(); buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames); }); }); diff --git a/themes/cosora/public/panel.css b/themes/cosora/public/panel.css index d53645c4..1f066043 100644 --- a/themes/cosora/public/panel.css +++ b/themes/cosora/public/panel.css @@ -269,6 +269,13 @@ margin-left: 16px; padding-top: 16px; } +.colstack_graph_holder.scrolly { + overflow-x: scroll; + width: 800px; +} +.colstack_graph_holder.scrolly .ct_chart { + width: 1000px; +} .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut { stroke: hsl(359,98%,53%) !important; }