ko.charts.js 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  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.HUE_CHARTS = {
  17. TYPES: {
  18. LINECHART: "lines",
  19. BARCHART: "bars",
  20. POINTCHART: "points",
  21. PIECHART: "pie",
  22. MAP: "map"
  23. }
  24. };
  25. ko.bindingHandlers.pieChart = {
  26. update: function (element, valueAccessor) {
  27. var _options = valueAccessor();
  28. var _data = _options.transformer(_options.data);
  29. $(element).css("marginLeft", "auto");
  30. $(element).css("marginRight", "auto");
  31. if (typeof _options.maxWidth != "undefined") {
  32. var _max = _options.maxWidth * 1;
  33. $(element).width(Math.min($(element).parent().width(), _max));
  34. }
  35. if ($(element).find("svg").length > 0 && _data.length == 0) {
  36. $(element).find("svg").empty();
  37. }
  38. if (_data.length > 0 && isNaN(_data[0].value)) {
  39. _data = [];
  40. $(element).find("svg").empty();
  41. }
  42. if ($(element).is(":visible")) {
  43. nv.addGraph(function () {
  44. var _chart = nv.models.growingPieChart()
  45. .x(function (d) {
  46. return d.label
  47. })
  48. .y(function (d) {
  49. return d.value
  50. })
  51. .height($(element).width())
  52. .showLabels(true).showLegend(false);
  53. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  54. _d3.datum(_data)
  55. .transition().duration(150)
  56. .each("end", _options.onComplete != null ? _options.onComplete : void(0))
  57. .call(_chart);
  58. if (_options.fqs) {
  59. $.each(_options.fqs(), function (cnt, item) {
  60. if (item.field() == _options.field()) {
  61. _chart.selectSlices($.map(item.filter(), function (it) {
  62. return it.value();
  63. }));
  64. }
  65. });
  66. }
  67. nv.utils.windowResize(_chart.update);
  68. $(element).height($(element).width());
  69. $(element).parents(".card-widget").on("resize", function () {
  70. if (typeof _options.maxWidth != "undefined") {
  71. var _max = _options.maxWidth * 1;
  72. $(element).width(Math.min($(element).parent().width(), _max));
  73. }
  74. $(element).height($(element).width());
  75. _chart.update();
  76. });
  77. return _chart;
  78. }, function () {
  79. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  80. _d3.selectAll(".nv-slice").on("click",
  81. function (d, i) {
  82. if (typeof _options.onClick != "undefined") {
  83. chartsUpdatingState();
  84. _options.onClick(d);
  85. }
  86. });
  87. });
  88. }
  89. }
  90. };
  91. ko.bindingHandlers.barChart = {
  92. update: function (element, valueAccessor) {
  93. barChartBuilder(element, valueAccessor(), false);
  94. }
  95. };
  96. ko.bindingHandlers.timelineChart = {
  97. update: function (element, valueAccessor) {
  98. barChartBuilder(element, valueAccessor(), true);
  99. }
  100. };
  101. ko.bindingHandlers.lineChart = {
  102. update: function (element, valueAccessor) {
  103. lineChartBuilder(element, valueAccessor());
  104. }
  105. };
  106. ko.bindingHandlers.leafletMapChart = {
  107. update: function (element, valueAccessor) {
  108. var _options = valueAccessor();
  109. var _data = _options.transformer(valueAccessor().datum);
  110. function getMapBounds(lats, lngs) {
  111. lats = lats.sort();
  112. lngs = lngs.sort();
  113. return [
  114. [lats[lats.length - 1], lngs[lngs.length - 1]], // north-east
  115. [lats[0], lngs[0]] // south-west
  116. ]
  117. }
  118. if ($(element).data("map") != null) {
  119. try {
  120. $(element).data("map").remove();
  121. }
  122. catch (err) {
  123. if (typeof console != "undefined") {
  124. console.error(err);
  125. }
  126. }
  127. }
  128. var _lats = [];
  129. _data.forEach(function (item) {
  130. if (item.lat != null && $.isNumeric(item.lat)) {
  131. _lats.push(item.lat);
  132. }
  133. });
  134. var _lngs = [];
  135. _data.forEach(function (item) {
  136. if (item.lng != null && $.isNumeric(item.lng)) {
  137. _lngs.push(item.lng);
  138. }
  139. });
  140. if (_options.height != null){
  141. $(element).height(_options.height*1);
  142. }
  143. else {
  144. if ($(element).parents(".tab-pane").length > 0) {
  145. $(element).height($(element).parents(".tab-pane").height() - 100);
  146. }
  147. else {
  148. $(element).height(300);
  149. }
  150. }
  151. if (((_options.visible != null && _options.visible) || _options.visible == null || typeof _options == "undefined") && _data.length > 0) {
  152. $(element).show();
  153. }
  154. else {
  155. $(element).hide();
  156. }
  157. var _map = null;
  158. if (element._map != null) {
  159. element._leaflet = false;
  160. element._map.remove();
  161. }
  162. if (_lats.length > 0 && _lngs.length > 0) {
  163. try {
  164. if (_map == null) {
  165. _map = L.map(element);
  166. L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  167. attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  168. }).addTo(_map);
  169. }
  170. _map.fitBounds(getMapBounds(_lats, _lngs));
  171. _data.forEach(function (item) {
  172. if (item.lng != null && item.lat != null) {
  173. var _addMarker = false;
  174. try {
  175. var _latLngObj = L.latLng(item.lat, item.lng);
  176. _addMarker = true;
  177. }
  178. catch (e) {
  179. if (typeof console != "undefined") {
  180. console.error(e);
  181. }
  182. }
  183. if (_addMarker) {
  184. var _marker = L.marker([item.lat, item.lng]).addTo(_map);
  185. if (item.label != null) {
  186. _marker.bindPopup(item.label);
  187. }
  188. }
  189. }
  190. });
  191. if (_options.onComplete != null) {
  192. _options.onComplete();
  193. }
  194. }
  195. catch (err) {
  196. $.jHueNotify.error(err.message);
  197. }
  198. }
  199. element._map = _map;
  200. }
  201. };
  202. ko.bindingHandlers.mapChart = {
  203. render: function (element, valueAccessor) {
  204. var _options = valueAccessor();
  205. $(element).empty();
  206. $(element).css("position", "relative");
  207. $(element).css("marginLeft", "auto");
  208. $(element).css("marginRight", "auto");
  209. if (typeof _options.maxWidth != "undefined") {
  210. var _max = _options.maxWidth * 1;
  211. $(element).width(Math.min($(element).parent().width(), _max));
  212. }
  213. $(element).height($(element).width() / 2.23);
  214. var _scope = typeof _options.data.scope != "undefined" ? String(_options.data.scope) : "world";
  215. var _data = _options.transformer(_options.data);
  216. var _maxWeight = 0;
  217. $(_data).each(function (cnt, item) {
  218. if (item.value > _maxWeight) _maxWeight = item.value;
  219. });
  220. var _chunk = _maxWeight / _data.length;
  221. var _mapdata = {};
  222. var _maphovers = {};
  223. var _fills = {};
  224. var _noncountries = [];
  225. if (_options.isScale) {
  226. _fills["defaultFill"] = HueColors.WHITE;
  227. var _colors = HueColors.scale(HueColors.LIGHT_BLUE, HueColors.DARK_BLUE, _data.length);
  228. $(_colors).each(function (cnt, item) {
  229. _fills["fill_" + cnt] = item;
  230. });
  231. $(_data).each(function (cnt, item) {
  232. var _place = item.label.toUpperCase();
  233. if (_place != null) {
  234. _mapdata[_place] = {
  235. fillKey: "fill_" + (Math.floor(item.value / _chunk) - 1),
  236. id: _place,
  237. cat: item.obj.cat,
  238. value: item.obj.value,
  239. selected: item.obj.selected
  240. };
  241. _maphovers[_place] = item.value;
  242. }
  243. else {
  244. _noncountries.push(item);
  245. }
  246. });
  247. }
  248. else {
  249. _fills["defaultFill"] = HueColors.LIGHT_BLUE;
  250. _fills["selected"] = HueColors.DARK_BLUE;
  251. $(_data).each(function (cnt, item) {
  252. var _place = item.label.toUpperCase();
  253. if (_place != null) {
  254. _mapdata[_place] = {
  255. fillKey: "selected",
  256. id: _place,
  257. cat: item.obj.cat,
  258. value: item.obj.value,
  259. selected: item.obj.selected
  260. };
  261. _maphovers[_place] = item.value;
  262. }
  263. else {
  264. _noncountries.push(item);
  265. }
  266. });
  267. }
  268. var _map = null;
  269. function createDatamap(element, options, fills, mapData, nonCountries, mapHovers) {
  270. _map = new Datamap({
  271. element: element,
  272. fills: fills,
  273. scope: _scope,
  274. data: mapData,
  275. onClick: function (data) {
  276. if (typeof options.onClick != "undefined") {
  277. chartsUpdatingState();
  278. options.onClick(data);
  279. }
  280. },
  281. done: function (datamap) {
  282. var _bubbles = [];
  283. if (options.enableGeocoding) {
  284. $(nonCountries).each(function (cnt, item) {
  285. HueGeo.getCityCoordinates(item.label, function (lat, lng) {
  286. _bubbles.push({
  287. fillKey: "selected",
  288. label: item.label,
  289. value: item.value,
  290. radius: 4,
  291. latitude: lat,
  292. longitude: lng
  293. });
  294. _map.bubbles(_bubbles, {
  295. popupTemplate: function (geo, data) {
  296. return '<div class="hoverinfo" style="text-align: center"><strong>' + data.label + '</strong><br/>' + item.value + '</div>'
  297. }
  298. });
  299. });
  300. });
  301. }
  302. },
  303. geographyConfig: {
  304. hideAntarctica: true,
  305. borderWidth: 1,
  306. borderColor: HueColors.DARK_BLUE,
  307. highlightOnHover: true,
  308. highlightFillColor: HueColors.DARK_BLUE,
  309. highlightBorderColor: HueColors.BLUE,
  310. selectedFillColor: HueColors.DARKER_BLUE,
  311. selectedBorderColor: HueColors.DARKER_BLUE,
  312. popupTemplate: function (geography, data) {
  313. var _hover = '';
  314. if (data != null) {
  315. _hover = '<br/>' + mapHovers[data.id];
  316. }
  317. return '<div class="hoverinfo" style="text-align: center"><strong>' + geography.properties.name + '</strong>' + _hover + '</div>'
  318. }
  319. }
  320. });
  321. if (options.onComplete != null) {
  322. options.onComplete();
  323. }
  324. }
  325. createDatamap(element, _options, _fills, _mapdata, _noncountries, _maphovers)
  326. $(element).parents(".card-widget").one("resize", function () {
  327. ko.bindingHandlers.mapChart.render(element, valueAccessor);
  328. });
  329. },
  330. init: function (element, valueAccessor) {
  331. ko.bindingHandlers.mapChart.render(element, valueAccessor)
  332. },
  333. update: function (element, valueAccessor) {
  334. ko.bindingHandlers.mapChart.render(element, valueAccessor);
  335. }
  336. };
  337. function lineChartBuilder(element, options) {
  338. var _datum = options.transformer(options.datum);
  339. $(element).height(300);
  340. if ($(element).find("svg").length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
  341. $(element).find("svg").empty();
  342. }
  343. if (_datum.length > 0 && _datum[0].values.length > 0 && (isNaN(_datum[0].values[0].x) || isNaN(_datum[0].values[0].y))) {
  344. _datum = [];
  345. $(element).find("svg").empty();
  346. }
  347. if ($(element).is(":visible")) {
  348. nv.addGraph(function () {
  349. var _chart = nv.models.lineWithBrushChart();
  350. if (_datum.length > 0 && _datum[0].values.length > 10) {
  351. _chart.enableSelection();
  352. }
  353. if (options.showControls != null) {
  354. _chart.showControls(false);
  355. }
  356. _chart.onSelectRange(function (from, to) {
  357. chartsUpdatingState();
  358. options.onSelectRange(from, to);
  359. });
  360. _chart.xAxis.showMaxMin(false);
  361. _chart.yAxis
  362. .tickFormat(d3.format(",0f"));
  363. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  364. _d3.datum(_datum)
  365. .transition().duration(150)
  366. .each("end", options.onComplete != null ? options.onComplete : void(0))
  367. .call(_chart);
  368. nv.utils.windowResize(_chart.update);
  369. return _chart;
  370. }, function () {
  371. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  372. _d3.selectAll(".nv-line").on("click",
  373. function (d, i) {
  374. if (typeof options.onClick != "undefined") {
  375. chartsUpdatingState();
  376. options.onClick(d);
  377. }
  378. });
  379. });
  380. }
  381. }
  382. function barChartBuilder(element, options, isTimeline) {
  383. var _datum = options.transformer(options.datum);
  384. $(element).height(300);
  385. var _isPivot = options.isPivot != null ? options.isPivot : false;
  386. var _hideSelection = options.hideSelection != null ? options.hideSelection : false;
  387. if ($(element).find("svg").length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
  388. $(element).find("svg").empty();
  389. }
  390. if (_datum.length > 0 && _datum[0].values.length > 0 && isNaN(_datum[0].values[0].y)) {
  391. _datum = [];
  392. $(element).find("svg").empty();
  393. }
  394. if ($(element).is(":visible")) {
  395. nv.addGraph(function () {
  396. var _chart;
  397. var insertLinebreaks = function (d) {
  398. var _el = d3.select(this);
  399. var _mom = moment(d);
  400. if (_mom != null && _mom.isValid()) {
  401. var _words = _mom.format("HH:mm:ss YYYY-MM-DD").split(" ");
  402. _el.text("");
  403. for (var i = 0; i < _words.length; i++) {
  404. var tspan = _el.append("tspan").text(_words[i]);
  405. if (i > 0) {
  406. tspan.attr("x", 0).attr("dy", "15");
  407. }
  408. }
  409. }
  410. };
  411. if (isTimeline) {
  412. if ($(element).find("svg").length > 0 && $(element).find(".nv-discreteBarWithAxes").length > 0) {
  413. $(element).find("svg").empty();
  414. }
  415. _chart = nv.models.multiBarWithBrushChart();
  416. if (_datum.length > 0 && _datum[0].values.length > 10) {
  417. _chart.enableSelection();
  418. }
  419. _chart.onSelectRange(function (from, to) {
  420. chartsUpdatingState();
  421. options.onSelectRange(from, to);
  422. });
  423. _chart.xAxis.tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
  424. _chart.multibar.hideable(true);
  425. _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
  426. _chart.onStateChange(options.onStateChange);
  427. _chart.onChartUpdate(function () {
  428. _d3.selectAll("g.nv-x.nv-axis g text").each(insertLinebreaks);
  429. });
  430. }
  431. else {
  432. var _isDiscrete = false;
  433. for (var j = 0; j < _datum.length; j++) {
  434. for (var i = 0; i < _datum[j].values.length; i++) {
  435. if (isNaN(_datum[j].values[i].x * 1)) {
  436. _isDiscrete = true;
  437. break;
  438. }
  439. }
  440. }
  441. if (_isDiscrete && !_isPivot) {
  442. if ($(element).find("svg").length > 0 && $(element).find(".nv-multiBarWithLegend").length > 0) {
  443. $(element).find("svg").empty();
  444. }
  445. _chart = nv.models.growingDiscreteBarChart()
  446. .x(function (d) {
  447. return d.x
  448. })
  449. .y(function (d) {
  450. return d.y
  451. })
  452. .staggerLabels(true);
  453. }
  454. else {
  455. if ($(element).find("svg").length > 0 && $(element).find(".nv-discreteBarWithAxes").length > 0) {
  456. $(element).find("svg").empty();
  457. }
  458. _chart = nv.models.multiBarWithBrushChart();
  459. if (_datum.length > 0 && _datum[0].values.length > 10) {
  460. _chart.enableSelection();
  461. }
  462. if (_isPivot || _hideSelection) {
  463. _chart.hideSelection();
  464. }
  465. else {
  466. _chart.xAxis.showMaxMin(false).tickFormat(d3.format(",0f"));
  467. }
  468. _chart.multibar.hideable(true);
  469. _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
  470. _chart.onStateChange(options.onStateChange);
  471. _chart.onSelectRange(function (from, to) {
  472. chartsUpdatingState();
  473. options.onSelectRange(from, to);
  474. });
  475. }
  476. }
  477. if ($(element).width() < 300 && typeof _chart.showLegend != "undefined"){
  478. _chart.showLegend(false);
  479. }
  480. _chart.transitionDuration(0);
  481. _chart.yAxis
  482. .tickFormat(d3.format(",0f"));
  483. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  484. _d3.datum(_datum)
  485. .transition().duration(150)
  486. .each("end", function () {
  487. if (options.onComplete != null) {
  488. options.onComplete();
  489. }
  490. if (isTimeline) {
  491. _d3.selectAll("g.nv-x.nv-axis g text").each(insertLinebreaks);
  492. }
  493. }).call(_chart);
  494. if (_chart.selectBars) {
  495. $.each(options.fqs(), function (cnt, item) {
  496. if (item.field() == options.field) {
  497. _chart.selectBars($.map(item.filter(), function (it) {
  498. return it.value();
  499. }));
  500. }
  501. if (item.field().indexOf(":") > -1) {
  502. _chart.selectBars({
  503. field: item.field(),
  504. selected: $.map(item.filter(), function (it) {
  505. return it.value();
  506. })
  507. });
  508. }
  509. });
  510. }
  511. nv.utils.windowResize(_chart.update);
  512. return _chart;
  513. }, function () {
  514. var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  515. _d3.selectAll(".nv-bar").on("click",
  516. function (d, i) {
  517. if (typeof options.onClick != "undefined") {
  518. chartsUpdatingState();
  519. options.onClick(d);
  520. }
  521. });
  522. });
  523. }
  524. }
  525. ko.bindingHandlers.partitionChart = {
  526. update: function (element, valueAccessor) {
  527. var MIN_HEIGHT_FOR_TOOLTIP = 24;
  528. var _options = valueAccessor();
  529. var _data = _options.transformer(valueAccessor().datum);
  530. var _w = $(element).width(),
  531. _h = 300,
  532. _x = d3.scale.linear().range([0, _w]),
  533. _y = d3.scale.linear().range([0, _h]);
  534. var _tip = d3.tip()
  535. .attr("class", "d3-tip")
  536. .html(function (d) {
  537. if (d.depth == 0) {
  538. return _options.tooltip || "";
  539. }
  540. else if (d.depth > 0 && d.depth < 2) {
  541. return d.name + " (" + d.value + ")";
  542. }
  543. else {
  544. return d.parent.name + " - " + d.name + " (" + d.value + ")";
  545. }
  546. })
  547. .offset([-12, 0])
  548. var _svg = d3.select(element).append("svg:svg");
  549. _svg.call(_tip);
  550. var _vis = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
  551. _vis.attr("class", "partitionChart")
  552. .style("width", _w + "px")
  553. .style("height", _h + "px")
  554. .append("svg:svg")
  555. .attr("width", _w)
  556. .attr("height", _h);
  557. var _partition = d3.layout.partition()
  558. .value(function (d) {
  559. return d.size;
  560. });
  561. var g = _vis.selectAll("g")
  562. .data(_partition.nodes(_data))
  563. .enter().append("svg:g")
  564. .attr("transform", function (d) {
  565. return "translate(" + _x(d.y) + "," + _y(d.x) + ")";
  566. })
  567. .on("mouseover", function (d, i) {
  568. if (element.querySelectorAll("rect")[i].getBBox().height < MIN_HEIGHT_FOR_TOOLTIP || d.depth == 0) {
  569. _tip.attr("class", "d3-tip").show(d);
  570. }
  571. if (this.__data__.parent == undefined) return;
  572. d3.select(this).select("rect").classed("mouseover", true)
  573. })
  574. .on("mouseout", function (d, i) {
  575. if (element.querySelectorAll("rect")[i].getBBox().height < MIN_HEIGHT_FOR_TOOLTIP || d.depth == 0) {
  576. _tip.attr("class", "d3-tip").show(d);
  577. _tip.hide();
  578. }
  579. d3.select(this).select("rect").classed("mouseover", false)
  580. });
  581. if (typeof _options.zoomable == "undefined" || _options.zoomable) {
  582. g.on("click", click)
  583. .on("dblclick", function (d, i) {
  584. if (typeof _options.onClick != "undefined" && d.depth > 0) {
  585. chartsUpdatingState();
  586. _options.onClick(d);
  587. }
  588. });
  589. }
  590. else {
  591. g.on("click", function (d, i) {
  592. if (typeof _options.onClick != "undefined" && d.depth > 0) {
  593. chartsUpdatingState();
  594. _options.onClick(d);
  595. }
  596. });
  597. }
  598. var _kx = _w / _data.dx,
  599. _ky = _h / 1;
  600. var _colors = HueColors.scale(HueColors.DARK_BLUE, HueColors.BLUE, 5)
  601. g.append("svg:rect")
  602. .attr("width", _data.dy * _kx)
  603. .attr("height", function (d) {
  604. return d.dx * _ky;
  605. })
  606. .attr("class", function (d) {
  607. return d.children ? "parent" : "child";
  608. })
  609. .attr("stroke", function (d) {
  610. return HueColors.DARK_BLUE;
  611. })
  612. .attr("fill", function (d, i) {
  613. var _fill = _colors[d.depth] || _colors[_colors.length - 1];
  614. if (d.obj && _options.fqs) {
  615. $.each(_options.fqs(), function (cnt, item) {
  616. $.each(item.filter(), function (icnt, filter) {
  617. if (filter.value() == d.obj.fq_values) {
  618. _fill = HueColors.ORANGE;
  619. }
  620. });
  621. });
  622. }
  623. return _fill;
  624. });
  625. g.append("svg:text")
  626. .attr("transform", transform)
  627. .attr("dy", ".35em")
  628. .style("opacity", function (d) {
  629. return d.dx * _ky > 12 ? 1 : 0;
  630. })
  631. .text(function (d) {
  632. if (d.depth < 2) {
  633. return d.name + " (" + d.value + ")";
  634. }
  635. else {
  636. return d.parent.name + " - " + d.name + " (" + d.value + ")";
  637. }
  638. });
  639. d3.select(window)
  640. .on("click", function () {
  641. click(_data);
  642. });
  643. function click(d) {
  644. _tip.hide();
  645. if (!d.children) return;
  646. _kx = (d.y ? _w - 40 : _w) / (1 - d.y);
  647. _ky = _h / d.dx;
  648. _x.domain([d.y, 1]).range([d.y ? 40 : 0, _w]);
  649. _y.domain([d.x, d.x + d.dx]);
  650. var t = g.transition()
  651. .duration(d3.event.altKey ? 7500 : 750)
  652. .attr("transform", function (d) {
  653. return "translate(" + _x(d.y) + "," + _y(d.x) + ")";
  654. });
  655. t.select("rect")
  656. .attr("width", d.dy * _kx)
  657. .attr("height", function (d) {
  658. return d.dx * _ky;
  659. });
  660. t.select("text")
  661. .attr("transform", transform)
  662. .style("opacity", function (d) {
  663. return d.dx * _ky > 12 ? 1 : 0;
  664. });
  665. d3.event.stopPropagation();
  666. }
  667. function transform(d) {
  668. return "translate(8," + d.dx * _ky / 2 + ")";
  669. }
  670. }
  671. };
  672. function chartsUpdatingState() {
  673. $(document).find("svg").css("opacity", "0.5");
  674. }
  675. var tipBuilder = function () {
  676. var direction = d3_tip_direction,
  677. offset = d3_tip_offset,
  678. html = d3_tip_html,
  679. node = initNode(),
  680. svg = null,
  681. point = null,
  682. target = null
  683. function tip(vis) {
  684. svg = getSVGNode(vis)
  685. point = svg.createSVGPoint()
  686. document.body.appendChild(node)
  687. }
  688. // Public - show the tooltip on the screen
  689. //
  690. // Returns a tip
  691. tip.show = function () {
  692. var args = Array.prototype.slice.call(arguments)
  693. if (args[args.length - 1] instanceof SVGElement) target = args.pop()
  694. var content = html.apply(this, args),
  695. poffset = offset.apply(this, args),
  696. dir = direction.apply(this, args),
  697. nodel = d3.select(node), i = 0,
  698. coords
  699. nodel.html(content)
  700. .style({ opacity: 1, "pointer-events": "all" })
  701. while (i--) nodel.classed(directions[i], false)
  702. coords = direction_callbacks.get(dir).apply(this)
  703. nodel.classed(dir, true).style({
  704. top: (coords.top + poffset[0]) + "px",
  705. left: (coords.left + poffset[1]) + "px"
  706. })
  707. return tip
  708. }
  709. // Public - hide the tooltip
  710. //
  711. // Returns a tip
  712. tip.hide = function () {
  713. nodel = d3.select(node)
  714. nodel.style({ opacity: 0, "pointer-events": "none" })
  715. return tip
  716. }
  717. // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
  718. //
  719. // n - name of the attribute
  720. // v - value of the attribute
  721. //
  722. // Returns tip or attribute value
  723. tip.attr = function (n, v) {
  724. if (arguments.length < 2 && typeof n === "string") {
  725. return d3.select(node).attr(n)
  726. } else {
  727. var args = Array.prototype.slice.call(arguments)
  728. d3.selection.prototype.attr.apply(d3.select(node), args)
  729. }
  730. return tip
  731. }
  732. // Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
  733. //
  734. // n - name of the property
  735. // v - value of the property
  736. //
  737. // Returns tip or style property value
  738. tip.style = function (n, v) {
  739. if (arguments.length < 2 && typeof n === "string") {
  740. return d3.select(node).style(n)
  741. } else {
  742. var args = Array.prototype.slice.call(arguments)
  743. d3.selection.prototype.style.apply(d3.select(node), args)
  744. }
  745. return tip
  746. }
  747. // Public: Set or get the direction of the tooltip
  748. //
  749. // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
  750. // sw(southwest), ne(northeast) or se(southeast)
  751. //
  752. // Returns tip or direction
  753. tip.direction = function (v) {
  754. if (!arguments.length) return direction
  755. direction = v == null ? v : d3.functor(v)
  756. return tip
  757. }
  758. // Public: Sets or gets the offset of the tip
  759. //
  760. // v - Array of [x, y] offset
  761. //
  762. // Returns offset or
  763. tip.offset = function (v) {
  764. if (!arguments.length) return offset
  765. offset = v == null ? v : d3.functor(v)
  766. return tip
  767. }
  768. // Public: sets or gets the html value of the tooltip
  769. //
  770. // v - String value of the tip
  771. //
  772. // Returns html value or tip
  773. tip.html = function (v) {
  774. if (!arguments.length) return html
  775. html = v == null ? v : d3.functor(v)
  776. return tip
  777. }
  778. function d3_tip_direction() {
  779. return "n"
  780. }
  781. function d3_tip_offset() {
  782. return [0, 0]
  783. }
  784. function d3_tip_html() {
  785. return " "
  786. }
  787. var direction_callbacks = d3.map({
  788. n: direction_n,
  789. s: direction_s,
  790. e: direction_e,
  791. w: direction_w,
  792. nw: direction_nw,
  793. ne: direction_ne,
  794. sw: direction_sw,
  795. se: direction_se
  796. }),
  797. directions = direction_callbacks.keys()
  798. function direction_n() {
  799. var bbox = getScreenBBox()
  800. return {
  801. top: bbox.n.y - node.offsetHeight,
  802. left: bbox.n.x - node.offsetWidth / 2
  803. }
  804. }
  805. function direction_s() {
  806. var bbox = getScreenBBox()
  807. return {
  808. top: bbox.s.y,
  809. left: bbox.s.x - node.offsetWidth / 2
  810. }
  811. }
  812. function direction_e() {
  813. var bbox = getScreenBBox()
  814. return {
  815. top: bbox.e.y - node.offsetHeight / 2,
  816. left: bbox.e.x
  817. }
  818. }
  819. function direction_w() {
  820. var bbox = getScreenBBox()
  821. return {
  822. top: bbox.w.y - node.offsetHeight / 2,
  823. left: bbox.w.x - node.offsetWidth
  824. }
  825. }
  826. function direction_nw() {
  827. var bbox = getScreenBBox()
  828. return {
  829. top: bbox.nw.y - node.offsetHeight,
  830. left: bbox.nw.x - node.offsetWidth
  831. }
  832. }
  833. function direction_ne() {
  834. var bbox = getScreenBBox()
  835. return {
  836. top: bbox.ne.y - node.offsetHeight,
  837. left: bbox.ne.x
  838. }
  839. }
  840. function direction_sw() {
  841. var bbox = getScreenBBox()
  842. return {
  843. top: bbox.sw.y,
  844. left: bbox.sw.x - node.offsetWidth
  845. }
  846. }
  847. function direction_se() {
  848. var bbox = getScreenBBox()
  849. return {
  850. top: bbox.se.y,
  851. left: bbox.e.x
  852. }
  853. }
  854. function initNode() {
  855. var node = d3.select(document.createElement("div"))
  856. node.style({
  857. position: "absolute",
  858. opacity: 0,
  859. pointerEvents: "none",
  860. boxSizing: "border-box"
  861. })
  862. return node.node()
  863. }
  864. function getSVGNode(el) {
  865. el = el.node()
  866. if (el != null) {
  867. if (el.tagName != null && el.tagName.toLowerCase() == "svg")
  868. return el
  869. return el.ownerSVGElement
  870. }
  871. }
  872. // Private - gets the screen coordinates of a shape
  873. //
  874. // Given a shape on the screen, will return an SVGPoint for the directions
  875. // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
  876. // sw(southwest).
  877. //
  878. // +-+-+
  879. // | |
  880. // + +
  881. // | |
  882. // +-+-+
  883. //
  884. // Returns an Object {n, s, e, w, nw, sw, ne, se}
  885. function getScreenBBox() {
  886. var targetel = target || d3.event.target,
  887. bbox = {},
  888. matrix = targetel.getScreenCTM(),
  889. tbbox = targetel.getBBox(),
  890. width = tbbox.width,
  891. height = tbbox.height,
  892. x = tbbox.x,
  893. y = tbbox.y,
  894. scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
  895. scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  896. point.x = x + scrollLeft
  897. point.y = y + scrollTop
  898. bbox.nw = point.matrixTransform(matrix)
  899. point.x += width
  900. bbox.ne = point.matrixTransform(matrix)
  901. point.y += height
  902. bbox.se = point.matrixTransform(matrix)
  903. point.x -= width
  904. bbox.sw = point.matrixTransform(matrix)
  905. point.y -= height / 2
  906. bbox.w = point.matrixTransform(matrix)
  907. point.x += width
  908. bbox.e = point.matrixTransform(matrix)
  909. point.x -= width / 2
  910. point.y -= height / 2
  911. bbox.n = point.matrixTransform(matrix)
  912. point.y += height
  913. bbox.s = point.matrixTransform(matrix)
  914. return bbox
  915. }
  916. return tip
  917. };
  918. d3.tip = tipBuilder;