@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
1 lines • 7.31 kB
JSON
[{"__symbolic":"module","version":4,"metadata":{"ForceDirectedGraphComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../common/base-chart.component","name":"BaseChartComponent","line":84,"character":49},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"ngx-charts-force-directed-graph","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n [animations]=\"animations\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\"\n >\n <svg:g [attr.transform]=\"transform\" class=\"force-directed-graph chart\">\n <svg:g class=\"links\">\n <svg:g *ngFor=\"let link of links; trackBy: trackLinkBy\">\n <ng-template\n *ngIf=\"linkTemplate\"\n [ngTemplateOutlet]=\"linkTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: link }\"\n ></ng-template>\n <svg:line\n *ngIf=\"!linkTemplate\"\n strokeWidth=\"1\"\n class=\"edge\"\n [attr.x1]=\"link.source.x\"\n [attr.y1]=\"link.source.y\"\n [attr.x2]=\"link.target.x\"\n [attr.y2]=\"link.target.y\"\n />\n </svg:g>\n </svg:g>\n <svg:g class=\"nodes\">\n <svg:g\n *ngFor=\"let node of nodes; trackBy: trackNodeBy\"\n [attr.transform]=\"'translate(' + node.x + ',' + node.y + ')'\"\n [attr.fill]=\"colors.getColor(groupResultsBy(node))\"\n [attr.stroke]=\"colors.getColor(groupResultsBy(node))\"\n (mousedown)=\"onDragStart(node, $event)\"\n (click)=\"onClick({ name: node.value })\"\n ngx-tooltip\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'tooltip'\"\n [tooltipTitle]=\"tooltipTemplate ? undefined : node.value\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipContext]=\"node\"\n >\n <ng-template\n *ngIf=\"nodeTemplate\"\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: node }\"\n ></ng-template>\n <svg:circle *ngIf=\"!nodeTemplate\" r=\"5\" />\n </svg:g>\n </svg:g>\n </svg:g>\n </ngx-charts-chart>\n ","styleUrls":["../common/base-chart.component.css","./force-directed-graph.component.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":81,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":82,"character":19},"member":"OnPush"}}]}],"members":{"force":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"forceLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"legendTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"legendPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"nodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"activeEntries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"tooltipDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"activate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3}}]}],"deactivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":102,"character":3}}]}],"linkTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":104,"character":3},"arguments":["linkTemplate",{"static":false}]}]}],"nodeTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":105,"character":3},"arguments":["nodeTemplate",{"static":false}]}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":106,"character":3},"arguments":["tooltipTemplate",{"static":false}]}]}],"chart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":107,"character":3},"arguments":[{"__symbolic":"reference","module":"../common/charts/chart.component","name":"ChartComponent","line":107,"character":13},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":107,"character":37},"static":false}]}]}],"groupResultsBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"update":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onActivate":[{"__symbolic":"method"}],"onDeactivate":[{"__symbolic":"method"}],"getSeriesDomain":[{"__symbolic":"method"}],"trackLinkBy":[{"__symbolic":"method"}],"trackNodeBy":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"getLegendOptions":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDrag":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":207,"character":3},"arguments":["document:mousemove",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":215,"character":3},"arguments":["document:mouseup",["$event"]]}]}]}}}}]