Skip to content

Commit

Permalink
Merge pull request #3733 from jbrundage/centroid_enhancements
Browse files Browse the repository at this point in the history 
feat: Add several publish properties to Graph2
  • Loading branch information
@GordonSmith
GordonSmith committed Nov 27, 2020
2 parents 70a3255 + 7b288de commit 50d900e
Show file tree
Hide file tree
Showing 17 changed files with 694 additions and 36 deletions.
212 changes: 212 additions & 0 deletions apps/graph2/centroid.html
View file
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HPCCJS App Page</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='../../packages/util/dist/index.js'></script>
<script src='../../packages/common/dist/index.js'></script>
<script src='../../packages/api/dist/index.js'></script>
<script src='../../packages/dataflow/dist/index.js'></script>
<script src='../../packages/chart/dist/index.js'></script>
<script src='../../packages/layout/dist/index.js'></script>
<script src='../../packages/html/dist/index.js'></script>
<script src='../../packages/dgrid-shim/dist/index.js'></script>
<script src='../../packages/dgrid/dist/index.js'></script>
<script src='../../packages/composite/dist/index.js'></script>
<script src='../../packages/phosphor-shim/dist/index.js'></script>
<script src='../../packages/phosphor/dist/index.js'></script>
<script src='../../packages/codemirror-shim/dist/index.js'></script>
<script src='../../packages/codemirror/dist/index.js'></script>
<script src='../../packages/react/dist/index.js'></script>
<script src='../../packages/graph/dist/index.js'></script>
<script src='../../packages/map/dist/index.js'></script>
<script src='../../packages/other/dist/index.js'></script>
<script src='../../packages/preact-shim/dist/index.js'></script>
<script src='../../packages/timeline/dist/index.js'></script>
<script src='../../packages/tree/dist/index.js'></script>
<script>
window.hpccjs = Object.keys(window).filter(n=>n.indexOf('@hpcc-js/')===0).reduce((o,n)=>{o[n.split('/')[1]]=window[n];return o;},{});
</script>
<style>
:root {
--topnav-height: 40px;
--subnav-height: 40px;
--top-height: calc(var(--topnav-height) + var(--subnav-height));
--leftnav-width: 0px;
--rightnav-width: 0px;

--topnav-background: #BBB;
--subnav-background: #CCC;
--leftnav-background: #DDD;
--rightnav-background: #888;
--content-background: #FFF;
}

#topnav,
#leftnav,
#rightnav,
#subnav,
#content {
position: fixed;
/* display: flex; */
}

#topnav {
top: 0;
left: 0;
right: 0;
height: var(--topnav-height);
background: var(--topnav-background);
}

#subnav {
top: var(--topnav-height);
left: 0;
right: 0;
height: var(--subnav-height);
background: var(--subnav-background);
}

#leftnav {
top: var(--top-height);
left: 0;
width: var(--leftnav-width);
bottom: 0;
background: var(--leftnav-background);
}

#rightnav {
top: var(--top-height);
right: 0;
width: var(--rightnav-width);
bottom: 0;
background: var(--rightnav-background);
}

#content {
top: var(--top-height);
right: var(--rightnav-width);
width: calc(100% - var(--leftnav-width) - var(--rightnav-width));
bottom: 0;
background: var(--content-background);
display: inline-block;
overflow-y: scroll;
}

.box {
float: left;
width: 320px;
height: 200px;
border: 1px solid black;
}
.icon-bar{
display: none!important;
}

#fa-hackfix{
visibility: hidden;
height:0px;
width:0px
}
</style>
</head>

<body>
<div id="topnav"></div>
<div id="subnav"></div>
<div id="leftnav">#leftnav</div>
<div id="rightnav">#rightnav</div>
<div id="content">
</div>
</body>

</html>

<!-- <script src='sample_data.js'></script> -->
<script>
const WIDTH = 100;
const HEIGHT = 100;
const ICON_SIZE = 16;
const CODE_OFFSET = 33;
const GRAPH_COUNT = 60;
//hpccjs.common.Utility.faKeys()
const content = document.getElementById("content");
window.onload = function(){
render();
}
function render() {
[...Array(GRAPH_COUNT)].forEach((n,i)=>{
const iconChar = String.fromCharCode(i + CODE_OFFSET);
const div = document.createElement("div");
div.style.width = WIDTH+"px";
div.style.height = HEIGHT+"px";
div.style.float = "left";
div.id = "div_"+i;
content.appendChild(div);
const vertices = [
[0, `Char #${i+CODE_OFFSET}`, iconChar, true],
[1, "123 Main St", "fa-home"],
[2, "555-555-5555", "fa-phone"],
[3, "SARAH MCKEE", "fa-user-o"]
];
const edges = [
[0,0,1],
[1,1,2],
[2,2,3]
];

const graph = new hpccjs.graph.DataGraph()
.target(div.id)
.layout('ForceDirectedHybrid')
.vertexColumns(["id", "label", "fachar", "centroid"])
.edgeColumns(["id", "source", "target"])
.forceDirectedRepulsionStrength(-3500)
.forceDirectedLinkDistance(150)
.forceDirectedLinkStrength(1.5)
.hierarchyDigraph(false)
.centroidColor('#777777')
.edgeStrokeWidth(2)
.edgeColor('#287EC4')
.zoomToFitLimit(1)
.allowDragging(true)
.applyScaleOnLayout(true)
.selectionGlowColor('#555555')
.highlightOnMouseOverEdge(true)
.highlightOnMouseOverVertex(true)
.vertexCategoryColumn('entitytype')

.vertexIDColumn('id')
.vertexLabelColumn('label')
.vertexFACharColumn("fachar")
.vertexCentroidColumn('centroid')

.edgeIDColumn("id")
.edgeSourceColumn('source')
.edgeTargetColumn('target')

.vertices(vertices)
.edges(edges)

.centroidScale(2)
.centroidTextHeight(12)
.centroidTextPadding(2)
.centroidIconHeight(ICON_SIZE)
.centroidIconPadding(8)
.centroidIconStrokeWidth(8)

.vertexTextHeight(16)
.vertexTextPadding(2)
.vertexIconHeight(32)
.vertexIconPadding(16)
.forceDirectedPinCentroid(true)

.render()
;
});
}
</script>

0 comments on commit 50d900e

Please sign in to comment.