Add accounts chart

core/app/src/components/chart/chart.component.ts

@@ -5,6 +5,7 @@ import {LanguageStore, LanguageStringMap} from '@store/language/language.store';
 import {ListViewStore} from '@store/list-view/list-view.store';
 import {DropdownButtonInterface} from '@components/dropdown-button/dropdown-button.model';
 import {PipelineBySalesStage} from '@components/chart/types/pipeline-by-sales-stage/pipeline-by-sales-stage.service';
+import {AnnualRevenueLineChart} from '@components/chart/types/annual-revenue-line-chart/annual-revenue-line-chart.service';
 import {LeadsByStatus} from '@components/chart/types/leads-by-status/leads-by-status.service';
 
 export interface ChartTypesDataSource {
@@ -20,7 +21,7 @@ export interface ChartsViewModel {
     selector: 'scrm-chart-ui',
     templateUrl: './chart.component.html',
     styleUrls: [],
-    providers: [PipelineBySalesStage, LeadsByStatus]
+    providers: [PipelineBySalesStage, AnnualRevenueLineChart, LeadsByStatus]
 })
 export class ChartUiComponent {
     type = '';
@@ -34,10 +35,13 @@ export class ChartUiComponent {
         protected languageStore: LanguageStore,
         protected listStore: ListViewStore,
         protected pipelineBySalesStageListDataSource: PipelineBySalesStage,
+        protected annualRevenueLineChartListDataSource: AnnualRevenueLineChart,
         protected leadsByStatus: LeadsByStatus
     ) {
         this.dataSourceMap[this.pipelineBySalesStageListDataSource.key] = this.pipelineBySalesStageListDataSource;
+        this.dataSourceMap[this.annualRevenueLineChartListDataSource.key] = this.annualRevenueLineChartListDataSource;
         this.dataSourceMap[this.leadsByStatus.key] = this.leadsByStatus;
+
     }
 
     ngOnInit(): void {

core/app/src/components/chart/chart.module.ts

@@ -11,10 +11,11 @@ import {FormsModule} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgxChartsModule} from '@swimlane/ngx-charts';
 import {VerticalBarChartComponent} from './charts/vertical-bar-chart/vertical-bar-chart.component';
+import {LineChartComponent} from '@components/chart/charts/line-chart/line-chart.component';
 import {PieGridChartComponent} from './charts/pie-grid-chart/pie-grid-chart.component';
 
 @NgModule({
-    declarations: [ChartUiComponent, VerticalBarChartComponent, PieGridChartComponent],
+    declarations: [ChartUiComponent, VerticalBarChartComponent, LineChartComponent, PieGridChartComponent],
     exports: [ChartUiComponent],
     imports: [
         CommonModule,

core/app/src/components/chart/charts/line-chart/line-chart.component.html

@@ -0,0 +1,15 @@
+<ngx-charts-line-chart *ngIf="results"
+                       (window:resize)="onResize()"
+                       [animations]="false"
+                       [results]="results"
+                       [view]="view"
+                       [scheme]="dataSource.scheme"
+                       [gradient]="dataSource.gradient"
+                       [xAxis]="dataSource.xAxis"
+                       [yAxis]="dataSource.yAxis"
+                       [legend]="dataSource.legend"
+                       [showXAxisLabel]="dataSource.showXAxisLabel"
+                       [showYAxisLabel]="dataSource.showYAxisLabel"
+                       [xAxisLabel]="dataSource.xAxisLabel"
+                       [yAxisLabel]="dataSource.yAxisLabel">
+</ngx-charts-line-chart>

core/app/src/components/chart/charts/line-chart/line-chart.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {
+    LineChartDataSource,
+    LineChartResult
+} from '@components/chart/charts/line-chart/line-chart.model';
+import {BaseChartComponent} from '@components/chart/charts/base-chart/base-chart.component';
+
+@Component({
+    selector: 'scrm-line-chart',
+    templateUrl: './line-chart.component.html',
+    styleUrls: []
+})
+export class LineChartComponent extends BaseChartComponent implements OnInit {
+    @Input() dataSource: LineChartDataSource;
+
+    results: LineChartResult[];
+
+    constructor() {
+        super();
+    }
+
+    ngOnInit(): void {
+        if (this.dataSource.height) {
+            this.height = this.dataSource.height;
+        }
+
+        this.calculateView();
+
+        this.dataSource.getResults().subscribe(value => {
+            this.results = value;
+        });
+    }
+}

core/app/src/components/chart/charts/line-chart/line-chart.model.ts

@@ -0,0 +1,21 @@
+import {Observable} from 'rxjs';
+
+export interface LineChartResult {
+    name: string;
+    value: number;
+}
+
+export interface LineChartDataSource {
+    height?: number;
+    scheme: any;
+    gradient: any;
+    xAxis: any;
+    yAxis: any;
+    legend: any;
+    showXAxisLabel: any;
+    showYAxisLabel: any;
+    xAxisLabel: any;
+    yAxisLabel: any;
+
+    getResults(): Observable<LineChartResult[]>;
+}

core/app/src/components/chart/charts/line-chart/line-chart.spec.ts

@@ -0,0 +1,24 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {LineChartComponent} from './line-chart.component';
+
+describe('LineChartComponent', () => {
+    let component: LineChartComponent;
+    let fixture: ComponentFixture<LineChartComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [LineChartComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LineChartComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

core/app/src/components/chart/types/annual-revenue-line-chart/annual-revenue-line-chart.service.ts

@@ -0,0 +1,61 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Record, ListViewStore} from '@store/list-view/list-view.store';
+import {map} from 'rxjs/operators';
+import {
+    LineChartDataSource,
+    LineChartResult
+} from '@components/chart/charts/line-chart/line-chart.model';
+import {LanguageStore} from '@store/language/language.store';
+
+@Injectable()
+export class AnnualRevenueLineChart implements LineChartDataSource {
+
+    key = 'annual_revenue';
+    chartType = 'line-chart';
+    height = 700;
+    scheme = 'picnic';
+    xAxis = true;
+    yAxis = true;
+    gradient = false;
+    legend = false;
+    showXAxisLabel = false;
+    xAxisLabel = '';
+    showYAxisLabel = false;
+    yAxisLabel = 'Account';
+
+    constructor(protected listStore: ListViewStore) {
+    }
+
+    getResults(): Observable<LineChartResult[]> {
+        return this.listStore.records$.pipe(map((records: Record[]) => {
+            const results: LineChartResult[] = [];
+
+            const group: { [key: string]: LineChartResult } = {};
+
+            if (records) {
+                records.forEach(record => {
+                    if (record.type !== 'Account') {
+                        return;
+                    }
+
+                    const name = record.attributes.date_created;
+                    const value = record.attributes.type;
+
+                    if (!group[name]) {
+                        group[name] = {name, value};
+                        return;
+                    }
+
+                    group[name].value += value;
+                });
+            }
+
+            Object.keys(group).forEach(key => {
+                results.push(group[key]);
+            });
+
+            return results;
+        }));
+    }
+}