2.85.14 • Published 26 days ago

@hpcc-js/graph v2.85.14

Weekly downloads
788
License
Apache-2.0
Repository
github
Last release
26 days ago

@hpcc-js/graph

This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.

Exported Widgets

Stand-alone HTML Example

<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>
    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-js/api@hpcc-js/common@hpcc-js/html@hpcc-js/react@hpcc-js/util
@infinitebrahmanuniverse/nolb-_hp@everything-registry/sub-chunk-402@hpcc-js/loader@hpcc-js/map@hpcc-js/marshaller@hpcc-js/eclwatch@zalastax/nolb-_hp
2.85.14

26 days ago

2.85.13

2 months ago

2.85.12

2 months ago

2.85.11

4 months ago

2.85.10

4 months ago

2.85.8

7 months ago

2.85.7

8 months ago

2.85.6

8 months ago

2.85.9

6 months ago

2.85.5

11 months ago

2.85.4

1 year ago

2.85.3

1 year ago

2.85.0

1 year ago

2.85.2

1 year ago

2.85.1

1 year ago

2.84.4

2 years ago

2.84.3

2 years ago

2.84.1

2 years ago

2.84.2

2 years ago

2.83.2

2 years ago

2.83.1

2 years ago

2.84.0

2 years ago

2.83.0

2 years ago

2.82.1

2 years ago

2.82.0

2 years ago

2.81.0

2 years ago

2.80.3

2 years ago

2.79.5

2 years ago

2.80.2

2 years ago

2.80.1

2 years ago

2.80.0

2 years ago

2.79.3

2 years ago

2.79.2

2 years ago

2.79.1

2 years ago

2.79.4

2 years ago

2.78.0

2 years ago

2.77.0

2 years ago

2.75.0

2 years ago

2.74.0

2 years ago

2.73.0

2 years ago

2.72.0

2 years ago

2.71.0

3 years ago

2.70.0

3 years ago

2.69.0

3 years ago

2.68.0

3 years ago

2.67.0

3 years ago

2.66.0

3 years ago

2.65.0

3 years ago

2.62.0

3 years ago

2.61.0

3 years ago

2.60.0

3 years ago

2.59.0

3 years ago

2.58.0

3 years ago

2.57.0

3 years ago

2.56.0

3 years ago

2.55.0

3 years ago

2.54.0

3 years ago

2.53.0

3 years ago

2.52.0

3 years ago

2.51.0

3 years ago

2.50.0

3 years ago

2.49.0

3 years ago

2.48.0

3 years ago

2.47.0

3 years ago

2.46.0

3 years ago

2.45.0

4 years ago

2.44.0

4 years ago

2.43.0

4 years ago

2.42.0

4 years ago

2.41.0

4 years ago

2.40.0

4 years ago

2.39.0

4 years ago

2.38.0

4 years ago

2.37.0

4 years ago

2.36.0

4 years ago

2.34.0

4 years ago

2.33.0

4 years ago

2.32.0

4 years ago

2.31.0

4 years ago

2.30.0

4 years ago

2.29.0

4 years ago

2.28.0

4 years ago

2.27.0

4 years ago

2.26.0

4 years ago

2.25.0

4 years ago

2.24.0

4 years ago

2.23.0

4 years ago

2.22.0

4 years ago

2.21.0

4 years ago

2.20.0

4 years ago

2.19.0

4 years ago

2.18.0

4 years ago

2.17.0

4 years ago

2.16.0

4 years ago

2.15.13

4 years ago

2.15.10

4 years ago

2.15.7

4 years ago

2.15.6

4 years ago

2.15.4

4 years ago

2.15.5

4 years ago

2.15.2

4 years ago

2.15.1

4 years ago

2.15.0

4 years ago

2.14.2

4 years ago

2.14.1

4 years ago

2.14.0

4 years ago

2.13.2

4 years ago

2.13.1

4 years ago

2.12.0

4 years ago

2.11.1

4 years ago

2.11.0

5 years ago

2.10.4

5 years ago

2.10.3

5 years ago

2.10.2

5 years ago

2.10.0

5 years ago

2.9.16

5 years ago

2.9.15

5 years ago

2.9.14

5 years ago

2.9.13

5 years ago

2.9.12

5 years ago

2.9.11

5 years ago

2.9.10

5 years ago

2.9.9

5 years ago

2.9.8

5 years ago

2.9.7

5 years ago

2.9.6

5 years ago

2.9.4

5 years ago

2.9.3

5 years ago

2.9.2

5 years ago

2.9.1

5 years ago

2.9.0

5 years ago

2.8.0

5 years ago

2.7.0

5 years ago

2.6.0

5 years ago

2.5.9

5 years ago

2.5.8

5 years ago

2.5.7

5 years ago

2.5.6

5 years ago

2.5.5

5 years ago

2.5.4

5 years ago

2.5.3

5 years ago

2.5.2

5 years ago

2.5.1

5 years ago

2.5.0

5 years ago

2.4.0

6 years ago

2.3.0

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

0.2.23

6 years ago

0.2.22

6 years ago

0.2.21

6 years ago

0.2.20

6 years ago

0.2.18

6 years ago

0.2.17

6 years ago

0.2.16

6 years ago

0.2.15

6 years ago

0.2.14

6 years ago

0.2.13

6 years ago

0.2.12

6 years ago

0.2.11

6 years ago

0.2.10

6 years ago

0.2.9

6 years ago

0.2.8

6 years ago

0.2.7

6 years ago

0.2.6

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.78

6 years ago

0.0.77

6 years ago

0.0.76

6 years ago

0.0.75

6 years ago

0.0.74

6 years ago

0.0.73

6 years ago

0.0.72

6 years ago

0.0.71

6 years ago

0.0.70

6 years ago

0.0.69

6 years ago

0.0.66

6 years ago

0.0.63

6 years ago

0.0.62

6 years ago

0.0.60

6 years ago

0.0.59

6 years ago

0.0.57

6 years ago

0.0.55

6 years ago

0.0.54

6 years ago

0.0.53

6 years ago

0.0.52

6 years ago

0.0.51

6 years ago

0.0.49

6 years ago

0.0.48

6 years ago

0.0.47

6 years ago

0.0.46

6 years ago

0.0.45

7 years ago

0.0.44

7 years ago

0.0.43

7 years ago

0.0.42

7 years ago

0.0.41

7 years ago

0.0.40

7 years ago

0.0.39

7 years ago

0.0.38

7 years ago

0.0.37

7 years ago

0.0.36

7 years ago

0.0.35

7 years ago

0.0.34

7 years ago

0.0.32

7 years ago

0.0.31

7 years ago

0.0.30

7 years ago

0.0.28

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.23

7 years ago

0.0.21

7 years ago

0.0.18

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.8

7 years ago

0.0.5

7 years ago

0.0.1

7 years ago