jquery.blueprint.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  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. (function ($, window, document, undefined) {
  21. var pluginName = "jHueBlueprint",
  22. COLORS = {
  23. ORANGE: "#FB950D",
  24. GREEN: "#419E08",
  25. BLUE: "#338BB8",
  26. RED: "#CE151D",
  27. PURPLE: "#572B91",
  28. TURQUOISE: "#049D84",
  29. FALAFEL: "#774400"
  30. },
  31. TYPES = {
  32. LINECHART: "lines",
  33. BARCHART: "bars",
  34. POINTCHART: "points",
  35. PIECHART: "pie",
  36. MAP: "map"
  37. },
  38. defaults = {
  39. data: [],
  40. type: TYPES.LINECHART,
  41. fill: false,
  42. width: "100%",
  43. height: 200,
  44. borderWidth: 0,
  45. tooltips: true,
  46. tooltipAddon: "",
  47. enableSelection: false,
  48. isDateTime: false,
  49. timeFormat: null,
  50. isCategories: false,
  51. useCanvas: false,
  52. xAxisFormatter: null,
  53. yAxisFormatter: null,
  54. xTooltipFormatter: null,
  55. yTooltipFormatter: null,
  56. onSelect: function () {
  57. },
  58. onItemClick: function () {
  59. }
  60. };
  61. function Plugin(element, options) {
  62. this.element = element;
  63. this.options = $.extend({}, defaults, options);
  64. this._defaults = defaults;
  65. this._name = pluginName;
  66. this.init();
  67. }
  68. Plugin.prototype.init = function () {
  69. var _this = this;
  70. if (_this.options.type == TYPES.PIECHART) {
  71. flot_pie(_this);
  72. }
  73. else {
  74. flot(_this);
  75. }
  76. };
  77. Plugin.prototype.setOptions = function (options) {
  78. this.options = $.extend({}, defaults, options);
  79. };
  80. function addSerie(element, serie) {
  81. var _series = $(element).data("plotSeries");
  82. if (_series == null) {
  83. if (typeof console != "undefined") {
  84. console.warn("$(elem).jHueBlueprint('add', options) requires an existing data serie to work. Use $(elem).jHueBlueprint(options) instead.");
  85. }
  86. }
  87. else {
  88. _series.push(getSerie(serie));
  89. var _plot = $.plot(element, _series, $(element).data("plotOptions"));
  90. $(element).data("plotObj", _plot);
  91. $(element).data("plotSeries", _series);
  92. }
  93. };
  94. function showTooltip(x, y, contents) {
  95. $("<div id='jHueBlueprintTooltip'>" + contents + "</div>").css({
  96. top: y + 5,
  97. left: x + 5
  98. }).appendTo("body").fadeIn(200);
  99. }
  100. function flot(plugin) {
  101. var _this = plugin;
  102. $(_this.element).width(_this.options.width).height(_this.options.height);
  103. var _options = {
  104. grid: {
  105. borderWidth: _this.options.borderWidth,
  106. clickable: true
  107. }
  108. }
  109. if (_this.options.tooltips) {
  110. _options.grid.hoverable = true;
  111. }
  112. if (_this.options.enableSelection) {
  113. _options.selection = {
  114. mode: "x",
  115. color: COLORS.GREEN
  116. }
  117. }
  118. if (_this.options.isDateTime) {
  119. _options.xaxis = {
  120. mode: "time"
  121. }
  122. if (_this.options.timeFormat) {
  123. _options.xaxis.timeformat = _this.options.timeFormat;
  124. }
  125. }
  126. if (_this.options.isCategories) {
  127. _options.xaxis = {
  128. mode: "categories"
  129. }
  130. }
  131. if (_this.options.xAxisFormatter != null) {
  132. if (_options.xaxis == null){
  133. _options.xaxis = {
  134. tickFormatter: _this.options.yAxisFormatter
  135. }
  136. }
  137. else {
  138. _options.xaxis.tickFormatter = _this.options.xAxisFormatter;
  139. }
  140. }
  141. if (_this.options.yAxisFormatter != null) {
  142. _options.yaxis = {
  143. tickFormatter: _this.options.yAxisFormatter
  144. }
  145. }
  146. if (_this.options.useCanvas) {
  147. _options.canvas = true;
  148. }
  149. var _serie = getSerie(_this.options);
  150. var _plot = $.plot($(_this.element), [_serie], _options);
  151. $(_this.element).bind("plotselected", function (event, ranges) {
  152. _this.options.onSelect(ranges);
  153. });
  154. if (_this.options.tooltips) {
  155. var previousPoint = null;
  156. $(_this.element).bind("plothover", function (event, pos, item) {
  157. if (item) {
  158. if (previousPoint != item.dataIndex) {
  159. previousPoint = item.dataIndex;
  160. $("#jHueBlueprintTooltip").remove();
  161. var x = item.datapoint[0],
  162. y = item.datapoint[1];
  163. if (_this.options.isDateTime && typeof moment != "undefined"){
  164. x = moment(x).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]");
  165. }
  166. if (_this.options.isCategories){
  167. x = item.series.data[item.dataIndex][0];
  168. }
  169. showTooltip(item.pageX, item.pageY, "X: " + (_this.options.xTooltipFormatter ? _this.options.xTooltipFormatter(x) : x) + ", Y: " + (_this.options.yTooltipFormatter ? _this.options.yTooltipFormatter(y) : y) + (_this.options.tooltipAddon != "" ? ", " + _this.options.tooltipAddon : ""));
  170. }
  171. } else {
  172. $("#jHueBlueprintTooltip").remove();
  173. previousPoint = null;
  174. }
  175. });
  176. }
  177. $(_this.element).bind("plotclick", function (event, pos, item) {
  178. _this.options.onItemClick(pos, item);
  179. });
  180. $(_this.element).data("plotObj", _plot);
  181. $(_this.element).data("plotOptions", _options);
  182. $(_this.element).data("plotSeries", [_serie]);
  183. }
  184. function flot_pie(plugin) {
  185. var _this = plugin;
  186. $(_this.element).width(_this.options.width).height(_this.options.height);
  187. var _options = {
  188. grid: {
  189. borderWidth: _this.options.borderWidth,
  190. clickable: true
  191. },
  192. series: {
  193. pie: {
  194. show: true
  195. }
  196. }
  197. };
  198. if (_this.options.tooltips) {
  199. _options.grid.hoverable = true;
  200. }
  201. var _plot = $.plot(_this.element, _this.options.data, _options);
  202. $(_this.element).data("plotObj", _plot);
  203. }
  204. function getSerie(options) {
  205. var _chartData = options.data;
  206. if (options.isDateTime){
  207. var _newChartData = [];
  208. for (var i=0;i<_chartData.length;i++){
  209. var _tuple = _chartData[i];
  210. _tuple[0] = moment(_tuple[0]).unix()*1000;
  211. _newChartData.push(_tuple)
  212. }
  213. _chartData = _newChartData;
  214. }
  215. var _flotSerie = {
  216. data: _chartData,
  217. label: options.label
  218. }
  219. if (options.type == TYPES.LINECHART) {
  220. _flotSerie.lines = {show: true, fill: options.fill }
  221. _flotSerie.points = {show: true}
  222. }
  223. if (options.type == TYPES.BARCHART) {
  224. _flotSerie.bars = {show: true, fill: options.fill, barWidth: 0.6, align: "center" }
  225. _flotSerie.points = {show: true}
  226. }
  227. if (options.type == TYPES.POINTCHART) {
  228. _flotSerie.points = {show: true}
  229. }
  230. if (options.type == TYPES.PIECHART) {
  231. _flotSerie.pie = {show: true}
  232. }
  233. if (options.color != null) {
  234. _flotSerie.color = options.color;
  235. }
  236. return _flotSerie;
  237. }
  238. $.fn[pluginName] = function (options) {
  239. var _args = Array.prototype.slice.call(arguments);
  240. if (_args.length == 1) {
  241. if (_args[0] == "reset") { // resets the graph
  242. if (this.data("plotObj")){
  243. this.data("plotObj").setData([]);
  244. this.data("plotObj").setupGrid();
  245. this.data("plotObj").draw();
  246. this.data("plotObj", null);
  247. this.data("plotSeries", null);
  248. this.data("plotOptions", null);
  249. this.data('plugin_' + pluginName, null);
  250. }
  251. }
  252. else {
  253. return this.each(function () {
  254. if (!$.data(this, 'plugin_' + pluginName)) {
  255. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  256. }
  257. });
  258. }
  259. }
  260. else {
  261. if (_args[0] == "add") { // add a serie to the graph
  262. addSerie(this, _args[1]);
  263. }
  264. }
  265. }
  266. $[pluginName] = function (options) {
  267. if (typeof console != "undefined") {
  268. console.warn("$(elem).jHueBlueprint() is a preferred call method.");
  269. }
  270. $(options.element).jHueBlueprint(options);
  271. };
  272. $[pluginName].COLORS = COLORS;
  273. $[pluginName].TYPES = TYPES;
  274. })(jQuery, window, document);