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: [