How to use the @hpcc-js/graph.Graph function in @hpcc-js/graph

describe(`${item.prototype.constructor.name}`, () => {
                    if (item.prototype instanceof Class) {
                        classDef("graph", item);
                    }
                    if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
                        switch (item.prototype.constructor) {
                            case Edge:
                                const graph = new Graph();
                                const vertices: any[] = [];
                                const edges: any[] = [];
                                const palette = Palette.ordinal("dark2");

                                const rawData = data.simple;
                                rawData.nodes.forEach(function (node) {
                                    vertices.push(
                                        new Vertex()
                                            .text(node.name)
                                            .textbox_shape_colorStroke(palette(node.icon))
                                            .textbox_shape_colorFill("whitesmoke")
                                            .icon_diameter(60)
                                            .icon_shape_colorStroke("transparent")
                                            .icon_shape_colorFill("transparent")
                                            .icon_image_colorFill("#333333")
                                            .textbox_shape_colorStroke("transparent")

{ "source": 1, "target": 0 },
        { "source": 2, "target": 0 },
    ]
};
var graphData = { vertices: [], edges: [] };

rawData.nodes.forEach(function (node, idx) {
    let dateStr = `${Math.floor(Math.random() * 27) + 1991}-01-01`;
    graphData.vertices.push(new Vertex().text(node.name + ` (${dateStr})`).faChar(node.icon));
    graphData.vertices[idx].date = new Date(dateStr).getTime();
}, graph);
rawData.links.forEach(function (link) {
    graphData.edges.push(new Edge().sourceVertex(graphData.vertices[link.source]).targetVertex(graphData.vertices[link.target]).weight(link.value));
}, graph);

var graph = new Graph().data(graphData);
let slider = new Slider()
    .allowRange(true)
    .timePattern("%Y-%m-%d")
    .tickDateFormat("%b,%Y")
    .lowDatetime("1990-07-03")
    .highDatetime("2018-05-24")
    .step(1)
    .columns(["Date/Time"])
    .data([
        ["1990-07-03", "2018-05-24"]
    ]);
slider.change = function (s) {
    graph.data().vertices.forEach(function (vertex) {
        vertex.visible(s.data()[0][0] <= vertex.date && vertex.date <= s.data()[0][1]);
    })
}

private _tabLHS = new TabPanel();
    private _dashboard: Dashboard = new Dashboard(this._elementContainer)
        .on("vizActivation", (viz: Element) => {
            this.selectionChanged(viz);
        })
        .on("vizStateChanged", (viz: Element) => {
            for (const filteredViz of this._elementContainer.filteredBy(viz.id())) {
                if (this._currViz === filteredViz) {
                    this.refreshPreview();
                }
            }
        })
        ;
    private _graphAdapter = new GraphAdapter(this._elementContainer);
    private _pipeline: Graph = new Graph()
        .allowDragging(false)
        .applyScaleOnLayout(true)
        .on("vertex_click", (row: any, col: string, sel: boolean, ext: any) => {
            const obj = row.__lparam[0];
            this.selectionChanged(obj.viz, obj.activity);
        })
        .on("vertex_contextmenu", (row: any, col: string, sel: boolean, ext: any) => {
        })
        ;

    private _tabDDL = new TabPanel();
    private _ddlSchema = new JSONEditor().json(ddl2Schema);
    private _ddlEditor = new DDLEditor();
    private _jsEditor = new JSEditor();
    private _layoutEditor = new JSONEditor();
    private _ddlv1 = new JSONEditor();

import { Palette } from "@hpcc-js/common";
import { Graph, Vertex, Edge } from "@hpcc-js/graph";

new Graph()
    .target("target")
    .data(createData())
    .layout("Circle")
    .applyScaleOnLayout(true)
    .render((g) => {
        g
            .layout("ForceDirected")
            .render()
            ;
    })
    ;

function createData() {
    var vertices = [];
    var edges = [];
    var palette = Palette.ordinal("dark2");

initGraph() {
        this.graphStatus = dom.byId(this.id + "GraphStatus");
        this._graph = new GraphWidget()
            .target(this.id + "MainGraphWidget")
            .layout("Hierarchy")
            .applyScaleOnLayout(true)
            .showToolbar(false)
            .allowDragging(false)
            .on("vertex_click", sel => {
                this.syncSelectionFrom(this._graph);
            })
            .on("edge_click", sel => {
                this.syncSelectionFrom(this._graph);
            })
            .on("progress", what => {
                switch (what) {
                    case "start":
                    case "layout-start":
                    case "layout-tick":

initGraph() {
        this.graphStatus = dom.byId(this.id + "GraphStatus");
        this._graph = new GraphWidget()
            .target(this.id + "MainGraphWidget")
            .layout("Hierarchy")
            .applyScaleOnLayout(true)
            .showToolbar(false)
            .allowDragging(false)
            .on("progress", what => {
                switch (what) {
                    case "start":
                    case "layout-start":
                    case "layout-tick":
                        this.graphStatus.innerText = this.i18n.PerformingLayout;
                        break;
                    case "layout-end":
                    case "end":
                    default:
                        this.graphStatus.innerText = "";

this.viewClick(this._toggleActivities);
        });

    private _toggleEdges = new ToggleButton().faChar("fa-table").tooltip("Edges")
        .selected(false)
        .on("click", () => {
            this.viewClick(this._toggleEdges);
        });

    private _toggleSubgraphs = new ToggleButton().faChar("fa-table").tooltip("Subgraphs")
        .selected(false)
        .on("click", () => {
            this.viewClick(this._toggleSubgraphs);
        });

    protected _graph = new GraphWidget()
        .layout("Hierarchy")
        .applyScaleOnLayout(true)
        .showToolbar(false)
        .allowDragging(false)
        ;

    private _activities = new Table()
        .pagination(false)
        ;

    private _edges = new Table()
        .pagination(false)
        ;

    private _subgraphs = new Table()
        .pagination(false)

enter() {
        super.enter.apply(this, arguments);
        const graph = new Graph()
            .layout("None")
            .zoomable(false)
            ;

        const origRender = graph.render;
        const context = this;
        graph.render = function (callback?): Graph {
            const vertices = [];
            const edges = [];
            let prevAddr = null;
            context.data().forEach(function (row) {
                const pos2 = context._viewportSurface.project(row[0], row[1]);
                const newAddr = new Shape()
                    .shape("circle")
                    .radius(3)
                    .data(row)