demo: Demo custom chart type (financial)

Closes valor-software#876

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "chartjs-chart-financial"]
+	path = chartjs-chart-financial
+	url = [email protected]:chartjs/chartjs-chart-financial.git

package.json

@@ -9,6 +9,8 @@
     "build:lib": "ng build ng2-charts",
     "build:schem": "cd ng2-charts-schematics && npm run build && cd ..",
     "build:changelog": "github_changelog_generator -u valor-software -p ng2-charts",
+    "install:financial": "git submodule update chartjs-chart-financial && cd chartjs-chart-financial && npm i && cd ..",
+    "build:financial": "cd chartjs-chart-financial && gulp build && xcopy /s /y dist ..\\dist\\chartjs-chart-financial\\ && cd ..",
     "publish:lib": "cd dist\\ng2-charts && npm publish && cd ..\\..",
     "publish:schem": "cd ng2-charts-schematics && npm publish && cd ..",
     "test": "ng test",
@@ -31,10 +33,12 @@
     "@angular/platform-browser-dynamic": "~7.2.11",
     "@angular/router": "~7.2.11",
     "chart.js": "^2.8.0",
+    "chartjs-adapter-luxon": "^0.1.1",
     "chartjs-plugin-annotation": "^0.5.7",
     "chartjs-plugin-datalabels": "^0.6.0",
     "core-js": "^2.5.4",
     "highlight.js": "^9.15.6",
+    "luxon": "^1.12.0",
     "marked": "^0.6.1",
     "ngx-highlightjs": "^3.0.3",
     "ngx-markdown": "^7.1.4",

