From 703418c48a70f9e70be0c5c1a0eb3d0ca6112974 Mon Sep 17 00:00:00 2001
From: Aviad Pineles <paviad2@gmail.com>
Date: Wed, 27 Mar 2019 18:26:46 +0200
Subject: [PATCH] demo: Demo custom chart type (financial)

Closes #876
---
 .gitmodules                                   |  3 +
 chartjs-chart-financial                       |  1 +
 package-lock.json                             | 10 +++
 package.json                                  |  4 +
 projects/ng2-charts/package-lock.json         |  2 +-
 projects/ng2-charts/package.json              |  2 +-
 src/app/app.component.html                    |  2 +-
 src/app/app.component.spec.ts                 |  2 +
 src/app/app.module.ts                         |  2 +
 src/app/chart-host/chart-host.component.ts    |  5 ++
 .../financial-chart.component.css             |  5 ++
 .../financial-chart.component.html            | 35 +++++++++
 .../financial-chart.component.spec.ts         | 29 +++++++
 .../financial-chart.component.ts              | 78 +++++++++++++++++++
 14 files changed, 177 insertions(+), 3 deletions(-)
 create mode 100644 .gitmodules
 create mode 160000 chartjs-chart-financial
 create mode 100644 src/app/financial-chart/financial-chart.component.css
 create mode 100644 src/app/financial-chart/financial-chart.component.html
 create mode 100644 src/app/financial-chart/financial-chart.component.spec.ts
 create mode 100644 src/app/financial-chart/financial-chart.component.ts

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 00000000..8ebcc7cb
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "chartjs-chart-financial"]
+	path = chartjs-chart-financial
+	url = git@github.com:chartjs/chartjs-chart-financial.git
diff --git a/chartjs-chart-financial b/chartjs-chart-financial
new file mode 160000
index 00000000..de5d0d7b
--- /dev/null
+++ b/chartjs-chart-financial
@@ -0,0 +1 @@
+Subproject commit de5d0d7bf6c8e3036938d0a7dd954eb55d3d43fc
diff --git a/package-lock.json b/package-lock.json
index 171144a6..c3583d6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2669,6 +2669,11 @@
         "moment": "^2.10.2"
       }
     },
+    "chartjs-adapter-luxon": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-0.1.1.tgz",
+      "integrity": "sha512-87RVm/8wRJ3aqWTVSwKjkF1Ec58pLJhmsU/WAHqxrJJvxEDHbU2Lv7U7TmJVtZ+pUVyct1EskayK3ZfUDoJ7PA=="
+    },
     "chartjs-color": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
@@ -7433,6 +7438,11 @@
         "yallist": "^2.1.2"
       }
     },
+    "luxon": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.12.0.tgz",
+      "integrity": "sha512-enPnPIHd5ZnZT0vpj9Xv8aq4j0yueAkhnh4xUKUHpqlgSm1r/8s6xTMjfyp2ugOWP7zivqJqgVTkW+rpHed61w=="
+    },
     "magic-string": {
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.2.tgz",
diff --git a/package.json b/package.json
index b0c31857..be732414 100644
--- a/package.json
+++ b/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",
diff --git a/projects/ng2-charts/package-lock.json b/projects/ng2-charts/package-lock.json
index e0e32474..dd53b8ba 100644
--- a/projects/ng2-charts/package-lock.json
+++ b/projects/ng2-charts/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-charts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/projects/ng2-charts/package.json b/projects/ng2-charts/package.json
index 32bc92b5..5c61d3ce 100644
--- a/projects/ng2-charts/package.json
+++ b/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",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8b5dc0a5..4dbba4fb 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index fee53689..bc79c4b6 100644
--- a/src/app/app.component.spec.ts
+++ b/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,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4506129e..67efb090 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/chart-host/chart-host.component.ts b/src/app/chart-host/chart-host.component.ts
index 49426a16..50471114 100644
--- a/src/app/chart-host/chart-host.component.ts
+++ b/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'),
+  },
 };
 
 
diff --git a/src/app/financial-chart/financial-chart.component.css b/src/app/financial-chart/financial-chart.component.css
new file mode 100644
index 00000000..61dc9196
--- /dev/null
+++ b/src/app/financial-chart/financial-chart.component.css
@@ -0,0 +1,5 @@
+.chart {
+  display: block;
+  width: 1300px;
+  height: 600px;
+}
diff --git a/src/app/financial-chart/financial-chart.component.html b/src/app/financial-chart/financial-chart.component.html
new file mode 100644
index 00000000..73458d87
--- /dev/null
+++ b/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 git@github.com: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>
diff --git a/src/app/financial-chart/financial-chart.component.spec.ts b/src/app/financial-chart/financial-chart.component.spec.ts
new file mode 100644
index 00000000..9227a09b
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/financial-chart/financial-chart.component.ts b/src/app/financial-chart/financial-chart.component.ts
new file mode 100644
index 00000000..de1f995f
--- /dev/null
+++ b/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';
+  }
+}