From 3198c4c86d0f418114c3c56a3bb3c77b8ab9cffb Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Wed, 11 Mar 2020 08:33:05 +0100 Subject: [PATCH] MC Add ApexCharts + update dashboard module --- angular.json | 6 +- package-lock.json | 85 +++++++++++++++++++ package.json | 4 +- .../dashboard/dashboard-routing.module.ts | 2 +- .../dashboard/dashboard.module.ts | 4 +- .../electricity/electricity.component.html | 9 +- .../electricity/electricity.component.ts | 35 ++++++++ 7 files changed, 139 insertions(+), 6 deletions(-) diff --git a/angular.json b/angular.json index 0b974ff..f874e7e 100644 --- a/angular.json +++ b/angular.json @@ -33,7 +33,8 @@ "./node_modules/flag-icon-css/css/flag-icon.min.css" ], "scripts": [ - "./node_modules/chart.js/dist/Chart.js" + "./node_modules/chart.js/dist/Chart.js", + "./node_modules/apexcharts/dist/apexcharts.min.js" ] }, "configurations": { @@ -98,7 +99,8 @@ "./node_modules/flag-icon-css/css/flag-icon.min.css" ], "scripts": [ - "./node_modules/chart.js/dist/Chart.js" + "./node_modules/chart.js/dist/Chart.js", + "./node_modules/apexcharts/dist/apexcharts.min.js" ], "assets": [ "src/favicon.ico", diff --git a/package-lock.json b/package-lock.json index 0bffb4a..f968f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1330,6 +1330,19 @@ "normalize-path": "^2.1.1" } }, + "apexcharts": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.16.1.tgz", + "integrity": "sha512-3MpUk6+clv9tGtb3OQBPRjyLc6g6nHvO2Gk1v8gBhD3tY3MiFi/RP4ItaHyW4SaqBtyK8oHugsgGlanZDTviVQ==", + "requires": { + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "app-root-path": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz", @@ -7840,6 +7853,14 @@ "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==", "dev": true }, + "ng-apexcharts": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.2.1.tgz", + "integrity": "sha512-gXcgyjI4g9YcsXCpyT0yec/2R4nOBMM6lr4AbnGaUJGfPjeTXpTwOepNqOEgPSYIJkh0iO0jR15ThIj2RPUaSQ==", + "requires": { + "tslib": "^1.9.0" + } + }, "ng-country-flags": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/ng-country-flags/-/ng-country-flags-1.0.7.tgz", @@ -11126,6 +11147,70 @@ "has-flag": "^3.0.0" } }, + "svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "requires": { + "svg.js": "^2.0.1" + } + }, + "svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", + "requires": { + "svg.js": ">=2.3.x" + } + }, + "svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", + "requires": { + "svg.js": "^2.2.5" + } + }, + "svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "requires": { + "svg.js": "^2.4.0" + } + }, + "svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "requires": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "dependencies": { + "svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "requires": { + "svg.js": "^2.2.5" + } + } + } + }, + "svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "requires": { + "svg.js": "^2.6.5" + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", diff --git a/package.json b/package.json index d14a4f5..2f4e4ad 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,9 @@ "primeng": "^9.0.0", "rxjs": "~6.5.2", "tslib": "^1.9.0", - "zone.js": "~0.9.1" + "zone.js": "~0.9.1", + "apexcharts": "3.16.1", + "ng-apexcharts": "1.2.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.802.2", diff --git a/src/app/control-panel/dashboard/dashboard-routing.module.ts b/src/app/control-panel/dashboard/dashboard-routing.module.ts index 4c6ed88..3a3291a 100644 --- a/src/app/control-panel/dashboard/dashboard-routing.module.ts +++ b/src/app/control-panel/dashboard/dashboard-routing.module.ts @@ -6,7 +6,7 @@ import { DashboardComponent } from './dashboard.component'; const routes: Routes = [ { path: '', component: DashboardComponent}, - { path: 'energy', component: EnergyComponent } + { path: '**', component: DashboardComponent } ]; @NgModule({ diff --git a/src/app/control-panel/dashboard/dashboard.module.ts b/src/app/control-panel/dashboard/dashboard.module.ts index da92449..7c5b480 100644 --- a/src/app/control-panel/dashboard/dashboard.module.ts +++ b/src/app/control-panel/dashboard/dashboard.module.ts @@ -21,6 +21,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { ToastModule } from 'primeng/toast'; import { SplitButtonModule } from 'primeng/splitbutton'; import { DashboardComponent } from './dashboard.component'; +import { NgApexchartsModule } from 'ng-apexcharts'; @NgModule({ declarations: [ @@ -50,7 +51,8 @@ import { DashboardComponent } from './dashboard.component'; ConfirmDialogModule, ToastModule, DropdownModule, - PanelMenuModule + PanelMenuModule, + NgApexchartsModule ], exports: [ EnergyComponent, diff --git a/src/app/control-panel/dashboard/energy/electricity/electricity.component.html b/src/app/control-panel/dashboard/energy/electricity/electricity.component.html index 4d9dc5f..e1fb690 100644 --- a/src/app/control-panel/dashboard/energy/electricity/electricity.component.html +++ b/src/app/control-panel/dashboard/energy/electricity/electricity.component.html @@ -8,4 +8,11 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/app/control-panel/dashboard/energy/electricity/electricity.component.ts b/src/app/control-panel/dashboard/energy/electricity/electricity.component.ts index cbfdeb3..428f400 100644 --- a/src/app/control-panel/dashboard/energy/electricity/electricity.component.ts +++ b/src/app/control-panel/dashboard/energy/electricity/electricity.component.ts @@ -1,5 +1,20 @@ import { Component, OnInit } from '@angular/core'; +import { + ChartComponent, + ApexAxisChartSeries, + ApexChart, + ApexXAxis, + ApexTitleSubtitle +} from 'ng-apexcharts'; + +export type ChartOptions = { + series: ApexAxisChartSeries; + chart: ApexChart; + xaxis: ApexXAxis; + title: ApexTitleSubtitle; +}; + enum ViewBy { Year = 0, Month, @@ -16,8 +31,28 @@ export class ElectricityComponent implements OnInit { data: any; data2: any; data3: any; + chartOptions: any; constructor() { + this.chartOptions = { + series: [ + { + name: "My-series", + data: [10, 41, 35, 51, 49, 62, 69, 91, 148] + } + ], + chart: { + height: 350, + type: "bar" + }, + title: { + text: "My First Angular Chart" + }, + xaxis: { + categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] + } + }; + this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Augustus', 'September', 'October', 'November', 'December'], datasets: [