]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | Ext.define('KitchenSink.view.charts.column.BasicController', {\r |
2 | extend: 'Ext.app.ViewController',\r | |
3 | alias: 'controller.column-basic',\r | |
4 | \r | |
5 | onDownload: function() {\r | |
6 | var chart = this.lookupReference('chart');\r | |
7 | if (Ext.os.is.Desktop) {\r | |
8 | chart.download({\r | |
9 | filename: 'Redwood City Climate Data Chart'\r | |
10 | });\r | |
11 | } else {\r | |
12 | chart.preview();\r | |
13 | }\r | |
14 | },\r | |
15 | \r | |
16 | onReloadData: function() {\r | |
17 | var chart = this.lookupReference('chart');\r | |
18 | chart.getStore().refreshData();\r | |
19 | },\r | |
20 | \r | |
21 | // The 'target' here is an object that contains information\r | |
22 | // about the target value when the drag operation on the column ends.\r | |
23 | onEditTipRender: function (tooltip, item, target, e) {\r | |
24 | tooltip.setHtml('Temperature °F: ' + target.yValue.toFixed(1));\r | |
25 | },\r | |
26 | \r | |
27 | onSeriesLabelRender: function (value) {\r | |
28 | return value.toFixed(1);\r | |
29 | },\r | |
30 | \r | |
31 | onColumnEdit: function (chart, data) {\r | |
32 | var threshold = 65,\r | |
33 | delta = 20,\r | |
34 | yValue = data.target.yValue,\r | |
35 | coldness;\r | |
36 | \r | |
37 | if (yValue < threshold) {\r | |
38 | coldness = Ext.Number.constrain((threshold - yValue) / delta, 0, 1);\r | |
39 | return {\r | |
40 | fillStyle: 'rgba(133, 231, 252, ' + coldness.toString() + ')'\r | |
41 | };\r | |
42 | } else {\r | |
43 | return {\r | |
44 | fillStyle: 'none'\r | |
45 | };\r | |
46 | }\r | |
47 | },\r | |
48 | \r | |
49 | onAfterRender: function () {\r | |
50 | var me = this,\r | |
51 | chart = this.lookupReference('chart'),\r | |
52 | axis = chart.getAxis(0),\r | |
53 | store = chart.getStore();\r | |
54 | \r | |
55 | function onAxisRangeChange() {\r | |
56 | me.onAxisRangeChange(axis);\r | |
57 | }\r | |
58 | \r | |
59 | store.on({\r | |
60 | datachanged: onAxisRangeChange,\r | |
61 | update: onAxisRangeChange\r | |
62 | });\r | |
63 | },\r | |
64 | \r | |
65 | onAxisRangeChange: function (axis, range) {\r | |
66 | // this.lookupReference('chart') will fail here,\r | |
67 | // as at the time of this call\r | |
68 | // the chart is not yet in the component tree,\r | |
69 | // so we have to use axis.getChart() instead.\r | |
70 | var chart = axis.getChart(),\r | |
71 | store = chart.getStore(),\r | |
72 | sum = 0,\r | |
73 | mean;\r | |
74 | \r | |
75 | store.each(function (rec) {\r | |
76 | sum += rec.get('highF');\r | |
77 | });\r | |
78 | \r | |
79 | mean = sum / store.getCount();\r | |
80 | \r | |
81 | axis.setLimits({\r | |
82 | value: mean,\r | |
83 | line: {\r | |
84 | title: {\r | |
85 | text: 'Average high: ' + mean.toFixed(2) + '°F'\r | |
86 | },\r | |
87 | lineDash: [2,2]\r | |
88 | }\r | |
89 | });\r | |
90 | },\r | |
91 | \r | |
92 | itemAnimationDuration: 0,\r | |
93 | \r | |
94 | // Disable item's animaton for editing.\r | |
95 | onBeginItemEdit: function (chart, interaction, item) {\r | |
96 | var itemsMarker = item.sprite.getMarker(item.category),\r | |
97 | fx = itemsMarker.getTemplate().fx; // animation modifier\r | |
98 | \r | |
99 | this.itemAnimationDuration = fx.getDuration();\r | |
100 | fx.setDuration(0);\r | |
101 | },\r | |
102 | \r | |
103 | // Restore item's animation when editing is done.\r | |
104 | onEndItemEdit: function (chart, interaction, item, target) {\r | |
105 | var itemsMarker = item.sprite.getMarker(item.category),\r | |
106 | fx = itemsMarker.getTemplate().fx;\r | |
107 | \r | |
108 | fx.setDuration(this.itemAnimationDuration);\r | |
109 | }\r | |
110 | \r | |
111 | }); |