New graph types added (not all working unfortunately), new section added for table views and probably a lot of messy code too!

src/app/panels/candlestick.component.ts

@@ -0,0 +1,84 @@
+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 : Boolean;
+  public chartLegend : Boolean;
+  public financialChartType = 'candlestick';
+  public chartType : string;
+  public financialChartPlugins = [];
+
+  @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
+
+  constructor() { }
+
+  ngOnInit() {
+      this.financialChartType = 'candlestick';
+      this.chartType=this.financialChartType;
+
+      this.financialChartLegend = this.chartLegend;
+  }
+
+  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';
+  }
+}