How to use the gojs.Shape function in gojs

this.myDiagram.allowVerticalScroll = true;
        this.myDiagram.allowZoom = false;
        this.myDiagram.allowSelect = true;
        this.myDiagram.autoScale = Diagram.Uniform;
        this.myDiagram.contentAlignment = go.Spot.LeftCenter;
        this.myDiagram.toolManager.panningTool.isEnabled = false;
        this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        // define a simple Node template
        this.myDiagram.nodeTemplate =
            $(
                go.Node,
                'Auto',  // the Shape will go around the TextBlock
                { selectionChanged: (node: Node) => this.props.onNodeSelection(node.key as string, node.isSelected) },
                $(
                    go.Shape,
                    'RoundedRectangle',
                    { strokeWidth: 0 },
                    // Shape.fill is bound to Node.data.color
                    new go.Binding('fill', 'color')),
                $(
                    go.TextBlock,
                    { margin: 8 },  // some room around the text
                    // TextBlock.text is bound to Node.data.key
                    new go.Binding('text', 'key'))
            );

        // create the model data that will be represented by Nodes and Links
        this.myDiagram.model = new go.GraphLinksModel(this.props.model.nodeDataArray, this.props.model.linkDataArray);
    }
    render() {

function findHeadShot(key) {
      if (key < 0 || key > 16) return "images/HSnopic.png"; // There are only 16 images on the server
      return "images/HS" + key + ".png"
    }

    // the template we defined earlier
    this.diagram.nodeTemplate =
      $(go.Node, "Auto",
        // for sorting, have the Node.text be the data.name
        new go.Binding("text", "name"),
        // bind the Part.layerName to control the Node's layer depending on whether it isSelected
        new go.Binding("layerName", "isSelected", function(sel) {
          return sel ? "Foreground" : "";
        }).ofObject(),
        // define the node's outer shape
        $(go.Shape, "Rectangle", {
          name: "SHAPE",
          fill: "#00FF00",
          stroke: null,
          // set the port properties:
          portId: "",
          fromLinkable: true,
          toLinkable: true,
          cursor: "pointer"
        }),
        $(go.Panel, "Horizontal",
          $(go.Picture, {
              name: "Picture",
              desiredSize: new go.Size(39, 50),
              margin: new go.Margin(6, 8, 6, 10),
            },
            new go.Binding("source", "key", findHeadShot)),

let circles = new go.Set(go.Part);
                gridlayer.parts.each((circle: any) => {
                    if (circle.name === 'CIRCLE') { circles.add(circle); }
                });
                circles.each(function (circle) {
                    diagram.remove(circle);
                });
                // add circles centered at the root
                // let $ = go.GraphObject.make;  // for conciseness in defining templates
                for (let lay = 1; lay <= this.maxLayers; lay++) {
                    let radius = lay * this.layerThickness;
                    let circle =
                        $(go.Part,
                            { name: 'CIRCLE', layerName: 'Grid' },
                            { locationSpot: go.Spot.Center, location: this.root.location },
                            $(go.Shape, 'Circle',
                                { width: radius * 2, height: radius * 2 },
                                { fill: 'rgba(200,200,200,0.2)', stroke: null }));
                    diagram.add(circle);
                }
            }
        });

