7de2de3ddd7cd36efe3570795c75519260480f5a.svn-base 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. BemsWebApplication.EnergyUsage = function (params,viewInfo) {
  2. "use strict";
  3. var initialized = false,
  4. shouldReload = false,
  5. currentTabIndex = ko.observable(0),
  6. dataSource;
  7. var multiViewItems = [
  8. {
  9. viewModel: viewModel,
  10. template: 'mainCharts'
  11. },
  12. {
  13. viewModel: viewModel,
  14. template: 'subCharts'
  15. }
  16. ];
  17. var elements = _.map(_.range(1, 11), function(x) {
  18. return {
  19. id: ['chart', x].join('')
  20. }
  21. });
  22. var chartLayout = new BWA.ChartLayout({
  23. divs: _.map(elements, function(element) {
  24. if (element.id === 'chart1') {
  25. element.id = 'chartDiv';
  26. element.chartId = 'chart1';
  27. }
  28. if (element.id === 'chart2') {
  29. element.id = 'chart2div';
  30. element.chartId = 'chart2';
  31. }
  32. if (element.id === 'chart6') {
  33. element.widgetChartName = 'dxPieChart';
  34. }
  35. return element;
  36. }),
  37. multiViewOptions: {
  38. viewIndex: currentTabIndex,
  39. viewCount: multiViewItems.length
  40. }
  41. });
  42. var pieDataSource = [
  43. { country: "USA",medals: 110 },
  44. { country: "China",medals: 100 },
  45. { country: "Russia",medals: 72 },
  46. { country: "Britain",medals: 47 },
  47. { country: "Australia",medals: 46 },
  48. { country: "Germany",medals: 41 },
  49. { country: "France",medals: 40 },
  50. { country: "South Korea",medals: 31 }
  51. ];
  52. var pieChartOptions = {
  53. dataSource: pieDataSource,
  54. palette: "Soft Pastel",
  55. title: "Olympic Medals in 2008",
  56. legend: {
  57. horizontalAlignment: "right",
  58. verticalAlignment: "top",
  59. margin: 0
  60. },
  61. pointClick: function (point) {
  62. point.select();
  63. },
  64. series: [
  65. {
  66. type: "doughnut", // if not, pie.
  67. argumentField: "country",
  68. valueField: "medals",
  69. hoverStyle: {
  70. color: "#ffd700"
  71. }
  72. }
  73. ]
  74. };
  75. var chartDataSource = [
  76. {
  77. year: 1950,
  78. Africa: 227,
  79. Americas: 331,
  80. Asia: 1436,
  81. Europe: 547,
  82. Oceania: 12
  83. },
  84. //{
  85. // year: 1960,
  86. // Africa: 285,
  87. // Americas: 416,
  88. // Asia: 1718,
  89. // Europe: 605,
  90. // Oceania: 15
  91. //},
  92. {
  93. year: 1970,
  94. Africa: 365,
  95. Americas: 512,
  96. Asia: 2156,
  97. Europe: 657,
  98. Oceania: 19
  99. },
  100. {
  101. year: 1980,
  102. Africa: 478,
  103. Americas: 612,
  104. Asia: 2644,
  105. Europe: 695,
  106. Oceania: 22
  107. },
  108. {
  109. year: 1990,
  110. Africa: 633,
  111. Americas: 720,
  112. Asia: 3180,
  113. Europe: 722,
  114. Oceania: 26
  115. },
  116. {
  117. year: 2000,
  118. Africa: 810,
  119. Americas: 833,
  120. Asia: 3678,
  121. Europe: 731,
  122. Oceania: 30
  123. },
  124. {
  125. year: 2010,
  126. Africa: 1016,
  127. Americas: 936,
  128. Asia: 4149,
  129. Europe: 728,
  130. Oceania: 35
  131. }
  132. ];
  133. function handleCmBuildingModification() {
  134. shouldReload = true;
  135. }
  136. var chartOptions = {
  137. dataSource: chartDataSource,
  138. title: {
  139. text: 'Continental Population Shift (in millions)'
  140. },
  141. legend: {
  142. horizontalAlignment: 'center',
  143. verticalAlignment: 'bottom'
  144. },
  145. commonSeriesSettings: {
  146. argumentField: 'year',
  147. type: 'fullStackedArea',
  148. label: {
  149. visible: true,
  150. connector: {
  151. visible: true
  152. }
  153. }
  154. },
  155. tooltip: {
  156. enabled: true,
  157. percentPrecision: 2,
  158. customizeTooltip: function (value) {
  159. return {
  160. text: value.percentText
  161. };
  162. }
  163. },
  164. series: [{
  165. name: 'Oceania',
  166. valueField: 'Oceania'
  167. },{
  168. name: 'Africa',
  169. valueField: 'Africa'
  170. },{
  171. name: 'Americas',
  172. valueField: 'Americas'
  173. },{
  174. name: 'Asia',
  175. valueField: 'Asia'
  176. },{
  177. name: 'Europe',
  178. valueField: 'Europe'
  179. }]
  180. };
  181. var dataSource = [
  182. { month: "January",avgT: 9.8,minT: 4.1,maxT: 15.5,prec: 109 },
  183. { month: "February",avgT: 11.8,minT: 5.8,maxT: 17.8,prec: 104 },
  184. { month: "March",avgT: 13.4,minT: 7.2,maxT: 19.6,prec: 92 },
  185. { month: "April",avgT: 15.4,minT: 8.1,maxT: 22.8,prec: 30 },
  186. { month: "May",avgT: 18,minT: 10.3,maxT: 25.7,prec: 10 },
  187. { month: "June",avgT: 20.6,minT: 12.2,maxT: 29,prec: 2 },
  188. { month: "July",avgT: 22.2,minT: 13.2,maxT: 31.3,prec: 2 },
  189. { month: "August",avgT: 22.2,minT: 13.2,maxT: 31.1,prec: 1 },
  190. { month: "September",avgT: 21.2,minT: 12.4,maxT: 29.9,prec: 8 },
  191. { month: "October",avgT: 17.9,minT: 9.7,maxT: 26.1,prec: 24 },
  192. { month: "November",avgT: 12.9,minT: 6.2,maxT: 19.6,prec: 64 },
  193. { month: "December",avgT: 9.6,minT: 3.4,maxT: 15.7,prec: 76 }
  194. ];
  195. var chartOptions2 = {
  196. dataSource: dataSource,
  197. commonSeriesSettings: {
  198. argumentField: "month"
  199. },
  200. panes: [{
  201. name: "topPane"
  202. },{
  203. name: "bottomPane"
  204. }],
  205. defaultPane: "bottomPane",
  206. series: [{
  207. pane: "topPane",
  208. color: "#87CEEB",
  209. type: "rangeArea",
  210. rangeValue1Field: "minT",
  211. rangeValue2Field: "maxT",
  212. name: "Monthly Temperature Ranges, °C"
  213. },{
  214. pane: "topPane",
  215. valueField: "avgT",
  216. name: "Average Temperature, °C",
  217. label: {
  218. visible: true,
  219. customizeText: function () {
  220. return this.valueText + " °C";
  221. }
  222. }
  223. },{
  224. type: "bar",
  225. valueField: "prec",
  226. name: "prec, mm",
  227. label: {
  228. visible: true,
  229. customizeText: function () {
  230. return this.valueText + " mm";
  231. }
  232. }
  233. }
  234. ],
  235. valueAxis: [{
  236. pane: "bottomPane",
  237. grid: {
  238. visible: true
  239. },
  240. title: {
  241. text: "Precipitation, mm"
  242. }
  243. },{
  244. pane: "topPane",
  245. min: 0,
  246. max: 30,
  247. grid: {
  248. visible: true
  249. },
  250. title: {
  251. text: "Temperature, °C"
  252. }
  253. }],
  254. legend: {
  255. verticalAlignment: "bottom",
  256. horizontalAlignment: "center"
  257. },
  258. title: {
  259. text: "Weather in Glendale, CA"
  260. }
  261. };
  262. var dataSource3 = [
  263. { country: "USA",gold: 36,silver: 38,bronze: 36 },
  264. { country: "China",gold: 51,silver: 21,bronze: 28 },
  265. { country: "Russia",gold: 23,silver: 21,bronze: 28 },
  266. { country: "Britain",gold: 19,silver: 13,bronze: 15 },
  267. { country: "Australia",gold: 14,silver: 15,bronze: 17 },
  268. { country: "Germany",gold: 16,silver: 10,bronze: 15 }
  269. ];
  270. var chartOptions3 = {
  271. rotated: true,
  272. pointSelectionMode: "multiple",
  273. dataSource: dataSource3,
  274. //size: {
  275. // width: '100%',
  276. // height: '100%'
  277. //},
  278. commonSeriesSettings: {
  279. argumentField: "country",
  280. type: "stackedbar",
  281. selectionStyle: {
  282. hatching: {
  283. direction: "left"
  284. }
  285. }
  286. },
  287. series: [
  288. { valueField: "gold",name: "Gold Medals",color: "#ffd700" },
  289. { valueField: "silver",name: "Silver Medals",color: "#c0c0c0" },
  290. { valueField: "bronze",name: "Bronze Medals",color: "#cd7f32" }
  291. ],
  292. title: {
  293. text: "Olympic Medals in 2008"
  294. },
  295. legend: {
  296. verticalAlignment: "bottom",
  297. horizontalAlignment: "center"
  298. },
  299. pointClick: function (point) {
  300. point.isSelected() ? point.clearSelection() : point.select();
  301. }
  302. }
  303. function handleViewShown() {
  304. $('#chart1').dxChart($.extend({},chartOptions,{
  305. title: 'chart1'
  306. }));
  307. $('#chart2').dxChart($.extend({},chartOptions2,{
  308. title: 'chart2'
  309. }));
  310. $('#chart3').dxChart(chartOptions3);
  311. $('#chart4').dxChart(chartOptions3);
  312. $('#chart5').dxChart(chartOptions3);
  313. $('#chart6').dxPieChart(pieChartOptions);
  314. $('#chart7').dxChart(chartOptions);
  315. $('#chart8').dxChart(chartOptions3);
  316. $('#chart9').dxChart(chartOptions3);
  317. $('#chart10').dxChart(chartOptions3);
  318. chartLayout.initialize();
  319. chartLayout.onShown();
  320. if(shouldReload)
  321. {
  322. //shouldReload = false;
  323. //dataSource.pageIndex(0);
  324. //dataSource.load();
  325. }
  326. $SideMenu.showSideMenuIfWill(params.view);
  327. //sideOverlayVisible(true);
  328. }
  329. function handleViewDisposing() {
  330. }
  331. function handleViewHidden() {
  332. chartLayout.onHidden();
  333. }
  334. function handleViewShowing() {
  335. //BemsWebApplication.app.loadTemplates('views/sideMenu/sidemenu1.dxview');
  336. //deferred.resolve();
  337. }
  338. function refreshList() {
  339. //dataSource.pageIndex(0);
  340. //dataSource.load();
  341. }
  342. var viewModel = {
  343. refreshList: refreshList,
  344. viewShowing: handleViewShowing,
  345. viewShown: handleViewShown,
  346. viewHidden: handleViewHidden,
  347. viewDisposing: handleViewDisposing,
  348. currentTabIndex: currentTabIndex,
  349. multiViewItems: multiViewItems
  350. }
  351. return viewModel;
  352. };