charts.ko.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. ko.bindingHandlers.pieChart = {
  17. init: function (element, valueAccessor) {
  18. var _options = valueAccessor();
  19. var _data = _options.transformer(_options.data);
  20. nv.addGraph(function () {
  21. var _chart = nv.models.growingPieChart()
  22. .x(function (d) {
  23. return d.label
  24. })
  25. .y(function (d) {
  26. return d.value
  27. })
  28. .height($(element).width())
  29. .showLabels(true).showLegend(false);
  30. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  31. _d3.datum(_data)
  32. .transition().duration(350)
  33. .each("end", _options.onComplete)
  34. .call(_chart);
  35. $.each(_options.fqs(), function(cnt, item){
  36. if (item.field() == _options.field()){
  37. _chart.selectSlices(item.filter());
  38. }
  39. });
  40. nv.utils.windowResize(_chart.update);
  41. $(element).height($(element).width());
  42. return _chart;
  43. }, function () {
  44. d3.selectAll(".nv-slice").on('click',
  45. function (d, i) {
  46. _options.onClick(d);
  47. });
  48. });
  49. },
  50. update: function (element, valueAccessor) {
  51. var value = valueAccessor();
  52. // do something with the updated value
  53. }
  54. };
  55. ko.bindingHandlers.barChart = {
  56. init: function (element, valueAccessor) {
  57. barChart(element, valueAccessor(), false);
  58. },
  59. update: function (element, valueAccessor) {
  60. var value = valueAccessor();
  61. // do something with the updated value
  62. }
  63. };
  64. ko.bindingHandlers.timelineChart = {
  65. init: function (element, valueAccessor) {
  66. barChart(element, valueAccessor(), true);
  67. },
  68. update: function (element, valueAccessor) {
  69. var value = valueAccessor();
  70. // do something with the updated value
  71. }
  72. };
  73. ko.bindingHandlers.lineChart = {
  74. init: function (element, valueAccessor) {
  75. lineChart(element, valueAccessor());
  76. },
  77. update: function (element, valueAccessor) {
  78. var value = valueAccessor();
  79. // do something with the updated value
  80. }
  81. };
  82. ko.bindingHandlers.mapChart = {
  83. init: function (element, valueAccessor) {
  84. $(element).height($(element).width()/2.23);
  85. $(element).css("position", "relative");
  86. var _options = valueAccessor();
  87. var _data = _options.transformer(_options.data);
  88. var _maxWeight = 0;
  89. $(_data).each(function(cnt, item){
  90. if (item.value > _maxWeight) _maxWeight = item.value;
  91. });
  92. var _chunk = _maxWeight / _data.length;
  93. var _mapdata = {};
  94. var _fills = {};
  95. var _noncountries = [];
  96. if (_options.isScale){
  97. _fills["defaultFill"] = HueColors.LIGHT_BLUE;
  98. var _colors = HueColors.scale(HueColors.LIGHT_BLUE, HueColors.DARK_BLUE, _data.length);
  99. $(_colors).each(function(cnt, item){
  100. _fills["fill_" + cnt] = item;
  101. });
  102. $(_data).each(function(cnt, item){
  103. var _country = HueGeo.getCountryFromName(item.label);
  104. if (_country != null){
  105. _mapdata[_country.alpha3] = {
  106. fillKey: "fill_" + Math.floor(item.value/_chunk)
  107. }
  108. }
  109. else {
  110. _noncountries.push(item);
  111. }
  112. });
  113. }
  114. else {
  115. _fills["defaultFill"] = HueColors.BLUE;
  116. _fills["selected"] = HueColors.DARK_BLUE;
  117. $(_data).each(function(cnt, item){
  118. var _country = HueGeo.getCountryFromName(item.label);
  119. if (_country != null){
  120. _mapdata[_country.alpha3] = {
  121. fillKey: "selected"
  122. }
  123. }
  124. else {
  125. _noncountries.push(item);
  126. }
  127. });
  128. }
  129. var _map = new Datamap({
  130. element: element,
  131. fills: _fills,
  132. scope: 'world',
  133. data: _mapdata,
  134. done: function(datamap) {
  135. datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
  136. _options.onClick(geography);
  137. });
  138. var _bubbles = [];
  139. $(_noncountries).each(function(cnt, item){
  140. HueGeo.getCityCoordinates(item.label, function(lat, lng){
  141. _bubbles.push({
  142. fillKey: "selected",
  143. label: item.label,
  144. radius: 4,
  145. latitude: lat,
  146. longitude: lng
  147. });
  148. _map.bubbles(_bubbles, {
  149. popupTemplate: function(geo, data) {
  150. return '<div class="hoverinfo"><strong>' + data.label + '</strong></div>'
  151. }
  152. });
  153. });
  154. });
  155. },
  156. geographyConfig: {
  157. hideAntarctica: true,
  158. borderWidth: 1,
  159. borderColor: HueColors.DARK_BLUE,
  160. highlightOnHover: true,
  161. highlightFillColor: HueColors.DARK_BLUE,
  162. highlightBorderColor: HueColors.DARK_BLUE
  163. }
  164. });
  165. _options.onComplete();
  166. },
  167. update: function (element, valueAccessor) {
  168. var value = valueAccessor();
  169. // do something with the updated value
  170. }
  171. };
  172. function lineChart(element, options) {
  173. var _datum = options.transformer(options.datum);
  174. $(element).height(300);
  175. nv.addGraph(function () {
  176. var _chart = nv.models.lineWithBrushChart();
  177. _chart.enableSelection();
  178. _chart.onSelectRange(options.onSelectRange);
  179. _chart.xAxis
  180. .showMaxMin(true)
  181. .tickFormat(d3.format(',0f'));
  182. _chart.margin({bottom: 100})
  183. .transitionDuration(300);
  184. _chart.yAxis
  185. .tickFormat(d3.format(',0f'));
  186. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  187. _d3.datum(_datum)
  188. .transition().duration(350)
  189. .each("end", options.onComplete)
  190. .call(_chart);
  191. nv.utils.windowResize(_chart.update);
  192. return _chart;
  193. }, function () {
  194. d3.selectAll(".nv-bar").on('click',
  195. function (d, i) {
  196. options.onClick(d);
  197. });
  198. });
  199. }
  200. function barChart(element, options, isTimeline) {
  201. var _datum = options.transformer(options.datum);
  202. $(element).height(300);
  203. nv.addGraph(function () {
  204. var _chart;
  205. if (isTimeline) {
  206. _chart = nv.models.multiBarWithBrushChart();
  207. _chart.enableSelection();
  208. _chart.onSelectRange(options.onSelectRange);
  209. _chart.xAxis
  210. .showMaxMin(true)
  211. .tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
  212. _chart.multibar.hideable(true);
  213. _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
  214. }
  215. else {
  216. var _isDiscrete = false;
  217. for (var j=0;j<_datum.length;j++){
  218. for (var i=0;i<_datum[j].values.length;i++){
  219. if (isNaN(_datum[j].values[i].x * 1)){
  220. _isDiscrete = true;
  221. break;
  222. }
  223. }
  224. }
  225. if (_isDiscrete){
  226. _chart = nv.models.growingDiscreteBarChart()
  227. .x(function(d) { return d.x })
  228. .y(function(d) { return d.y })
  229. .staggerLabels(true);
  230. }
  231. else {
  232. _chart = nv.models.growingMultiBarChart();
  233. _chart.xAxis
  234. .showMaxMin(true)
  235. .tickFormat(d3.format(',0f'));
  236. _chart.multibar.hideable(true);
  237. _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
  238. }
  239. }
  240. _chart.margin({bottom: 100})
  241. .transitionDuration(300);
  242. _chart.yAxis
  243. .tickFormat(d3.format(',0f'));
  244. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  245. _d3.datum(_datum)
  246. .transition().duration(350)
  247. .each("end", options.onComplete)
  248. .call(_chart);
  249. nv.utils.windowResize(_chart.update);
  250. return _chart;
  251. }, function () {
  252. d3.selectAll(".nv-bar").on('click',
  253. function (d, i) {
  254. options.onClick(d);
  255. });
  256. });
  257. }