css cleanup and flashing hover feature
This commit is contained in:
parent
209d3945ba
commit
83fef35c59
|
@ -15,12 +15,6 @@ RUN sed -i -E 's/(archive|security).ubuntu.com/192.168.1.142/' /etc/apt/sources.
|
||||||
apt-get autoremove -y && \
|
apt-get autoremove -y && \
|
||||||
rm -rf /var/lib/{apt,dpkg,cache,log}/
|
rm -rf /var/lib/{apt,dpkg,cache,log}/
|
||||||
|
|
||||||
# RUN apt-get update && \
|
|
||||||
# apt-get install -y python3 git wget && \
|
|
||||||
# wget -q -O /tmp/get-pip.py https://bootstrap.pypa.io/get-pip.py && \
|
|
||||||
# python3 /tmp/get-pip.py && \
|
|
||||||
# rm /tmp/get-pip.py
|
|
||||||
|
|
||||||
ADD . /tmp/code
|
ADD . /tmp/code
|
||||||
|
|
||||||
RUN cd /tmp/code && \
|
RUN cd /tmp/code && \
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import $ from "jquery"
|
||||||
import * as d3 from 'd3'
|
import * as d3 from 'd3'
|
||||||
import treemap from 'd3-hierarchy'
|
import treemap from 'd3-hierarchy'
|
||||||
import randomColor from 'randomcolor'
|
import randomColor from 'randomcolor'
|
||||||
|
@ -18,15 +19,28 @@ cellColors[ROOT] = randomColor();
|
||||||
cellColors[LINK] = randomColor();
|
cellColors[LINK] = randomColor();
|
||||||
cellColors[SPECIAL] = randomColor();
|
cellColors[SPECIAL] = randomColor();
|
||||||
|
|
||||||
function boot() {
|
|
||||||
prep_graph();
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
boot: function(){boot();}
|
boot: function(){boot();}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function boot() {
|
||||||
|
winsize = {
|
||||||
|
w: $("#svg-container").width(),
|
||||||
|
h: window.innerHeight * 0.5
|
||||||
|
}
|
||||||
|
prep_graph();
|
||||||
|
}
|
||||||
|
|
||||||
|
var winsize = null
|
||||||
|
|
||||||
function prep_graph() {
|
function prep_graph() {
|
||||||
|
d3.select('svg')
|
||||||
|
.attr('width', winsize.w)
|
||||||
|
.attr('height', winsize.h)
|
||||||
|
.append("text")
|
||||||
|
.attr('dy', "1em")
|
||||||
|
.text("loading chart...");
|
||||||
|
|
||||||
d3.json("/chart.json?n=" + _node + "&depth=" + _graph_depth).then(draw_graph);
|
d3.json("/chart.json?n=" + _node + "&depth=" + _graph_depth).then(draw_graph);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,21 +49,18 @@ function can_click(d) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw_graph(data) {
|
function draw_graph(data) {
|
||||||
var chart_width = document.getElementsByTagName("body")[0].clientWidth;
|
console.log("data fetched in: " + data.render_time + "s")
|
||||||
var chart_height = window.innerHeight * 0.5;
|
d3.select('svg text').remove()
|
||||||
|
|
||||||
var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify
|
var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify
|
||||||
|
|
||||||
treemapLayout
|
treemapLayout
|
||||||
.size([chart_width, chart_height])
|
.size([winsize.w, winsize.h])
|
||||||
.paddingTop(25)
|
.paddingTop(25)
|
||||||
.paddingRight(6)
|
.paddingRight(6)
|
||||||
.paddingBottom(6)
|
.paddingBottom(6)
|
||||||
.paddingLeft(6)
|
.paddingLeft(6)
|
||||||
|
|
||||||
|
|
||||||
d3.select('svg').attr('width', chart_width).attr('height', chart_height);
|
|
||||||
|
|
||||||
var root = d3.hierarchy(data);
|
var root = d3.hierarchy(data);
|
||||||
|
|
||||||
treemapLayout(root);
|
treemapLayout(root);
|
||||||
|
@ -69,7 +80,7 @@ function draw_graph(data) {
|
||||||
// Create the colored rectangles
|
// Create the colored rectangles
|
||||||
nodes
|
nodes
|
||||||
.append('rect')
|
.append('rect')
|
||||||
// .attr('fill', function(d){return randomColor()})
|
.attr('fill', function(d){return randomColor()})
|
||||||
.attr('width', function(d) { return d.x1 - d.x0; })
|
.attr('width', function(d) { return d.x1 - d.x0; })
|
||||||
.attr('height', function(d) { return d.y1 - d.y0; })
|
.attr('height', function(d) { return d.y1 - d.y0; })
|
||||||
.attr('id', function(d) {return "node-" + d.data.id;})
|
.attr('id', function(d) {return "node-" + d.data.id;})
|
||||||
|
|
|
@ -175,13 +175,10 @@ def main():
|
||||||
|
|
||||||
cherrypy.config.update({
|
cherrypy.config.update({
|
||||||
'tools.sessions.on': False,
|
'tools.sessions.on': False,
|
||||||
'request.show_tracebacks': True, #??
|
|
||||||
'server.show_tracebacks': True, #??
|
|
||||||
'server.socket_port': args.port,
|
|
||||||
'server.socket_host': '0.0.0.0',
|
'server.socket_host': '0.0.0.0',
|
||||||
|
'server.socket_port': args.port,
|
||||||
'server.thread_pool': 5,
|
'server.thread_pool': 5,
|
||||||
'engine.autoreload.on': args.debug,
|
'engine.autoreload.on': args.debug
|
||||||
'log.screen': False, #??
|
|
||||||
})
|
})
|
||||||
|
|
||||||
def signal_handler(signum, stack):
|
def signal_handler(signum, stack):
|
||||||
|
@ -198,7 +195,6 @@ def main():
|
||||||
cherrypy.engine.start()
|
cherrypy.engine.start()
|
||||||
cherrypy.engine.block()
|
cherrypy.engine.block()
|
||||||
finally:
|
finally:
|
||||||
logging.info("API has shut down")
|
|
||||||
cherrypy.engine.exit()
|
cherrypy.engine.exit()
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"d3": "^5.9.2",
|
"d3": "^5.9.2",
|
||||||
"d3-hierarchy": "^1.1.8",
|
"d3-hierarchy": "^1.1.8",
|
||||||
"filesize": "^4.1.2",
|
"filesize": "^4.1.2",
|
||||||
|
"jquery": "^3.4.1",
|
||||||
"randomcolor": "^0.5.4"
|
"randomcolor": "^0.5.4"
|
||||||
},
|
},
|
||||||
"scripts": {},
|
"scripts": {},
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
div.children > div {
|
||||||
|
padding: 0px 15px;
|
||||||
|
}
|
||||||
|
div.dirs {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
div.files {
|
||||||
|
float: right;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
max-width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: arial, sans-serif;
|
||||||
|
}
|
||||||
|
svg rect {
|
||||||
|
fill: cadetblue;
|
||||||
|
opacity: 0.5;
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
svg g.chart>g.can-navigate:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
svg g.chart>g.can-navigate:hover a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
@keyframes hoverfade {
|
||||||
|
0% {
|
||||||
|
opacity: 0.5;
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
stroke: black;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.5;
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg g.chart>g.can-navigate:hover rect {
|
||||||
|
animation: hoverfade 0.5s infinite;
|
||||||
|
stroke: black;
|
||||||
|
}
|
||||||
|
svg a:hover {
|
||||||
|
|
||||||
|
}
|
|
@ -8,105 +8,12 @@
|
||||||
var _graph_depth = 2;
|
var _graph_depth = 2;
|
||||||
</script>
|
</script>
|
||||||
<script src="/static/scripts.js" type="text/javascript"></script>
|
<script src="/static/scripts.js" type="text/javascript"></script>
|
||||||
<style>
|
<link rel="stylesheet" href="/static/style.css" />
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
div.children > div {
|
|
||||||
padding: 0px 15px;
|
|
||||||
}
|
|
||||||
div.dirs {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
div.files {
|
|
||||||
float: right;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
/*width: 1650px;*/
|
|
||||||
/*height: 600px;*/
|
|
||||||
max-width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 10px;
|
|
||||||
font-family: arial, sans-serif;
|
|
||||||
}
|
|
||||||
svg rect {
|
|
||||||
fill: cadetblue;
|
|
||||||
opacity: 0.3;
|
|
||||||
stroke: white;
|
|
||||||
}
|
|
||||||
svg g.chart>g.can-navigate:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
svg g.chart>g.can-navigate:hover a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
svg a:hover {
|
|
||||||
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
svg {
|
|
||||||
background-color: rgb(250,250,250);
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
letter-spacing: 4px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
text.tiny {
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
text.light {
|
|
||||||
fill: lightgrey
|
|
||||||
}
|
|
||||||
|
|
||||||
.world {
|
|
||||||
stroke: lightgrey;
|
|
||||||
stroke-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
stroke: white;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
text-anchor: middle;
|
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label>.name {
|
|
||||||
dominant-baseline: text-after-edge;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label>.value {
|
|
||||||
dominant-baseline: text-before-edge;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoverer {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: white;
|
|
||||||
stroke-width:0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoverer:hover {
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-color {
|
|
||||||
stroke-width: 1px;
|
|
||||||
stroke:darkgrey;
|
|
||||||
}*/
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body onload="Application.boot();">
|
<body onload="Application.boot();">
|
||||||
<svg><g class="chart"></g></svg>
|
<div id="svg-container">
|
||||||
|
<svg><g class="chart"></g></svg>
|
||||||
|
</div>
|
||||||
<div class="viewer">
|
<div class="viewer">
|
||||||
<h1>{{ node.path|pathjoin }}</h1>
|
<h1>{{ node.path|pathjoin }}</h1>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -2188,6 +2188,11 @@ isobject@^3.0.0, isobject@^3.0.1:
|
||||||
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
|
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
|
||||||
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
|
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
|
||||||
|
|
||||||
|
jquery@^3.4.1:
|
||||||
|
version "3.4.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
|
||||||
|
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
|
||||||
|
|
||||||
js-tokens@^4.0.0:
|
js-tokens@^4.0.0:
|
||||||
version "4.0.0"
|
version "4.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||||
|
|
Loading…
Reference in New Issue