a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reduce the number of labels to reduce the amount of clutter another way.

This commit is contained in:
Azareal 2019-05-08 15:56:18 +10:00
parent 3023f3c138
commit 1fd980bf56
4 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/analytics.js
View File

@ -39,12 +39,14 @@ function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes =
} else if(timeRange=="three-months") { } else if(timeRange=="three-months") {
labels = [aphrases["analytics.now"],"3" + aphrases["analytics.days_short"]] labels = [aphrases["analytics.now"],"3" + aphrases["analytics.days_short"]]
for(let i = 6; i < 90; i = i + 3) { 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") { } else if(timeRange=="one-month") {
labels = [aphrases["analytics.now"],"1" + aphrases["analytics.days_short"]]; labels = [aphrases["analytics.now"],"1" + aphrases["analytics.days_short"]];
for(let i = 2; i < 30; i++) { 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") { } else if(timeRange=="one-week") {
labels = [aphrases["analytics.now"]]; labels = [aphrases["analytics.now"]];
@ -52,6 +54,19 @@ function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes =
if (i%2==0) labels.push(""); if (i%2==0) labels.push("");
else labels.push(Math.floor(i/2) + aphrases["analytics.days"]); 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 { } else {
for(const i in rawLabels) { for(const i in rawLabels) {
let date = new Date(rawLabels[i]*1000); let date = new Date(rawLabels[i]*1000);

12
templates/panel_analytics_memory.html
View File

@ -80,10 +80,9 @@
}; };
}(window, document, Chartist)); }(window, document, Chartist));
addInitHook("after_phrases", () => { const noPre = ["twelve-hours","one-day","two-days","one-week","one-month"];
addInitHook("end_init", () => { const preStats = () => {
addInitHook("analytics_loaded", () => { if((!"{{.TimeRange}}" in noPre) && seriesData.length > 0 && seriesData[0].length > 12) {
if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) {
let elem = document.getElementsByClassName("colstack_graph_holder")[0]; let elem = document.getElementsByClassName("colstack_graph_holder")[0];
let w = elem.clientWidth; let w = elem.clientWidth;
console.log("w:",w); console.log("w:",w);
@ -92,6 +91,11 @@
elem.setAttribute("style","width:"+w+"px;"); elem.setAttribute("style","width:"+w+"px;");
console.log("elem.clientWidth:",elem.clientWidth); console.log("elem.clientWidth:",elem.clientWidth);
} }
};
addInitHook("after_phrases", () => {
addInitHook("end_init", () => {
addInitHook("analytics_loaded", () => {
preStats();
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true); buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true);
}); });
}); });

12
templates/panel_analytics_script.html
View File

@ -10,10 +10,9 @@ let seriesData = [{{range .Graph.Series}}[{{range .}}
let legendNames = [{{range .Graph.Legends}} let legendNames = [{{range .Graph.Legends}}
{{.}},{{end}} {{.}},{{end}}
]; ];
addInitHook("after_phrases", () => { const noPre = ["twelve-hours","one-day","two-days","one-week","one-month"];
addInitHook("end_init", () => { const preStats = () => {
addInitHook("analytics_loaded", () => { if((!"{{.TimeRange}}" in noPre) && seriesData.length > 0 && seriesData[0].length > 12) {
if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) {
let elem = document.getElementsByClassName("colstack_graph_holder")[0]; let elem = document.getElementsByClassName("colstack_graph_holder")[0];
let w = elem.clientWidth; let w = elem.clientWidth;
console.log("w:",w); console.log("w:",w);
@ -22,6 +21,11 @@ addInitHook("after_phrases", () => {
elem.setAttribute("style","width:"+w+"px;"); elem.setAttribute("style","width:"+w+"px;");
console.log("elem.clientWidth:",elem.clientWidth); console.log("elem.clientWidth:",elem.clientWidth);
} }
};
addInitHook("after_phrases", () => {
addInitHook("end_init", () => {
addInitHook("analytics_loaded", () => {
preStats();
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames); buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames);
}); });
}); });

7
themes/cosora/public/panel.css
View File

@ -269,6 +269,13 @@
margin-left: 16px; margin-left: 16px;
padding-top: 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 { .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; stroke: hsl(359,98%,53%) !important;
} }