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.RobotsTxt": routes.RobotsTxt,
"routes.SitemapXml": routes.SitemapXml,
"routes.OpenSearchXml": routes.OpenSearchXml,
"routes.BadRoute": routes.BadRoute,
"routes.HTTPSRedirect": routes.HTTPSRedirect,
}
@ -313,8 +314,9 @@ var routeMapEnum = map[string]int{
"routes.StaticFile": 139,
"routes.RobotsTxt": 140,
"routes.SitemapXml": 141,
"routes.BadRoute": 142,
"routes.HTTPSRedirect": 143,
"routes.OpenSearchXml": 142,
"routes.BadRoute": 143,
"routes.HTTPSRedirect": 144,
}
var reverseRouteMapEnum = map[int]string{
0: "routes.Overview",
@ -459,8 +461,9 @@ var reverseRouteMapEnum = map[int]string{
139: "routes.StaticFile",
140: "routes.RobotsTxt",
141: "routes.SitemapXml",
142: "routes.BadRoute",
143: "routes.HTTPSRedirect",
142: "routes.OpenSearchXml",
143: "routes.BadRoute",
144: "routes.HTTPSRedirect",
}
var osMapEnum = map[string]int{
"unknown": 0,
@ -615,7 +618,7 @@ type HTTPSRedirect struct {
func (red *HTTPSRedirect) ServeHTTP(w http.ResponseWriter, req *http.Request) {
w.Header().Set("Connection", "close")
counters.RouteViewCounter.Bump(143)
counters.RouteViewCounter.Bump(144)
dest := "https://" + req.Host + req.URL.String()
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)
routes.StaticFile(w,req)
return nil
case "opensearch.xml":
counters.RouteViewCounter.Bump(142)
return routes.OpenSearchXml(w,req)
/*case "sitemap.xml":
counters.RouteViewCounter.Bump(141)
return routes.SitemapXml(w,req)*/
@ -2274,7 +2280,7 @@ func (r *GenRouter) routeSwitch(w http.ResponseWriter, req *http.Request, user c
} else {
r.DumpRequest(req,"Bad Route")
}
counters.RouteViewCounter.Bump(142)
counters.RouteViewCounter.Bump(143)
return c.NotFound(w,req,nil)
}
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?
function buildStatsChart(rawLabels, seriesData, timeRange, legendNames, bytes = false) {
console.log("buildStatsChart");
console.log("seriesData:",seriesData);
let labels = [];
let aphrases = phraseBox["analytics"];
if(timeRange=="one-year") {

View File

@ -23,6 +23,7 @@
{{if .OGDesc}}<meta property="og:description" content="{{.OGDesc}}" />
<meta property="twitter:description" content="{{.OGDesc}}" />{{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>
<body>
{{if not .CurrentUser.IsSuperMod}}<style>.supermod_only { display: none !important; }</style>{{end}}{{flush}}

View File

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

View File

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

View File

@ -113,6 +113,9 @@
background-color: rgb(68,68,68);
padding: 12px;
}
.grid_item a {
color: rgb(200,200,200);
}
.stat_green {
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;
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 {
color: rgb(195,195,195);
font-size: 13px;