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 && \
|
||||
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
|
||||
|
||||
RUN cd /tmp/code && \
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import $ from "jquery"
|
||||
import * as d3 from 'd3'
|
||||
import treemap from 'd3-hierarchy'
|
||||
import randomColor from 'randomcolor'
|
||||
|
@ -18,15 +19,28 @@ cellColors[ROOT] = randomColor();
|
|||
cellColors[LINK] = randomColor();
|
||||
cellColors[SPECIAL] = randomColor();
|
||||
|
||||
function boot() {
|
||||
prep_graph();
|
||||
}
|
||||
|
||||
export default {
|
||||
boot: function(){boot();}
|
||||
}
|
||||
|
||||
function boot() {
|
||||
winsize = {
|
||||
w: $("#svg-container").width(),
|
||||
h: window.innerHeight * 0.5
|
||||
}
|
||||
prep_graph();
|
||||
}
|
||||
|
||||
var winsize = null
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
@ -35,21 +49,18 @@ function can_click(d) {
|
|||
}
|
||||
|
||||
function draw_graph(data) {
|
||||
var chart_width = document.getElementsByTagName("body")[0].clientWidth;
|
||||
var chart_height = window.innerHeight * 0.5;
|
||||
|
||||
console.log("data fetched in: " + data.render_time + "s")
|
||||
d3.select('svg text').remove()
|
||||
var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify
|
||||
|
||||
treemapLayout
|
||||
.size([chart_width, chart_height])
|
||||
.size([winsize.w, winsize.h])
|
||||
.paddingTop(25)
|
||||
.paddingRight(6)
|
||||
.paddingBottom(6)
|
||||
.paddingLeft(6)
|
||||
|
||||
|
||||
d3.select('svg').attr('width', chart_width).attr('height', chart_height);
|
||||
|
||||
var root = d3.hierarchy(data);
|
||||
|
||||
treemapLayout(root);
|
||||
|
@ -69,7 +80,7 @@ function draw_graph(data) {
|
|||
// Create the colored rectangles
|
||||
nodes
|
||||
.append('rect')
|
||||
// .attr('fill', function(d){return randomColor()})
|
||||
.attr('fill', function(d){return randomColor()})
|
||||
.attr('width', function(d) { return d.x1 - d.x0; })
|
||||
.attr('height', function(d) { return d.y1 - d.y0; })
|
||||
.attr('id', function(d) {return "node-" + d.data.id;})
|
||||
|
|
|
@ -175,13 +175,10 @@ def main():
|
|||
|
||||
cherrypy.config.update({
|
||||
'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_port': args.port,
|
||||
'server.thread_pool': 5,
|
||||
'engine.autoreload.on': args.debug,
|
||||
'log.screen': False, #??
|
||||
'engine.autoreload.on': args.debug
|
||||
})
|
||||
|
||||
def signal_handler(signum, stack):
|
||||
|
@ -198,7 +195,6 @@ def main():
|
|||
cherrypy.engine.start()
|
||||
cherrypy.engine.block()
|
||||
finally:
|
||||
logging.info("API has shut down")
|
||||
cherrypy.engine.exit()
|
||||
|
||||
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
"d3": "^5.9.2",
|
||||
"d3-hierarchy": "^1.1.8",
|
||||
"filesize": "^4.1.2",
|
||||
"jquery": "^3.4.1",
|
||||
"randomcolor": "^0.5.4"
|
||||
},
|
||||
"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;
|
||||
</script>
|
||||
<script src="/static/scripts.js" type="text/javascript"></script>
|
||||
<style>
|
||||
* {
|
||||
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>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body onload="Application.boot();">
|
||||
<svg><g class="chart"></g></svg>
|
||||
<div id="svg-container">
|
||||
<svg><g class="chart"></g></svg>
|
||||
</div>
|
||||
<div class="viewer">
|
||||
<h1>{{ node.path|pathjoin }}</h1>
|
||||
<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"
|
||||
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:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||
|
|
Loading…
Reference in New Issue