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

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);

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) {
+				preStats();
-					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);
-				}
 				buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true);
-		});
+			});
 		});
 	});
 </script>

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) {
+			preStats();
-				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);
-			}
 			buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames);
 		});
 	});

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;
 }