Try to avoid crushing labels in the analytics chart. WIP.

This commit is contained in:
Azareal 2019-05-08 15:26:38 +10:00
parent af9d60cc1a
commit 3023f3c138
6 changed files with 71 additions and 34 deletions

View File

@ -165,6 +165,7 @@ var RouteMap = map[string]interface{}{
"routes.StaticFile": routes.StaticFile, "routes.StaticFile": routes.StaticFile,
"routes.RobotsTxt": routes.RobotsTxt, "routes.RobotsTxt": routes.RobotsTxt,
"routes.SitemapXml": routes.SitemapXml, "routes.SitemapXml": routes.SitemapXml,
"routes.OpenSearchXml": routes.OpenSearchXml,
"routes.BadRoute": routes.BadRoute, "routes.BadRoute": routes.BadRoute,
"routes.HTTPSRedirect": routes.HTTPSRedirect, "routes.HTTPSRedirect": routes.HTTPSRedirect,
} }
@ -313,8 +314,9 @@ var routeMapEnum = map[string]int{
"routes.StaticFile": 139, "routes.StaticFile": 139,
"routes.RobotsTxt": 140, "routes.RobotsTxt": 140,
"routes.SitemapXml": 141, "routes.SitemapXml": 141,
"routes.BadRoute": 142, "routes.OpenSearchXml": 142,
"routes.HTTPSRedirect": 143, "routes.BadRoute": 143,
"routes.HTTPSRedirect": 144,
} }
var reverseRouteMapEnum = map[int]string{ var reverseRouteMapEnum = map[int]string{
0: "routes.Overview", 0: "routes.Overview",
@ -459,8 +461,9 @@ var reverseRouteMapEnum = map[int]string{
139: "routes.StaticFile", 139: "routes.StaticFile",
140: "routes.RobotsTxt", 140: "routes.RobotsTxt",
141: "routes.SitemapXml", 141: "routes.SitemapXml",
142: "routes.BadRoute", 142: "routes.OpenSearchXml",
143: "routes.HTTPSRedirect", 143: "routes.BadRoute",
144: "routes.HTTPSRedirect",
} }
var osMapEnum = map[string]int{ var osMapEnum = map[string]int{
"unknown": 0, "unknown": 0,
@ -615,7 +618,7 @@ type HTTPSRedirect struct {
func (red *HTTPSRedirect) ServeHTTP(w http.ResponseWriter, req *http.Request) { func (red *HTTPSRedirect) ServeHTTP(w http.ResponseWriter, req *http.Request) {
w.Header().Set("Connection", "close") w.Header().Set("Connection", "close")
counters.RouteViewCounter.Bump(143) counters.RouteViewCounter.Bump(144)
dest := "https://" + req.Host + req.URL.String() dest := "https://" + req.Host + req.URL.String()
http.Redirect(w, req, dest, http.StatusTemporaryRedirect) http.Redirect(w, req, dest, http.StatusTemporaryRedirect)
} }
@ -2251,6 +2254,9 @@ func (r *GenRouter) routeSwitch(w http.ResponseWriter, req *http.Request, user c
//log.Print("req.URL.Path: ",req.URL.Path) //log.Print("req.URL.Path: ",req.URL.Path)
routes.StaticFile(w,req) routes.StaticFile(w,req)
return nil return nil
case "opensearch.xml":
counters.RouteViewCounter.Bump(142)
return routes.OpenSearchXml(w,req)
/*case "sitemap.xml": /*case "sitemap.xml":
counters.RouteViewCounter.Bump(141) counters.RouteViewCounter.Bump(141)
return routes.SitemapXml(w,req)*/ return routes.SitemapXml(w,req)*/
@ -2274,7 +2280,7 @@ func (r *GenRouter) routeSwitch(w http.ResponseWriter, req *http.Request, user c
} else { } else {
r.DumpRequest(req,"Bad Route") r.DumpRequest(req,"Bad Route")
} }
counters.RouteViewCounter.Bump(142) counters.RouteViewCounter.Bump(143)
return c.NotFound(w,req,nil) return c.NotFound(w,req,nil)
} }
return err return err

View File

@ -28,6 +28,7 @@ function convertByteUnit(bytes, places = 0) {
// TODO: Load rawLabels and seriesData dynamically rather than potentially fiddling with nonces for the CSP? // TODO: Load rawLabels and seriesData dynamically rather than potentially fiddling with nonces for the CSP?
function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes = false) { function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes = false) {
console.log("buildStatsChart"); console.log("buildStatsChart");
console.log("seriesData:",seriesData);
let labels = []; let labels = [];
let aphrases = phraseBox["analytics"]; let aphrases = phraseBox["analytics"];
if(timeRange=="one-year") { if(timeRange=="one-year") {

View File

@ -23,6 +23,7 @@
{{if .OGDesc}}<meta property="og:description" content="{{.OGDesc}}" /> {{if .OGDesc}}<meta property="og:description" content="{{.OGDesc}}" />
<meta property="twitter:description" content="{{.OGDesc}}" />{{end}} <meta property="twitter:description" content="{{.OGDesc}}" />{{end}}
{{if .GoogSiteVerify}}<meta name="google-site-verification" content="{{.GoogSiteVerify}}" />{{end}} {{if .GoogSiteVerify}}<meta name="google-site-verification" content="{{.GoogSiteVerify}}" />{{end}}
<link rel="search" type="application/opensearchdescription+xml" title="{{.Header.Site.Name}}" href="/opensearch.xml">
</head> </head>
<body> <body>
{{if not .CurrentUser.IsSuperMod}}<style>.supermod_only { display: none !important; }</style>{{end}}{{flush}} {{if not .CurrentUser.IsSuperMod}}<style>.supermod_only { display: none !important; }</style>{{end}}{{flush}}

View File

@ -41,39 +41,40 @@
]; ];
(function(window, document, Chartist) { (function(window, document, Chartist) {
'use strict'; 'use strict';
Chartist.plugins = Chartist.plugins || {}; Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.byteUnits = function(options) { Chartist.plugins.byteUnits = function(options) {
options = Chartist.extend({}, {}, options); options = Chartist.extend({}, {}, options);
return function byteUnits(chart) { return function byteUnits(chart) {
if(!chart instanceof Chartist.Line) return; if(!chart instanceof Chartist.Line) return;
chart.on('created', function() { chart.on('created', function() {
console.log("running created") console.log("running created")
const vbits = document.getElementsByClassName("ct-vertical"); const vbits = document.getElementsByClassName("ct-vertical");
if(vbits==null) return; if(vbits==null) return;
let tbits = []; let tbits = [];
for(let i = 0; i < vbits.length; i++) { for(let i = 0; i < vbits.length; i++) {
tbits[i] = vbits[i].innerHTML; tbits[i] = vbits[i].innerHTML;
}
console.log("tbits:",tbits);
const calc = (places) => {
if(places==3) return;
const matcher = vbits[0].innerHTML;
let allMatch = true;
for(let i = 0; i < tbits.length; i++) {
let val = convertByteUnit(tbits[i], places);
if(val!=matcher) allMatch = false;
vbits[i].innerHTML = val;
} }
const calc = (places) => {
if(places==3) return;
const matcher = vbits[0].innerHTML;
let allMatch = true;
for(let i = 0; i < tbits.length; i++) {
let val = convertByteUnit(tbits[i], places);
if(val!=matcher) allMatch = false;
vbits[i].innerHTML = val;
}
if(allMatch) calc(places + 1); if(allMatch) calc(places + 1);
} }
calc(0); calc(0);
}); });
}; };
}; };
@ -82,8 +83,17 @@
addInitHook("after_phrases", () => { addInitHook("after_phrases", () => {
addInitHook("end_init", () => { addInitHook("end_init", () => {
addInitHook("analytics_loaded", () => { addInitHook("analytics_loaded", () => {
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames, true); 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);
}
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true);
});
}); });
}); });
</script> </script>

View File

@ -13,6 +13,15 @@ let legendNames = [{{range .Graph.Legends}}
addInitHook("after_phrases", () => { addInitHook("after_phrases", () => {
addInitHook("end_init", () => { addInitHook("end_init", () => {
addInitHook("analytics_loaded", () => { 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);
}
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames); buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames);
}); });
}); });

View File

@ -113,6 +113,9 @@
background-color: rgb(68,68,68); background-color: rgb(68,68,68);
padding: 12px; padding: 12px;
} }
.grid_item a {
color: rgb(200,200,200);
}
.stat_green { .stat_green {
background-color: rgb(68,88,68); background-color: rgb(68,88,68);
} }
@ -178,6 +181,13 @@ button, .formbutton, .panel_right_button:not(.has_inner_button), #panel_users .p
padding-right: 0px; padding-right: 0px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.colstack_graph_holder.scrolly {
overflow-x: scroll;
width: 800px;
}
.colstack_graph_holder.scrolly .ct_chart {
width: 1000px;
}
.colstack_graph_holder .ct-label { .colstack_graph_holder .ct-label {
color: rgb(195,195,195); color: rgb(195,195,195);
font-size: 13px; font-size: 13px;