dave
/
dirview
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

hide blank white svg on load

This commit is contained in:
dave 2019-06-02 01:01:47 -07:00
parent 7d4424a844
commit cfc7b7018a
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/js/app.js
View File

@ -24,8 +24,8 @@ export default {
function boot() { function boot() {
winsize = { winsize = {
w: $("#svg-container").width(), w: Math.round($("#svg-container").width()),
h: window.innerHeight * 0.5 h: Math.round(window.innerHeight * 0.5)
} }
prep_graph(); prep_graph();
} }
@ -34,12 +34,22 @@ var winsize = null;
var the_color = chroma(randomColor()).darken().darken().darken().hex(); var the_color = chroma(randomColor()).darken().darken().darken().hex();
function prep_graph() { function prep_graph() {
d3.select('svg') // Add placeholder graphics
d3.select('svg') // tint
.append("rect")
.attr("class", "placeholder")
.attr("width", "100%")
.attr("height", "100%")
.attr('fill', the_color)
d3.select('svg') // loading message
.attr('width', winsize.w) .attr('width', winsize.w)
.attr('height', winsize.h) .attr('height', winsize.h)
.append("text") .append("text")
.attr('dx', 2)
.attr('dy', "1em") .attr('dy', "1em")
.text("loading chart..."); .text("loading chart...")
.attr('fill', '#fff')
d3.json("/chart.json?n=" + _node + "&depth=" + _graph_depth).then(draw_graph); d3.json("/chart.json?n=" + _node + "&depth=" + _graph_depth).then(draw_graph);
} }
@ -50,7 +60,10 @@ function can_click(d) {
function draw_graph(data) { function draw_graph(data) {
console.log("data fetched in: " + data.render_time + "s") console.log("data fetched in: " + data.render_time + "s")
// remove placeholder graphics
d3.select('svg text').remove() d3.select('svg text').remove()
d3.select('svg .placeholder').remove()
var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify
treemapLayout treemapLayout
@ -60,7 +73,6 @@ function draw_graph(data) {
.paddingBottom(6) .paddingBottom(6)
.paddingLeft(6) .paddingLeft(6)
var root = d3.hierarchy(data); var root = d3.hierarchy(data);
treemapLayout(root); treemapLayout(root);
@ -106,14 +118,14 @@ function draw_graph(data) {
return d.data.name + (d.data.typ == DIR? "/":"") return d.data.name + (d.data.typ == DIR? "/":"")
}) })
// Size values // Size labels
nodes nodes
.append('text') .append('text')
.attr('fill', '#fff') .attr('fill', '#fff')
.attr('dx', 2) .attr('dx', 2)
.attr('dy', "2em") .attr('dy', "2em")
.text(function(d) { .text(function(d) {
return filesize(d.data.value, {round: 0}); return filesize(d.data.value, {round: 1});
}) })
.attr('clip-path', function(d) {return "url(#clip-" + d.data.id + ")"}) .attr('clip-path', function(d) {return "url(#clip-" + d.data.id + ")"})

2
templates/page.html
View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div id="svg-container"> <div id="svg-container">
<svg><g class="chart"></g></svg> <svg width="0" height="0"><g class="chart"></g></svg>
</div> </div>
</div> </div>
{% if node.typ in (NodeType.ROOT, NodeType.DIR) %} {% if node.typ in (NodeType.ROOT, NodeType.DIR) %}