// define the Node template, representing an entity
      this.diagram.nodeTemplate =
          $(go.Node, 'Auto', // the whole node panel
            { selectionAdorned: true,
              resizable: true,
              layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
              fromSpot: go.Spot.AllSides,
              toSpot: go.Spot.AllSides,
              isShadowed: true,
              shadowColor: '#C5C1AA' },
            new go.Binding('location', 'location').makeTwoWay(),
            // whenever the PanelExpanderButton changes the visible property of the 'LIST' panel,
            // clear out any desiredSize set by the ResizingTool.
            new go.Binding('desiredSize', 'visible', () => new go.Size(NaN, NaN)).ofObject('LIST'),
            // define the node's outer shape, which will surround the Table
            $(go.Shape, 'Rectangle',
              { fill: this.getBrush('lightgrad'), stroke: '#756875', strokeWidth: 3 }),
            $(go.Panel, 'Table',
              { margin: 8, stretch: go.GraphObject.Fill },
              $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
              // the table header
              $(go.TextBlock,
                {
                  row: 0,
                  alignment: go.Spot.Center,
                  margin: new go.Margin(0, 14, 0, 2), // leave room for Button
                  font: 'bold 16px sans-serif'
                },
                new go.Binding('text', 'key')),
              // the collapse/expand button
              $('PanelExpanderButton', 'LIST', // the name of the element whose visibility this button toggles
                { row: 0, alignment: go.Spot.TopRight }),

this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
            {
                initialContentAlignment: go.Spot.Center,
                padding: 10,
                isReadOnly: false,
                'animationManager.isEnabled': false, // disable Animation
                'allowVerticalScroll': false, // no vertical scroll for diagram
                'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
            });
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
        this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
        let commonToolTip = this.$(go.Adornment, 'Auto',
            {
                isShadowed: true
            },
            this.$(go.Shape, { fill: '#FFFFCC' }),
            this.$(go.Panel, 'Vertical',
                {
                    margin: 3
                },
                this.$(go.TextBlock,  // bound to node data
                    {
                        margin: 4, font: 'bold 12pt sans-serif'
                    },
                    new go.Binding('text')),
                this.$(go.TextBlock,  // bound to Adornment because of call to Binding.ofObject
                    new go.Binding('text', '',
                        (ad) => {
                            return 'Connections: ' + ad.adornedPart.linksConnected.count;
                        }).ofObject())
            )  // end Vertical Panel
        );  // end Adornment

);

    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        $(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          $(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          $(go.TextBlock,
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#919191",
              margin: 2,
              minSize: new go.Size(10, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        )

alignment: go.Spot.Right,
                        alignmentFocus: go.Spot.Left
                    },
                    new go.Binding('text')),
                    new go.Binding('layerName', 'color')
            );

        // this is the root node, at the center of the circular layers
        this.myDiagram.nodeTemplateMap.add('Root',
            this.$(go.Node, 'Auto',
                {
                    locationSpot: go.Spot.Center,
                    selectionAdorned: true,
                    toolTip: commonToolTip
                },
                this.$(go.Shape, 'Circle',
                    { fill: 'white' }),
                this.$(go.TextBlock,
                    { font: 'bold 12pt sans-serif', margin: 5 },
                    new go.Binding('text'))
            ));

        // define the Link template
        this.myDiagram.linkTemplate =
            this.$(go.Link,
                {
                    routing: go.Link.Normal,
                    curve: go.Link.Bezier,
                    selectionAdorned: false,
                    layerName: 'Background'
                },
                this.$(go.Shape,

go.Shape,
                {
                    strokeWidth: 0,
                    figure: 'Rectangle',
                    fill: null,
                }
            ),
            $(
                go.Panel,
                go.Panel.Table,
                {
                    cursor: 'pointer'
                },
                $(go.RowColumnDefinition, {column: 0, minimum: 108}),
                $(
                    go.Shape,
                    {
                        row: 0,
                        column: 0,
                        width: 108,
                        height: 108,
                        figure: 'Circle',
                        position: new go.Point(-4, -4),
                    },
                    new go.Binding('fill', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].fill.top;
                    }),
                    new go.Binding('stroke', 'key', (key, node) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].stroke;
                    }),

allowSelect: true,
            autoScale: Diagram.Uniform,
            contentAlignment: go.Spot.LeftCenter,
            TextEdited: this.onTextEdited
        });

        myDiagram.toolManager.panningTool.isEnabled = false;
        myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

        myDiagram.nodeTemplate = $(
            go.Node,
            'Auto',
            {
                selectionChanged: node => this.props.onNodeSelection(node.key as string, node.isSelected)
            },
            $(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')),
            $(go.TextBlock, { margin: 8, editable: true }, new go.Binding('text', 'label'))
        );

        return myDiagram;
    }

import { ServerMapDiagramWithGojs } from './server-map-diagram-with-gojs.class';
import { ServerMapNodeClickExtraParam } from './server-map-node-click-extra-param.class';

enum CIRCLE_TYPE {
    GREEN = 'GREEN',
    ORANGE = 'ORANGE',
    RED = 'RED'
}
interface ICircleData {
    x: number;
    y: number;
    startAngle: number;
    sweepAngle: number;
}

go.Shape.defineFigureGenerator('RequestCircle', (shape: go.Shape, w: number, h: number) => {
    const param1 = shape && shape.parameter1 ? shape.parameter1 : null;
    let drawAngle: any = null;

    const rad = w / 2;
    const geo = new go.Geometry();
    const defaultStartAngle = -90;

    if (param1 === null) {
        const fig = new go.PathFigure(rad, 0, false, false);
        geo.add(fig);
        fig.add(new go.PathSegment(go.PathSegment.Arc, defaultStartAngle, 0, rad, rad, rad, rad));
        return geo;
    } else {
        drawAngle = param1;
    }
    if (drawAngle.startAngle && drawAngle.sweepAngle) {