electrode-electrify-react-component
Version:
electrode-electrify-react-component
235 lines (203 loc) • 7.78 kB
JavaScript
;
exports.__esModule = true;
var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
exports.default = function (root, svgElement) {
//eslint-disable-line func-style, max-statements
var width = 850;
var height = 500;
var radius = Math.min(width, height) * 0.45;
var deg = 120;
var modeFns = {
count: function count() {
return 1;
},
size: function size(d) {
return d.size;
}
};
// create repsonsive SVG canvas
var svg = _d2.default.select(svgElement).append("svg").attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 " + width + " " + height).style("overflow", "visible").append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//partition data by file size initially
var partition = _d2.default.layout.partition().sort(null).size([2 * Math.PI, radius * radius]).value(modeFns.size);
//title text in the center of the rings.
var title = svg.append("text").text(root.name).attr("x", 0).attr("y", -5).style("font-size", "18px").style("fill", "white").style("font-weight", 500).style("alignment-baseline", "middle").style("text-anchor", "middle");
//file percentage size below the title hardcoded to 100% in intial render
var percentageSize = svg.append("text").text("100%").attr("x", 0).attr("y", 20).style("fill", "white").style("font-size", "16px").style("font-weight", 300).style("alignment-baseline", "middle").style("text-anchor", "middle");
//file size below the title
var size = svg.append("text").text("(\"" + (0, _prettysize2.default)(root.value || root.size) + ")").attr("x", 0).attr("y", 40).style("fill", "white").style("font-size", "16px").style("alignment-baseline", "middle").style("text-anchor", "middle");
// Each arc is wrapped in a group element to apply rotation transforms while
// changing size and shape.
var groups = svg.datum(root).selectAll("g").data(partition.nodes).enter().append("g").attr("transform", "rotate(" + deg + ")");
var maxdepth = groups[0].reduce(function (max, el) {
return Math.max(max, el.__data__.depth);
}, 0);
// create the arcs for each file.
var path = groups.append("path").attr("d", _d3Utils.initArc).attr("display", function (d) {
return d.depth ? null : "none";
}) //eslint-disable-line no-arrow-condition
.style("stroke", "#2B2B2B").style("stroke-width", "0").style("fill-rule", "evenodd").each(function (d) {
d.x0 = d.x;
d.dx0 = d.dx;
d.el = this; //eslint-disable-line no-invalid-this
});
//
// TODO: link this search function to the input in the navbar
//
/*
let found = [];
const _select = (node, selector) => {
node.enabled = selector(node);
if (node.enabled) {
found.push(node);
}
if (node.children) {
for (const c of node.children) {
_select(c, selector);
}
}
};
_select(root, () => true);
d3.select(domElements.search).on("keyup", function () {
const text = this.value.replace(/^\s+/, "").replace(/\s+$/, "");
if (text.length > 0) {
found = [];
const re = new RegExp(text, "i");
_select(root, (node) => node.name.match(re) !== null);
if (found.length === 1) {
title.text(found[0].name);
size.text(pretty(found[0].value || found[0].size));
} else {
title.text("Multiple found");
let completeSize = 0;
for (const n of found) {
completeSize += n.size;
}
size.text(`${pretty(completeSize)} total`);
}
} else {
_select(root, () => true);
}
groups
.select("path")
.transition()
.duration(200)
.style("opacity", (d) => {
return d.enabled ? 1.0 : 0.2;
});
});
*/
// color scheme
function useScheme() {
//eslint-disable-line func-style
var specials = _schemes2.default.specials;
var colors = _schemes2.default.main;
(0, _keys2.default)(specials).forEach(function (k) {
var idx = colors.indexOf(specials[k].toLowerCase()); //
if (idx === -1) {
return;
}
colors.splice(idx, 1);
});
var color = _d2.default.scale.ordinal().range(colors);
var _path = path.transition().duration(600).ease(_d3Utils.bounceHigh, 1000).delay(function (d) {
return d.x * 100 + d.y / maxdepth * 0.06125;
});
_path.style("fill", function (d) {
var name = d.children ? d.name : d.parent.name;
d.c = specials[name] || color(name);
return d.c;
});
}
useScheme();
//Rotates the newly created arcs back towards their original position.
var ptrans = 0;
path.transition().duration(1000).each(function () {
return ptrans++;
}).ease("elastic", 2, 1).delay(function (d, i) {
return d.x * 100 + i % 4 * 250 + d.y / maxdepth * 0.25;
}).attr("d", _d3Utils.arc).each("end", function () {
ptrans--;
});
var gtrans = 0;
groups.transition().duration(3250).each(function () {
return gtrans++;
}).delay(function (d, i) {
return d.x * 100 + i % 4 * 250 + d.y / maxdepth * 0.25 + 250;
}).attrTween("transform", (0, _d3Utils.rotateTween)(deg)).each("end", function () {
gtrans--;
// if (ptrans === 0 && gtrans === 0) {
// d3.select(domElements.search).transition().duration(200).style("opacity", 1);
// }
});
//highlight & expand relevant arcs on mouseover
function highlight(d) {
//eslint-disable-line func-style
if (d) {
_d2.default.select(d.el).transition().delay(function (d) {
return (d.depth - 1) * 300 / maxdepth;
}) //eslint-disable-line no-shadow
.ease("back-out", 10).duration(500).attrTween("d", highlight.tween).style("fill", function (d) {
return d.c;
}); //eslint-disable-line no-shadow
}
if (d.children) {
var i = d.children.length;
while (i--) {
highlight(d.children[i]);
}
}
}
highlight.tween = (0, _d3Utils.hoverTween)(1);
function unhighlight(d) {
//eslint-disable-line func-style
if (d.el) {
_d2.default.select(d.el).transition().delay(function (d) {
return (d.depth - 1) * 300 / maxdepth;
}) //eslint-disable-line no-shadow
.ease("back-out", 4).duration(500).attrTween("d", unhighlight.tween).style("fill", function (d) {
return d.c;
}); //eslint-disable-line no-shadow
}
if (d.children) {
var i = d.children.length;
while (i--) {
unhighlight(d.children[i]);
}
}
}
unhighlight.tween = (0, _d3Utils.hoverTween)(0);
groups.on("mouseover", function (d) {
highlight(d);
title.text(d.name).style("font-size", Math.min(radius / d.name.length, 40) + "px");
var sizeInPercentage = (d.value / root.value * 100).toFixed(2);
percentageSize.text(sizeInPercentage + "%");
size.text("(" + (0, _prettysize2.default)(d.value || d.size) + ")");
}).on("mouseout", function (d) {
unhighlight(d);
title.text(root.name);
size.text((0, _prettysize2.default)(root.value || root.size));
percentageSize.text(root.value / root.size * 100 + "%");
});
//
//TODO: link updateMode function to MUI mode selection buttons
//
/*
const updateMode = function (mode, update) {
groups
.data(partition.value(modeFns[mode]).nodes)
.select("path")
.transition()
.duration(1500)
.attrTween("d", arcTween);
};
*/
};
var _d = require("d3");
var _d2 = _interopRequireDefault(_d);
var _prettysize = require("prettysize");
var _prettysize2 = _interopRequireDefault(_prettysize);
var _schemes = require("./schemes");
var _schemes2 = _interopRequireDefault(_schemes);
var _d3Utils = require("./d3-utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }