jquery.blueprint.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  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. /*
  17. * jHue Blueprint plugin
  18. * it's a layer of abstraction on top of other chart/drawing/mapping plugins
  19. */
  20. jQuery.cachedScripts = {};
  21. jQuery.cacheScript = function (url, callback) {
  22. if (jQuery.cachedScripts != null && jQuery.cachedScripts[url] != null) {
  23. callback(jQuery.cachedScripts[url]);
  24. }
  25. else {
  26. var options = $.extend({}, {
  27. dataType: "script",
  28. cache: true,
  29. url: url,
  30. async: false,
  31. complete: function (script) {
  32. jQuery.cachedScripts[url] = script;
  33. callback(script);
  34. }
  35. });
  36. return jQuery.ajax(options);
  37. }
  38. };
  39. var FLOT_LOADED, FLOT_PIE_LOADED = false;
  40. (function ($, window, document, undefined) {
  41. var pluginName = "jHueBlueprint",
  42. COLORS = {
  43. ORANGE: "#FB950D",
  44. GREEN: "#419E08",
  45. BLUE: "#338BB8"
  46. },
  47. TYPES = {
  48. LINECHART: "lines",
  49. BARCHART: "bars",
  50. POINTCHART: "points",
  51. PIECHART: "pie",
  52. MAP: "map"
  53. },
  54. defaults = {
  55. data: [],
  56. type: TYPES.LINECHART,
  57. fill: false,
  58. width: "100%",
  59. height: 200,
  60. borderWidth: 0,
  61. tooltips: true,
  62. enableSelection: false,
  63. onSelect: function () {
  64. },
  65. onItemClick: function () {
  66. }
  67. };
  68. function Plugin(element, options) {
  69. this.element = element;
  70. this.options = $.extend({}, defaults, options);
  71. this._defaults = defaults;
  72. this._name = pluginName;
  73. this.init();
  74. }
  75. Plugin.prototype.init = function () {
  76. var _this = this;
  77. $.cacheScript("/static/ext/js/jquery/plugins/jquery.flot.min.js", function (script, textStatus) {
  78. FLOT_LOADED = true;
  79. if (_this.options.type == TYPES.PIECHART) {
  80. $.cacheScript("/static/ext/js/jquery/plugins/jquery.flot.pie.min.js", function (script, textStatus) {
  81. FLOT_PIE_LOADED = true;
  82. flot_pie(_this);
  83. });
  84. }
  85. else {
  86. if (_this.options.enableSelection) {
  87. $.cacheScript("/static/ext/js/jquery/plugins/jquery.flot.selection.min.js", function (script, textStatus) {
  88. flot(_this);
  89. });
  90. }
  91. else {
  92. flot(_this);
  93. }
  94. }
  95. });
  96. };
  97. Plugin.prototype.setOptions = function (options) {
  98. this.options = $.extend({}, defaults, options);
  99. };
  100. function addSerie(element, serie) {
  101. if (!FLOT_LOADED) {
  102. window.setTimeout(function () {
  103. addSerie(element, serie);
  104. }, 500)
  105. }
  106. else {
  107. var _series = $(element).data("plotSeries");
  108. if (_series == null) {
  109. if (typeof console != "undefined") {
  110. console.warn("$(elem).jHueBlueprint('add', options) requires an existing data serie to work. Use $(elem).jHueBlueprint(options) instead.");
  111. }
  112. }
  113. else {
  114. _series.push(getSerie(serie));
  115. var _plot = $.plot(element, _series, { grid: { borderWidth: element.data('plugin_' + pluginName).options.borderWidth } });
  116. $(element).data("plotObj", _plot);
  117. $(element).data("plotSeries", _series);
  118. }
  119. }
  120. };
  121. function showTooltip(x, y, contents) {
  122. $("<div id='jHueBlueprintTooltip'>" + contents + "</div>").css({
  123. top: y + 5,
  124. left: x + 5
  125. }).appendTo("body").fadeIn(200);
  126. }
  127. function flot(plugin) {
  128. var _this = plugin;
  129. $(_this.element).width(_this.options.width).height(_this.options.height);
  130. var _serie = getSerie(_this.options);
  131. var _options = {
  132. grid: {
  133. borderWidth: _this.options.borderWidth,
  134. clickable: true
  135. }
  136. }
  137. if (_this.options.tooltips) {
  138. _options.grid.hoverable = true;
  139. }
  140. if (_this.options.enableSelection) {
  141. _options.selection = {
  142. mode: "x",
  143. color: COLORS.GREEN
  144. }
  145. }
  146. var _plot = $.plot(_this.element, [_serie], _options);
  147. $(_this.element).bind("plotselected", function (event, ranges) {
  148. _this.options.onSelect(ranges);
  149. });
  150. if (_this.options.tooltips) {
  151. var previousPoint = null;
  152. $(_this.element).bind("plothover", function (event, pos, item) {
  153. if (item) {
  154. if (previousPoint != item.dataIndex) {
  155. previousPoint = item.dataIndex;
  156. $("#jHueBlueprintTooltip").remove();
  157. var x = item.datapoint[0].toFixed(2),
  158. y = item.datapoint[1].toFixed(2);
  159. showTooltip(item.pageX, item.pageY, x);
  160. }
  161. } else {
  162. $("#jHueBlueprintTooltip").remove();
  163. previousPoint = null;
  164. }
  165. });
  166. }
  167. $(_this.element).bind("plotclick", function (event, pos, item) {
  168. _this.options.onItemClick(pos, item);
  169. });
  170. $(_this.element).data("plotObj", _plot);
  171. $(_this.element).data("plotSeries", [_serie]);
  172. }
  173. function flot_pie(plugin) {
  174. var _this = plugin;
  175. $(_this.element).width(_this.options.width).height(_this.options.height);
  176. var _options = {
  177. grid: {
  178. borderWidth: _this.options.borderWidth,
  179. clickable: true
  180. },
  181. series: {
  182. pie: {
  183. show: true
  184. }
  185. }
  186. };
  187. if (_this.options.tooltips) {
  188. _options.grid.hoverable = true;
  189. }
  190. var _plot = $.plot(_this.element, _this.options.data, _options);
  191. $(_this.element).data("plotObj", _plot);
  192. }
  193. function getSerie(options) {
  194. var _flotSerie = {
  195. data: options.data,
  196. label: options.label
  197. }
  198. if (options.type == TYPES.LINECHART) {
  199. _flotSerie.lines = {show: true, fill: options.fill }
  200. _flotSerie.points = {show: true}
  201. }
  202. if (options.type == TYPES.BARCHART) {
  203. _flotSerie.bars = {show: true, fill: options.fill }
  204. _flotSerie.points = {show: true}
  205. }
  206. if (options.type == TYPES.POINTCHART) {
  207. _flotSerie.points = {show: true}
  208. }
  209. if (options.type == TYPES.PIECHART) {
  210. _flotSerie.pie = {show: true}
  211. }
  212. if (options.color != null) {
  213. _flotSerie.color = options.color;
  214. }
  215. return _flotSerie;
  216. }
  217. $.fn[pluginName] = function (options) {
  218. var _args = Array.prototype.slice.call(arguments);
  219. if (_args.length == 1) {
  220. return this.each(function () {
  221. if (!$.data(this, 'plugin_' + pluginName)) {
  222. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  223. }
  224. });
  225. }
  226. else {
  227. if (_args[0] == "add") { // add a serie to the graph
  228. addSerie(this, _args[1]);
  229. }
  230. }
  231. }
  232. $[pluginName] = function (options) {
  233. if (typeof console != "undefined") {
  234. console.warn("$(elem).jHueBlueprint() is a preferred call method.");
  235. }
  236. $(options.element).jHueBlueprint(options);
  237. };
  238. $[pluginName].COLORS = COLORS;
  239. $[pluginName].TYPES = TYPES;
  240. })(jQuery, window, document);