]>
Commit | Line | Data |
---|---|---|
b02ccf09 DM |
1 | Ext.define('PMG.MailDistChart', { |
2 | extend: 'Ext.chart.CartesianChart', | |
3 | xtype: 'pmgMailDistChart', | |
4 | ||
5 | width: 770, | |
6 | height: 300, | |
7 | animation: false, | |
8 | ||
9 | axes: [{ | |
10 | type: 'numeric', | |
11 | title: gettext('Count'), | |
12 | position: 'left', | |
13 | grid: true, | |
c87d46fb | 14 | minimum: 0, |
b02ccf09 DM |
15 | }, { |
16 | type: 'category', | |
17 | position: 'bottom', | |
c87d46fb | 18 | fields: ['index'], |
b02ccf09 DM |
19 | }], |
20 | ||
8ede2bd4 SS |
21 | checkThemeColors: function() { |
22 | let me = this; | |
23 | let rootStyle = getComputedStyle(document.documentElement); | |
24 | ||
25 | // get colors | |
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"; | |
30 | ||
31 | // set the colors | |
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 }); | |
38 | }); | |
39 | me.redraw(); | |
40 | }, | |
41 | ||
b02ccf09 DM |
42 | initComponent: function() { |
43 | var me = this; | |
44 | ||
45 | ||
46 | if (!me.store) { | |
47 | throw "cannot work without store"; | |
48 | } | |
49 | ||
50 | if (!me.field) { | |
51 | throw "cannot work without a field"; | |
52 | } | |
53 | ||
54 | me.callParent(); | |
55 | ||
56 | me.addSeries({ | |
57 | type: 'bar', | |
58 | xField: 'index', | |
59 | yField: me.field, | |
60 | tooltip: { | |
61 | trackMouse: true, | |
62 | renderer: function(tooltip, record, item) { | |
63 | var start = record.get('index'); | |
64 | var end = start+1; | |
de0ebd99 DC |
65 | tooltip.setHtml('Time: ' + start.toString() + |
66 | ' - ' + end.toString() + '<br>' + | |
b02ccf09 | 67 | 'Count: ' + record.get(item.field)); |
c87d46fb TL |
68 | }, |
69 | }, | |
b02ccf09 | 70 | }); |
8ede2bd4 SS |
71 | |
72 | me.checkThemeColors(); | |
73 | ||
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); | |
78 | }, | |
79 | ||
80 | doDestroy: function() { | |
81 | let me = this; | |
82 | ||
83 | me.mediaQueryList.removeEventListener("change", me.themeListener); | |
84 | ||
85 | me.callParent(); | |
c87d46fb | 86 | }, |
b02ccf09 DM |
87 | }); |
88 | ||
89 | Ext.define('PMG.HourlyMailDistribution', { | |
90 | extend: 'Ext.panel.Panel', | |
91 | xtype: 'pmgHourlyMailDistribution', | |
92 | ||
93 | scrollable: true, | |
50531ef9 | 94 | border: false, |
b02ccf09 | 95 | |
8051d921 | 96 | bodyPadding: '10 0 0 0', |
b02ccf09 | 97 | defaults: { |
8051d921 | 98 | width: 700, |
c87d46fb | 99 | padding: '0 0 10 10', |
b02ccf09 DM |
100 | }, |
101 | ||
8051d921 DM |
102 | layout: 'column', |
103 | ||
3755c9e0 | 104 | title: gettext('Statistics') + ': ' + gettext('Hourly Distribution'), |
b02ccf09 | 105 | |
c87d46fb | 106 | tbar: [{ xtype: 'pmgStatTimeSelector' }], |
b02ccf09 DM |
107 | |
108 | initComponent: function() { | |
109 | var me = this; | |
110 | ||
111 | var store = Ext.create('PMG.data.StatStore', { | |
112 | staturl: '/api2/json/statistics/maildistribution', | |
113 | fields: [ | |
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' }, | |
c87d46fb TL |
123 | { type: 'integer', name: 'bounces_out' }, |
124 | ], | |
b02ccf09 DM |
125 | }); |
126 | ||
127 | me.items = [ | |
128 | { | |
129 | xtype: 'pmgMailDistChart', | |
130 | title: gettext('Incoming Mails'), | |
131 | field: 'count_in', | |
c87d46fb | 132 | store: store, |
b02ccf09 DM |
133 | }, |
134 | { | |
135 | xtype: 'pmgMailDistChart', | |
136 | title: gettext('Outgoing Mails'), | |
137 | field: 'count_out', | |
c87d46fb TL |
138 | store: store, |
139 | }, | |
b02ccf09 DM |
140 | ]; |
141 | ||
142 | me.callParent(); | |
143 | ||
144 | me.on('destroy', store.destroy, store); | |
c87d46fb | 145 | }, |
b02ccf09 | 146 | }); |