more charting

This commit is contained in:
dave 2019-05-27 18:34:56 -07:00
parent e6b2bdfd97
commit ecdece52b9
4 changed files with 66 additions and 26 deletions

View File

@ -2,6 +2,8 @@ import * as d3 from 'd3'
import * as voronoiMap from 'd3-voronoi-map'
//import {voronoiTreemap} from 'd3-voronoi-treemap'
import randomColor from 'randomcolor'
import chroma from 'chroma-js'
import roundTo from 'round-to'
d3.voronoiTreemap = function() {
@ -154,8 +156,24 @@ d3.voronoiTreemap = function() {
}
var DIR = 1
var FILE = 2
var ROOT = 3
var LINK = 4
var SPECIAL = 5
var cellColors = {}
cellColors[DIR] = randomColor();
cellColors[FILE] = randomColor();
cellColors[ROOT] = randomColor();
cellColors[LINK] = randomColor();
cellColors[SPECIAL] = randomColor();
function boot() {
draw_graph()
draw_graph();
}
@ -164,22 +182,21 @@ export default {
}
function add_colors(data) {
data.color = randomColor();
data.children.forEach(function(child){
add_colors(child);
});
}
// function add_colors(data) {
// data.color = randomColor();
// data.children.forEach(function(child){
// add_colors(child);
// });
// }
function draw_graph() {
// d3.json("/static/sampledata.json").then(function(rootData) {
d3.json("/chart.json?n=x&depth=1").then(function(rootData) {
d3.json("/chart.json?n=x&depth=2").then(function(rootData) {
initData();
add_colors(rootData);
// add_colors(rootData);
initLayout(rootData);
hierarchy = d3.hierarchy(rootData).sum(function(d){ return d.weight; });
// console.log(hierarchy)
_voronoiTreemap
@ -244,7 +261,7 @@ function computeCirclingPolygon(radius) {
return circlingPolygon;*/
return [[-600,-250], [600,-250], [600,250], [-600,250], [-600,-250]]
return [[-svgWidth/2,-svgHeight/2], [svgWidth/2,-svgHeight/2], [svgWidth/2,svgHeight/2], [-svgWidth/2,svgHeight/2]]
};
function initLayout(rootData) {
@ -302,7 +319,7 @@ function drawLegends(rootData) {
.attr("y", -legendHeight)
.attr("width", colorWidth)
.attr("height", legendHeight)
.style("fill", function(d){ return d.color; });
.style("fill", function(d){ return cellColors[d.typ]; });
legend.append("text")
.classed("tiny", true)
.attr("transform", "translate("+[colorWidth+5, -2]+")")
@ -314,7 +331,7 @@ function drawLegends(rootData) {
}
function format_percent(value) {
return round(value * 100, 2) + "%";
return roundTo(value * 100, 2) + "%";
}
function drawTreemap(hierarchy) {
@ -330,7 +347,7 @@ function drawTreemap(hierarchy) {
.classed("cell", true)
.attr("d", function(d){ return "M"+d.polygon.join(",")+"z"; })
.style("fill", function(d){
return d.data.color;
return cellColors[d.data.typ];
});
var labels = treemapContainer.append("g")
@ -349,11 +366,11 @@ function drawTreemap(hierarchy) {
labels.append("text")
.classed("name", true)
.html(function(d){
return (d.data.weight<1)? d.data.code : d.data.name;
return d.data.name; //(d.data.weight<1)? d.data.code : d.data.name;
});
labels.append("text")
.classed("value", true)
.text(function(d){ return d.data.name + "\r\n" + format_percent(d.data.weight); });
.text(function(d){ return format_percent(d.data.weight); });
var hoverers = treemapContainer.append("g")
.classed('hoverers', true)
@ -368,9 +385,3 @@ function drawTreemap(hierarchy) {
hoverers.append("title")
.text(function(d) { return d.data.name + "\n" + format_percent(d.value); });
}
function round(num, places) {
return Math.round(num*places*100) / (places*100)
}

View File

@ -91,16 +91,33 @@ class AppWeb(object):
return json.dumps(data).encode("utf-8")
@staticmethod
def export_children(entry, depth):
def export_children(entry, depth, max_children=10):
children = []
if depth:
others = []
for child in entry.children:
child_data = AppWeb.export_children(child, depth - 1)
if entry.total_size > 0:
child_data["weight"] = child_data["size"] / entry.total_size
else:
child_data["weight"] = 0;
children.append(child_data)
child_data["weight"] = 0
if len(children) < max_children:
children.append(child_data)
else:
others.append(child_data)
if others:
other_sz = sum([i["size"] for i in others])
children.append({"name": f"({len(others)} others)",
"typ": NodeType.SPECIAL.value,
"size": other_sz,
"children": [],
"weight": other_sz / entry.total_size if entry.total_size > 0 else 0,
})
children.sort(key=lambda c: c["size"],
reverse=True)

View File

@ -8,9 +8,11 @@
"license": "None",
"private": true,
"dependencies": {
"chroma-js": "^2.0.3",
"d3": "^5.9.2",
"d3-voronoi-treemap": "^1.1.0",
"randomcolor": "^0.5.4"
"randomcolor": "^0.5.4",
"round-to": "^4.0.0"
},
"scripts": {},
"devDependencies": {

View File

@ -579,6 +579,11 @@ chownr@^1.1.1:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
chroma-js@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.0.3.tgz#2521d4f80c4e786e00064c4a62824e38ff6557c4"
integrity sha512-2kTvZZOFSV1O81/rm99t9vmkh9jQxsHqsRRoZevDVz/VCC3yKMyPuMK8M5yHG+UMg2tV6cRoqtZtgcD92udcBw==
chrome-trace-event@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@ -3055,6 +3060,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0"
inherits "^2.0.1"
round-to@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/round-to/-/round-to-4.0.0.tgz#7576de9f721e58bd8116757fc3ba10f44d5b3886"
integrity sha512-2HD3qSm7FGv1uBQywsK43YtSeXQhh5CUscaFGsvbr38oZzfLqoPQAPw2ngvpXKruAEsn7WuPXdq1mrUSkR70MQ==
run-queue@^1.0.0, run-queue@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"