@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
1 lines • 19.1 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"AreaChartStackedComponent":{"__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-area-chart-stacked","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n [activeEntries]=\"activeEntries\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\">\n <svg:defs>\n <svg:clipPath [attr.id]=\"clipPathId\">\n <svg:rect\n [attr.width]=\"dims.width + 10\"\n [attr.height]=\"dims.height + 10\"\n [attr.transform]=\"'translate(-5, -5)'\"/>\n </svg:clipPath>\n </svg:defs>\n <svg:g [attr.transform]=\"transform\" class=\"area-chart chart\">\n <svg:g ngx-charts-x-axis\n *ngIf=\"xAxis\"\n [xScale]=\"xScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showXAxisLabel\"\n [labelText]=\"xAxisLabel\"\n [tickFormatting]=\"xAxisTickFormatting\"\n (dimensionsChanged)=\"updateXAxisHeight($event)\">\n </svg:g>\n <svg:g ngx-charts-y-axis\n *ngIf=\"yAxis\"\n [yScale]=\"yScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showYAxisLabel\"\n [labelText]=\"yAxisLabel\"\n [tickFormatting]=\"yAxisTickFormatting\"\n (dimensionsChanged)=\"updateYAxisWidth($event)\">\n </svg:g>\n <svg:g [attr.clip-path]=\"clipPath\">\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-area-series\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [gradient]=\"gradient\"\n [activeEntries]=\"activeEntries\"\n stacked=\"true\"\n [curve]=\"curve\"\n />\n </svg:g>\n\n <svg:g *ngIf=\"!tooltipDisabled\" (mouseleave)=\"hideCircles()\">\n <svg:g ngx-charts-tooltip-area\n [dims]=\"dims\"\n [xSet]=\"xSet\"\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [results]=\"results\"\n [colors]=\"colors\"\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipTemplate]=\"seriesTooltipTemplate\"\n (hover)=\"updateHoveredVertical($event)\"\n />\n\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-circle-series\n type=\"stacked\"\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [activeEntries]=\"activeEntries\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [visibleValue]=\"hoveredVertical\"\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipTemplate]=\"tooltipTemplate\"\n (select)=\"onClick($event, series)\"\n (activate)=\"onActivate($event)\"\n (deactivate)=\"onDeactivate($event)\"\n />\n </svg:g>\n </svg:g>\n </svg:g>\n </svg:g>\n <svg:g ngx-charts-timeline\n *ngIf=\"timeline && scaleType === 'time'\"\n [attr.transform]=\"timelineTransform\"\n [results]=\"results\"\n [view]=\"[timelineWidth, height]\"\n [height]=\"timelineHeight\"\n [scheme]=\"scheme\"\n [customColors]=\"customColors\"\n [legend]=\"legend\"\n [scaleType]=\"scaleType\"\n (onDomainChange)=\"updateDomain($event)\">\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-area-series\n [xScale]=\"timelineXScale\"\n [yScale]=\"timelineYScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [gradient]=\"gradient\"\n stacked=\"true\"\n [curve]=\"curve\"\n />\n </svg:g>\n </svg:g>\n </ngx-charts-chart>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"styleUrls":["../common/base-chart.component.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"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"}}]}],"xAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showXAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showYAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"timeline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gradient":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"curve":[{"__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"}}]}],"schemeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"roundDomains":[{"__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"}}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["tooltipTemplate"]}]}],"seriesTooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["seriesTooltipTemplate"]}]}],"update":[{"__symbolic":"method"}],"updateTimeline":[{"__symbolic":"method"}],"getXDomain":[{"__symbolic":"method"}],"getYDomain":[{"__symbolic":"method"}],"getSeriesDomain":[{"__symbolic":"method"}],"getXScale":[{"__symbolic":"method"}],"getYScale":[{"__symbolic":"method"}],"getScaleType":[{"__symbolic":"method"}],"isDate":[{"__symbolic":"method"}],"updateDomain":[{"__symbolic":"method"}],"updateHoveredVertical":[{"__symbolic":"method"}],"hideCircles":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mouseleave"]}]}],"onClick":[{"__symbolic":"method"}],"trackBy":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"getLegendOptions":[{"__symbolic":"method"}],"updateYAxisWidth":[{"__symbolic":"method"}],"updateXAxisHeight":[{"__symbolic":"method"}],"onActivate":[{"__symbolic":"method"}],"onDeactivate":[{"__symbolic":"method"}],"deactivateAll":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AreaChartStackedComponent":{"__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-area-chart-stacked","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n [activeEntries]=\"activeEntries\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\">\n <svg:defs>\n <svg:clipPath [attr.id]=\"clipPathId\">\n <svg:rect\n [attr.width]=\"dims.width + 10\"\n [attr.height]=\"dims.height + 10\"\n [attr.transform]=\"'translate(-5, -5)'\"/>\n </svg:clipPath>\n </svg:defs>\n <svg:g [attr.transform]=\"transform\" class=\"area-chart chart\">\n <svg:g ngx-charts-x-axis\n *ngIf=\"xAxis\"\n [xScale]=\"xScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showXAxisLabel\"\n [labelText]=\"xAxisLabel\"\n [tickFormatting]=\"xAxisTickFormatting\"\n (dimensionsChanged)=\"updateXAxisHeight($event)\">\n </svg:g>\n <svg:g ngx-charts-y-axis\n *ngIf=\"yAxis\"\n [yScale]=\"yScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showYAxisLabel\"\n [labelText]=\"yAxisLabel\"\n [tickFormatting]=\"yAxisTickFormatting\"\n (dimensionsChanged)=\"updateYAxisWidth($event)\">\n </svg:g>\n <svg:g [attr.clip-path]=\"clipPath\">\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-area-series\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [gradient]=\"gradient\"\n [activeEntries]=\"activeEntries\"\n stacked=\"true\"\n [curve]=\"curve\"\n />\n </svg:g>\n\n <svg:g *ngIf=\"!tooltipDisabled\" (mouseleave)=\"hideCircles()\">\n <svg:g ngx-charts-tooltip-area\n [dims]=\"dims\"\n [xSet]=\"xSet\"\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [results]=\"results\"\n [colors]=\"colors\"\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipTemplate]=\"seriesTooltipTemplate\"\n (hover)=\"updateHoveredVertical($event)\"\n />\n\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-circle-series\n type=\"stacked\"\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [activeEntries]=\"activeEntries\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [visibleValue]=\"hoveredVertical\"\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipTemplate]=\"tooltipTemplate\"\n (select)=\"onClick($event, series)\"\n (activate)=\"onActivate($event)\"\n (deactivate)=\"onDeactivate($event)\"\n />\n </svg:g>\n </svg:g>\n </svg:g>\n </svg:g>\n <svg:g ngx-charts-timeline\n *ngIf=\"timeline && scaleType === 'time'\"\n [attr.transform]=\"timelineTransform\"\n [results]=\"results\"\n [view]=\"[timelineWidth, height]\"\n [height]=\"timelineHeight\"\n [scheme]=\"scheme\"\n [customColors]=\"customColors\"\n [legend]=\"legend\"\n [scaleType]=\"scaleType\"\n (onDomainChange)=\"updateDomain($event)\">\n <svg:g *ngFor=\"let series of results; trackBy:trackBy\">\n <svg:g ngx-charts-area-series\n [xScale]=\"timelineXScale\"\n [yScale]=\"timelineYScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [gradient]=\"gradient\"\n stacked=\"true\"\n [curve]=\"curve\"\n />\n </svg:g>\n </svg:g>\n </ngx-charts-chart>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"styleUrls":["../common/base-chart.component.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"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"}}]}],"xAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showXAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showYAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"timeline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gradient":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"curve":[{"__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"}}]}],"schemeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"roundDomains":[{"__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"}}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["tooltipTemplate"]}]}],"seriesTooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["seriesTooltipTemplate"]}]}],"update":[{"__symbolic":"method"}],"updateTimeline":[{"__symbolic":"method"}],"getXDomain":[{"__symbolic":"method"}],"getYDomain":[{"__symbolic":"method"}],"getSeriesDomain":[{"__symbolic":"method"}],"getXScale":[{"__symbolic":"method"}],"getYScale":[{"__symbolic":"method"}],"getScaleType":[{"__symbolic":"method"}],"isDate":[{"__symbolic":"method"}],"updateDomain":[{"__symbolic":"method"}],"updateHoveredVertical":[{"__symbolic":"method"}],"hideCircles":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mouseleave"]}]}],"onClick":[{"__symbolic":"method"}],"trackBy":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"getLegendOptions":[{"__symbolic":"method"}],"updateYAxisWidth":[{"__symbolic":"method"}],"updateXAxisHeight":[{"__symbolic":"method"}],"onActivate":[{"__symbolic":"method"}],"onDeactivate":[{"__symbolic":"method"}],"deactivateAll":[{"__symbolic":"method"}]}}}}]