UNPKG

@swimlane/ngx-charts

Version:

Declarative Charting Framework for Angular2 and beyond!

1 lines 12.7 kB
[{"__symbolic":"module","version":3,"metadata":{"ForceDirectedGraphComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../common/base-chart.component","name":"BaseChartComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-charts-force-directed-graph","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\">\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 *ngIf=\"linkTemplate\"\n [ngTemplateOutlet]=\"linkTemplate\"\n [ngOutletContext]=\"{ $implicit: link }\">\n </ng-template>\n <svg:line *ngIf=\"!linkTemplate\"\n strokeWidth=\"1\" 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 *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 <ng-template *ngIf=\"nodeTemplate\"\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngOutletContext]=\"{ $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"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"force":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"forceLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legendTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"activeEntries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tooltipDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"activate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deactivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"linkTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["linkTemplate"]}]}],"nodeTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["nodeTemplate"]}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["tooltipTemplate"]}]}],"chart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../common/charts/chart.component","name":"ChartComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"groupResultsBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"},"arguments":["document:mousemove",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"ForceDirectedGraphComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../common/base-chart.component","name":"BaseChartComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-charts-force-directed-graph","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\">\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 *ngIf=\"linkTemplate\"\n [ngTemplateOutlet]=\"linkTemplate\"\n [ngOutletContext]=\"{ $implicit: link }\">\n </ng-template>\n <svg:line *ngIf=\"!linkTemplate\"\n strokeWidth=\"1\" 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 *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 <ng-template *ngIf=\"nodeTemplate\"\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngOutletContext]=\"{ $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"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"force":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"forceLink":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legendTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nodes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"links":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"activeEntries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tooltipDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"activate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deactivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"linkTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["linkTemplate"]}]}],"nodeTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["nodeTemplate"]}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["tooltipTemplate"]}]}],"chart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../common/charts/chart.component","name":"ChartComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"groupResultsBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"},"arguments":["document:mousemove",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]}]}]}}}}]