ui: add panel/UsageChart
heavily inspired by pveRunningChart, without the dynamically adding of data and specific for the usage of datastores Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
parent
b35eb0a175
commit
8432e4a655
@ -44,6 +44,7 @@ JSSRC= \
|
||||
panel/XtermJsConsole.js \
|
||||
panel/AccessControl.js \
|
||||
panel/StorageAndDisks.js \
|
||||
panel/UsageChart.js \
|
||||
ZFSList.js \
|
||||
DirectoryList.js \
|
||||
LoginView.js \
|
||||
|
115
www/panel/UsageChart.js
Normal file
115
www/panel/UsageChart.js
Normal file
@ -0,0 +1,115 @@
|
||||
Ext.define('PBS.widget.UsageChart', {
|
||||
extend: 'Ext.container.Container',
|
||||
alias: 'widget.pbsUsageChart',
|
||||
|
||||
layout: {
|
||||
type: 'hbox',
|
||||
align: 'center',
|
||||
},
|
||||
|
||||
items: [
|
||||
{
|
||||
width: 80,
|
||||
xtype: 'box',
|
||||
itemId: 'title',
|
||||
data: {
|
||||
title: '',
|
||||
},
|
||||
tpl: '<h3>{title}:</h3>',
|
||||
},
|
||||
{
|
||||
flex: 1,
|
||||
xtype: 'cartesian',
|
||||
height: '100%',
|
||||
itemId: 'chart',
|
||||
border: false,
|
||||
axes: [
|
||||
{
|
||||
type: 'numeric',
|
||||
position: 'right',
|
||||
hidden: true,
|
||||
minimum: 0,
|
||||
},
|
||||
{
|
||||
type: 'time',
|
||||
position: 'bottom',
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
|
||||
store: {
|
||||
trackRemoved: false,
|
||||
data: {},
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'line',
|
||||
xField: 'time',
|
||||
yField: 'val',
|
||||
fill: 'true',
|
||||
colors: ['#cfcfcf'],
|
||||
tooltip: {
|
||||
trackMouse: true,
|
||||
renderer: function(tooltip, record, ctx) {
|
||||
if (!record || !record.data) return;
|
||||
let date = new Date(record.data.time);
|
||||
let value = (100*record.data.val).toFixed(2);
|
||||
tooltip.setHtml(
|
||||
`${value} %<br />
|
||||
${date}`,
|
||||
);
|
||||
},
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1.5,
|
||||
opacity: 0.60,
|
||||
},
|
||||
marker: {
|
||||
opacity: 0,
|
||||
scaling: 0.01,
|
||||
fx: {
|
||||
duration: 200,
|
||||
easing: 'easeOut',
|
||||
},
|
||||
},
|
||||
highlightCfg: {
|
||||
opacity: 1,
|
||||
scaling: 1.5,
|
||||
},
|
||||
}],
|
||||
},
|
||||
],
|
||||
|
||||
setData: function(data) {
|
||||
let me = this;
|
||||
let chart = me.chart;
|
||||
chart.store.setData(data);
|
||||
chart.redraw();
|
||||
},
|
||||
|
||||
// the renderer for the tooltip and last value, default just the value
|
||||
renderer: Ext.identityFn,
|
||||
|
||||
setTitle: function(title) {
|
||||
let me = this;
|
||||
me.title = title;
|
||||
me.getComponent('title').update({ title: title });
|
||||
},
|
||||
|
||||
initComponent: function() {
|
||||
var me = this;
|
||||
me.callParent();
|
||||
|
||||
if (me.title) {
|
||||
me.getComponent('title').update({ title: me.title });
|
||||
}
|
||||
me.chart = me.getComponent('chart');
|
||||
me.chart.timeaxis = me.chart.getAxes()[1];
|
||||
if (me.color) {
|
||||
me.chart.series[0].setStyle({
|
||||
fill: me.color,
|
||||
stroke: me.color,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue
Block a user