more charting
This commit is contained in:
parent
e6b2bdfd97
commit
ecdece52b9
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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": {
|
||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue