projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | Ext.require("Ext.draw.Color", function () {\r |
| 2 | Ext.define('EnergyApp.view.AreaChart', {\r | |
| 3 | xtype: 'area',\r | |
| 4 | extend: 'Ext.Panel',\r | |
| 5 | require: ['Ext.draw.Color'],\r | |
| 6 | config: {\r | |
| 7 | title: 'Area',\r | |
| 8 | layout: 'fit',\r | |
| 9 | cls: 'chartpanel',\r | |
| 10 | margin: '0 0 40 0',\r | |
| 11 | items: [\r | |
| 12 | {\r | |
| 13 | xtype: 'chart',\r | |
| 14 | background: 'rgb(44,44,44)',\r | |
| 15 | colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],\r | |
| 16 | interactions: [\r | |
| 17 | {\r | |
| 18 | type: 'panzoom',\r | |
| 19 | zoomOnPanGesture: true,\r | |
| 20 | modeToggleButton: {\r | |
| 21 | hideText: true,\r | |
| 22 | style: 'margin-left: 7px'\r | |
| 23 | }\r | |
| 24 | },\r | |
| 25 | {\r | |
| 26 | type: 'iteminfo',\r | |
| 27 | gesture: 'itemtap',\r | |
| 28 | listeners: {\r | |
| 29 | show: function (interaction, item, panel) {\r | |
| 30 | EnergyApp.app.popup(item, panel);\r | |
| 31 | }\r | |
| 32 | }\r | |
| 33 | }\r | |
| 34 | ],\r | |
| 35 | store: 'ChartStore',\r | |
| 36 | insetPadding: 10,\r | |
| 37 | legend: {\r | |
| 38 | position: 'top',\r | |
| 39 | style: {\r | |
| 40 | background: 'rgb(44,44,44)'\r | |
| 41 | }\r | |
| 42 | },\r | |
| 43 | series: [\r | |
| 44 | {\r | |
| 45 | type: 'area',\r | |
| 46 | highlight: false,\r | |
| 47 | strokeWidth: 2,\r | |
| 48 | title: ['Coal', 'Nuclear', 'Oil', 'Natural Gas', 'Renewable'],\r | |
| 49 | axis: 'right',\r | |
| 50 | xField: 'year',\r | |
| 51 | yField: ['coal', 'nuclear', 'crude-oil', 'gas', 'renewable'],\r | |
| 52 | subStyle: {\r | |
| 53 | stroke: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"]\r | |
| 54 | },\r | |
| 55 | style: {\r | |
| 56 | lineWidth: 3,\r | |
| 57 | fillOpacity: 0.9\r | |
| 58 | },\r | |
| 59 | highlightCfg: {\r | |
| 60 | globalAlpha: 1\r | |
| 61 | },\r | |
| 62 | marker: {\r | |
| 63 | type: 'circle',\r | |
| 64 | r: 4,\r | |
| 65 | lineWidth: 1,\r | |
| 66 | globalAlpha: 0,\r | |
| 67 | fillOpacity: 1,\r | |
| 68 | fillStyle: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"].map(\r | |
| 69 | function (color) {\r | |
| 70 | return Ext.draw.Color.fly(color).createDarker(0.1).toString();\r | |
| 71 | }\r | |
| 72 | )\r | |
| 73 | }\r | |
| 74 | }\r | |
| 75 | ],\r | |
| 76 | axes: [\r | |
| 77 | {\r | |
| 78 | type: 'numeric',\r | |
| 79 | position: 'right',\r | |
| 80 | minimum: 0,\r | |
| 81 | renderer: function (nStr, x) {\r | |
| 82 | return(nStr / 1000000).toFixed(2);\r | |
| 83 | },\r | |
| 84 | style: {\r | |
| 85 | lineWidth: 2,\r | |
| 86 | stroke: '#555',\r | |
| 87 | fill: '#555'\r | |
| 88 | },\r | |
| 89 | label: {\r | |
| 90 | fill: '#777'\r | |
| 91 | },\r | |
| 92 | adjustMinimumByMajorUnit: 0,\r | |
| 93 | fields: ['coal', 'nuclear', 'crude-oil', 'gas', 'renewable'],\r | |
| 94 | title: {\r | |
| 95 | text: 'Million BTUs',\r | |
| 96 | fontSize: 15,\r | |
| 97 | fillStyle: '#ccc'\r | |
| 98 | }\r | |
| 99 | },\r | |
| 100 | {\r | |
| 101 | type: 'category',\r | |
| 102 | position: 'bottom',\r | |
| 103 | fields: ['year'],\r | |
| 104 | style: {\r | |
| 105 | lineWidth: 2,\r | |
| 106 | stroke: '#555',\r | |
| 107 | estStepSize: 5,\r | |
| 108 | fill: '#555'\r | |
| 109 | },\r | |
| 110 | label: {\r | |
| 111 | fill: '#777',\r | |
| 112 | rotate: {\r | |
| 113 | degrees: 45\r | |
| 114 | }\r | |
| 115 | }\r | |
| 116 | }\r | |
| 117 | ],\r | |
| 118 | listeners: {\r | |
| 119 | afterrender: function (me) {\r | |
| 120 | me.on('beforerefresh', function () {\r | |
| 121 | if (me.ownerCt.getActiveItem().id !== me.id) {\r | |
| 122 | return false;\r | |
| 123 | }\r | |
| 124 | }, me);\r | |
| 125 | }\r | |
| 126 | }\r | |
| 127 | }\r | |
| 128 | ]\r | |
| 129 | },\r | |
| 130 | initialize: function () {\r | |
| 131 | this.callSuper();\r | |
| 132 | var legend = Ext.ComponentQuery.query('legend', this)[0],\r | |
| 133 | interaction = Ext.ComponentQuery.query('interaction[type=panzoom]', this)[0];\r | |
| 134 | if (legend && interaction && !interaction.isMultiTouch()) {\r | |
| 135 | interaction.getModeToggleButton().setRenderTo(legend.innerElement);\r | |
| 136 | }\r | |
| 137 | }\r | |
| 138 | });\r | |
| 139 | });\r |