skill_wheel.js.tpl 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. <script>
  2. /* Skill wheel settings */
  3. var url = '{{ url }}';
  4. var skill_to_load_from_get = '{{ skill_id_to_load }}';
  5. var my_domain = [1,2,3,4,5,6,7,8,9];
  6. var col = 9;
  7. var color_patterns = [];
  8. color_patterns[1] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
  9. color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Purples[col]);
  10. //color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[6]);
  11. color_patterns[3] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
  12. color_patterns[4] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Reds[col]);
  13. color_patterns[5] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Oranges[col]);
  14. color_patterns[6] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrBr[col]);
  15. color_patterns[7] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGn[col]);
  16. color_patterns[8] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGnBu[col]);
  17. color_patterns[9] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.GnBu[col]);
  18. color_patterns[10] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuGn[col]);
  19. color_patterns[11] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBuGn[col]);
  20. color_patterns[12] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBu[col]);
  21. color_patterns[13] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuPu[col]);
  22. color_patterns[14] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.RdPu[col]);
  23. color_patterns[15] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuRd[col]);
  24. color_patterns[16] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.OrRd[col]);
  25. color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrRd[col]);
  26. color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greys[col]);
  27. //var normal_fill = d3.scale.category10().domain(my_domain);
  28. var main_depth = 1000;
  29. var colors1 = $.xcolor.analogous('#da0'); //8 colors
  30. var colors = colors1;
  31. // Generating array of colors
  32. color_loops = 4;
  33. for (i= 0; i < color_loops; i++) {
  34. last_color = colors[colors.length-1].getHex();
  35. glue_color = $.xcolor.complementary(last_color);
  36. //colors.push(glue_color.getHex());
  37. colors2 = $.xcolor.analogous(glue_color);
  38. colors = $.merge(colors, colors2);
  39. }
  40. /* Interpolate the scales! */
  41. function arcTween(d, arc, x, y, r) {
  42. var my = maxY(d),
  43. xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
  44. yd = d3.interpolate(y.domain(), [d.y, my]),
  45. yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
  46. return function(d) {
  47. return function(t) {
  48. x.domain(xd(t));
  49. y.domain(yd(t)).range(yr(t));
  50. return arc(d);
  51. };
  52. };
  53. }
  54. /* */
  55. function maxY(d) {
  56. return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
  57. }
  58. /* Use a formula for contrasting colour
  59. http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
  60. */
  61. function brightness(rgb) {
  62. return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
  63. }
  64. /* Returns whether p is parent of c */
  65. function isParentOf(p, c) {
  66. if (p === c) return true;
  67. if (p.children) {
  68. return p.children.some(function(d) {
  69. return isParentOf(d, c);
  70. });
  71. }
  72. return false;
  73. }
  74. function get_color(d) {
  75. depth = d.depth;
  76. if (d.family_id) {
  77. /*var p = color_patterns[d.family_id];
  78. color = p(depth -1 + d.counter);
  79. d.color = color;*/
  80. if (depth > 1) {
  81. family1 = colors[d.family_id];
  82. family2 = colors[d.family_id + 2];
  83. position = d.depth*d.counter;
  84. //part_color = $.xcolor.gradientlevel(family1, family2, position, 100);
  85. part_color = $.xcolor.lighten(family1, position, 15);
  86. color = part_color.getHex();
  87. //console.log(d.depth + " - " + d.name + " + "+ color+ "+ " +d.counter);
  88. } else {
  89. color = colors[d.family_id];
  90. }
  91. return color;
  92. }
  93. color = '#fefefe';
  94. return color; //missing colors
  95. }
  96. /*
  97. gray tones for all skills that have no particular property ("Basic skills wheel" view)
  98. yellow tones for skills that are provided by courses in Chamilo ("Teachable skills" view)
  99. bright blue tones for personal skills already acquired by the student currently looking at the weel ("My skills" view)
  100. dark blue tones for skills already acquired by a series of students, when looking at the will in the "Owned skills" view.
  101. bright green for skills looked for by a HR director ("Profile search" view)
  102. dark green for skills most searched for, summed up from the different saved searches from HR directors ("Most wanted skills")
  103. bright red for missing skills, in the "Required skills" view for a student when looking at the "Most wanted skills" (or later, when we will have developed that, for the "Matching position" view)
  104. */
  105. function set_skill_style(d, attribute) {
  106. //Nice rainbow colors
  107. return_fill = get_color(d);
  108. /*var p = color_patterns[18];
  109. color = p(depth -1 + d.counter);
  110. return_fill = d.color = color;*/
  111. //return_fill = 'grey';
  112. return_stroke = 'black';
  113. //If user achieved that skill
  114. if (d.achieved) {
  115. return_fill = '#3A87AD';
  116. //return_stroke = '#FCD23A';
  117. }
  118. //darkblue
  119. //If the skill has a gradebook attached
  120. if (d.skill_has_gradebook) {
  121. return_fill = '#F89406';
  122. //return_stroke = 'grey';
  123. }
  124. switch (attribute) {
  125. case 'fill':
  126. //In order to the text could identify the background
  127. d.color = return_fill;
  128. return return_fill;
  129. break;
  130. case 'stroke':
  131. return return_stroke;
  132. break;
  133. }
  134. }
  135. function click_partition(d, path, text, icon, arc, x, y, r, p) {
  136. if (d.depth == 2) {
  137. /*main_depth +=1;
  138. load_nodes(main_depth);*/
  139. }
  140. var duration = 1000;
  141. path.transition()
  142. .duration(duration)
  143. .attrTween("d", arcTween(d, arc, x, y, r));
  144. /* Updating text position */
  145. // Somewhat of a hack as we rely on arcTween updating the scales.
  146. text.style("visibility", function(e) {
  147. return isParentOf(d, e) ? null : d3.select(this).style("visibility");
  148. })
  149. .transition().duration(duration)
  150. .attrTween("text-anchor", function(d) {
  151. return function() {
  152. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  153. };
  154. })
  155. .attrTween("transform", function(d) {
  156. var multiline = (d.name || "").split(" ").length > 1;
  157. return function() {
  158. var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  159. rotate = angle + (multiline ? -.5 : 0);
  160. return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  161. };
  162. })
  163. .style("fill-opacity", function(e) {
  164. return isParentOf(d, e) ? 1 : 1e-6;
  165. })
  166. .each("end", function(e) {
  167. d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
  168. });
  169. /* Updating icon position */
  170. icon.transition().duration(duration)
  171. .attrTween("text-anchor", function(d) {
  172. return function() {
  173. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  174. };
  175. })
  176. .attrTween("transform", function(d) {
  177. return function() {
  178. var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  179. rotate = angle;
  180. return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  181. };
  182. })
  183. .style("fill-opacity", function(e) {
  184. //return isParentOf(d, e) ? 1 : 1e-6;
  185. })
  186. .each("end", function(e) {
  187. //d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
  188. });
  189. }
  190. function open_popup(skill_id, parent_id) {
  191. //Cleaning selected
  192. $("#gradebook_id").find('option').remove();
  193. $("#parent_id").find('option').remove();
  194. $("#gradebook_holder").find('li').remove();
  195. $("#skill_edit_holder").find('li').remove();
  196. var skill = false;
  197. if (skill_id) {
  198. skill = get_skill_info(skill_id);
  199. }
  200. var parent = false;
  201. if (parent_id) {
  202. parent = get_skill_info(parent_id);
  203. }
  204. if (skill) {
  205. var parent_info = get_skill_info(skill.extra.parent_id);
  206. $("#id").attr('value', skill.id);
  207. $("#name").attr('value', skill.name);
  208. $("#short_code").attr('value', skill.short_code);
  209. $("#description").attr('value', skill.description);
  210. //Filling parent_id
  211. $("#parent_id").append('<option class="selected" value="'+skill.extra.parent_id+'" selected="selected" >');
  212. $("#skill_edit_holder").append('<li class="bit-box">'+parent_info.name+'</li>');
  213. //Filling the gradebook_id
  214. jQuery.each(skill.gradebooks, function(index, data) {
  215. $("#gradebook_id").append('<option class="selected" value="'+data.id+'" selected="selected" >');
  216. $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');
  217. });
  218. $("#dialog-form").dialog({
  219. buttons: {
  220. "{{ "Edit"|get_lang }}" : function() {
  221. var params = $("#add_item").find(':input').serialize();
  222. add_skill(params);
  223. },
  224. /*"{{ "Delete"|get_lang }}" : function() {
  225. },*/
  226. "{{ "CreateChildSkill"|get_lang }}" : function() {
  227. open_popup(0, skill.id);
  228. },
  229. "{{ "AddSkillToProfileSearch"|get_lang }}" : function() {
  230. add_skill_in_profile_list(skill.id, skill.name);
  231. }
  232. },
  233. close: function() {
  234. $("#name").attr('value','');
  235. $("#description").attr('value', '');
  236. //Redirect to the main root
  237. load_nodes(0, main_depth);
  238. }
  239. });
  240. $("#dialog-form").dialog("open");
  241. }
  242. if (parent) {
  243. $("#id").attr('value','');
  244. $("#name").attr('value', '');
  245. $("#short_code").attr('value', '');
  246. $("#description").attr('value', '');
  247. //Filling parent_id
  248. $("#parent_id").append('<option class="selected" value="'+parent.id+'" selected="selected" >');
  249. $("#skill_edit_holder").append('<li class="bit-box">'+parent.name+'</li>');
  250. //Filling the gradebook_id
  251. jQuery.each(parent.gradebooks, function(index, data) {
  252. $("#gradebook_id").append('<option class="selected" value="'+data.id+'" selected="selected" >');
  253. $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');
  254. });
  255. $("#dialog-form").dialog({
  256. buttons: {
  257. "{{ "Save"|get_lang }}" : function() {
  258. var params = $("#add_item").find(':input').serialize();
  259. add_skill(params);
  260. }
  261. },
  262. close: function() {
  263. $("#name").attr('value', '');
  264. $("#description").attr('value', '');
  265. load_nodes(0, main_depth);
  266. }
  267. });
  268. $("#dialog-form").dialog("open");
  269. }
  270. }
  271. /* Handles mouse clicks */
  272. function handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding) {
  273. switch (d3.event.which) {
  274. case 1:
  275. //alert('Left mouse button pressed');
  276. click_partition(d, path, text, icon, arc, x, y, r, padding);
  277. break;
  278. case 2:
  279. //alert('Middle mouse button pressed');
  280. break;
  281. case 3:
  282. open_popup(d.id);
  283. //alert('Right mouse button pressed');
  284. break;
  285. default:
  286. //alert('You have a strange mouse');
  287. }
  288. }
  289. function load_nodes(load_skill_id, main_depth) {
  290. /** Define constants and size of the wheel */
  291. /** Total width of the wheel (also counts for the height) */
  292. var w = 900,
  293. h = w,
  294. r = w / 2,
  295. /** x/y positionning of the center of the wheel */
  296. x = d3.scale.linear().range([0, 2 * Math.PI]),
  297. y = d3.scale.pow().exponent(1.1).domain([0, 1]).range([0, r]),
  298. /** Padding in pixels before the string starts */
  299. padding = 3,
  300. /** Duration of click animations */
  301. duration = 1000,
  302. /** Levels to show */
  303. levels_to_show = 3;
  304. reduce_top = 1;
  305. /* Locate the #div id element */
  306. $("#skill_wheel").remove();
  307. $("#wheel_container").html('');
  308. $("#wheel_container").append('<div id="skill_wheel"></div>');
  309. var div = d3.select("#skill_wheel");
  310. /* Remove the image (make way for the dynamic stuff */
  311. div.select("img").remove();
  312. /* Append an element "svg" to the #vis section */
  313. var vis = div.append("svg")
  314. //.attr("class", "Blues")
  315. .attr("width", w + padding * 2)
  316. .attr("height", h + padding * 2)
  317. .append("g")
  318. .attr("transform", "translate(" + (r + padding) + "," + (r/reduce_top + padding) + ")");
  319. /* ...update translate variables to change coordinates of wheel's center */
  320. /* Add a small label to help the user */
  321. div.append("p")
  322. .attr("id", "intro")
  323. .text("{{ "ClickToZoom"|get_lang }}");
  324. /* Generate the partition layout */
  325. var partition = d3.layout.partition()
  326. .sort(null)
  327. /** Value here seems to be a calculation of the size of the elements
  328. depending on the level of depth they're at. Changing it makes
  329. elements pass over the limits of others... */
  330. //.size([1, 2])
  331. .value(function(d) {
  332. //return 5.8 - d.depth;
  333. //When having more than 4 children seems that the code above doesn't work
  334. return 1;
  335. });
  336. /* Generate an arc which will define the whole wheel context */
  337. var arc = d3.svg.arc()
  338. .startAngle(function(d) {
  339. return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
  340. })
  341. .endAngle(function(d) {
  342. return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
  343. })
  344. .innerRadius(function(d) {
  345. return Math.max(0, d.y ? y(d.y) : d.y);
  346. })
  347. .outerRadius(function(d) {
  348. return Math.max(0, y(d.y + d.dy));
  349. });
  350. load_skill_condition = '';
  351. //First the $_GET value
  352. if (skill_to_load_from_get != 0) {
  353. load_skill_condition = 'skill_id=' + skill_to_load_from_get;
  354. }
  355. //The JS load
  356. if (load_skill_id != 0) {
  357. load_skill_condition = 'skill_id=' + load_skill_id;
  358. }
  359. d3.json("{{ wheel_url }}&main_depth="+main_depth+"&"+load_skill_condition, function(json) {
  360. /** Define the list of nodes based on the JSON */
  361. var nodes = partition.nodes({
  362. children: json
  363. });
  364. /* Setting all skills */
  365. var path = vis.selectAll("path").data(nodes);
  366. /* Setting all texts */
  367. var text = vis.selectAll("text").data(nodes);
  368. /* Setting icons */
  369. var icon = vis.selectAll("icon").data(nodes);
  370. /* Path settings */
  371. path.enter().append("path")
  372. .attr("id", function(d, i) {
  373. return "path-" + i;
  374. })
  375. .attr("d", arc)
  376. .attr("fill-rule", "evenodd")
  377. .attr("class", "skill_partition skill_background")
  378. // .style("fill", colour)
  379. .style("fill", function(d) {
  380. return set_skill_style(d, 'fill');
  381. })
  382. .style("stroke", function(d) {
  383. return set_skill_style(d, 'stroke');
  384. })
  385. .on("mouseover", function(d, i) {
  386. $("#icon-" + i).show();
  387. })
  388. .on("mouseout", function(d, i) {
  389. $("#icon-" + i).hide();
  390. })
  391. .on("mousedown", function(d, i) {
  392. //Handles 2 mouse clicks
  393. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding);
  394. })
  395. .on("click", function(d){
  396. //click_partition(d, path, text, icon, arc, x, y, r, padding);
  397. });
  398. /* End setting skills */
  399. /* Text settings */
  400. var textEnter = text.enter().append("text")
  401. .style("fill-opacity", 1)
  402. .style("fill", function(d) {
  403. return brightness(d3.rgb(d.color)) < 125 ? "#eee" : "#000";
  404. })
  405. .attr("text-anchor", function(d) {
  406. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  407. })
  408. .attr("dy", ".2em")
  409. .attr("transform", function(d) {
  410. /** Get the text details and define the rotation and general position */
  411. var multiline = (d.name || "").split(" ").length > 1,
  412. angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  413. rotate = angle + (multiline ? -.5 : 0);
  414. return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  415. })
  416. .on("mouseover", function(d, i) {
  417. $("#icon-" + i).show();
  418. })
  419. .on("mouseout", function(d, i) {
  420. $("#icon-" + i).hide();
  421. })
  422. .on("mousedown", function(d, i) {
  423. //Handles 2 mouse clicks
  424. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding);
  425. })
  426. .on("click", function(d){
  427. //click_partition(d, path, text, icon, arc, x, y, r, padding);
  428. });
  429. /** Managing text - always maximum two words */
  430. textEnter.append("tspan")
  431. .attr("x", 0)
  432. .text(function(d) {
  433. return d.depth ? d.name.split(" ")[0] : "";
  434. });
  435. textEnter.append("tspan")
  436. .attr("x", 0)
  437. .attr("dy", "1em")
  438. .text(function(d) {
  439. return d.depth ? d.name.split(" ")[1] || "" : "";
  440. });
  441. /* Icon settings */
  442. /*
  443. var icon_click = icon.enter().append("text")
  444. .style("fill-opacity", 1)
  445. .style("fill", function(d) {
  446. //return "#000";
  447. })
  448. .attr("text-anchor", function(d) {
  449. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  450. })
  451. .attr("dy", ".2em")
  452. .attr("transform", function(d) {
  453. ///Get the text details and define the rotation and general position
  454. angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  455. rotate = angle;
  456. return "rotate(" + rotate + ")translate(" + (y(d.y) + padding +80) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  457. })
  458. .on("click", function(d){
  459. open_popup(d);
  460. });
  461. icon_click.append("tspan")
  462. .attr("id", function(d, i) {
  463. return "icon-" + i;
  464. })
  465. .attr("x", 0)
  466. .attr("display", 'none')
  467. .text(function(d) {
  468. //return "Click";
  469. });*/
  470. });
  471. }
  472. /* Skill ajax calls */
  473. function get_skill_info(my_id) {
  474. var skill = false;
  475. $.ajax({
  476. url: url+'&a=get_skill_info&id='+my_id,
  477. async: false,
  478. success: function(json) {
  479. skill = jQuery.parseJSON(json);
  480. return skill;
  481. }
  482. });
  483. return skill;
  484. }
  485. function get_gradebook_info(id) {
  486. var item = false;
  487. $.ajax({
  488. url: url+'&a=get_gradebook_info&id='+id,
  489. async: false,
  490. success: function(json) {
  491. item = jQuery.parseJSON(json);
  492. return item;
  493. }
  494. });
  495. return item;
  496. }
  497. $(document).ready(function() {
  498. });
  499. </script>