StatisticsChart.js (4692B)
1 Ext.define('PartKeepr.StatisticsChart', { 2 extend: 'Ext.chart.CartesianChart', 3 animate: true, 4 shadow: true, 5 6 style: 'border: 1px solid #AAA;background-color: white;box-shadow: 5px 5px 0px #aaa', 7 legend: { 8 position: 'right' 9 }, 10 theme: 'Base', 11 series: [ 12 { 13 type: 'line', 14 highlight: { 15 size: 7, 16 radius: 7 17 }, 18 axis: 'left', 19 xField: 'start', 20 yField: 'parts', 21 style: { 22 lineWidth: 4 23 }, 24 marker: { 25 radius: 4 26 }, 27 tooltip: { 28 trackMouse: true, 29 renderer: function (tip, item) 30 { 31 tip.update( 32 Ext.Date.format(item.get('start'), "Y-m-d") + ": " + item.get("parts") + " " + i18n( 33 "Parts")); 34 } 35 }, 36 title: i18n("Parts"), 37 markerConfig: { 38 type: 'cross', 39 size: 4, 40 radius: 4, 41 'stroke-width': 0 42 } 43 }, { 44 type: 'line', 45 style: { 46 lineWidth: 4 47 }, 48 marker: { 49 radius: 4 50 }, 51 highlight: { 52 size: 7, 53 radius: 7 54 }, 55 tooltip: { 56 trackMouse: true, 57 renderer: function (tip, item) 58 { 59 tip.update(Ext.Date.format(item.get('start'), "Y-m-d") + ": " + item.get( 60 "categories") + " " + i18n("Categories")); 61 } 62 }, 63 axis: 'left', 64 title: i18n("Categories"), 65 smooth: true, 66 xField: 'start', 67 yField: 'categories', 68 markerConfig: { 69 type: 'circle', 70 size: 4, 71 radius: 4, 72 'stroke-width': 0 73 } 74 } 75 ], 76 axes: [ 77 { 78 type: 'numeric', 79 minimum: 0, 80 position: 'left', 81 fields: ['parts', 'categories'], 82 title: i18n("Count"), 83 minorTickSteps: 1, 84 grid: { 85 odd: { 86 opacity: 1, 87 fill: '#eee', 88 stroke: '#bbb', 89 'stroke-width': 0.5 90 }, 91 even: { 92 opacity: 1, 93 stroke: '#bbb', 94 'stroke-width': 0.5 95 } 96 } 97 }, 98 { 99 type: 'time', 100 dateFormat: 'Y-m-d', 101 position: 'bottom', 102 aggregateOp: "avg", 103 fields: ['start'], 104 title: i18n("Date"), 105 grid: true 106 } 107 ], 108 store: { 109 model: 'PartKeepr.StatisticSample', 110 proxy: { 111 type: 'ajax', 112 reader: { 113 type: 'json', 114 rootProperty: '' 115 }, 116 url: PartKeepr.getBasePath() + "/api/statistics/sampled", 117 extraParams: { 118 "start": "2011-01-01 00:00:00", 119 "end": "2011-12-01 23:59:59" 120 } 121 }, 122 autoLoad: false 123 }, 124 initComponent: function () { 125 this.mask = new Ext.LoadMask({ 126 msg: i18n("Loading…"), 127 target: this 128 }); 129 this.callParent(); 130 131 this.store.on("beforeload", Ext.bind(this.onBeforeLoad, this)); 132 this.store.on("load", Ext.bind(this.onLoad, this)); 133 }, 134 /** 135 * Sets the start date for the chart. Does not trigger a reload of the dataset. 136 * @param date A valid date object 137 */ 138 setStart: function (date) 139 { 140 if (!(date instanceof Date)) { 141 return; 142 } 143 this.store.getProxy().extraParams.start = Ext.Date.format(date, "Y-m-d H:i:s"); 144 }, 145 /** 146 * Sets the end date for the chart. Does not trigger a reload of the dataset. 147 * @param date A valid date object 148 */ 149 setEnd: function (date) 150 { 151 if (!(date instanceof Date)) { 152 return; 153 } 154 155 // Always set the end date to the end of the day 156 date.setHours(23); 157 date.setMinutes(59); 158 date.setSeconds(59); 159 160 this.store.getProxy().extraParams.end = Ext.Date.format(date, "Y-m-d H:i:s"); 161 }, 162 onBeforeLoad: function () { 163 this.mask.show(); 164 }, 165 onLoad: function () { 166 this.mask.hide(); 167 168 } 169 });