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,10 +80,9 @@
   };
 
 }(window, document, Chartist));
-	addInitHook("after_phrases", () => {
-		addInitHook("end_init", () => {
-			addInitHook("analytics_loaded", () => {
-				if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) {
+	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);
@@ -92,6 +91,11 @@
 			elem.setAttribute("style","width:"+w+"px;");
 			console.log("elem.clientWidth:",elem.clientWidth);
 		}
+	};
+	addInitHook("after_phrases", () => {
+		addInitHook("end_init", () => {
+			addInitHook("analytics_loaded", () => {
+				preStats();
 				buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true);
 			});
 		});

templates/panel_analytics_script.html

@@ -10,10 +10,9 @@ let seriesData = [{{range .Graph.Series}}[{{range .}}
 let legendNames = [{{range .Graph.Legends}}
 {{.}},{{end}}
 ];
-addInitHook("after_phrases", () => {
-	addInitHook("end_init", () => {
-		addInitHook("analytics_loaded", () => {
-			if("{{.TimeRange}}" != "one-week" && seriesData.length > 0 && seriesData[0].length > 12) {
+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);
@@ -22,6 +21,11 @@ addInitHook("after_phrases", () => {
 		elem.setAttribute("style","width:"+w+"px;");
 		console.log("elem.clientWidth:",elem.clientWidth);
 	}
+};
+addInitHook("after_phrases", () => {
+	addInitHook("end_init", () => {
+		addInitHook("analytics_loaded", () => {
+			preStats();
 			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;
 }