# @hpcc-js/graph
This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including [Quick Start](https://github.com/hpcc-systems/Visualization/wiki/Quick-Start), [Gallery](https://raw.githack.com/hpcc-systems/Visualization/trunk/demos/gallery/gallery.html) and [Tutorials](https://github.com/hpcc-systems/Visualization/wiki/Tutorials), please visit the main page on GitHub:  [hpcc-systems/Visualization](https://github.com/hpcc-systems/Visualization).

## Exported Widgets
* [Sankey](https://rawgit.com/hpcc-systems/Visualization/trunk/demos/gallery/playground.html?./samples/graph/Sankey.js)
* [Graph](https://rawgit.com/hpcc-systems/Visualization/trunk/demos/gallery/playground.html?./samples/graph/Les%20Miserables.js) / [Graph (Example 2)](https://rawgit.com/hpcc-systems/Visualization/trunk/demos/gallery/playground.html?./samples/graph/Different%20Nodes.js)
* [Subgraph](https://rawgit.com/hpcc-systems/Visualization/trunk/demos/gallery/playground.html?./samples/graph/Custom%20Colors.js)

## Stand-alone HTML Example
```html
<html>
    <head>
        <title>Simple Graph</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <script src="https://unpkg.com/@hpcc-js/util"></script>
        <script src="https://unpkg.com/@hpcc-js/common"></script>
        <script src="https://unpkg.com/@hpcc-js/api"></script>
        <script src="https://unpkg.com/@hpcc-js/graph"></script>
    </head>
    <body>
        <div id="placeholder" style="width:400px;height:400px;"></div>
        <script>
            var verts = [
                { "name": "John Doe", "icon": "" },
                { "name": "Jane Doe", "icon": "" },
                { "name": "123 Main Street", "icon": "", "centroid": true }
            ].map(node=>{
                return new window["@hpcc-js/graph"].Vertex()
                    .text(node.name)
                    .faChar(node.icon)
                    ;
            });
            var chart = new window["@hpcc-js/graph"].Graph()
                .target("placeholder")
                .layout("Circle")
                .data({
                    vertices: verts,
                    edges: [
                        new window["@hpcc-js/graph"].Edge().sourceVertex(verts[2]).targetVertex(verts[0]),
                        new window["@hpcc-js/graph"].Edge().sourceVertex(verts[2]).targetVertex(verts[1]),
                    ]
                })
                .render();
            console.log("Other layout options:",chart.__meta_layout.set);
        </script>
    </body>
</html>
```

<ClientOnly>
  <hpcc-vitepress style="width:100%;height:600px">
    <div id="target" style="height:600px">
    </div>
    <script type="module">
        import { Graph2 } from "@hpcc-js/graph";
        import { CentroidVertex3, Vertex3 } from "@hpcc-js/react";

        const vertices = [
            {
                id: 0,
                text: "JAKE MCKEE",
                centroid: true,
                icon: {
                    imageChar: ""
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(10, 15, -5),
                    dAnno(15, -4),
                    exclamationAnno(15, -4),
                ]

            },
            {
                id: 1,
                text: "123 Main St",
                icon: {
                    imageChar: "",
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(13,5,-1),
                    exclamationAnno(),
                ]
            },
            {
                id: 2,
                text: "555-55-5555",
                icon: {
                    imageChar: "",
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(8,5,-1),
                    exclamationAnno(),
                ]
            },
            {
                id: 3,
                text: "Jmckee@gmail.com",
                icon: {
                    imageChar: ""
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(5,5,-1),
                    exclamationAnno(),
                ]
            },
            {
                id: 4,
                text: "303-123-1234",
                icon: {
                    imageChar: ""
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(5,5,-1),
                    checkmarkAnno(),
                ]
            },
            {
                id: 5,
                text: "123039923",
                icon: {
                    imageChar: "",
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(5,5,-1),
                    checkmarkAnno()
                ]
            },
            {
                id: 6,
                text: "FL-2372-3982-9292-2929",
                icon: {
                    imageChar: "",
                },
                subText: {
                    text: "03/26/2020",
                    textFill: "#555555"
                },
                annotationMeta: [
                    greyAnno(5,5,-1),
                    checkmarkAnno(),
                ]
            },
            {
                id: 7,
                text: "11.12.3.301.31",
                icon: {
                    imageChar: ""
                },
                subText: {
                    text: "03/26/2020",
                },
                annotationMeta: [
                    greyAnno(8,5,-1),
                    exclamationAnno(),
                ]
            },
        ];

        function greyAnno(text, padding = 5, yOffset = -1){
            return {
                text: text+"",
                fill: "#555555",
                stroke: "#555555",
                textFill: "#ffffff",
                padding: padding,
                yOffset: yOffset
            }
        }
        function dAnno(){
            return {
                text: "D",
                fill: "#ED1C24",
                stroke: "#ED1C24",
                textFill: "#ffffff",
                fontFamily: "Arial",
                padding: 15,
                yOffset: -4
            };
        }
        function exclamationAnno(padding, yOffset){
            return {
                text: "",
                fill: "#ED1C24",
                stroke: "#ED1C24",
                textFill: "#ffffff",
                fontFamily: "Arial",
                padding: padding,
                yOffset: yOffset,
                fontFamily: "'Font Awesome 5 Free'",
            };
        }
        function checkmarkAnno(padding, yOffset){
            return {
                text: "",
                fill: "#00802B",
                stroke: "#00802B",
                textFill: "#ffffff",
                fontFamily: "'Font Awesome 5 Free'",
                padding: padding,
                yOffset: yOffset,
            };
        }
        const graphData = { vertices };
        graphData.edges = vertices.slice(1).map((n,i)=>{
            return {
                id: i,
                source: graphData.vertices[0],
                target: graphData.vertices[i+1],
            }
        })

        new Graph2()
            .target("target")
            .centroidRenderer(CentroidVertex3)
            .vertexRenderer(Vertex3)
            .edgeColor("#287EC4")
            .edgeStrokeWidth(2)
            .edgeArcDepth(0)
            .data(graphData)
            .centroidColor("#777777")
            .on("vertex_click", (row, col, sel) => console.log("click", row, col, sel))
            .on("vertex_dblclick", (row, col, sel) => console.log("dblclick", row, col, sel))
            .on("vertex_mousein", (row, col, sel) => console.log("mousein", row, col, sel))
            .on("vertex_mouseover", (row, col, sel) => console.log("mouseover", row, col, sel))
            .on("vertex_mouseout", (row, col, sel) => console.log("mouseout", row, col, sel))
            .forceDirectedAlphaDecay(0.003)
            .layout("ForceDirected")
            .transitionDuration(0)
            .render()
            ;
    </script>
  </hpcc-vitepress>
</ClientOnly>