|
| 1 | +// draw graph in sidebar, change global to true if prefered |
| 2 | +function draw_graph_sidebar(myChart, global=false) { |
| 3 | + draw_graph(myChart, global) |
| 4 | +} |
| 5 | + |
| 6 | +// draw graph in modal view |
| 7 | +function draw_graph_modal(myChart, global=true) { |
| 8 | + draw_graph(myChart, global) |
| 9 | +} |
| 10 | + |
| 11 | +// add graph button next to light/dark mode switch if activated, but before search |
| 12 | +$('.md-search').before('<form class="md-header__option"> \ |
| 13 | + <label id="graph_button" class="md-header__button md-icon"> \ |
| 14 | + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 146"> \ |
| 15 | + <path d="M171,100 C171,106.075 166.075,111 160,111 C154.016,111 149.158,106.219 149.014,100.27 L114.105,83.503 C111.564,86.693 108.179,89.18 104.282,90.616 L108.698,124.651 C112.951,126.172 116,130.225 116,135 C116,141.075 111.075,146 105,146 C98.925,146 94,141.075 94,135 C94,131.233 95.896,127.912 98.781,125.93 L94.364,91.896 C82.94,90.82 74,81.206 74,69.5 C74,69.479 74.001,69.46 74.001,69.439 L53.719,64.759 C50.642,70.269 44.76,74 38,74 C36.07,74 34.215,73.689 32.472,73.127 L20.624,90.679 C21.499,92.256 22,94.068 22,96 C22,102.075 17.075,107 11,107 C4.925,107 0,102.075 0,96 C0,89.925 4.925,85 11,85 C11.452,85 11.895,85.035 12.332,85.089 L24.184,67.531 C21.574,64.407 20,60.389 20,56 C20,48.496 24.594,42.07 31.121,39.368 L29.111,21.279 C24.958,19.707 22,15.704 22,11 C22,4.925 26.925,0 33,0 C39.075,0 44,4.925 44,11 C44,14.838 42.031,18.214 39.051,20.182 L41.061,38.279 C49.223,39.681 55.49,46.564 55.95,55.011 L76.245,59.694 C79.889,52.181 87.589,47 96.5,47 C100.902,47 105.006,48.269 108.475,50.455 L131.538,27.391 C131.192,26.322 131,25.184 131,24 C131,17.925 135.925,13 142,13 C148.075,13 153,17.925 153,24 C153,30.075 148.075,35 142,35 C140.816,35 139.678,34.808 138.609,34.461 L115.546,57.525 C117.73,60.994 119,65.098 119,69.5 C119,71.216 118.802,72.884 118.438,74.49 L153.345,91.257 C155.193,89.847 157.495,89 160,89 C166.075,89 171,93.925 171,100"> \ |
| 16 | + </path> \ |
| 17 | + </svg> \ |
| 18 | + </label> \ |
| 19 | + </form>'); |
| 20 | + |
| 21 | +// add a div to html in which the graph will be drawn |
| 22 | +function add_graph_div(params) { |
| 23 | + $('.md-sidebar--secondary').each(function() { |
| 24 | + $(this).contents().append('<div id="graph" class="graph"></div>'); |
| 25 | + }); |
| 26 | +}; |
| 27 | + |
| 28 | +add_graph_div(); |
| 29 | + |
| 30 | +function init_graph(params) { |
| 31 | + var myChart = echarts.init(document.getElementById('graph'), null, { |
| 32 | + renderer: 'canvas', |
| 33 | + useDirtyRect: false |
| 34 | + }); |
| 35 | + return myChart; |
| 36 | +}; |
| 37 | + |
| 38 | +var myChart = init_graph(); |
| 39 | + |
| 40 | +function draw_graph(myChart, global=true) { |
| 41 | + var _option = $.extend(true, {}, option); |
| 42 | + if(!global) { |
| 43 | + _option.series[0].data = graph_nodes(); |
| 44 | + _option.series[0].links = graph_links(); |
| 45 | + } |
| 46 | + // draw the graph |
| 47 | + myChart.setOption(_option); |
| 48 | + |
| 49 | + // add click event for nodes |
| 50 | + myChart.on('click', function (params) { |
| 51 | + if(params.dataType == "node") { |
| 52 | + window.location = params.value; |
| 53 | + } |
| 54 | + }); |
| 55 | + |
| 56 | + // redraw on resize |
| 57 | + window.addEventListener('resize', myChart.resize); |
| 58 | +}; |
| 59 | + |
| 60 | +var option; |
| 61 | + |
| 62 | +function graph_links() { |
| 63 | + id = option.series[0].data.find(it => it.value === window.location.pathname).id; |
| 64 | + return option.series[0].links.filter(it => it.source === id || it.target === id); |
| 65 | +} |
| 66 | + |
| 67 | +function graph_nodes() { |
| 68 | + id = option.series[0].data.find(it => it.value === window.location.pathname).id; |
| 69 | + links = option.series[0].links.filter(it => it.source === id || it.target === id); |
| 70 | + ids = []; |
| 71 | + links.forEach(function (link) { |
| 72 | + ids.push(link.source, link.target); |
| 73 | + }); |
| 74 | + return option.series[0].data.filter(it => [...new Set(ids)].includes(it.id)); |
| 75 | +} |
| 76 | + |
| 77 | +$.getJSON(document.currentScript.src + '/../graph.json', function (graph) { |
| 78 | + myChart.hideLoading(); |
| 79 | + |
| 80 | + // an offset of 5, so the dot/node is not that small |
| 81 | + graph.nodes.forEach(function (node) { |
| 82 | + node.symbolSize += 5; |
| 83 | + }); |
| 84 | + |
| 85 | + // special feature, if u want to have long note titles, u can use this ' •' |
| 86 | + // to cut everything behind in graph view |
| 87 | + graph.nodes.forEach(function (node) { |
| 88 | + node.name = node.name.split(' •')[0]; |
| 89 | + }); |
| 90 | + graph.links.forEach(function (link) { |
| 91 | + link.source = link.source.split(' •')[0]; |
| 92 | + link.target = link.target.split(' •')[0]; |
| 93 | + }); |
| 94 | + |
| 95 | + option = { |
| 96 | + tooltip: { |
| 97 | + show: false, |
| 98 | + }, |
| 99 | + legend: [ // categories not supported yet |
| 100 | + //{ |
| 101 | + // data: graph.categories.map(function (a) { |
| 102 | + // return a.name; |
| 103 | + // }) |
| 104 | + //} |
| 105 | + ], |
| 106 | + darkMode: "auto", |
| 107 | + backgroundColor: $("body").css("background-color"), |
| 108 | + series: [ |
| 109 | + { |
| 110 | + name: 'Interactive Graph', |
| 111 | + type: 'graph', |
| 112 | + layout: 'force', |
| 113 | + data: graph.nodes, |
| 114 | + links: graph.links, |
| 115 | + categories: [], |
| 116 | + zoom: 2, |
| 117 | + roam: true, |
| 118 | + draggable: false, |
| 119 | + label: { |
| 120 | + show: true, |
| 121 | + position: 'right', |
| 122 | + formatter: '{b}' |
| 123 | + }, |
| 124 | + emphasis: { |
| 125 | + focus: 'adjacency', // gray out not related nodes on mouse over |
| 126 | + label: { |
| 127 | + fontWeight: "bold" |
| 128 | + } |
| 129 | + }, |
| 130 | + labelLayout: { |
| 131 | + hideOverlap: false // true could be a good idea for large graphs |
| 132 | + }, |
| 133 | + scaleLimit: { |
| 134 | + min: 0.5, |
| 135 | + max: 5 |
| 136 | + }, |
| 137 | + lineStyle: { |
| 138 | + color: 'source', |
| 139 | + curveness: 0 // 0.3, if not 0, link an backlink will have 2 lines |
| 140 | + } |
| 141 | + } |
| 142 | + ] |
| 143 | + }; |
| 144 | + // initial draw in sidebar |
| 145 | + draw_graph_sidebar(myChart); |
| 146 | +}); |
| 147 | + |
| 148 | +$("#__palette_0").change(function(){ |
| 149 | + option.backgroundColor = $("body").css("background-color"); |
| 150 | + myChart.setOption(option); |
| 151 | +}); |
| 152 | +$("#__palette_1").change(function(){ |
| 153 | + option.backgroundColor = $("body").css("background-color"); |
| 154 | + myChart.setOption(option); |
| 155 | +}); |
| 156 | + |
| 157 | +$('#graph_button').on('click', function (params) { |
| 158 | + $("body").css({ overflow: "hidden", position: "fixed" }); |
| 159 | + $('#graph').remove(); |
| 160 | + $('<div id="modal_background"><div id="graph" class="modal_graph"></div></div>').appendTo('body'); |
| 161 | + $('#modal_background').on('click', function (params) { |
| 162 | + if(params.target === this) { |
| 163 | + $("body").css({ overflow: "", position: "" }); |
| 164 | + $('#graph').remove(); |
| 165 | + $('#modal_background').remove(); |
| 166 | + add_graph_div(); |
| 167 | + myChart = init_graph(); |
| 168 | + // re-draw sidebar, e.g. switch back from modal view |
| 169 | + draw_graph_sidebar(myChart); |
| 170 | + } |
| 171 | + }); |
| 172 | + myChart = init_graph(); |
| 173 | + draw_graph_modal(myChart); |
| 174 | +}); |
0 commit comments