UNPKG

@swimlane/ngx-charts

Version:

Declarative Charting Framework for Angular

1 lines 14.8 kB
[{"__symbolic":"module","version":4,"metadata":{"LineChartComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../common/base-chart.component","name":"BaseChartComponent","line":175,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"ngx-charts-line-chart","template":"\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"legend\"\n [legendOptions]=\"legendOptions\"\n [activeEntries]=\"activeEntries\"\n [animations]=\"animations\"\n (legendLabelClick)=\"onClick($event)\"\n (legendLabelActivate)=\"onActivate($event)\"\n (legendLabelDeactivate)=\"onDeactivate($event)\"\n >\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 />\n </svg:clipPath>\n </svg:defs>\n <svg:g [attr.transform]=\"transform\" class=\"line-chart chart\">\n <svg:g\n ngx-charts-x-axis\n *ngIf=\"xAxis\"\n [xScale]=\"xScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showXAxisLabel\"\n [labelText]=\"xAxisLabel\"\n [trimTicks]=\"trimXAxisTicks\"\n [rotateTicks]=\"rotateXAxisTicks\"\n [maxTickLength]=\"maxXAxisTickLength\"\n [tickFormatting]=\"xAxisTickFormatting\"\n [ticks]=\"xAxisTicks\"\n (dimensionsChanged)=\"updateXAxisHeight($event)\"\n ></svg:g>\n <svg:g\n ngx-charts-y-axis\n *ngIf=\"yAxis\"\n [yScale]=\"yScale\"\n [dims]=\"dims\"\n [showGridLines]=\"showGridLines\"\n [showLabel]=\"showYAxisLabel\"\n [labelText]=\"yAxisLabel\"\n [trimTicks]=\"trimYAxisTicks\"\n [maxTickLength]=\"maxYAxisTickLength\"\n [tickFormatting]=\"yAxisTickFormatting\"\n [ticks]=\"yAxisTicks\"\n [referenceLines]=\"referenceLines\"\n [showRefLines]=\"showRefLines\"\n [showRefLabels]=\"showRefLabels\"\n (dimensionsChanged)=\"updateYAxisWidth($event)\"\n ></svg:g>\n <svg:g [attr.clip-path]=\"clipPath\">\n <svg:g *ngFor=\"let series of results; trackBy: trackBy\" [@animationState]=\"'active'\">\n <svg:g\n ngx-charts-line-series\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [activeEntries]=\"activeEntries\"\n [scaleType]=\"scaleType\"\n [curve]=\"curve\"\n [rangeFillOpacity]=\"rangeFillOpacity\"\n [hasRange]=\"hasRange\"\n [animations]=\"animations\"\n />\n </svg:g>\n\n <svg:g *ngIf=\"!tooltipDisabled\" (mouseleave)=\"hideCircles()\">\n <svg:g\n 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\">\n <svg:g\n ngx-charts-circle-series\n [xScale]=\"xScale\"\n [yScale]=\"yScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [visibleValue]=\"hoveredVertical\"\n [activeEntries]=\"activeEntries\"\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipTemplate]=\"tooltipTemplate\"\n (select)=\"onClick($event)\"\n (activate)=\"onActivate($event)\"\n (deactivate)=\"onDeactivate($event)\"\n />\n </svg:g>\n </svg:g>\n </svg:g>\n </svg:g>\n <svg:g\n ngx-charts-timeline\n *ngIf=\"timeline && scaleType != 'ordinal'\"\n [attr.transform]=\"timelineTransform\"\n [results]=\"results\"\n [view]=\"[timelineWidth, height]\"\n [height]=\"timelineHeight\"\n [scheme]=\"scheme\"\n [customColors]=\"customColors\"\n [scaleType]=\"scaleType\"\n [legend]=\"legend\"\n (onDomainChange)=\"updateDomain($event)\"\n >\n <svg:g *ngFor=\"let series of results; trackBy: trackBy\">\n <svg:g\n ngx-charts-line-series\n [xScale]=\"timelineXScale\"\n [yScale]=\"timelineYScale\"\n [colors]=\"colors\"\n [data]=\"series\"\n [scaleType]=\"scaleType\"\n [curve]=\"curve\"\n [hasRange]=\"hasRange\"\n [animations]=\"animations\"\n />\n </svg:g>\n </svg:g>\n </ngx-charts-chart>\n ","styleUrls":["../common/base-chart.component.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":157,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":158,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":160,"character":4},"arguments":["animationState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":161,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":162,"character":8},"arguments":[{"opacity":1}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":165,"character":8},"arguments":[500,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":167,"character":10},"arguments":[{"opacity":0}]}]}]]}]]}]}]}],"members":{"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":3}}]}],"legendTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":3}}]}],"legendPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":178,"character":3}}]}],"xAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":3}}]}],"yAxis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":3}}]}],"showXAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":3}}]}],"showYAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":3}}]}],"xAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":3}}]}],"yAxisLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":3}}]}],"autoScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":3}}]}],"timeline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":3}}]}],"gradient":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":187,"character":3}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":188,"character":3}}]}],"curve":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":3}}]}],"activeEntries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":3}}]}],"schemeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":3}}]}],"rangeFillOpacity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":3}}]}],"trimXAxisTicks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":193,"character":3}}]}],"trimYAxisTicks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":3}}]}],"rotateXAxisTicks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":195,"character":3}}]}],"maxXAxisTickLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":3}}]}],"maxYAxisTickLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":197,"character":3}}]}],"xAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"yAxisTickFormatting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":199,"character":3}}]}],"xAxisTicks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":3}}]}],"yAxisTicks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":201,"character":3}}]}],"roundDomains":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":3}}]}],"tooltipDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":203,"character":3}}]}],"showRefLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"referenceLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":205,"character":3}}]}],"showRefLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"xScaleMin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":207,"character":3}}]}],"xScaleMax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":3}}]}],"yScaleMin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":3}}]}],"yScaleMax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"activate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":212,"character":3}}]}],"deactivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":213,"character":3}}]}],"tooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":215,"character":3},"arguments":["tooltipTemplate",{"static":false}]}]}],"seriesTooltipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":216,"character":3},"arguments":["seriesTooltipTemplate",{"static":false}]}]}],"update":[{"__symbolic":"method"}],"updateTimeline":[{"__symbolic":"method"}],"getXDomain":[{"__symbolic":"method"}],"getYDomain":[{"__symbolic":"method"}],"getSeriesDomain":[{"__symbolic":"method"}],"getXScale":[{"__symbolic":"method"}],"getYScale":[{"__symbolic":"method"}],"updateDomain":[{"__symbolic":"method"}],"updateHoveredVertical":[{"__symbolic":"method"}],"hideCircles":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":422,"character":3},"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"}]}}}}]