projects/ng2-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-charts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "peerDependencies": {
     "@angular/common": "^7.2.0",
     "@angular/core": "^7.2.0",

src/app/app.component.html

@@ -166,7 +166,7 @@ <h2>API</h2>
       <mat-tab #tab label="Bubble Chart"><app-chart-host chartType="bubble"><app-bubble-chart #main></app-bubble-chart></app-chart-host></mat-tab>
       <mat-tab #tab label="Scatter Chart"><app-chart-host chartType="scatter"><app-scatter-chart #main></app-scatter-chart></app-chart-host></mat-tab>
       <mat-tab #tab label="Dynamic Chart"><app-chart-host chartType="dynamic"><app-dynamic-chart #main></app-dynamic-chart></app-chart-host></mat-tab>
-    </mat-tab-group>
+      <mat-tab #tab label="Financial Chart"><app-chart-host chartType="financial"><app-financial-chart #main></app-financial-chart></app-chart-host></mat-tab>    </mat-tab-group>
   </div>
   <footer class="footer">
     <div class="container">

src/app/app.component.spec.ts

@@ -19,6 +19,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
 import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
+import { FinancialChartComponent } from './financial-chart/financial-chart.component';
 
 export function hljsLanguages() {
   return [
@@ -44,6 +45,7 @@ describe('AppComponent', () => {
         BubbleChartComponent,
         ScatterChartComponent,
         ChartHostComponent,
+        FinancialChartComponent,
       ],
       imports: [
         NoopAnimationsModule,

src/app/app.module.ts

@@ -27,6 +27,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
 import * as pluginDataLabels from 'chartjs-plugin-datalabels';
 import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
+import { FinancialChartComponent } from './financial-chart/financial-chart.component';
 
 const routes: Route[] = [];
 
@@ -52,6 +53,7 @@ export function hljsLanguages() {
     ChartHostComponent,
     BubbleChartComponent,
     ScatterChartComponent,
+    FinancialChartComponent,
   ],
   imports: [
     BrowserModule,

src/app/chart-host/chart-host.component.ts

@@ -46,6 +46,11 @@ export const chartTypes = {
     ts: require('!!raw-loader!../scatter-chart/scatter-chart.component.ts'),
     html: require('!!raw-loader!../scatter-chart/scatter-chart.component.html'),
   },
+  financial: {
+    heading: 'Financial Chart',
+    ts: require('!!raw-loader!../financial-chart/financial-chart.component.ts'),
+    html: require('!!raw-loader!../financial-chart/financial-chart.component.html'),
+  },
 };
 
 

src/app/financial-chart/financial-chart.component.css

@@ -0,0 +1,5 @@
+.chart {
+  display: block;
+  width: 1300px;
+  height: 600px;
+}

src/app/financial-chart/financial-chart.component.html

@@ -0,0 +1,35 @@
+<div>
+  <markdown ngPreserveWhitespaces>
+
+    This chart demonstrates how custom chart types can be plugged into `ng2-charts`. Check out the Typescript source
+    code below.
+
+    This custom chart type depends on a package called [`chartjs-chart-financial`](https://github.com/chartjs/chartjs-chart-financial)
+    which is not yet on [npmjs.com](https://npmjs.com). It is included in the demo app as a git submodule directly from the github site of the package.
+
+    This also demonstrates using a different date/time adapter than [`moment`](https://www.npmjs.com/package/moment).
+    This demo uses [`luxon`](https://www.npmjs.com/package/luxon) instead, plugged into the `chart.js` module using
+    the [`chartjs-adapter-luxon`](https://www.npmjs.com/package/chartjs-adapter-luxon) package.
+
+    Developers who wish to run this locally must first clone the demo app, then run some npm commands:
+
+    ```bash
+    git clone [email protected]:valor-software/ng2-charts.git
+    npm install
+    npm run install:financial
+    npm run build:financial
+    npm run build:lib
+    ```
+
+    Then you may run `npm start` to run the demo app locally on http://localhost:4200
+  </markdown>
+</div>
+<div class="chart">
+  <canvas baseChart [datasets]="financialChartData" [options]="financialChartOptions"
+    [colors]="financialChartColors" [legend]="financialChartLegend" [chartType]="financialChartType"
+    [plugins]="financialChartPlugins">
+  </canvas>
+</div>
+<div>
+  <button mat-button mat-raised-button color="primary" (click)="update()">Toggle Chart Type</button>
+</div>

src/app/financial-chart/financial-chart.component.spec.ts

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

src/app/financial-chart/financial-chart.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import 'dist/chartjs-chart-financial/chartjs-chart-financial';
+import * as luxon from 'luxon';
+import 'chartjs-adapter-luxon';
+import { ChartOptions } from 'chart.js';
+import { Color, BaseChartDirective } from 'ng2-charts';
+
+@Component({
+  selector: 'app-financial-chart',
+  templateUrl: './financial-chart.component.html',
+  styleUrls: ['./financial-chart.component.css']
+})
+export class FinancialChartComponent implements OnInit {
+  barCount = 60;
+  initialDateStr = '01 Apr 2017 00:00 Z';
+
+  public financialChartData = [
+    {
+      label: 'CHRT - Chart.js Corporation',
+      data: this.getRandomData(this.initialDateStr, this.barCount)
+    },
+  ];
+  public financialChartOptions: ChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  public financialChartColors: Color[] = [
+    {
+      borderColor: 'black',
+      backgroundColor: 'rgba(255,0,0,0.3)',
+    },
+  ];
+  public financialChartLegend = true;
+  public financialChartType = 'candlestick';
+  public financialChartPlugins = [];
+
+  @ViewChild(BaseChartDirective) chart: BaseChartDirective;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  randomNumber(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  randomBar(date: luxon.DateTime, lastClose: number) {
+    const open = this.randomNumber(lastClose * 0.95, lastClose * 1.05);
+    const close = this.randomNumber(open * 0.95, open * 1.05);
+    const high = this.randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
+    const low = this.randomNumber(Math.min(open, close) * 0.9, Math.min(open, close));
+    return {
+      t: date.valueOf(),
+      o: open,
+      h: high,
+      l: low,
+      c: close
+    };
+  }
+
+  getRandomData(dateStr: string, count: number) {
+    let date = luxon.DateTime.fromRFC2822(dateStr);
+    const data = [this.randomBar(date, 30)];
+    while (data.length < count) {
+      date = date.plus({ days: 1 });
+      if (date.weekday <= 5) {
+        data.push(this.randomBar(date, data[data.length - 1].c));
+      }
+    }
+    return data;
+  }
+
+  update() {
+    // candlestick vs ohlc
+    this.financialChartType = this.financialChartType === 'candlestick' ? 'ohlc' : 'candlestick';
+  }
+}