]>
git.proxmox.com Git - pmg-gui.git/blob - js/HourlyMailDistribution.js
1 Ext
.define('PMG.MailDistChart', {
2 extend
: 'Ext.chart.CartesianChart',
3 xtype
: 'pmgMailDistChart',
11 title
: gettext('Count'),
21 checkThemeColors: function() {
23 let rootStyle
= getComputedStyle(document
.documentElement
);
26 let background
= rootStyle
.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
27 let text
= rootStyle
.getPropertyValue("--pwt-text-color").trim() || "#000000";
28 let primary
= rootStyle
.getPropertyValue("--pwt-chart-primary").trim() || "#000000";
29 let gridStroke
= rootStyle
.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";
32 me
.setBackground(background
);
33 me
.axes
.forEach((axis
) => {
34 axis
.setLabel({ color
: text
});
35 axis
.setTitle({ color
: text
});
36 axis
.setStyle({ strokeStyle
: primary
});
37 axis
.setGrid({ stroke
: gridStroke
});
42 initComponent: function() {
47 throw "cannot work without store";
51 throw "cannot work without a field";
62 renderer: function(tooltip
, record
, item
) {
63 var start
= record
.get('index');
65 tooltip
.setHtml('Time: ' + start
.toString() +
66 ' - ' + end
.toString() + '<br>' +
67 'Count: ' + record
.get(item
.field
));
72 me
.checkThemeColors();
74 // switch colors on media query changes
75 me
.mediaQueryList
= window
.matchMedia("(prefers-color-scheme: dark)");
76 me
.themeListener
= (e
) => { me
.checkThemeColors(); };
77 me
.mediaQueryList
.addEventListener("change", me
.themeListener
);
80 doDestroy: function() {
83 me
.mediaQueryList
.removeEventListener("change", me
.themeListener
);
89 Ext
.define('PMG.HourlyMailDistribution', {
90 extend
: 'Ext.panel.Panel',
91 xtype
: 'pmgHourlyMailDistribution',
96 bodyPadding
: '10 0 0 0',
104 title
: gettext('Statistics') + ': ' + gettext('Hourly Distribution'),
106 tbar
: [{ xtype
: 'pmgStatTimeSelector' }],
108 initComponent: function() {
111 var store
= Ext
.create('PMG.data.StatStore', {
112 staturl
: '/api2/json/statistics/maildistribution',
114 { type
: 'integer', name
: 'index' },
115 { type
: 'integer', name
: 'count' },
116 { type
: 'integer', name
: 'count_in' },
117 { type
: 'integer', name
: 'count_out' },
118 { type
: 'integer', name
: 'spamcount_in' },
119 { type
: 'integer', name
: 'spamcount_out' },
120 { type
: 'integer', name
: 'viruscount_in' },
121 { type
: 'integer', name
: 'viruscount_ou' },
122 { type
: 'integer', name
: 'bounces_in' },
123 { type
: 'integer', name
: 'bounces_out' },
129 xtype
: 'pmgMailDistChart',
130 title
: gettext('Incoming Mails'),
135 xtype
: 'pmgMailDistChart',
136 title
: gettext('Outgoing Mails'),
144 me
.on('destroy', store
.destroy
, store
);