neu-charts
Version:
neu-charts is a ngx-charts wrapper and charting framework for Angular 2 and beyond!.
1,656 lines (1,625 loc) • 79.9 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewEncapsulation, ViewChild, HostListener, ContentChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { BaseChartComponent, LineSeriesComponent, calculateViewDimensions, ColorHelper, formatLabel, NgxChartsModule } from '@swimlane/ngx-charts';
import { curveLinear, curveBundle } from 'd3-shape';
import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale';
import { trigger, style, animate, transition } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { NgxGraphModule } from '@swimlane/ngx-graph';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NeuChartsComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() { }
}
NeuChartsComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts',
template: `<h3>Neu-charts works!</h3>
`,
styles: [``]
},] },
];
/** @nocollapse */
NeuChartsComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Options for charts
* @author Prasanth Venkatesan
*/
class Options {
/**
* @param {?=} showLegend
*/
constructor(showLegend = true) {
this.showLegend = showLegend;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Pie chart options
* @author Prasanth Venkatesan
*/
class PieOptions extends Options {
/**
* @param {?=} showLegend
* @param {?=} showLabels
* @param {?=} explodeSlices
*/
constructor(showLegend = true, showLabels = true, explodeSlices = false) {
super(showLegend);
this.showLabels = showLabels;
this.explodeSlices = explodeSlices;
this.doughnut = false;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
let customColorSets = [
{
name: 'palatte',
domain: ['#9896F8', '#55efc4', '#76B3F9', '#81DD98', '#b867d3', '#f26f96', '#ffeaa7', '#FDBD2D', '#FC8A25', '#4d488c', '#FA4F1E', '#BDC3C7']
}
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Pie chart component
* @author Prasanth Venkatesan
*/
class PieChartComponent {
constructor() {
this.data = [];
this.onSelect = new EventEmitter();
this.options = new PieOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
PieChartComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-pie',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-pie-chart
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[explodeSlices]="options.explodeSlices"
[labels]="options.showLabels"
[doughnut]="options.doughnut"
[gradient]="gradient"
(select)="mSelectedEvent($event)">
</ngx-charts-pie-chart>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
PieChartComponent.ctorParameters = () => [];
PieChartComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Donut options model
* @author Prasanth Venkatesan
*/
class DonutOptions extends PieOptions {
/**
* @param {?=} showLegend
* @param {?=} showLabels
* @param {?=} arcWidth
*/
constructor(showLegend = true, showLabels = true, arcWidth = 0.3) {
super(showLegend, showLabels, false);
this.doughnut = true;
this.arcWidth = arcWidth;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Donut chart component
* @author Prasanth Venkatesan
*/
class DonutChartComponent {
constructor() {
this.data = [];
this.onSelect = new EventEmitter();
this.options = new DonutOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.cutomOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
DonutChartComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-donut',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-pie-chart
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[explodeSlices]="options.explodeSlices"
[labels]="options.showLabels"
[doughnut]="options.doughnut"
[arcWidth]="options.arcWidth"
[gradient]="gradient"
(select)="mSelectedEvent($event)">
</ngx-charts-pie-chart>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
DonutChartComponent.ctorParameters = () => [];
DonutChartComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"cutomOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* No data or wrong data format component
* @author Prasanth Venkatesan
*/
class NoDataComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() { }
}
NoDataComponent.decorators = [
{ type: Component, args: [{
selector: 'no-data',
template: `<div class="no-data-container">No data found (or) Wrong data format</div>`,
styles: [`
.no-data-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: lightslategray;
font-size: 1.2rem;
}`]
},] },
];
/** @nocollapse */
NoDataComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Advanced donut component
* @author Prasanth Venkatesan
*/
class DonutAdvancedComponent {
constructor() {
this.data = [];
this.onSelect = new EventEmitter();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
DonutAdvancedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-donut-advanced',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-advanced-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
(select)="mSelectedEvent($event)">
</ngx-charts-advanced-pie-chart>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}.chart-container /deep/ .total-value{font-size:1.4rem}.chart-container /deep/ .total-label{font-size:1.2rem}.chart-container /deep/ .legend-items{padding-top:10px}.chart-container /deep/ .legend-items .legend-item{line-height:1.4}.chart-container /deep/ .legend-items .legend-item:hover{opacity:.75}.chart-container /deep/ .legend-items .legend-item .item-value{font-size:1.2rem!important}.chart-container /deep/ .legend-items .legend-item .item-percent{font-size:1.1rem!important}`]
},] },
];
/** @nocollapse */
DonutAdvancedComponent.ctorParameters = () => [];
DonutAdvancedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class DonutGridComponent {
constructor() {
this.data = [];
this.onSelect = new EventEmitter();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
DonutGridComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-donut-grid',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-pie-grid
[view]="view"
[scheme]="colorScheme"
[results]="data"
(select)="mSelectedEvent($event)">
</ngx-charts-pie-grid>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
DonutGridComponent.ctorParameters = () => [];
DonutGridComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar Options for charts
* @author Prasanth Venkatesan
*/
class BarOptions extends Options {
/**
* @param {?=} showLegend
* @param {?=} showXAxis
* @param {?=} showYAxis
* @param {?=} showXAxisLabel
* @param {?=} showYAxisLabel
* @param {?=} xAxisLabel
* @param {?=} yAxisLabel
*/
constructor(showLegend = true, showXAxis = true, showYAxis = true, showXAxisLabel = true, showYAxisLabel = true, xAxisLabel = '', yAxisLabel = '') {
super(showLegend);
this.showXAxis = showXAxis;
this.showYAxis = showYAxis;
this.showXAxisLabel = showXAxisLabel;
this.showYAxisLabel = showYAxisLabel;
this.xAxisLabel = xAxisLabel.toUpperCase();
this.yAxisLabel = yAxisLabel.toUpperCase();
this.barPadding = 3;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar vertical chart
* @author Prasanth Venkatesan
*/
class BarVerticalComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarVerticalComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-vertical',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-vertical
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-vertical>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarVerticalComponent.ctorParameters = () => [];
BarVerticalComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar horizontal chart
* @author Prasanth Venkatesan
*/
class BarHorizontalComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarHorizontalComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-horizontal',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-horizontal
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-horizontal>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarHorizontalComponent.ctorParameters = () => [];
BarHorizontalComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar grouped Options for charts
* @author Prasanth Venkatesan
*/
class BarGroupedOptions extends BarOptions {
/**
* @param {?=} showLegend
* @param {?=} showXAxis
* @param {?=} showYAxis
* @param {?=} showXAxisLabel
* @param {?=} showYAxisLabel
* @param {?=} xAxisLabel
* @param {?=} yAxisLabel
*/
constructor(showLegend = true, showXAxis = true, showYAxis = true, showXAxisLabel = true, showYAxisLabel = true, xAxisLabel = '', yAxisLabel = '') {
super(showLegend, showXAxis, showYAxis, showXAxisLabel, showYAxisLabel, xAxisLabel, yAxisLabel);
this.groupPadding = 6;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar vertical grouped chart
* @author Prasanth Venkatesan
*/
class BarVerticalGroupedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarGroupedOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarVerticalGroupedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-vertical-grouped',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-vertical-2d
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
[groupPadding]="options.groupPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-vertical-2d>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarVerticalGroupedComponent.ctorParameters = () => [];
BarVerticalGroupedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar horizontal grouped chart
* @author Prasanth Venkatesan
*/
class BarHorizontalGroupedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarGroupedOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarHorizontalGroupedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-horizontal-grouped',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-horizontal-2d
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
[groupPadding]="options.groupPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-horizontal-2d>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarHorizontalGroupedComponent.ctorParameters = () => [];
BarHorizontalGroupedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar horizontal stacked chart
* @author Prasanth Venkatesan
*/
class BarHorizontalStackedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarHorizontalStackedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-horizontal-stacked',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-horizontal-stacked
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-horizontal-stacked>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarHorizontalStackedComponent.ctorParameters = () => [];
BarHorizontalStackedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar vertical stacked chart
* @author Prasanth Venkatesan
*/
class BarVerticalStackedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarVerticalStackedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-vertical-stacked',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-vertical-stacked
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-vertical-stacked>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarVerticalStackedComponent.ctorParameters = () => [];
BarVerticalStackedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar vertical normalized chart
* @author Prasanth Venkatesan
*/
class BarVerticalNormalizedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarVerticalNormalizedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-vertical-normalized',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-vertical-normalized
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-vertical-normalized>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarVerticalNormalizedComponent.ctorParameters = () => [];
BarVerticalNormalizedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar horizontal normalized chart
* @author Prasanth Venkatesan
*/
class BarHorizontalNormalizedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new BarOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
BarHorizontalNormalizedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-bar-horizontal-normalized',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-bar-horizontal-normalized
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[legend]="options.showLegend"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[barPadding]="options.barPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-bar-horizontal-normalized>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
BarHorizontalNormalizedComponent.ctorParameters = () => [];
BarHorizontalNormalizedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Line Options for charts
* @author Prasanth Venkatesan
*/
class LineOptions extends BarOptions {
/**
* @param {?=} showLegend
* @param {?=} showXAxis
* @param {?=} showYAxis
* @param {?=} showXAxisLabel
* @param {?=} showYAxisLabel
* @param {?=} xAxisLabel
* @param {?=} yAxisLabel
* @param {?=} timeline
* @param {?=} isXAxisDate
* @param {?=} referenceLines
*/
constructor(showLegend = true, showXAxis = true, showYAxis = true, showXAxisLabel = true, showYAxisLabel = true, xAxisLabel = '', yAxisLabel = '', timeline = false, isXAxisDate = false, referenceLines = []) {
super(showLegend, showXAxis, showYAxis, showXAxisLabel, showYAxisLabel, xAxisLabel, yAxisLabel);
this.autoScale = true;
this.roundDomains = true;
this.timeline = timeline;
this.isXAxisDate = isXAxisDate;
if (referenceLines.length == 0) {
this.showRefLines = true;
}
this.referenceLines = referenceLines;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class LineComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new LineOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
Object.assign(this.options, this.customOptions);
if ((this.data && (changes["data"].previousValue != changes["data"].currentValue)) ||
(this.options.isXAxisDate && (changes["customOptions"].previousValue != changes["customOptions"].currentValue))) {
this.data.forEach(element => {
element.series.forEach(seriesData => {
seriesData.name = new Date(seriesData.name);
});
});
}
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
LineComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-line',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[autoScale]="options.autoScale"
[roundDomains]="options.roundDomains"
[timeline]="options.timeline"
(select)="mSelectedEvent($event)"
[showRefLines]="options.showRefLines"
[referenceLines]="options.referenceLines">
</ngx-charts-line-chart>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
LineComponent.ctorParameters = () => [];
LineComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Area chart component
* @author Prasanth Venkatesan
*/
class AreaComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new LineOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
Object.assign(this.options, this.customOptions);
if ((this.data && (changes["data"].previousValue != changes["data"].currentValue)) ||
(this.options.isXAxisDate && (changes["customOptions"].previousValue != changes["customOptions"].currentValue))) {
this.data.forEach(element => {
element.series.forEach(seriesData => {
seriesData.name = new Date(seriesData.name);
});
});
}
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
AreaComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-area',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[autoScale]="options.autoScale"
[timeline]="options.timeline"
(select)="mSelectedEvent($event)">
<!-- [roundDomains]="options.roundDomains"> -->
</ngx-charts-area-chart>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
AreaComponent.ctorParameters = () => [];
AreaComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Area stacked chart component
* @author Prasanth Venkatesan
*/
class AreaStackedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new LineOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
Object.assign(this.options, this.customOptions);
if ((this.data && (changes["data"].previousValue != changes["data"].currentValue)) ||
(this.options.isXAxisDate && (changes["customOptions"].previousValue != changes["customOptions"].currentValue))) {
this.data.forEach(element => {
element.series.forEach(seriesData => {
seriesData.name = new Date(seriesData.name);
});
});
}
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
AreaStackedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-area-stacked',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-area-chart-stacked
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[timeline]="options.timeline"
(select)="mSelectedEvent($event)">
<!-- [autoScale]="options.autoScale"
[roundDomains]="options.roundDomains"> -->
</ngx-charts-area-chart-stacked>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
AreaStackedComponent.ctorParameters = () => [];
AreaStackedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Area normalized chart component
* @author Prasanth Venkatesan
*/
class AreaNormalizedComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new LineOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
Object.assign(this.options, this.customOptions);
if ((this.data && (changes["data"].previousValue != changes["data"].currentValue)) ||
(this.options.isXAxisDate && (changes["customOptions"].previousValue != changes["customOptions"].currentValue))) {
this.data.forEach(element => {
element.series.forEach(seriesData => {
seriesData.name = new Date(seriesData.name);
});
});
}
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
AreaNormalizedComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-area-normalized',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-area-chart-normalized
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[timeline]="options.timeline"
(select)="mSelectedEvent($event)">
<!-- [autoScale]="options.autoScale"
[roundDomains]="options.roundDomains"> -->
</ngx-charts-area-chart-normalized>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [`.chart-container{width:100%;height:100%}`]
},] },
];
/** @nocollapse */
AreaNormalizedComponent.ctorParameters = () => [];
AreaNormalizedComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Map Options for charts
* @author Prasanth Venkatesan
*/
class MapOptions extends BarOptions {
/**
* @param {?=} showLegend
* @param {?=} showXAxis
* @param {?=} showYAxis
* @param {?=} showXAxisLabel
* @param {?=} showYAxisLabel
* @param {?=} xAxisLabel
* @param {?=} yAxisLabel
* @param {?=} timeline
* @param {?=} isXAxisDate
* @param {?=} innerPadding
* @param {?=} showSkew
* @param {?=} colorScheme
*/
constructor(showLegend = true, showXAxis = true, showYAxis = true, showXAxisLabel = true, showYAxisLabel = true, xAxisLabel = '', yAxisLabel = '', timeline = false, isXAxisDate = false, innerPadding = 5, showSkew = false, colorScheme = null) {
super(showLegend, showXAxis, showYAxis, showXAxisLabel, showYAxisLabel, xAxisLabel, yAxisLabel);
this.innerPadding = innerPadding;
this.showSkew = showSkew;
this.colorScheme = colorScheme;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class HeatComponent {
constructor() {
this.onSelect = new EventEmitter();
this.options = new MapOptions();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
Object.assign(this.options, this.customOptions);
if (this.options.colorScheme != null) {
this.colorScheme = {};
this.colorScheme['domain'] = this.options.colorScheme;
}
else {
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
if (this.options.showSkew && (changes["customOptions"].previousValue != changes["customOptions"].currentValue)) {
this.data.sort((current, next) => {
if (current.series.length > next.series.length) {
return -1;
}
else if (current.series.length < next.series.length) {
return 1;
}
return 0;
});
}
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
HeatComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-heat',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-heat-map
[scheme]="colorScheme"
[results]="data"
[legend]="options.showLegend"
[gradient]="gradient"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[innerPadding]="options.innerPadding"
(select)="mSelectedEvent($event)">
</ngx-charts-heat-map>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [``]
},] },
];
/** @nocollapse */
HeatComponent.ctorParameters = () => [];
HeatComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TreeComponent {
constructor() {
this.onSelect = new EventEmitter();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
}
TreeComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-tree',
template: `<div class="chart-container" *ngIf="data && (data.length > 0)">
<ngx-charts-tree-map
[scheme]="colorScheme"
[results]="data"
(select)="mSelectedEvent($event)">
</ngx-charts-tree-map>
</div>
<no-data *ngIf="(!data) || (data.length <= 0)"></no-data>`,
styles: [``]
},] },
];
/** @nocollapse */
TreeComponent.ctorParameters = () => [];
TreeComponent.propDecorators = {
"data": [{ type: Input, args: ['data',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Bar line combo chart component
* @author Prasanth Venkatesan
*/
class BarLineComboOptions extends BarOptions {
/**
* @param {?=} showLegend
* @param {?=} showXAxis
* @param {?=} showYAxis
* @param {?=} showXAxisLabel
* @param {?=} showYAxisLabel
* @param {?=} xAxisLabel
* @param {?=} yAxisLabel
*/
constructor(showLegend = true, showXAxis = true, showYAxis = true, showXAxisLabel = true, showYAxisLabel = true, xAxisLabel = '', yAxisLabel = '') {
super(showLegend, showXAxis, showYAxis, showXAxisLabel, showYAxisLabel, xAxisLabel, yAxisLabel);
this.showRightYAxisLabel = false;
// this.yAxisLabelRight = 'custom';
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BarLineWrapperComponent {
constructor() {
this.dataBar = [];
this.dataLine = [];
this.onSelect = new EventEmitter();
this.options = new BarLineComboOptions();
this.colorScheme = customColorSets.find(s => s.name == 'palatte');
}
/**
* @return {?}
*/
ngOnInit() {
console.log(this.dataBar, this.dataLine);
Object.assign(this.options, this.customOptions);
}
/**
* @param {?} event
* @return {?}
*/
mSelectedEvent(event) {
this.onSelect.emit(event);
}
/**
* @param {?} min
* @param {?} max
* @return {?}
*/
yLeftAxisScale(min, max) {
return { min: `${min}`, max: `${max}` };
}
/**
* @param {?} min
* @param {?} max
* @return {?}
*/
yRightAxisScale(min, max) {
return { min: `${min}`, max: `${max}` };
}
/**
* @param {?} data
* @return {?}
*/
yLeftTickFormat(data) {
return `${data.toLocaleString()}`;
}
/**
* @param {?} data
* @return {?}
*/
yRightTickFormat(data) {
return `${data}%`;
}
}
BarLineWrapperComponent.decorators = [
{ type: Component, args: [{
selector: 'neu-charts-combo-bar-line',
template: `
<div class="chart-container" *ngIf="(dataBar && (dataBar.length > 0)) && (dataLine && (dataLine.length > 0))">
<neu-charts-combo-bar-line-raw
[scheme]="colorScheme"
[colorSchemeLine]="lineChartScheme"
[results]="dataBar"
[lineChart]="dataLine"
[legend]="options.showLegend"
[xAxis]="options.showXAxis"
[yAxis]="options.showYAxis"
[showXAxisLabel]="options.showXAxisLabel"
[showYAxisLabel]="options.showYAxisLabel"
[xAxisLabel]="options.xAxisLabel"
[yAxisLabel]="options.yAxisLabel"
[showRightYAxisLabel]="options.showRightYAxisLabel"
[yAxisLabelRight]="options.yAxisLabelRight"
[yLeftAxisScaleFactor]="yLeftAxisScale"
[yRightAxisScaleFactor]="yRightAxisScale"
[yAxisTickFormatting]="yLeftTickFormat"
[yRightAxisTickFormatting]="yRightTickFormat"
(select)="mSelectedEvent($event)">
</neu-charts-combo-bar-line-raw>
</div>
<no-data *ngIf="(!dataBar) || (dataBar.length <= 0) || (!dataLine) || (dataLine.length <= 0)"></no-data>`
},] },
];
/** @nocollapse */
BarLineWrapperComponent.ctorParameters = () => [];
BarLineWrapperComponent.propDecorators = {
"dataBar": [{ type: Input, args: ['dataBar',] },],
"dataLine": [{ type: Input, args: ['dataLine',] },],
"customOptions": [{ type: Input, args: ['options',] },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BarLineComponent extends BaseChartComponent {
constructor() {
super(...arguments);
this.curve = curveLinear;
this.legend = false;
this.legendTitle = 'Legend';
this.tooltipDisabled = false;
this.showGridLines = true;
this.activeEntries = [];
this.schemeType = 'ordinal';
this.roundDomains = false;
this.animations = true;
// @Output() select = new EventEmitter();
this.activate = new EventEmitter();
this.deactivate = new EventEmitter();
this.margin = [10, 20, 10, 20];
this.xAxisHeight = 0;
this.yAxisWidth = 0;
this.scaleType = 'linear';
this.yOrientLeft = 'left';
this.yOrientRight = 'right';
this.legendSpacing = 0;
this.barPadding = 8;
}
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
trackBy(index, item) {
return item.name;
}
/**
* @return {?}
*/
update() {
super.update();
this.dims = calculateViewDimensions({
width: this.width,
height: this.height,
margins: this.margin,
showXAxis: this.xAxis,
showYAxis: this.yAxis,
xAxisHeight: this.xAxisHeight,
yAxisWidth: this.yAxisWidth,
showXLabel: this.showXAxisLabel,
showYLabel: this.showYAxisLabel,
showLegend: this.legend,
legendType: this.schemeType
});
if (!this.yAxis) {
this.legendSpacing = 0;
}
else if (this.showYAxisLabel && this.yAxis) {
this.legendSpacing = 100;
}
else {
this.legendSpacing = 40;
}
this.xScale = this.getXScale();
this.yScale = this.getYScale();
// line chart
this.xDomainLine = this.getXDomainLine();
if (this.filteredDomain) {
this.xDomainLine = this.filteredDomain;
}
this.yDomainLine = this.getYDomainLine();
this.seriesDomain = this.getSeriesDomain();
this.xScaleLine = this.getXScaleLine(this.xDomainLine, this.dims.width);
this.yScaleLine = this.getYScaleLine(this.yDomainLine, this.dims.height);
this.setColors();
this.legendOptions = this.getLegendOptions();
this.transform = `translate(${this.dims.xOffset} , ${this.margin[0]})`;
}
/**
* @return {?}
*/
deactivateAll() {
this.activeEntries = [...this.activeEntries];
for (const /** @type {?} */ entry of this.activeEntries) {
this.deactivate.emit({ value: entry, entries: [] });
}
this.activeEntries = [];
}
/**
* @return {?}
*/
hideCircles() {
this.hoveredVertical = null;
this.deactivateAll();
}
/**
* @param {?} item
* @return {?}
*/
updateHoveredVertical(item) {
this.hoveredVertical = item.value;
this.deactivateAll();
}
/**
* @param {?} domain
* @return {?}
*/
updateDomain(domain) {
this.filteredDomain = domain;
this.xDomainLine = this.filteredDomain;
this.xScaleLine = this.getXScaleLine(this.xDomainLine, this.dims.width);
}
/**
* @return {?}
*/
getSeriesDomain() {
this.combinedSeries = this.lineChart.slice(0);
this.combinedSeries.push({
name: this.yAxisLabel,
series: this.results
});
return this.combinedSeries.map(d => d.name);
}
/**
* @param {?} value
* @return {?}
*/
isDate(value) {
if (value instanceof Date) {
return true;
}
return false;
}
/**
* @param {?} values
* @return {?}
*/
getScaleType(values) {
let /** @type {?} */ date = true;
let /** @type {?} */ num = true;
for (const /** @type {?} */ value of values) {
if (!this.isDate(value)) {
date = false;
}
if (typeof value !== 'number') {
num = false;
}
}
if (date)
return 'time';
if (num)
return 'linear';
return 'ordinal';
}
/**
* @return {?}
*/
getXDomainLine() {
let /** @type {?} */ values = [];
for (const /** @type {?} */ results of this.lineChart) {
for (const /** @type {?} */ d of results.series) {
if (values.indexOf(d.name) == -1) {
values.push(d.name);
}
}
}
this.scaleType = this.getScaleType(values);
let /** @type {?} */ domain = [];
if (this.scaleType === 'time') {
const /** @type {?} */ min = Math.min(...values);
const /** @type {?} */ max = Math.max(...values);
domain = [min, max];
}
else if (this.scaleType === 'linear') {
values = values.map(v => Number(v));
const /** @type {?} */ min = Math.min(...values);
const /** @type {?} */ max = Math.max(...values);
domain = [min, max];
}
else {
domain = values;
}
this.xSet = values;
return domain;
}
/**
* @return {?}
*/
getYDomainLine() {
const /** @type {?} */ domain = [];
for (const /** @type {?} */ results of this.lineChart) {
for (const /** @type {?} */ d of results.series) {
if (domain.indexOf(