96 lines
3.1 KiB
HTML
96 lines
3.1 KiB
HTML
|
<div class="colstack_item colstack_head">
|
||
|
|
<div class="rowitem">
|
||
|
|
<h1>{{lang "panel_statistics_active_memory_head"}}</h1>
|
||
|
|
{{template "panel_analytics_time_range_month.html" . }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<form id="timeRangeForm" name="timeRangeForm" action="/panel/analytics/active-memory/" method="get"></form>
|
||
|
|
<div id="panel_analytics_memory" class="colstack_graph_holder">
|
||
|
|
<div class="ct_chart" aria-label="{{lang "panel_statistics_memory_chart_aria"}}"></div>
|
||
|
|
</div>
|
||
|
|
<div class="colstack_item colstack_head">
|
||
|
|
<div class="rowitem">
|
||
|
|
<h1>{{lang "panel_statistics_details_head"}}</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="panel_analytics_memory_table" class="colstack_item rowlist" aria-label="{{lang "panel_statistics_memory_table_aria"}}">
|
||
|
|
{{range .ViewItems}}
|
||
|
|
<div class="rowitem panel_compactrow editable_parent">
|
||
|
|
<a class="panel_upshift unix_{{if or (or (or (eq $.TimeRange "six-hours") (eq $.TimeRange "twelve-hours")) (eq $.TimeRange "one-day")) (eq $.TimeRange "two-days")}}to_24_hour_time{{else}}to_date{{end}}">{{.Time}}</a>
|
||
|
|
<span class="panel_compacttext to_right">{{.Count}}{{.Unit}}</span>
|
||
|
|
</div>
|
||
|
|
{{else}}<div class="rowitem passive rowmsg">{{lang "panel_statistics_memory_no_memory"}}</div>{{end}}
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
let rawLabels = [{{range .Graph.Labels}}
|
||
|
|
{{.}},{{end}}
|
||
|
|
];
|
||
|
|
let seriesData = [{{range .Graph.Series}}[{{range .}}
|
||
|
|
{{.}},{{end}}
|
||
|
|
],{{end}}
|
||
|
|
];
|
||
|
|
let legendNames = [{{range .Graph.Legends}}
|
||
|
|
{{.}},{{end}}
|
||
|
|
];
|
||
|
|
|
||
|
|
(function(window, document, Chartist) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
Chartist.plugins = Chartist.plugins || {};
|
||
|
|
Chartist.plugins.byteUnits = function(options) {
|
||
|
|
options = Chartist.extend({}, {}, options);
|
||
|
|
|
||
|
|
return function byteUnits(chart) {
|
||
|
|
if(!chart instanceof Chartist.Line) 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;
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(allMatch) calc(places + 1);
|
||
|
|
}
|
||
|
|
calc(0);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
}(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", () => {
|
||
|
|
preStats();
|
||
|
|
buildStatsChart(rawLabels, seriesData, "{{.TimeRange}}",legendNames,true);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|