css cleanup and flashing hover feature

This commit is contained in:
dave 2019-06-01 22:19:47 -07:00
parent 209d3945ba
commit 83fef35c59
7 changed files with 90 additions and 120 deletions

View File

@ -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 && \

View File

@ -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;})

View File

@ -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()

View File

@ -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": {},

56
static/style.css Normal file
View File

@ -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 {
}

View File

@ -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>

View File

@ -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"