- remove d3.js and add chart.js

- add extra chartjs.module - add extra diagram-view component for binding properties to chartjs chart
2021-09-23 15:12:22 +02:00 · 2021-09-23 15:12:22 +02:00 · 5f657dc9e4
commit 5f657dc9e4
parent 92d0e94582
18 changed files with 265 additions and 1330 deletions
--- a/src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
+++ b/src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
@ -0,0 +1,83 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+// import * as d3 from 'd3';
+import { Chart, registerables } from 'chart.js';
+
+
+@Component({
+    selector: 'geomon-timeseries-chart',
+    templateUrl: './geomon-timeseries-chart.component.html',
+    styleUrls: ['./geomon-timeseries-chart.component.scss']
+})
+export class GeomonTimeseriesChartComponent implements OnInit {
+
+    @ViewChild('geomon_timeseries', { static: true })
+    public d3Elem: ElementRef;
+
+    constructor() { }
+
+    ngOnInit(): void {
+        // this.createSvg();
+        // this.drawBars(this.data);
+        Chart.register(...registerables);
+        this.drawBars();
+    }
+
+    private drawBars(): void {
+        let lineChart = document.getElementById("line-chart") as HTMLCanvasElement;
+        new Chart(lineChart, {
+            type: 'line',
+            data: {
+                labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
+                datasets: [{
+                    data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
+                    label: "Africa",
+                    borderColor: "#3e95cd",
+                    fill: false
+                }, {
+                    data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
+                    label: "Asia",
+                    borderColor: "#8e5ea2",
+                    fill: false
+                }, {
+                    data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
+                    label: "Europe",
+                    borderColor: "#3cba9f",
+                    fill: false
+                }, {
+                    data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
+                    label: "Latin America",
+                    borderColor: "#e8c3b9",
+                    fill: false
+                }, {
+                    data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
+                    label: "North America",
+                    borderColor: "#c45850",
+                    fill: false
+                }
+                ]
+            },
+            // options: {
+            //   title: {
+            //     display: true,
+            //     text: 'World population per region (in millions)'
+            //   }
+            // }
+        });
+    }
+
+    /**
+     * Function to generate uuid for a diagram
+     */
+    private uuidv4(): string {
+        return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + this.s4() + this.s4();
+    }
+
+    /**
+    * Function to generate components of the uuid for a diagram
+    */
+    private s4(): string {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    }
+}