js/HourlyMailDistribution.js

   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,
  14         minimum: 0,
  15     }, {
  16         type: 'category',
  17         position: 'bottom',
  18         fields: ['index'],
  19     }],
  20
  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
  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;
  65                     tooltip.setHtml('Time: ' + start.toString() +
  66                                     ' - ' + end.toString() + '<br>' +
  67                                     'Count: ' + record.get(item.field));
  68                 },
  69             },
  70         });
  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();
  86     },
  87 });
  88
  89 Ext.define('PMG.HourlyMailDistribution', {
  90     extend: 'Ext.panel.Panel',
  91     xtype: 'pmgHourlyMailDistribution',
  92
  93     scrollable: true,
  94     border: false,
  95
  96     bodyPadding: '10 0 0 0',
  97     defaults: {
  98         width: 700,
  99         padding: '0 0 10 10',
 100     },
 101
 102     layout: 'column',
 103
 104     title: gettext('Statistics') + ': ' + gettext('Hourly Distribution'),
 105
 106     tbar: [{ xtype: 'pmgStatTimeSelector' }],
 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' },
 123                 { type: 'integer', name: 'bounces_out' },
 124             ],
 125         });
 126
 127         me.items = [
 128             {
 129                 xtype: 'pmgMailDistChart',
 130                 title: gettext('Incoming Mails'),
 131                 field: 'count_in',
 132                 store: store,
 133             },
 134             {
 135                 xtype: 'pmgMailDistChart',
 136                 title: gettext('Outgoing Mails'),
 137                 field: 'count_out',
 138                 store: store,
 139             },
 140         ];
 141
 142         me.callParent();
 143
 144         me.on('destroy', store.destroy, store);
 145     },
 146 });