Skip to content

Commit

Permalink
feat(codeflower): make basic vertical flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@phodal
phodal committed Mar 3, 2021
1 parent 2fa021f commit 2d7241a
Showing 1 changed file with 28 additions and 16 deletions.
44 changes: 28 additions & 16 deletions web/public/js/graph/cloc/code-flower.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
function renderCodeFlower(data, selector) {
data = {
nodes: [
{"id": "Myriel", "group": 1},
{"id": "CountessdeLo", "group": 1},
{"id": "Geborand", "group": 1},
{"id": "Champtercier", "group": 1},
],
links: [
{"source": "CountessdeLo", "target": "Myriel", "value": 1},
{"source": "Geborand", "target": "Myriel", "value": 1},
{"source": "Champtercier", "target": "Myriel", "value": 1},
]
}
data = {"name":"root","children":[{"name":"src","children":[{"name":"Faker","children":[{"name":"Provider","children":[{"name":"sk_SK","children":[{"name":"Address.php","size":337,"language":"PHP"},{"name":"Person.php","size":129,"language":"PHP"},{"name":"Company.php","size":49,"language":"PHP"},{"name":"Internet.php","size":22,"language":"PHP"},{"name":"PhoneNumber.php","size":13,"language":"PHP"}],"size":550},{"name":"ua_UA","children":[{"name":"Address.php","size":319,"language":"PHP"},{"name":"Transliteration.php","size":47,"language":"PHP"},{"name":"Person.php","size":39,"language":"PHP"},{"name":"Company.php","size":35,"language":"PHP"},{"name":"Internet.php","size":22,"language":"PHP"},{"name":"PhoneNumber.php","size":22,"language":"PHP"}],"size":484},{"name":"da_DK","children":[{"name":"Address.php","size":179,"language":"PHP"},{"name":"Person.php","size":145,"language":"PHP"},{"name":"Company.php","size":34,"language":"PHP"},{"name":"Internet.php","size":33,"language":"PHP"},{"name":"PhoneNumber.php","size":13,"language":"PHP"}],"size":404},{"name":"de_DE","children":[{"name":"Person.php","size":172,"language":"PHP"},{"name":"Address.php","size":73,"language":"PHP"},{"name":"Internet.php","size":27,"language":"PHP"},{"name":"PhoneNumber.php","size":18,"language":"PHP"},{"name":"Company.php","size":12,"language":"PHP"}],"size":302},{"name":"de_AT","children":[{"name":"Person.php","size":170,"language":"PHP"},{"name":"Address.php","size":87,"language":"PHP"}],"size":257},{"name":"Lorem.php","size":138,"language":"PHP"},{"name":"ru_RU","children":[{"name":"Address.php","size":132,"language":"PHP"},{"name":"Person.php","size":74,"language":"PHP"},{"name":"Internet.php","size":19,"language":"PHP"},{"name":"PhoneNumber.php","size":12,"language":"PHP"}],"size":237},{"name":"fr_FR","children":[{"name":"Company.php","size":117,"language":"PHP"},{"name":"Address.php","size":93,"language":"PHP"},{"name":"PhoneNumber.php","size":39,"language":"PHP"},{"name":"Person.php","size":30,"language":"PHP"},{"name":"Internet.php","size":27,"language":"PHP"}],"size":306},{"name":"pt_BR","children":[{"name":"Address.php","size":110,"language":"PHP"},{"name":"Person.php","size":88,"language":"PHP"},{"name":"Company.php","size":51,"language":"PHP"},{"name":"PhoneNumber.php","size":29,"language":"PHP"}],"size":278},{"name":"bg_BG","children":[{"name":"Person.php","size":107,"language":"PHP"},{"name":"Internet.php","size":21,"language":"PHP"},{"name":"PhoneNumber.php","size":18,"language":"PHP"}],"size":146},{"name":"nl_NL","children":[{"name":"Person.php","size":87,"language":"PHP"},{"name":"Address.php","size":83,"language":"PHP"},{"name":"PhoneNumber.php","size":32,"language":"PHP"},{"name":"Company.php","size":12,"language":"PHP"},{"name":"Internet.php","size":8,"language":"PHP"}],"size":222},{"name":"UserAgent.php","size":86,"language":"PHP"},{"name":"DateTime.php","size":85,"language":"PHP"},{"name":"Internet.php","size":85,"language":"PHP"},{"name":"cs_CZ","children":[{"name":"Person.php","size":83,"language":"PHP"},{"name":"Internet.php","size":22,"language":"PHP"},{"name":"PhoneNumber.php","size":12,"language":"PHP"}],"size":117},{"name":"nl_BE","children":[{"name":"Address.php","size":82,"language":"PHP"},{"name":"Internet.php","size":27,"language":"PHP"},{"name":"PhoneNumber.php","size":18,"language":"PHP"},{"name":"Person.php","size":11,"language":"PHP"},{"name":"Company.php","size":10,"language":"PHP"}],"size":148},{"name":"it_IT","children":[{"name":"Address.php","size":80,"language":"PHP"},{"name":"Person.php","size":69,"language":"PHP"},{"name":"Company.php","size":50,"language":"PHP"},{"name":"PhoneNumber.php","size":19,"language":"PHP"},{"name":"Internet.php","size":8,"language":"PHP"}],"size":226},{"name":"es_ES","children":[{"name":"Address.php","size":79,"language":"PHP"},{"name":"Company.php","size":61,"language":"PHP"},{"name":"Person.php","size":31,"language":"PHP"},{"name":"PhoneNumber.php","size":27,"language":"PHP"}],"size":198},{"name":"en_US","children":[{"name":"Address.php","size":79,"language":"PHP"},{"name":"Person.php","size":79,"language":"PHP"},{"name":"Company.php","size":49,"language":"PHP"},{"name":"PhoneNumber.php","size":31,"language":"PHP"}],"size":238},{"name":"Base.php","size":78,"language":"PHP"},{"name":"es_AR","children":[{"name":"Address.php","size":77,"language":"PHP"},{"name":"Person.php","size":74,"language":"PHP"},{"name":"Company.php","size":51,"language":"PHP"},{"name":"PhoneNumber.php","size":40,"language":"PHP"}],"size":242},{"name":"en_GB","children":[{"name":"Address.php","size":73,"language":"PHP"},{"name":"PhoneNumber.php","size":17,"language":"PHP"},{"name":"Internet.php","size":8,"language":"PHP"}],"size":98},{"name":"fi_FI","children":[{"name":"Address.php","size":71,"language":"PHP"},{"name":"Person.php","size":66,"language":"PHP"},{"name":"Company.php","size":49,"language":"PHP"},{"name":"PhoneNumber.php","size":18,"language":"PHP"},{"name":"Internet.php","size":8,"language":"PHP"}],"size":212},{"name":"Address.php","size":70,"language":"PHP"},{"name":"pl_PL","children":[{"name":"Person.php","size":45,"language":"PHP"},{"name":"Internet.php","size":22,"language":"PHP"},{"name":"PhoneNumber.php","size":12,"language":"PHP"}],"size":79},{"name":"sr_Cyrl_RS","children":[{"name":"Address.php","size":40,"language":"PHP"},{"name":"Person.php","size":14,"language":"PHP"}],"size":54},{"name":"sr_Latn_RS","children":[{"name":"Address.php","size":40,"language":"PHP"},{"name":"Person.php","size":14,"language":"PHP"}],"size":54},{"name":"sr_RS","children":[{"name":"Address.php","size":40,"language":"PHP"},{"name":"Person.php","size":14,"language":"PHP"}],"size":54},{"name":"Miscellaneous.php","size":35,"language":"PHP"},{"name":"tr_TR","children":[{"name":"Person.php","size":32,"language":"PHP"},{"name":"PhoneNumber.php","size":9,"language":"PHP"},{"name":"Internet.php","size":6,"language":"PHP"}],"size":47},{"name":"Uuid.php","size":30,"language":"PHP"},{"name":"Person.php","size":23,"language":"PHP"},{"name":"Company.php","size":18,"language":"PHP"},{"name":"PhoneNumber.php","size":10,"language":"PHP"}],"size":5611},{"name":"ORM","children":[{"name":"Propel","children":[{"name":"EntityPopulator.php","size":136,"language":"PHP"},{"name":"ColumnTypeGuesser.php","size":63,"language":"PHP"},{"name":"Populator.php","size":58,"language":"PHP"}],"size":257},{"name":"Doctrine","children":[{"name":"EntityPopulator.php","size":132,"language":"PHP"},{"name":"Populator.php","size":52,"language":"PHP"},{"name":"ColumnTypeGuesser.php","size":42,"language":"PHP"}],"size":226},{"name":"Mandango","children":[{"name":"EntityPopulator.php","size":80,"language":"PHP"},{"name":"Populator.php","size":39,"language":"PHP"},{"name":"ColumnTypeGuesser.php","size":30,"language":"PHP"}],"size":149}],"size":632},{"name":"Guesser","children":[{"name":"Name.php","size":57,"language":"PHP"}],"size":57},{"name":"Generator.php","size":52,"language":"PHP"},{"name":"Documentor.php","size":49,"language":"PHP"},{"name":"Factory.php","size":37,"language":"PHP"}],"size":6438},{"name":"autoload.php","size":17,"language":"PHP"}],"size":6455},{"name":"test","children":[{"name":"Faker","children":[{"name":"GeneratorTest.php","size":106,"language":"PHP"},{"name":"Provider","children":[{"name":"BaseTest.php","size":101,"language":"PHP"},{"name":"LoremTest.php","size":81,"language":"PHP"},{"name":"fr_FR","children":[{"name":"CompanyTest.php","size":68,"language":"PHP"}],"size":68},{"name":"UserAgentTest.php","size":30,"language":"PHP"},{"name":"PersonTest.php","size":21,"language":"PHP"},{"name":"UuidTest.php","size":21,"language":"PHP"},{"name":"LocalizationTest.php","size":14,"language":"PHP"}],"size":336},{"name":"PHPUnit","children":[{"name":"Framework","children":[{"name":"Constraint","children":[{"name":"IsValidSirenSiret.php","size":24,"language":"PHP"},{"name":"IsValidSiren.php","size":11,"language":"PHP"},{"name":"IsValidSiret.php","size":11,"language":"PHP"}],"size":46}],"size":46}],"size":46}],"size":488},{"name":"test.php","size":37,"language":"PHP"},{"name":"documentor.php","size":11,"language":"PHP"}],"size":536},{"name":".travis.yml","size":3,"language":"YAML"}],"size":6994}

let w = GraphConfig.width;
let h = GraphConfig.height;
let testdata = flatten(data);
console.log(testdata);

let treemap = d3.tree()
.size([w, h]);
let nodes = d3.hierarchy(data);
const links = nodes.links(nodes);

const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
nodes = treemap(nodes);

d3.select(selector).selectAll("svg").remove();
const svg = d3.select(selector).append("svg").attr("viewBox", [0, 0, w, h]);

const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
// .force("link", d3.forceLink(links).id(d => {d.id}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(w / 2, h / 2));

Expand Down Expand Up @@ -87,4 +81,22 @@ function renderCodeFlower(data, selector) {
.on("end", dragended);

}

function flatten(root) {
let nodes = [], i = 0;

function recurse(node) {
if (node.children) {
node.size = node.children.reduce(function(p, v) {
return p + recurse(v);
}, 0);
}
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}

root.size = recurse(root);
return nodes;
}
}

0 comments on commit 2d7241a

Please sign in to comment.