skill_wheel.js.html.twig 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. <script>
  2. var SkillWheel = {
  3. currentSkill: null,
  4. getSkillInfo: function(skillId) {
  5. return $.getJSON(
  6. '{{ url }}',
  7. {
  8. a: 'get_skill_info',
  9. id: parseInt(skillId)
  10. }
  11. );
  12. },
  13. showFormSkill: function(skillId) {
  14. skillId = parseInt(skillId);
  15. var formSkill = $('form[name="form"]');
  16. var getSkillInfo = SkillWheel.getSkillInfo(skillId);
  17. $.when(getSkillInfo).done(function(skillInfo) {
  18. SkillWheel.currentSkill = skillInfo;
  19. var getSkillParentInfo = SkillWheel.getSkillInfo(skillInfo.extra.parent_id);
  20. $.when(getSkillParentInfo).done(function(skillParentInfo) {
  21. formSkill.find('p#parent').text(skillParentInfo.name);
  22. });
  23. formSkill.find('p#name').text(skillInfo.name);
  24. if (skillInfo.short_code.length > 0) {
  25. formSkill.find('p#short_code').text(skillInfo.short_code).parent().parent().show();
  26. } else {
  27. formSkill.find('p#short_code').parent().parent().hide();
  28. }
  29. if (skillInfo.description.length > 0) {
  30. formSkill.find('p#description').text(skillInfo.description).parent().parent().show();
  31. } else {
  32. formSkill.find('p#description').parent().parent().hide();
  33. }
  34. if (skillInfo.gradebooks.length > 0) {
  35. formSkill.find('ul#gradebook').empty().parent().parent().show();
  36. $.each(skillInfo.gradebooks, function(index, gradebook) {
  37. $('<li>').text(gradebook.name).appendTo(formSkill.find('ul#gradebook'));
  38. });
  39. } else {
  40. formSkill.find('ul#gradebook').parent().parent().hide();
  41. }
  42. $('#frm-skill').modal('show');
  43. });
  44. }
  45. };
  46. /* Skill wheel settings */
  47. var debug = true;
  48. var url = '{{ url }}';
  49. var skill_to_load_from_get = '{{ skill_id_to_load }}';
  50. //Just in case we want to use it
  51. var main_depth = 4;
  52. var main_parent_id = 0;
  53. // Used to split in two word or not
  54. var max_size_text_length = 20;
  55. /* ColorBrewer settings */
  56. var my_domain = [1,2,3,4,5,6,7,8,9];
  57. var col = 9;
  58. var color_patterns = [];
  59. /*
  60. See colorbrewer documentation
  61. color_patterns[1] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
  62. color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Purples[col]);
  63. color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[6]);
  64. color_patterns[3] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
  65. color_patterns[4] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Reds[col]);
  66. color_patterns[5] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Oranges[col]);
  67. color_patterns[6] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrBr[col]);
  68. color_patterns[7] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGn[col]);
  69. color_patterns[8] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGnBu[col]);
  70. color_patterns[9] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.GnBu[col]);
  71. color_patterns[10] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuGn[col]);
  72. color_patterns[11] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBuGn[col]);
  73. color_patterns[12] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBu[col]);
  74. color_patterns[13] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuPu[col]);
  75. color_patterns[14] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.RdPu[col]);
  76. color_patterns[15] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuRd[col]);
  77. color_patterns[16] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.OrRd[col]);
  78. color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrRd[col]);*/
  79. //Too make the gray tones lighter
  80. col = 3;
  81. color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
  82. //If you want to use the category10()
  83. //var normal_fill = d3.scale.category10().domain(my_domain);
  84. //First 8 colors
  85. var colors = $.xcolor.analogous('#da0'); //8 colors
  86. //How long will be the array of colors?
  87. var color_loops = 4;
  88. // Generating array of colors thanks to the "$.xcolor.analogous" function we can create a rainbow style!
  89. for (i= 0; i < color_loops; i++) {
  90. //Getting the latest color hex of the 8 colors loaded
  91. last_color = colors[colors.length-1].getHex();
  92. //Getting the complementary
  93. glue_color = $.xcolor.complementary(last_color);
  94. //Generating 8 more colors
  95. temp_color_array = $.xcolor.analogous(glue_color);
  96. //Adding the color to the main array
  97. colors = $.merge(colors, temp_color_array);
  98. }
  99. /* The partiton name will have 1 or 2 lines? */
  100. function is_multiline(word) {
  101. if (word) {
  102. if (word.length > max_size_text_length) {
  103. return (word).split(" ").length > 1;
  104. }
  105. }
  106. return false;
  107. }
  108. /* Interpolate the scales! */
  109. function arcTween(d, arc, x, y, r) {
  110. var my = maxY(d),
  111. xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
  112. yd = d3.interpolate(y.domain(), [d.y, my]),
  113. yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
  114. return function(d) {
  115. return function(t) {
  116. x.domain(xd(t));
  117. y.domain(yd(t)).range(yr(t));
  118. return arc(d);
  119. };
  120. };
  121. }
  122. /* Calculate maxY */
  123. function maxY(d) {
  124. return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
  125. }
  126. /* Use a formula for contrasting colour
  127. http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
  128. */
  129. function brightness(rgb) {
  130. return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
  131. }
  132. /* Returns whether p is parent of c */
  133. function isParentOf(p, c) {
  134. if (p === c) return true;
  135. if (p.children) {
  136. return p.children.some(function(d) {
  137. return isParentOf(d, c);
  138. });
  139. }
  140. return false;
  141. }
  142. function get_color(d) {
  143. depth = d.depth;
  144. if (d.family_id) {
  145. /*var p = color_patterns[d.family_id];
  146. color = p(depth -1 + d.counter);
  147. d.color = color;*/
  148. if (depth > 1) {
  149. family1 = colors[d.family_id];
  150. family2 = colors[d.family_id + 2];
  151. position = d.depth*d.counter;
  152. //part_color = $.xcolor.gradientlevel(family1, family2, position, 100);
  153. part_color = $.xcolor.lighten(family1, position, 15);
  154. color = part_color.getHex();
  155. //console.log(d.depth + " - " + d.name + " + "+ color+ "+ " +d.counter);
  156. } else {
  157. color = colors[d.family_id];
  158. }
  159. return color;
  160. }
  161. color = '#fefefe';
  162. return color; //missing colors
  163. }
  164. /*
  165. gray tones for all skills that have no particular property ("Basic skills wheel" view)
  166. yellow tones for skills that are provided by courses in Chamilo ("Teachable skills" view)
  167. bright blue tones for personal skills already acquired by the student currently looking at the weel ("My skills" view)
  168. dark blue tones for skills already acquired by a series of students, when looking at the will in the "Owned skills" view.
  169. bright green for skills looked for by a HR director ("Profile search" view)
  170. dark green for skills most searched for, summed up from the different saved searches from HR directors ("Most wanted skills")
  171. 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)
  172. */
  173. var userSkills;
  174. /**
  175. Manage the partition background colors
  176. **/
  177. function set_skill_style(d, attribute, searched_skill_id) {
  178. //Default border color (stroke)
  179. return_stroke = '#000';
  180. //0. Nice rainbow colors (Comment 1.0 to see the rainbow!)
  181. return_fill = get_color(d);
  182. //1. Grey colors using colorbrewer
  183. var p = color_patterns[18];
  184. color = p(depth -1 + d.counter);
  185. return_fill = color;
  186. //2. Yellow - If the skill has a gradebook attached
  187. if (d.skill_has_gradebook) {
  188. return_fill = '#F89406';
  189. //return_stroke = 'grey';
  190. }
  191. //3. Red - if you search that skill
  192. if (d.isSearched) {
  193. return_fill = '#B94A48';
  194. }
  195. if (!userSkills) {
  196. $.ajax({
  197. url: url + '&a=get_all_user_skills',
  198. async: false,
  199. success: function (skills) {
  200. userSkills = jQuery.parseJSON(skills);
  201. }
  202. });
  203. }
  204. // Old way (it makes a lot of ajax calls)
  205. //4. Blue - if user achieved that skill
  206. //var skill = false;
  207. /*$.ajax({
  208. url: url+'&a=get_user_skill&profile_id='+d.id,
  209. async: false,
  210. success: function(skill) {
  211. if (skill == 1) {
  212. return_fill = '#3A87AD';
  213. }
  214. }
  215. });*/
  216. // New way (Only 1 ajax call)
  217. // 4. Blue - if user achieved that skill
  218. if (userSkills[d.id]) {
  219. return_fill = '#A1D99B';
  220. }
  221. // 5. Grey / Black if the skill is disabled
  222. if (d.status < 1) {
  223. return_fill = '#48616C';
  224. }
  225. switch (attribute) {
  226. case 'fill':
  227. //In order to identify the color of the text (white, black) used in other function
  228. d.color = return_fill;
  229. return return_fill;
  230. break;
  231. case 'stroke':
  232. return return_stroke;
  233. break;
  234. }
  235. }
  236. /* When you click a skill partition */
  237. function click_partition(d, path, text, icon, arc, x, y, r, p, vis) {
  238. if (debug) {
  239. console.log('Clicking a partition skill id: '+d.id);
  240. console.log(d);
  241. console.log('real parent_id: '+d.real_parent_id + ' parent_id: ' +d.parent_id);
  242. console.log('depth ' + d.depth);
  243. console.log('main_depth ' + main_depth);
  244. console.log('main_parent_id: ' + main_parent_id);
  245. }
  246. if (d.depth >= main_depth) {
  247. //main_depth += main_depth;
  248. if (main_parent_id) {
  249. load_nodes(main_parent_id, main_depth);
  250. } else {
  251. load_nodes(d.id, main_depth);
  252. }
  253. }
  254. if (d.id) {
  255. console.log('Getting skill info');
  256. skill_info = get_skill_info(d.parent_id);
  257. main_parent_id = skill_info.extra.parent_id;
  258. main_parent_id = d.parent_id;
  259. console.log('Setting main_parent_id: ' + main_parent_id);
  260. }
  261. //console.log(main_parent_id);
  262. /* "No id" means that we reach the center of the wheel go to the root*/
  263. if (!d.id) {
  264. load_nodes(main_parent_id, main_depth);
  265. }
  266. if (debug) console.log('Continue to click_partition');
  267. //console.log(main_parent_id);
  268. //Duration of the transition
  269. var duration = 1000;
  270. path.transition()
  271. .duration(duration)
  272. .attrTween("d", arcTween(d, arc, x, y, r));
  273. /* Updating text position */
  274. // Somewhat of a hack as we rely on arcTween updating the scales.
  275. text.style("visibility", function(e) {
  276. return isParentOf(d, e) ? null : d3.select(this).style("visibility");
  277. })
  278. .transition().duration(duration)
  279. .attrTween("text-anchor", function(d) {
  280. return function() {
  281. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  282. };
  283. })
  284. .attrTween("transform", function(d) {
  285. var multiline = is_multiline(d.name); //(d.name || "").split(" ").length > 1;
  286. return function() {
  287. var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  288. rotate = angle + (multiline ? -.5 : 0);
  289. return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  290. };
  291. })
  292. .style("fill-opacity", function(e) {
  293. return isParentOf(d, e) ? 1 : 1e-6;
  294. })
  295. .each("end", function(e) {
  296. d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
  297. });
  298. //Add an icon in the partition
  299. /* Updating icon position */
  300. /*
  301. icon.transition().duration(duration)
  302. .attrTween("text-anchor", function(d) {
  303. return function() {
  304. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  305. };
  306. })
  307. .attrTween("transform", function(d) {
  308. return function() {
  309. var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  310. rotate = angle;
  311. return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  312. };
  313. })
  314. .style("fill-opacity", function(e) {
  315. //return isParentOf(d, e) ? 1 : 1e-6;
  316. })
  317. .each("end", function(e) {
  318. //d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
  319. });*/
  320. }
  321. /* Handles mouse clicks */
  322. function handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis) {
  323. switch (d3.event.which) {
  324. case 1:
  325. //alert('Left mouse button pressed');
  326. click_partition(d, path, text, icon, arc, x, y, r, padding, vis);
  327. break;
  328. case 2:
  329. //alert('Middle mouse button pressed');
  330. break;
  331. case 3:
  332. if (typeof d.id === 'undefined') {
  333. break;
  334. }
  335. SkillWheel.showFormSkill(d.id);
  336. //alert('Right mouse button pressed');
  337. break;
  338. default:
  339. //alert('You have a strange mouse :D '); //
  340. }
  341. }
  342. /*
  343. Loads the skills partitions thanks to a json call
  344. */
  345. function load_nodes(load_skill_id, main_depth, extra_parent_id) {
  346. if (debug) {
  347. console.log('Load nodes ----->');
  348. console.log('Loading skill id: '+load_skill_id+' with depth ' + main_depth);
  349. console.log('main_parent_id before: ' + main_parent_id);
  350. }
  351. // "Root partition" on click switch
  352. if (main_parent_id && load_skill_id) {
  353. skill_info = get_skill_info(load_skill_id);
  354. if (skill_info && skill_info.extra) {
  355. main_parent_id = skill_info.extra.parent_id;
  356. } else {
  357. main_parent_id = 0;
  358. }
  359. console.log('main_parent_id after: ' + main_parent_id);
  360. }
  361. if (load_skill_id && load_skill_id == 1) {
  362. main_parent_id = 0;
  363. }
  364. /** Define constants and size of the wheel */
  365. /** Total width of the wheel (also counts for the height) */
  366. var w = 900,
  367. h = w,
  368. r = w / 2,
  369. /** x/y positionning of the center of the wheel */
  370. x = d3.scale.linear().range([0, 2 * Math.PI]),
  371. y = d3.scale.pow().exponent(1.1).domain([0, 1]).range([0, r]),
  372. /** Padding in pixels before the string starts */
  373. padding = 3,
  374. /** Levels to show */
  375. levels_to_show = 3;
  376. reduce_top = 1;
  377. /* Locate the #div id element */
  378. $("#skill_wheel").remove();
  379. $("#wheel_container").html('');
  380. $("#wheel_container").append('<div id="skill_wheel"></div>');
  381. var div = d3.select("#skill_wheel");
  382. /* Remove the image (make way for the dynamic stuff */
  383. div.select("img").remove();
  384. /* Append an element "svg" to the #vis section */
  385. var vis = div.append("svg")
  386. //.attr("class", "Blues")
  387. .attr("width", w + padding * 2)
  388. .attr("height", h + padding * 2)
  389. .append("g")
  390. .attr("transform", "translate(" + (r + padding) + "," + (r/reduce_top + padding) + ")");
  391. /* ...update translate variables to change coordinates of wheel's center */
  392. /* Add a small label to help the user */
  393. div.append("p")
  394. .attr("id", "intro")
  395. .text("{{ "ClickToZoom"|get_lang }}");
  396. /* Generate the partition layout */
  397. var partition = d3.layout.partition()
  398. .sort(null)
  399. /** Value here seems to be a calculation of the size of the elements
  400. depending on the level of depth they're at. Changing it makes
  401. elements pass over the limits of others... */
  402. //.size([1, 2])
  403. .value(function(d) {
  404. //return 5.8 - d.depth;
  405. //When having more than 4 children seems that the code above does not work
  406. return 1;
  407. });
  408. /* Generate an arc which will define the whole wheel context */
  409. var arc = d3.svg.arc()
  410. .startAngle(function(d) {
  411. return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
  412. })
  413. .endAngle(function(d) {
  414. return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
  415. })
  416. .innerRadius(function(d) {
  417. return Math.max(0, d.y ? y(d.y) : d.y);
  418. })
  419. .outerRadius(function(d) {
  420. return Math.max(0, y(d.y + d.dy));
  421. });
  422. load_skill_condition = '';
  423. //First the $_GET value
  424. if (skill_to_load_from_get != 0) {
  425. load_skill_condition = 'skill_id=' + skill_to_load_from_get;
  426. }
  427. //The JS load
  428. if (load_skill_id != 0) {
  429. load_skill_condition = 'skill_id=' + load_skill_id;
  430. }
  431. d3.json("{{ wheel_url }}&main_depth="+main_depth+"&"+load_skill_condition, function(json) {
  432. /** Define the list of nodes based on the JSON */
  433. var nodes = partition.nodes({
  434. children: json
  435. });
  436. /* Setting all skills */
  437. var path = vis.selectAll("path").data(nodes);
  438. /* Setting all texts */
  439. var text = vis.selectAll("text").data(nodes);
  440. /* Setting icons */
  441. var icon = vis.selectAll("icon").data(nodes);
  442. /* Path settings */
  443. path.enter().append("path")
  444. .attr("id", function(d, i) {
  445. return "path-" + i;
  446. })
  447. .attr("d", arc)
  448. .attr("fill-rule", "evenodd")
  449. .attr("class", "skill_partition skill_background")
  450. // .style("fill", colour)
  451. .style("fill", function(d) {
  452. return set_skill_style(d, 'fill', load_skill_id);
  453. })
  454. .style("stroke", function(d) {
  455. return set_skill_style(d, 'stroke');
  456. })
  457. .on("mouseover", function(d, i) {
  458. //$("#icon-" + i).show();
  459. })
  460. .on("mouseout", function(d, i) {
  461. //$("#icon-" + i).hide();
  462. })
  463. .on("contextmenu", function(d, i) {
  464. //Handles mouse clicks
  465. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
  466. //Blocks "right click menu"
  467. d3.event.preventDefault();
  468. return false;
  469. })
  470. .on("mousedown", function(d, i) {
  471. })
  472. .on("click", function(d) {
  473. //Simple click
  474. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
  475. });
  476. /*//Redefine the root
  477. path_zero = vis.selectAll("#path-0").on("mousedown", function(d){
  478. d = get_skill_info(extra_parent_id);
  479. d.parent_id = d.extra.parent_id;
  480. click_partition(d, path, text, icon, arc, x, y, r, padding, vis);
  481. });*/
  482. /* End setting skills */
  483. /* Text settings */
  484. var textEnter = text.enter().append("text")
  485. .style("fill-opacity", 1)
  486. .style("fill", function(d) {
  487. return brightness(d3.rgb(d.color)) < 125 ? "#eee" : "#000";
  488. })
  489. .attr("text-anchor", function(d) {
  490. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  491. })
  492. .attr("rel", "tooltip_skill")
  493. .attr("title", function(d) {
  494. return d.name;
  495. })
  496. .attr("dy", ".2em")
  497. .attr("transform", function(d) {
  498. /** Get the text details and define the rotation and general position */
  499. var multiline = is_multiline(d.name); //(d.name || "").split(" ").length > 1,
  500. angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  501. rotate = angle + (multiline ? -.5 : 0);
  502. return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  503. })
  504. .on("mouseover", function(d, i) {
  505. //$("#icon-" + i).show();
  506. })
  507. .on("mouseout", function(d, i) {
  508. //$("#icon-" + i).hide();
  509. })
  510. .on("contextmenu", function(d, i) {
  511. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
  512. d3.event.preventDefault();
  513. })
  514. .on("mousedown", function(d, i) {
  515. })
  516. .on("click", function(d) {
  517. handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
  518. });
  519. /** Managing text - maximum two words */
  520. textEnter.append("tspan")
  521. .attr("x", 0)
  522. .text(function(d) {
  523. if (d.short_code) {
  524. return d.short_code;
  525. }
  526. if (d.depth && d.name) {
  527. var nameParts = d.name.split(' ');
  528. if (nameParts[0].length > max_size_text_length) {
  529. return nameParts[0].substring(0, max_size_text_length - 3) + '...';
  530. }
  531. return nameParts[0];
  532. }
  533. return d.depth ? d.name : '';
  534. });
  535. textEnter.append("tspan")
  536. .attr("x", 0)
  537. .attr("dy", "1em")
  538. .text(function(d) {
  539. if (d.short_code) {
  540. return null;
  541. }
  542. if (d.depth && d.name) {
  543. var nameParts = d.name.split(' ');
  544. if (nameParts.length >= 2) {
  545. if (nameParts[1].length > max_size_text_length) {
  546. return nameParts[1].substring(0, max_size_text_length - 3) + '...';
  547. }
  548. return nameParts[1];
  549. }
  550. return '';
  551. }
  552. return d.depth ? d.name : '';
  553. });
  554. /* Icon settings */
  555. /*
  556. var icon_click = icon.enter().append("text")
  557. .style("fill-opacity", 1)
  558. .style("fill", function(d) {
  559. //return "#000";
  560. })
  561. .attr("text-anchor", function(d) {
  562. return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
  563. })
  564. .attr("dy", ".2em")
  565. .attr("transform", function(d) {
  566. ///Get the text details and define the rotation and general position
  567. angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
  568. rotate = angle;
  569. return "rotate(" + rotate + ")translate(" + (y(d.y) + padding +80) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
  570. })
  571. .on("click", function(d){
  572. SkillWheel.showFormSkill(d.id);
  573. });
  574. icon_click.append("tspan")
  575. .attr("id", function(d, i) {
  576. return "icon-" + i;
  577. })
  578. .attr("x", 0)
  579. .attr("display", 'none')
  580. .text(function(d) {
  581. //return "Click";
  582. });*/
  583. });
  584. if (debug) {
  585. console.log('<------ End load nodes ----->');
  586. }
  587. }
  588. /* Skill AJAX calls */
  589. function get_skill_info(my_id) {
  590. var skill = false;
  591. $.ajax({
  592. url: url+'&a=get_skill_info&id='+my_id,
  593. async: false,
  594. success: function(json) {
  595. skill = jQuery.parseJSON(json);
  596. return skill;
  597. }
  598. });
  599. return skill;
  600. }
  601. function get_gradebook_info(id) {
  602. var item = false;
  603. $.ajax({
  604. url: url+'&a=get_gradebook_info&id='+id,
  605. async: false,
  606. success: function(json) {
  607. item = jQuery.parseJSON(json);
  608. return item;
  609. }
  610. });
  611. return item;
  612. }
  613. </script>