Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

build: starter-kit clean up

Browse source
This commit is contained in:
Dmitry Nehaychik 2018-02-27 13:50:49 +03:00 • committed by Sergey Andrievskiy
parent 98166c5274
commit a76167acfb
413 changed files with 232 additions and 19243 deletions
Download patch file Download diff file Expand all files Collapse all files

50
angular.json
View file

@ -22,43 +22,20 @@
"assets": [ "assets": [
"src/assets", "src/assets",
"src/favicon.ico", "src/favicon.ico",
"src/favicon.png", "src/favicon.png"
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "/assets/img/markers"
}
], ],
"styles": [ "styles": [
"node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css", "node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css", "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/scss/ionicons.scss", "node_modules/ionicons/scss/ionicons.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/socicon/css/socicon.css", "node_modules/socicon/css/socicon.css",
"node_modules/nebular-icons/scss/nebular-icons.scss", "node_modules/nebular-icons/scss/nebular-icons.scss",
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css", "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
"node_modules/leaflet/dist/leaflet.css",
"src/app/@theme/styles/styles.scss" "src/app/@theme/styles/styles.scss"
], ],
"scripts": [ "scripts": [
"node_modules/pace-js/pace.min.js", "node_modules/pace-js/pace.min.js"
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/modern/theme.min.js",
"node_modules/tinymce/plugins/link/plugin.min.js",
"node_modules/tinymce/plugins/paste/plugin.min.js",
"node_modules/tinymce/plugins/table/plugin.min.js",
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/dist/extension/bmap.min.js",
"node_modules/chart.js/dist/Chart.min.js"
],
"allowedCommonJsDependencies": [
"angular2-chartjs",
"echarts",
"lodash",
"zrender/lib/svg/svg",
"zrender/lib/vml/vml",
"style-loader!leaflet/dist/leaflet.css"
] ]
}, },
"configurations": { "configurations": {
@ -112,22 +89,13 @@
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"scripts": [ "scripts": [
"node_modules/pace-js/pace.min.js", "node_modules/pace-js/pace.min.js"
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/modern/theme.min.js",
"node_modules/tinymce/plugins/link/plugin.min.js",
"node_modules/tinymce/plugins/paste/plugin.min.js",
"node_modules/tinymce/plugins/table/plugin.min.js",
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/dist/extension/bmap.min.js",
"node_modules/chart.js/dist/Chart.min.js"
], ],
"styles": [ "styles": [
"node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/typeface-exo/index.css", "node_modules/typeface-exo/index.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css", "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
"node_modules/ionicons/scss/ionicons.scss", "node_modules/ionicons/scss/ionicons.scss",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/socicon/css/socicon.css", "node_modules/socicon/css/socicon.css",
"node_modules/nebular-icons/scss/nebular-icons.scss", "node_modules/nebular-icons/scss/nebular-icons.scss",
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css", "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
@ -136,12 +104,7 @@
"assets": [ "assets": [
"src/assets", "src/assets",
"src/favicon.ico", "src/favicon.ico",
"src/favicon.png", "src/favicon.png"
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "/assets/img/markers"
}
] ]
} }
}, },
@ -185,11 +148,8 @@
"defaultProject": "ngx-admin-demo", "defaultProject": "ngx-admin-demo",
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
"prefix": "ngx",
"style": "scss" "style": "scss"
}, },
"@schematics/angular:directive": { "@schematics/angular:directive": {}
"prefix": "ngx"
}
} }
} }

302
package-lock.json generated
View file

@ -4,11 +4,6 @@
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
"@akveo/ng2-completer": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@akveo/ng2-completer/-/ng2-completer-9.0.1.tgz",
"integrity": "sha512-iACL0heOUmGV1GBKD3srwBJMFLZykld1MiTDvmbgEEXMhavp0UA45GdNsv7BBKI9XauuFKpOqHLlC+fT6DLGAQ=="
},
"@angular-devkit/architect": { "@angular-devkit/architect": {
"version": "0.1000.6", "version": "0.1000.6",
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1000.6.tgz", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1000.6.tgz",
@ -975,15 +970,6 @@
} }
} }
}, },
"@angular/google-maps": {
"version": "10.1.3",
"resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-10.1.3.tgz",
"integrity": "sha512-HFv2UBc8WLAw4/yhfCtRAJ1yGLoPNdJ/ETK0PYKTmwzvym4WpMLS/8UkDLnRcSEcdHl6S8Dr9Lz118l/lpkS5g==",
"requires": {
"@types/googlemaps": "^3.39.3",
"tslib": "^2.0.0"
}
},
"@angular/language-service": { "@angular/language-service": {
"version": "10.0.10", "version": "10.0.10",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-10.0.10.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-10.0.10.tgz",
@ -1035,11 +1021,6 @@
} }
} }
}, },
"@asymmetrik/ngx-leaflet": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-3.0.1.tgz",
"integrity": "sha512-rQaqLM/n9gIPMKkNDOd3+H1kiQiuXtY5KVOM5cPJCoetaN9oIJrCATQHPRO47j1os8Wqcv5I0BKEH/EtTtVuiA=="
},
"@babel/code-frame": { "@babel/code-frame": {
"version": "7.10.4", "version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@ -2356,12 +2337,6 @@
"viz.js": "^1.8.0" "viz.js": "^1.8.0"
} }
}, },
"@fortawesome/fontawesome-free": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.2.0.tgz",
"integrity": "sha512-4pgStJx9UmydKc7wwF6Xjw4dFqzUnQejeuP2aUNHWazayWbmMbrx5rieN9+oob4bUwkf1thS3am0Ko+uhFHpNA==",
"dev": true
},
"@istanbuljs/schema": { "@istanbuljs/schema": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@ -2588,42 +2563,12 @@
} }
} }
}, },
"@swimlane/ngx-charts": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-14.0.0.tgz",
"integrity": "sha512-UiAleBA4Hs7IEB+5mSmn1ojntD32lpfR7BokuVUNkhWiX4CsljKsXgm1EwIw2A14JBu4g8EDjKrdbED79eShEA==",
"requires": {
"d3-array": "^2.4.0",
"d3-brush": "^1.1.5",
"d3-color": "^1.4.0",
"d3-format": "^1.4.2",
"d3-hierarchy": "^1.1.9",
"d3-interpolate": "^1.4.0",
"d3-scale": "^3.2.1",
"d3-selection": "^1.4.1",
"d3-shape": "^1.3.7",
"d3-time-format": "^2.2.2",
"d3-transition": "^1.3.2"
}
},
"@types/color-name": { "@types/color-name": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"dev": true "dev": true
}, },
"@types/d3-color": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.0.5.tgz",
"integrity": "sha1-ytdV8Pxt57cPpuXgivqB70wiSN4=",
"dev": true
},
"@types/geojson": {
"version": "7946.0.1",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.1.tgz",
"integrity": "sha512-BXY6tH16Snp/ZdX6cFlBD8yfEArcZemzxEGciXkMmp1/tU76oyqkxJq91JQzT8SXWzRPwj//dw0/FdCSnnT8mw==",
"dev": true
},
"@types/glob": { "@types/glob": {
"version": "7.1.3", "version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@ -2634,11 +2579,6 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/googlemaps": {
"version": "3.39.3",
"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.3.tgz",
"integrity": "sha512-L8O9HAVFZj0TuiS8h5ORthiMsrrhjxTC8XUusp5k47oXCst4VTm+qWKvrAvmYMybZVokbp4Udco1mNwJrTNZPQ=="
},
"@types/jasmine": { "@types/jasmine": {
"version": "2.5.54", "version": "2.5.54",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz",
@ -2660,15 +2600,6 @@
"integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==", "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
"dev": true "dev": true
}, },
"@types/leaflet": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.3.tgz",
"integrity": "sha512-ancdZhtqOp64/ZXuvKuadFCUmXDhRDGiBSqM6MhARk4kET9UKAdkWY76hn0VlwvknmynMB8wbDMJSGXYRbQFEg==",
"dev": true,
"requires": {
"@types/geojson": "*"
}
},
"@types/minimatch": { "@types/minimatch": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -3079,14 +3010,6 @@
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
}, },
"angular2-chartjs": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/angular2-chartjs/-/angular2-chartjs-0.4.1.tgz",
"integrity": "sha512-BTizn/QVbuFW5fKLxFY4bUDK7O5SMs//JhcViRAgcimwaqQ6Cd5JjcQs9/Gatq+LP6fCzkDyqjQwk0maoDNkpg==",
"requires": {
"chart.js": "^2.3.0"
}
},
"ansi-colors": { "ansi-colors": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
@ -4292,32 +4215,6 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true "dev": true
}, },
"chart.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.1.tgz",
"integrity": "sha512-pX1oQAY86MiuyZ2hY593Acbl4MLHKrBBhhmZ1YqSadzQbbsBE2rnd6WISoHjIsdf0WDeC0hbePYCz2ZxkV8L+g==",
"requires": {
"chartjs-color": "~2.2.0",
"moment": "~2.18.0"
}
},
"chartjs-color": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
"integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
"requires": {
"chartjs-color-string": "^0.5.0",
"color-convert": "^0.5.3"
}
},
"chartjs-color-string": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
"integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
"requires": {
"color-name": "^1.0.0"
}
},
"cheerio": { "cheerio": {
"version": "1.0.0-rc.2", "version": "1.0.0-rc.2",
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
@ -4425,11 +4322,6 @@
"integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==", "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
"dev": true "dev": true
}, },
"ckeditor": {
"version": "4.7.3",
"resolved": "https://registry.npmjs.org/ckeditor/-/ckeditor-4.7.3.tgz",
"integrity": "sha1-tIb7nrka+VMqCs+upKVTdJcCVNU="
},
"class-utils": { "class-utils": {
"version": "0.3.6", "version": "0.3.6",
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@ -4701,11 +4593,6 @@
} }
} }
}, },
"color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
},
"color-diff": { "color-diff": {
"version": "0.1.7", "version": "0.1.7",
"resolved": "https://registry.npmjs.org/color-diff/-/color-diff-0.1.7.tgz", "resolved": "https://registry.npmjs.org/color-diff/-/color-diff-0.1.7.tgz",
@ -4715,7 +4602,8 @@
"color-name": { "color-name": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
}, },
"color-string": { "color-string": {
"version": "1.5.3", "version": "1.5.3",
@ -6301,126 +6189,6 @@
"type": "^1.0.1" "type": "^1.0.1"
} }
}, },
"d3-array": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.5.1.tgz",
"integrity": "sha512-cKvAlQZUKhXInw5mosJMtAYsY3dDYwTess/WOFUQTGcr8xV04SZMJs6n6QznsqZC5vJTkvZuCgsH9fo981ysPA=="
},
"d3-brush": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
"integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
"requires": {
"d3-dispatch": "1",
"d3-drag": "1",
"d3-interpolate": "1",
"d3-selection": "1",
"d3-transition": "1"
}
},
"d3-color": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
"integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
},
"d3-dispatch": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
},
"d3-drag": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
"requires": {
"d3-dispatch": "1",
"d3-selection": "1"
}
},
"d3-ease": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
"integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
},
"d3-format": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
"integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
},
"d3-hierarchy": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
},
"d3-interpolate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
"integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
"requires": {
"d3-color": "1"
}
},
"d3-path": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
},
"d3-scale": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz",
"integrity": "sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==",
"requires": {
"d3-array": "1.2.0 - 2",
"d3-format": "1",
"d3-interpolate": "^1.2.0",
"d3-time": "1",
"d3-time-format": "2"
}
},
"d3-selection": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
"integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
},
"d3-shape": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
"requires": {
"d3-path": "1"
}
},
"d3-time": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
"integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
},
"d3-time-format": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
"integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
"requires": {
"d3-time": "1"
}
},
"d3-timer": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
},
"d3-transition": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
"integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
"requires": {
"d3-color": "1",
"d3-dispatch": "1",
"d3-ease": "1",
"d3-interpolate": "1",
"d3-selection": "^1.1.0",
"d3-timer": "1"
}
},
"damerau-levenshtein": { "damerau-levenshtein": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@ -7151,14 +6919,6 @@
"jsbn": "~0.1.0" "jsbn": "~0.1.0"
} }
}, },
"echarts": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.0.2.tgz",
"integrity": "sha512-2kLhHvSAVbJ6QYVDxuySFp/+LfJxlYTYyPaOfwqydiFMAL9Wx7jzarfR1P4P6DFzLCZi4U4mv6EcZhH9BantKQ==",
"requires": {
"zrender": "4.0.1"
}
},
"editions": { "editions": {
"version": "1.3.4", "version": "1.3.4",
"resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz", "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz",
@ -12338,11 +12098,6 @@
} }
} }
}, },
"leaflet": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.2.0.tgz",
"integrity": "sha512-Bold8phAE6WcRsuwhofrQ7cOK1REFHaYIkKuj7+TBYK3ONKRpGGIb5oXR5akYotFnrWN0TWKh6Svlhflm3dogg=="
},
"less": { "less": {
"version": "3.12.2", "version": "3.12.2",
"resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz", "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
@ -13512,11 +13267,6 @@
"integrity": "sha1-4rbN65zhn5kxelNyLz2/XfXqqrI=", "integrity": "sha1-4rbN65zhn5kxelNyLz2/XfXqqrI=",
"dev": true "dev": true
}, },
"moment": {
"version": "2.18.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
"integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
},
"morgan": { "morgan": {
"version": "1.9.0", "version": "1.9.0",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz",
@ -13686,44 +13436,6 @@
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
"dev": true "dev": true
}, },
"ng2-ckeditor": {
"version": "1.2.9",
"resolved": "https://registry.npmjs.org/ng2-ckeditor/-/ng2-ckeditor-1.2.9.tgz",
"integrity": "sha512-Olsq3fWc7eG8BsVDgCW9NZFuUfay1VJ9c2QlzLbtXoxilwRhtHJsPxuAjE9DjxhQWgYa0TSgosk43JKkBqT2lQ==",
"requires": {
"tslib": "^2.0.0"
}
},
"ng2-smart-table": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/ng2-smart-table/-/ng2-smart-table-1.6.0.tgz",
"integrity": "sha512-ejAIcVgEznsMD79xg+HfCha804KyGEiX9KH5BnmVzQZFzpC782I5W2wn4zackp4Gi9km1H6pKf3+MXLCF8IRXQ==",
"requires": {
"lodash": "^4.17.10"
},
"dependencies": {
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
}
}
},
"ngx-echarts": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-4.2.2.tgz",
"integrity": "sha512-iLxOFnfKhUYP8Qw22AUY2ugSEd1Uvt6AeYhiaSqpg/G6NDmM/NwpdLt+fGAjax2aY7e94ORuwhXnl2gxtNzt7Q==",
"requires": {
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
"integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
}
}
},
"nice-try": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -20824,11 +20536,6 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true "dev": true
}, },
"tinymce": {
"version": "4.5.7",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.5.7.tgz",
"integrity": "sha1-4fXNKG7DyZd71nKkwU5Jb2O8T+8="
},
"tmp": { "tmp": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@ -23997,11 +23704,6 @@
"version": "0.10.2", "version": "0.10.2",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.2.tgz", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.2.tgz",
"integrity": "sha512-UAYfiuvxLN4oyuqhJwd21Uxb4CNawrq6fPS/05Su5L4G+1TN+HVDJMUHNMobVQDFJRir2cLAODXwluaOKB7HFg==" "integrity": "sha512-UAYfiuvxLN4oyuqhJwd21Uxb4CNawrq6fPS/05Su5L4G+1TN+HVDJMUHNMobVQDFJRir2cLAODXwluaOKB7HFg=="
},
"zrender": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.1.tgz",
"integrity": "sha512-VC9bTAZwd5OVgryysxBgNvIZuwBsRJbIDkSyK9PAk7e9wE/M0k4R3eylVYc1IAcDXvccSFnj4/NkzCteh/YSpA=="
} }
} }
} }

17
package.json
View file

@ -30,38 +30,26 @@
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"" "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
}, },
"dependencies": { "dependencies": {
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^10.0.10", "@angular/animations": "^10.0.10",
"@angular/cdk": "10.1.1", "@angular/cdk": "10.1.1",
"@angular/common": "^10.0.10", "@angular/common": "^10.0.10",
"@angular/compiler": "^10.0.10", "@angular/compiler": "^10.0.10",
"@angular/core": "^10.0.10", "@angular/core": "^10.0.10",
"@angular/forms": "^10.0.10", "@angular/forms": "^10.0.10",
"@angular/google-maps": "^10.1.3",
"@angular/platform-browser": "^10.0.10", "@angular/platform-browser": "^10.0.10",
"@angular/platform-browser-dynamic": "^10.0.10", "@angular/platform-browser-dynamic": "^10.0.10",
"@angular/router": "^10.0.10", "@angular/router": "^10.0.10",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "6.0.0", "@nebular/auth": "6.0.0",
"@nebular/eva-icons": "6.0.0", "@nebular/eva-icons": "6.0.0",
"@nebular/security": "6.0.0", "@nebular/security": "6.0.0",
"@nebular/theme": "6.0.0", "@nebular/theme": "6.0.0",
"@swimlane/ngx-charts": "^14.0.0",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1", "bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "2.5.1", "core-js": "2.5.1",
"echarts": "^4.0.2",
"eva-icons": "^1.1.3", "eva-icons": "^1.1.3",
"intl": "1.2.5", "intl": "1.2.5",
"ionicons": "2.0.1", "ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0", "nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.9",
"ng2-smart-table": "^1.6.0",
"ngx-echarts": "^4.2.2",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"normalize.css": "6.0.0", "normalize.css": "6.0.0",
"pace-js": "1.0.2", "pace-js": "1.0.2",
@ -70,7 +58,6 @@
"rxjs-compat": "6.3.0", "rxjs-compat": "6.3.0",
"socicon": "3.0.5", "socicon": "3.0.5",
"style-loader": "^1.1.3", "style-loader": "^1.1.3",
"tinymce": "4.5.7",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"typeface-exo": "0.0.22", "typeface-exo": "0.0.22",
"web-animations-js": "^2.3.2", "web-animations-js": "^2.3.2",
@ -82,12 +69,8 @@
"@angular/compiler-cli": "^10.0.10", "@angular/compiler-cli": "^10.0.10",
"@angular/language-service": "10.0.10", "@angular/language-service": "10.0.10",
"@compodoc/compodoc": "1.0.1", "@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
"@types/googlemaps": "^3.39.3",
"@types/jasmine": "2.5.54", "@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3", "@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.2.3",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"codelyzer": "^6.0.0", "codelyzer": "^6.0.0",
"conventional-changelog-cli": "1.3.4", "conventional-changelog-cli": "1.3.4",

66
src/app/@core/core.module.ts
View file

@ -5,52 +5,9 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
import { of as observableOf } from 'rxjs'; import { of as observableOf } from 'rxjs';
import { throwIfAlreadyLoaded } from './module-import-guard'; import { throwIfAlreadyLoaded } from './module-import-guard';
import { import { AnalyticsService, SeoService } from './utils';
AnalyticsService,
LayoutService,
PlayerService,
SeoService,
StateService,
} from './utils';
import { UserData } from './data/users'; import { UserData } from './data/users';
import { ElectricityData } from './data/electricity';
import { SmartTableData } from './data/smart-table';
import { UserActivityData } from './data/user-activity';
import { OrdersChartData } from './data/orders-chart';
import { ProfitChartData } from './data/profit-chart';
import { TrafficListData } from './data/traffic-list';
import { EarningData } from './data/earning';
import { OrdersProfitChartData } from './data/orders-profit-chart';
import { TrafficBarData } from './data/traffic-bar';
import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
import { TemperatureHumidityData } from './data/temperature-humidity';
import { SolarData } from './data/solar';
import { TrafficChartData } from './data/traffic-chart';
import { StatsBarData } from './data/stats-bar';
import { CountryOrderData } from './data/country-order';
import { StatsProgressBarData } from './data/stats-progress-bar';
import { VisitorsAnalyticsData } from './data/visitors-analytics';
import { SecurityCamerasData } from './data/security-cameras';
import { UserService } from './mock/users.service'; import { UserService } from './mock/users.service';
import { ElectricityService } from './mock/electricity.service';
import { SmartTableService } from './mock/smart-table.service';
import { UserActivityService } from './mock/user-activity.service';
import { OrdersChartService } from './mock/orders-chart.service';
import { ProfitChartService } from './mock/profit-chart.service';
import { TrafficListService } from './mock/traffic-list.service';
import { EarningService } from './mock/earning.service';
import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
import { TrafficBarService } from './mock/traffic-bar.service';
import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
import { TemperatureHumidityService } from './mock/temperature-humidity.service';
import { SolarService } from './mock/solar.service';
import { TrafficChartService } from './mock/traffic-chart.service';
import { StatsBarService } from './mock/stats-bar.service';
import { CountryOrderService } from './mock/country-order.service';
import { StatsProgressBarService } from './mock/stats-progress-bar.service';
import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
import { SecurityCamerasService } from './mock/security-cameras.service';
import { MockDataModule } from './mock/mock-data.module'; import { MockDataModule } from './mock/mock-data.module';
const socialLinks = [ const socialLinks = [
@ -73,24 +30,6 @@ const socialLinks = [
const DATA_SERVICES = [ const DATA_SERVICES = [
{ provide: UserData, useClass: UserService }, { provide: UserData, useClass: UserService },
{ provide: ElectricityData, useClass: ElectricityService },
{ provide: SmartTableData, useClass: SmartTableService },
{ provide: UserActivityData, useClass: UserActivityService },
{ provide: OrdersChartData, useClass: OrdersChartService },
{ provide: ProfitChartData, useClass: ProfitChartService },
{ provide: TrafficListData, useClass: TrafficListService },
{ provide: EarningData, useClass: EarningService },
{ provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
{ provide: TrafficBarData, useClass: TrafficBarService },
{ provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
{ provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
{ provide: SolarData, useClass: SolarService },
{ provide: TrafficChartData, useClass: TrafficChartService },
{ provide: StatsBarData, useClass: StatsBarService },
{ provide: CountryOrderData, useClass: CountryOrderService },
{ provide: StatsProgressBarData, useClass: StatsProgressBarService },
{ provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
{ provide: SecurityCamerasData, useClass: SecurityCamerasService },
]; ];
export class NbSimpleRoleProvider extends NbRoleProvider { export class NbSimpleRoleProvider extends NbRoleProvider {
@ -139,10 +78,7 @@ export const NB_CORE_PROVIDERS = [
provide: NbRoleProvider, useClass: NbSimpleRoleProvider, provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
}, },
AnalyticsService, AnalyticsService,
LayoutService,
PlayerService,
SeoService, SeoService,
StateService,
]; ];
@NgModule({ @NgModule({

6
src/app/@core/data/country-order.ts
View file

@ -1,6 +0,0 @@
import { Observable } from 'rxjs';
export abstract class CountryOrderData {
abstract getCountriesCategories(): Observable<string[]>;
abstract getCountriesCategoriesData(country: string): Observable<number[]>;
}

21
src/app/@core/data/earning.ts
View file

@ -1,21 +0,0 @@
import { Observable } from 'rxjs';
export interface LiveUpdateChart {
liveChart: { value: [string, number] }[];
delta: {
up: boolean;
value: number;
};
dailyIncome: number;
}
export interface PieChart {
value: number;
name: string;
}
export abstract class EarningData {
abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
abstract getEarningPieChartData(): Observable<PieChart[]>;
}

25
src/app/@core/data/electricity.ts
View file

@ -1,25 +0,0 @@
import { Observable } from 'rxjs';
export interface Month {
month: string;
delta: string;
down: boolean;
kWatts: string;
cost: string;
}
export interface Electricity {
title: string;
active?: boolean;
months: Month[];
}
export interface ElectricityChart {
label: string;
value: number;
}
export abstract class ElectricityData {
abstract getListData(): Observable<Electricity[]>;
abstract getChartData(): Observable<ElectricityChart[]>;
}

8
src/app/@core/data/orders-chart.ts
View file

@ -1,8 +0,0 @@
export interface OrdersChart {
chartLabel: string[];
linesData: number[][];
}
export abstract class OrdersChartData {
abstract getOrdersChartData(period: string): OrdersChart;
}

14
src/app/@core/data/orders-profit-chart.ts
View file

@ -1,14 +0,0 @@
import { Observable } from 'rxjs';
import { OrdersChart } from './orders-chart';
import { ProfitChart } from './profit-chart';
export interface OrderProfitChartSummary {
title: string;
value: number;
}
export abstract class OrdersProfitChartData {
abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
abstract getOrdersChartData(period: string): Observable<OrdersChart>;
abstract getProfitChartData(period: string): Observable<ProfitChart>;
}

5
src/app/@core/data/profit-bar-animation-chart.ts
View file

@ -1,5 +0,0 @@
import { Observable } from 'rxjs';
export abstract class ProfitBarAnimationChartData {
abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
}

8
src/app/@core/data/profit-chart.ts
View file

@ -1,8 +0,0 @@
export interface ProfitChart {
chartLabel: string[];
data: number[][];
}
export abstract class ProfitChartData {
abstract getProfitChartData(period: string): ProfitChart;
}

10
src/app/@core/data/security-cameras.ts
View file

@ -1,10 +0,0 @@
import { Observable } from 'rxjs';
export interface Camera {
title: string;
source: string;
}
export abstract class SecurityCamerasData {
abstract getCamerasData(): Observable<Camera[]>;
}

4
src/app/@core/data/smart-table.ts
View file

@ -1,4 +0,0 @@
export abstract class SmartTableData {
abstract getData(): any[];
}

5
src/app/@core/data/solar.ts
View file

@ -1,5 +0,0 @@
import { Observable } from 'rxjs';
export abstract class SolarData {
abstract getSolarData(): Observable<number>;
}

5
src/app/@core/data/stats-bar.ts
View file

@ -1,5 +0,0 @@
import { Observable } from 'rxjs';
export abstract class StatsBarData {
abstract getStatsBarData(): Observable<number[]>;
}

12
src/app/@core/data/stats-progress-bar.ts
View file

@ -1,12 +0,0 @@
import { Observable } from 'rxjs';
export interface ProgressInfo {
title: string;
value: number;
activeProgress: number;
description: string;
}
export abstract class StatsProgressBarData {
abstract getProgressInfoData(): Observable<ProgressInfo[]>;
}

12
src/app/@core/data/temperature-humidity.ts
View file

@ -1,12 +0,0 @@
import { Observable } from 'rxjs';
export interface Temperature {
value: number;
min: number;
max: number;
}
export abstract class TemperatureHumidityData {
abstract getTemperatureData(): Observable<Temperature>;
abstract getHumidityData(): Observable<Temperature>;
}

11
src/app/@core/data/traffic-bar.ts
View file

@ -1,11 +0,0 @@
import { Observable } from 'rxjs';
export interface TrafficBar {
data: number[];
labels: string[];
formatter: string;
}
export abstract class TrafficBarData {
abstract getTrafficBarData(period: string): Observable<TrafficBar>;
}

5
src/app/@core/data/traffic-chart.ts
View file

@ -1,5 +0,0 @@
import { Observable } from 'rxjs';
export abstract class TrafficChartData {
abstract getTrafficChartData(): Observable<number[]>;
}

20
src/app/@core/data/traffic-list.ts
View file

@ -1,20 +0,0 @@
import { Observable } from 'rxjs';
export interface TrafficList {
date: string;
value: number;
delta: {
up: boolean;
value: number;
};
comparison: {
prevDate: string;
prevValue: number;
nextDate: string;
nextValue: number;
};
}
export abstract class TrafficListData {
abstract getTrafficListData(period: string): Observable<TrafficList>;
}

12
src/app/@core/data/user-activity.ts
View file

@ -1,12 +0,0 @@
import { Observable } from 'rxjs';
export interface UserActive {
date: string;
pagesVisitCount: number;
deltaUp: boolean;
newVisits: number;
}
export abstract class UserActivityData {
abstract getUserActivityData(period: string): Observable<UserActive[]>;
}

12
src/app/@core/data/visitors-analytics.ts
View file

@ -1,12 +0,0 @@
import { Observable } from 'rxjs';
export interface OutlineData {
label: string;
value: number;
}
export abstract class VisitorsAnalyticsData {
abstract getInnerLineChartData(): Observable<number[]>;
abstract getOutlineLineChartData(): Observable<OutlineData[]>;
abstract getPieChartData(): Observable<number>;
}

29
src/app/@core/mock/country-order.service.ts
View file

@ -1,29 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { CountryOrderData } from '../data/country-order';
@Injectable()
export class CountryOrderService extends CountryOrderData {
private countriesCategories = [
'Sofas',
'Furniture',
'Lighting',
'Tables',
'Textiles',
];
private countriesCategoriesLength = this.countriesCategories.length;
private generateRandomData(nPoints: number): number[] {
return Array.from(Array(nPoints)).map(() => {
return Math.round(Math.random() * 20);
});
}
getCountriesCategories(): Observable<string[]> {
return observableOf(this.countriesCategories);
}
getCountriesCategoriesData(country: string): Observable<number[]> {
return observableOf(this.generateRandomData(this.countriesCategoriesLength));
}
}

103
src/app/@core/mock/earning.service.ts
View file

@ -1,103 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
@Injectable()
export class EarningService extends EarningData {
private currentDate: Date = new Date();
private currentValue = Math.random() * 1000;
private ONE_DAY = 24 * 3600 * 1000;
private pieChartData = [
{
value: 50,
name: 'Bitcoin',
},
{
value: 25,
name: 'Tether',
},
{
value: 25,
name: 'Ethereum',
},
];
private liveUpdateChartData = {
bitcoin: {
liveChart: [],
delta: {
up: true,
value: 4,
},
dailyIncome: 45895,
},
tether: {
liveChart: [],
delta: {
up: false,
value: 9,
},
dailyIncome: 5862,
},
ethereum: {
liveChart: [],
delta: {
up: false,
value: 21,
},
dailyIncome: 584,
},
};
getDefaultLiveChartData(elementsNumber: number) {
this.currentDate = new Date();
this.currentValue = Math.random() * 1000;
return Array.from(Array(elementsNumber))
.map(item => this.generateRandomLiveChartData());
}
generateRandomLiveChartData() {
this.currentDate = new Date(+this.currentDate + this.ONE_DAY);
this.currentValue = this.currentValue + Math.random() * 20 - 11;
if (this.currentValue < 0) {
this.currentValue = Math.random() * 100;
}
return {
value: [
[
this.currentDate.getFullYear(),
this.currentDate.getMonth(),
this.currentDate.getDate(),
].join('/'),
Math.round(this.currentValue),
],
};
}
getEarningLiveUpdateCardData(currency): Observable<any[]> {
const data = this.liveUpdateChartData[currency.toLowerCase()];
const newValue = this.generateRandomLiveChartData();
data.liveChart.shift();
data.liveChart.push(newValue);
return observableOf(data.liveChart);
}
getEarningCardData(currency: string): Observable<LiveUpdateChart> {
const data = this.liveUpdateChartData[currency.toLowerCase()];
data.liveChart = this.getDefaultLiveChartData(150);
return observableOf(data);
}
getEarningPieChartData(): Observable<PieChart[]> {
return observableOf(this.pieChartData);
}
}

95
src/app/@core/mock/electricity.service.ts
View file

@ -1,95 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
@Injectable()
export class ElectricityService extends ElectricityData {
private listData: Electricity[] = [
{
title: '2015',
months: [
{ month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' },
{ month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' },
{ month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' },
{ month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' },
{ month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' },
{ month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' },
{ month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' },
{ month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' },
{ month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' },
{ month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' },
{ month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' },
{ month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' },
],
},
{
title: '2016',
active: true,
months: [
{ month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' },
{ month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' },
{ month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' },
{ month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' },
{ month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' },
{ month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' },
{ month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' },
{ month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' },
{ month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' },
{ month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' },
{ month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' },
{ month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' },
],
},
{
title: '2017',
months: [
{ month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' },
{ month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' },
{ month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' },
{ month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' },
{ month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' },
{ month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' },
{ month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' },
{ month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' },
{ month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' },
{ month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' },
{ month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' },
{ month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' },
],
},
];
private chartPoints = [
490, 490, 495, 500,
505, 510, 520, 530,
550, 580, 630, 720,
800, 840, 860, 870,
870, 860, 840, 800,
720, 200, 145, 130,
130, 145, 200, 570,
635, 660, 670, 670,
660, 630, 580, 460,
380, 350, 340, 340,
340, 340, 340, 340,
340, 340, 340,
];
chartData: ElectricityChart[];
constructor() {
super();
this.chartData = this.chartPoints.map((p, index) => ({
label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
value: p,
}));
}
getListData(): Observable<Electricity[]> {
return observableOf(this.listData);
}
getChartData(): Observable<ElectricityChart[]> {
return observableOf(this.chartData);
}
}

38
src/app/@core/mock/mock-data.module.ts
View file

@ -2,47 +2,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { UserService } from './users.service'; import { UserService } from './users.service';
import { ElectricityService } from './electricity.service';
import { SmartTableService } from './smart-table.service';
import { UserActivityService } from './user-activity.service';
import { OrdersChartService } from './orders-chart.service';
import { ProfitChartService } from './profit-chart.service';
import { TrafficListService } from './traffic-list.service';
import { PeriodsService } from './periods.service';
import { EarningService } from './earning.service';
import { OrdersProfitChartService } from './orders-profit-chart.service';
import { TrafficBarService } from './traffic-bar.service';
import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service';
import { TemperatureHumidityService } from './temperature-humidity.service';
import { SolarService } from './solar.service';
import { TrafficChartService } from './traffic-chart.service';
import { StatsBarService } from './stats-bar.service';
import { CountryOrderService } from './country-order.service';
import { StatsProgressBarService } from './stats-progress-bar.service';
import { VisitorsAnalyticsService } from './visitors-analytics.service';
import { SecurityCamerasService } from './security-cameras.service';
const SERVICES = [ const SERVICES = [
UserService, UserService,
ElectricityService,
SmartTableService,
UserActivityService,
OrdersChartService,
ProfitChartService,
TrafficListService,
PeriodsService,
EarningService,
OrdersProfitChartService,
TrafficBarService,
ProfitBarAnimationChartService,
TemperatureHumidityService,
SolarService,
TrafficChartService,
StatsBarService,
CountryOrderService,
StatsProgressBarService,
VisitorsAnalyticsService,
SecurityCamerasService,
]; ];
@NgModule({ @NgModule({

155
src/app/@core/mock/orders-chart.service.ts
View file

@ -1,155 +0,0 @@
import { Injectable } from '@angular/core';
import { PeriodsService } from './periods.service';
import { OrdersChart, OrdersChartData } from '../data/orders-chart';
@Injectable()
export class OrdersChartService extends OrdersChartData {
private year = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
];
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),
year: this.getDataForYearPeriod(),
};
}
private getDataForWeekPeriod(): OrdersChart {
return {
chartLabel: this.getDataLabels(42, this.period.getWeeks()),
linesData: [
[
184, 267, 326, 366, 389, 399,
392, 371, 340, 304, 265, 227,
191, 158, 130, 108, 95, 91, 97,
109, 125, 144, 166, 189, 212,
236, 259, 280, 300, 316, 329,
338, 342, 339, 329, 312, 288,
258, 221, 178, 128, 71,
],
[
158, 178, 193, 205, 212, 213,
204, 190, 180, 173, 168, 164,
162, 160, 159, 158, 159, 166,
179, 195, 215, 236, 257, 276,
292, 301, 304, 303, 300, 293,
284, 273, 262, 251, 241, 234,
232, 232, 232, 232, 232, 232,
],
[
58, 137, 202, 251, 288, 312,
323, 324, 311, 288, 257, 222,
187, 154, 124, 100, 81, 68, 61,
58, 61, 69, 80, 96, 115, 137,
161, 186, 210, 233, 254, 271,
284, 293, 297, 297, 297, 297,
297, 297, 297, 297, 297,
],
],
};
}
private getDataForMonthPeriod(): OrdersChart {
return {
chartLabel: this.getDataLabels(47, this.period.getMonths()),
linesData: [
[
5, 63, 113, 156, 194, 225,
250, 270, 283, 289, 290,
286, 277, 264, 244, 220,
194, 171, 157, 151, 150,
152, 155, 160, 166, 170,
167, 153, 135, 115, 97,
82, 71, 64, 63, 62, 61,
62, 65, 73, 84, 102,
127, 159, 203, 259, 333,
],
[
6, 83, 148, 200, 240,
265, 273, 259, 211,
122, 55, 30, 28, 36,
50, 68, 88, 109, 129,
146, 158, 163, 165,
173, 187, 208, 236,
271, 310, 346, 375,
393, 400, 398, 387,
368, 341, 309, 275,
243, 220, 206, 202,
207, 222, 247, 286, 348,
],
[
398, 348, 315, 292, 274,
261, 251, 243, 237, 231,
222, 209, 192, 172, 152,
132, 116, 102, 90, 80, 71,
64, 58, 53, 49, 48, 54, 66,
84, 104, 125, 142, 156, 166,
172, 174, 172, 167, 159, 149,
136, 121, 105, 86, 67, 45, 22,
],
],
};
}
private getDataForYearPeriod(): OrdersChart {
return {
chartLabel: this.getDataLabels(42, this.year),
linesData: [
[
190, 269, 327, 366, 389, 398,
396, 387, 375, 359, 343, 327,
312, 298, 286, 276, 270, 268,
265, 258, 247, 234, 220, 204,
188, 172, 157, 142, 128, 116,
106, 99, 95, 94, 92, 89, 84,
77, 69, 60, 49, 36, 22,
],
[
265, 307, 337, 359, 375, 386,
393, 397, 399, 397, 390, 379,
365, 347, 326, 305, 282, 261,
241, 223, 208, 197, 190, 187,
185, 181, 172, 160, 145, 126,
105, 82, 60, 40, 26, 19, 22,
43, 82, 141, 220, 321,
],
[
9, 165, 236, 258, 244, 206,
186, 189, 209, 239, 273, 307,
339, 365, 385, 396, 398, 385,
351, 300, 255, 221, 197, 181,
170, 164, 162, 161, 159, 154,
146, 135, 122, 108, 96, 87,
83, 82, 82, 82, 82, 82, 82,
],
],
};
}
getDataLabels(nPoints: number, labelsArray: string[]): string[] {
const labelsArrayLength = labelsArray.length;
const step = Math.round(nPoints / labelsArrayLength);
return Array.from(Array(nPoints)).map((item, index) => {
const dataIndex = Math.round(index / step);
return index % step === 0 ? labelsArray[dataIndex] : '';
});
}
getOrdersChartData(period: string): OrdersChart {
return this.data[period];
}
}

45
src/app/@core/mock/orders-profit-chart.service.ts
View file

@ -1,45 +0,0 @@
import { of as observableOf, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { OrdersChart, OrdersChartData } from '../data/orders-chart';
import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
import { ProfitChart, ProfitChartData } from '../data/profit-chart';
@Injectable()
export class OrdersProfitChartService extends OrdersProfitChartData {
private summary = [
{
title: 'Marketplace',
value: 3654,
},
{
title: 'Last Month',
value: 946,
},
{
title: 'Last Week',
value: 654,
},
{
title: 'Today',
value: 230,
},
];
constructor(private ordersChartService: OrdersChartData,
private profitChartService: ProfitChartData) {
super();
}
getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {
return observableOf(this.summary);
}
getOrdersChartData(period: string): Observable<OrdersChart> {
return observableOf(this.ordersChartService.getOrdersChartData(period));
}
getProfitChartData(period: string): Observable<ProfitChart> {
return observableOf(this.profitChartService.getProfitChartData(period));
}
}

33
src/app/@core/mock/periods.service.ts
View file

@ -1,33 +0,0 @@
import { Injectable } from '@angular/core';
@Injectable()
export class PeriodsService {
getYears() {
return [
'2010', '2011', '2012',
'2013', '2014', '2015',
'2016', '2017', '2018',
];
}
getMonths() {
return [
'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec',
];
}
getWeeks() {
return [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun',
];
}
}

43
src/app/@core/mock/profit-bar-animation-chart.service.ts
View file

@ -1,43 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
@Injectable()
export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
private data: any;
constructor() {
super();
this.data = {
firstLine: this.getDataForFirstLine(),
secondLine: this.getDataForSecondLine(),
};
}
getDataForFirstLine(): number[] {
return this.createEmptyArray(100)
.map((_, index) => {
const oneFifth = index / 5;
return (Math.sin(oneFifth) * (oneFifth - 10) + index / 6) * 5;
});
}
getDataForSecondLine(): number[] {
return this.createEmptyArray(100)
.map((_, index) => {
const oneFifth = index / 5;
return (Math.cos(oneFifth) * (oneFifth - 10) + index / 6) * 5;
});
}
createEmptyArray(nPoints: number) {
return Array.from(Array(nPoints));
}
getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }> {
return observableOf(this.data);
}
}

77
src/app/@core/mock/profit-chart.service.ts
View file

@ -1,77 +0,0 @@
import { Injectable } from '@angular/core';
import { PeriodsService } from './periods.service';
import { ProfitChart, ProfitChartData } from '../data/profit-chart';
@Injectable()
export class ProfitChartService extends ProfitChartData {
private year = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
];
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),
year: this.getDataForYearPeriod(),
};
}
private getDataForWeekPeriod(): ProfitChart {
const nPoint = this.period.getWeeks().length;
return {
chartLabel: this.period.getWeeks(),
data: [
this.getRandomData(nPoint),
this.getRandomData(nPoint),
this.getRandomData(nPoint),
],
};
}
private getDataForMonthPeriod(): ProfitChart {
const nPoint = this.period.getMonths().length;
return {
chartLabel: this.period.getMonths(),
data: [
this.getRandomData(nPoint),
this.getRandomData(nPoint),
this.getRandomData(nPoint),
],
};
}
private getDataForYearPeriod(): ProfitChart {
const nPoint = this.year.length;
return {
chartLabel: this.year,
data: [
this.getRandomData(nPoint),
this.getRandomData(nPoint),
this.getRandomData(nPoint),
],
};
}
private getRandomData(nPoints: number): number[] {
return Array.from(Array(nPoints)).map(() => {
return Math.round(Math.random() * 500);
});
}
getProfitChartData(period: string): ProfitChart {
return this.data[period];
}
}

30
src/app/@core/mock/security-cameras.service.ts
View file

@ -1,30 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { Camera, SecurityCamerasData } from '../data/security-cameras';
@Injectable()
export class SecurityCamerasService extends SecurityCamerasData {
private cameras: Camera[] = [
{
title: 'Camera #1',
source: 'assets/images/camera1.jpg',
},
{
title: 'Camera #2',
source: 'assets/images/camera2.jpg',
},
{
title: 'Camera #3',
source: 'assets/images/camera3.jpg',
},
{
title: 'Camera #4',
source: 'assets/images/camera4.jpg',
},
];
getCamerasData(): Observable<Camera[]> {
return observableOf(this.cameras);
}
}

432
src/app/@core/mock/smart-table.service.ts
View file

@ -1,432 +0,0 @@
import { Injectable } from '@angular/core';
import { SmartTableData } from '../data/smart-table';
@Injectable()
export class SmartTableService extends SmartTableData {
data = [{
id: 1,
firstName: 'Mark',
lastName: 'Otto',
username: '@mdo',
email: 'mdo@gmail.com',
age: '28',
}, {
id: 2,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@fat',
email: 'fat@yandex.ru',
age: '45',
}, {
id: 3,
firstName: 'Larry',
lastName: 'Bird',
username: '@twitter',
email: 'twitter@outlook.com',
age: '18',
}, {
id: 4,
firstName: 'John',
lastName: 'Snow',
username: '@snow',
email: 'snow@gmail.com',
age: '20',
}, {
id: 5,
firstName: 'Jack',
lastName: 'Sparrow',
username: '@jack',
email: 'jack@yandex.ru',
age: '30',
}, {
id: 6,
firstName: 'Ann',
lastName: 'Smith',
username: '@ann',
email: 'ann@gmail.com',
age: '21',
}, {
id: 7,
firstName: 'Barbara',
lastName: 'Black',
username: '@barbara',
email: 'barbara@yandex.ru',
age: '43',
}, {
id: 8,
firstName: 'Sevan',
lastName: 'Bagrat',
username: '@sevan',
email: 'sevan@outlook.com',
age: '13',
}, {
id: 9,
firstName: 'Ruben',
lastName: 'Vardan',
username: '@ruben',
email: 'ruben@gmail.com',
age: '22',
}, {
id: 10,
firstName: 'Karen',
lastName: 'Sevan',
username: '@karen',
email: 'karen@yandex.ru',
age: '33',
}, {
id: 11,
firstName: 'Mark',
lastName: 'Otto',
username: '@mark',
email: 'mark@gmail.com',
age: '38',
}, {
id: 12,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@jacob',
email: 'jacob@yandex.ru',
age: '48',
}, {
id: 13,
firstName: 'Haik',
lastName: 'Hakob',
username: '@haik',
email: 'haik@outlook.com',
age: '48',
}, {
id: 14,
firstName: 'Garegin',
lastName: 'Jirair',
username: '@garegin',
email: 'garegin@gmail.com',
age: '40',
}, {
id: 15,
firstName: 'Krikor',
lastName: 'Bedros',
username: '@krikor',
email: 'krikor@yandex.ru',
age: '32',
}, {
'id': 16,
'firstName': 'Francisca',
'lastName': 'Brady',
'username': '@Gibson',
'email': 'franciscagibson@comtours.com',
'age': 11,
}, {
'id': 17,
'firstName': 'Tillman',
'lastName': 'Figueroa',
'username': '@Snow',
'email': 'tillmansnow@comtours.com',
'age': 34,
}, {
'id': 18,
'firstName': 'Jimenez',
'lastName': 'Morris',
'username': '@Bryant',
'email': 'jimenezbryant@comtours.com',
'age': 45,
}, {
'id': 19,
'firstName': 'Sandoval',
'lastName': 'Jacobson',
'username': '@Mcbride',
'email': 'sandovalmcbride@comtours.com',
'age': 32,
}, {
'id': 20,
'firstName': 'Griffin',
'lastName': 'Torres',
'username': '@Charles',
'email': 'griffincharles@comtours.com',
'age': 19,
}, {
'id': 21,
'firstName': 'Cora',
'lastName': 'Parker',
'username': '@Caldwell',
'email': 'coracaldwell@comtours.com',
'age': 27,
}, {
'id': 22,
'firstName': 'Cindy',
'lastName': 'Bond',
'username': '@Velez',
'email': 'cindyvelez@comtours.com',
'age': 24,
}, {
'id': 23,
'firstName': 'Frieda',
'lastName': 'Tyson',
'username': '@Craig',
'email': 'friedacraig@comtours.com',
'age': 45,
}, {
'id': 24,
'firstName': 'Cote',
'lastName': 'Holcomb',
'username': '@Rowe',
'email': 'coterowe@comtours.com',
'age': 20,
}, {
'id': 25,
'firstName': 'Trujillo',
'lastName': 'Mejia',
'username': '@Valenzuela',
'email': 'trujillovalenzuela@comtours.com',
'age': 16,
}, {
'id': 26,
'firstName': 'Pruitt',
'lastName': 'Shepard',
'username': '@Sloan',
'email': 'pruittsloan@comtours.com',
'age': 44,
}, {
'id': 27,
'firstName': 'Sutton',
'lastName': 'Ortega',
'username': '@Black',
'email': 'suttonblack@comtours.com',
'age': 42,
}, {
'id': 28,
'firstName': 'Marion',
'lastName': 'Heath',
'username': '@Espinoza',
'email': 'marionespinoza@comtours.com',
'age': 47,
}, {
'id': 29,
'firstName': 'Newman',
'lastName': 'Hicks',
'username': '@Keith',
'email': 'newmankeith@comtours.com',
'age': 15,
}, {
'id': 30,
'firstName': 'Boyle',
'lastName': 'Larson',
'username': '@Summers',
'email': 'boylesummers@comtours.com',
'age': 32,
}, {
'id': 31,
'firstName': 'Haynes',
'lastName': 'Vinson',
'username': '@Mckenzie',
'email': 'haynesmckenzie@comtours.com',
'age': 15,
}, {
'id': 32,
'firstName': 'Miller',
'lastName': 'Acosta',
'username': '@Young',
'email': 'milleryoung@comtours.com',
'age': 55,
}, {
'id': 33,
'firstName': 'Johnston',
'lastName': 'Brown',
'username': '@Knight',
'email': 'johnstonknight@comtours.com',
'age': 29,
}, {
'id': 34,
'firstName': 'Lena',
'lastName': 'Pitts',
'username': '@Forbes',
'email': 'lenaforbes@comtours.com',
'age': 25,
}, {
'id': 35,
'firstName': 'Terrie',
'lastName': 'Kennedy',
'username': '@Branch',
'email': 'terriebranch@comtours.com',
'age': 37,
}, {
'id': 36,
'firstName': 'Louise',
'lastName': 'Aguirre',
'username': '@Kirby',
'email': 'louisekirby@comtours.com',
'age': 44,
}, {
'id': 37,
'firstName': 'David',
'lastName': 'Patton',
'username': '@Sanders',
'email': 'davidsanders@comtours.com',
'age': 26,
}, {
'id': 38,
'firstName': 'Holden',
'lastName': 'Barlow',
'username': '@Mckinney',
'email': 'holdenmckinney@comtours.com',
'age': 11,
}, {
'id': 39,
'firstName': 'Baker',
'lastName': 'Rivera',
'username': '@Montoya',
'email': 'bakermontoya@comtours.com',
'age': 47,
}, {
'id': 40,
'firstName': 'Belinda',
'lastName': 'Lloyd',
'username': '@Calderon',
'email': 'belindacalderon@comtours.com',
'age': 21,
}, {
'id': 41,
'firstName': 'Pearson',
'lastName': 'Patrick',
'username': '@Clements',
'email': 'pearsonclements@comtours.com',
'age': 42,
}, {
'id': 42,
'firstName': 'Alyce',
'lastName': 'Mckee',
'username': '@Daugherty',
'email': 'alycedaugherty@comtours.com',
'age': 55,
}, {
'id': 43,
'firstName': 'Valencia',
'lastName': 'Spence',
'username': '@Olsen',
'email': 'valenciaolsen@comtours.com',
'age': 20,
}, {
'id': 44,
'firstName': 'Leach',
'lastName': 'Holcomb',
'username': '@Humphrey',
'email': 'leachhumphrey@comtours.com',
'age': 28,
}, {
'id': 45,
'firstName': 'Moss',
'lastName': 'Baxter',
'username': '@Fitzpatrick',
'email': 'mossfitzpatrick@comtours.com',
'age': 51,
}, {
'id': 46,
'firstName': 'Jeanne',
'lastName': 'Cooke',
'username': '@Ward',
'email': 'jeanneward@comtours.com',
'age': 59,
}, {
'id': 47,
'firstName': 'Wilma',
'lastName': 'Briggs',
'username': '@Kidd',
'email': 'wilmakidd@comtours.com',
'age': 53,
}, {
'id': 48,
'firstName': 'Beatrice',
'lastName': 'Perry',
'username': '@Gilbert',
'email': 'beatricegilbert@comtours.com',
'age': 39,
}, {
'id': 49,
'firstName': 'Whitaker',
'lastName': 'Hyde',
'username': '@Mcdonald',
'email': 'whitakermcdonald@comtours.com',
'age': 35,
}, {
'id': 50,
'firstName': 'Rebekah',
'lastName': 'Duran',
'username': '@Gross',
'email': 'rebekahgross@comtours.com',
'age': 40,
}, {
'id': 51,
'firstName': 'Earline',
'lastName': 'Mayer',
'username': '@Woodward',
'email': 'earlinewoodward@comtours.com',
'age': 52,
}, {
'id': 52,
'firstName': 'Moran',
'lastName': 'Baxter',
'username': '@Johns',
'email': 'moranjohns@comtours.com',
'age': 20,
}, {
'id': 53,
'firstName': 'Nanette',
'lastName': 'Hubbard',
'username': '@Cooke',
'email': 'nanettecooke@comtours.com',
'age': 55,
}, {
'id': 54,
'firstName': 'Dalton',
'lastName': 'Walker',
'username': '@Hendricks',
'email': 'daltonhendricks@comtours.com',
'age': 25,
}, {
'id': 55,
'firstName': 'Bennett',
'lastName': 'Blake',
'username': '@Pena',
'email': 'bennettpena@comtours.com',
'age': 13,
}, {
'id': 56,
'firstName': 'Kellie',
'lastName': 'Horton',
'username': '@Weiss',
'email': 'kellieweiss@comtours.com',
'age': 48,
}, {
'id': 57,
'firstName': 'Hobbs',
'lastName': 'Talley',
'username': '@Sanford',
'email': 'hobbssanford@comtours.com',
'age': 28,
}, {
'id': 58,
'firstName': 'Mcguire',
'lastName': 'Donaldson',
'username': '@Roman',
'email': 'mcguireroman@comtours.com',
'age': 38,
}, {
'id': 59,
'firstName': 'Rodriquez',
'lastName': 'Saunders',
'username': '@Harper',
'email': 'rodriquezharper@comtours.com',
'age': 20,
}, {
'id': 60,
'firstName': 'Lou',
'lastName': 'Conner',
'username': '@Sanchez',
'email': 'lousanchez@comtours.com',
'age': 16,
}];
getData() {
return this.data;
}
}

12
src/app/@core/mock/solar.service.ts
View file

@ -1,12 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { SolarData } from '../data/solar';
@Injectable()
export class SolarService extends SolarData {
private value = 42;
getSolarData(): Observable<number> {
return observableOf(this.value);
}
}

16
src/app/@core/mock/stats-bar.service.ts
View file

@ -1,16 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { StatsBarData } from '../data/stats-bar';
@Injectable()
export class StatsBarService extends StatsBarData {
private statsBarData: number[] = [
300, 520, 435, 530,
730, 620, 660, 860,
];
getStatsBarData(): Observable<number[]> {
return observableOf(this.statsBarData);
}
}

31
src/app/@core/mock/stats-progress-bar.service.ts
View file

@ -1,31 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
@Injectable()
export class StatsProgressBarService extends StatsProgressBarData {
private progressInfoData: ProgressInfo[] = [
{
title: 'Today’s Profit',
value: 572900,
activeProgress: 70,
description: 'Better than last week (70%)',
},
{
title: 'New Orders',
value: 6378,
activeProgress: 30,
description: 'Better than last week (30%)',
},
{
title: 'New Comments',
value: 200,
activeProgress: 55,
description: 'Better than last week (55%)',
},
];
getProgressInfoData(): Observable<ProgressInfo[]> {
return observableOf(this.progressInfoData);
}
}

27
src/app/@core/mock/temperature-humidity.service.ts
View file

@ -1,27 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
@Injectable()
export class TemperatureHumidityService extends TemperatureHumidityData {
private temperatureDate: Temperature = {
value: 24,
min: 12,
max: 30,
};
private humidityDate: Temperature = {
value: 87,
min: 0,
max: 100,
};
getTemperatureData(): Observable<Temperature> {
return observableOf(this.temperatureDate);
}
getHumidityData(): Observable<Temperature> {
return observableOf(this.humidityDate);
}
}

47
src/app/@core/mock/traffic-bar.service.ts
View file

@ -1,47 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
@Injectable()
export class TrafficBarService extends TrafficBarData {
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),
year: this.getDataForYearPeriod(),
};
}
getDataForWeekPeriod(): TrafficBar {
return {
data: [10, 15, 19, 7, 20, 13, 15],
labels: this.period.getWeeks(),
formatter: '{c0} MB',
};
}
getDataForMonthPeriod(): TrafficBar {
return {
data: [0.5, 0.3, 0.8, 0.2, 0.3, 0.7, 0.8, 1, 0.7, 0.8, 0.6, 0.7],
labels: this.period.getMonths(),
formatter: '{c0} GB',
};
}
getDataForYearPeriod(): TrafficBar {
return {
data: [10, 15, 19, 7, 20, 13, 15, 19, 11],
labels: this.period.getYears(),
formatter: '{c0} GB',
};
}
getTrafficBarData(period: string): Observable<TrafficBar> {
return observableOf(this.data[period]);
}
}

16
src/app/@core/mock/traffic-chart.service.ts
View file

@ -1,16 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { TrafficChartData } from '../data/traffic-chart';
@Injectable()
export class TrafficChartService extends TrafficChartData {
private data: number[] = [
300, 520, 435, 530,
730, 620, 660, 860,
];
getTrafficChartData(): Observable<number[]> {
return observableOf(this.data);
}
}

85
src/app/@core/mock/traffic-list.service.ts
View file

@ -1,85 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
import { TrafficList, TrafficListData } from '../data/traffic-list';
@Injectable()
export class TrafficListService extends TrafficListData {
private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
private data = {};
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataWeek(),
month: this.getDataMonth(),
year: this.getDataYear(),
};
}
private getDataWeek(): TrafficList[] {
const getFirstDateInPeriod = () => {
const weeks = this.period.getWeeks();
return weeks[weeks.length - 1];
};
return this.reduceData(this.period.getWeeks(), getFirstDateInPeriod);
}
private getDataMonth(): TrafficList[] {
const getFirstDateInPeriod = () => {
const months = this.period.getMonths();
return months[months.length - 1];
};
return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
}
private getDataYear(): TrafficList[] {
const getFirstDateInPeriod = () => {
const years = this.period.getYears();
return `${parseInt(years[0], 10) - 1}`;
};
return this.reduceData(this.period.getYears(), getFirstDateInPeriod);
}
private reduceData(timePeriods: string[], getFirstDateInPeriod: () => string): TrafficList[] {
return timePeriods.reduce((result, timePeriod, index) => {
const hasResult = result[index - 1];
const prevDate = hasResult ?
result[index - 1].comparison.nextDate :
getFirstDateInPeriod();
const prevValue = hasResult ?
result[index - 1].comparison.nextValue :
this.getRandom(100);
const nextValue = this.getRandom(100);
const deltaValue = prevValue - nextValue;
const item = {
date: timePeriod,
value: this.getRandom(1000),
delta: {
up: deltaValue <= 0,
value: Math.abs(deltaValue),
},
comparison: {
prevDate,
prevValue,
nextDate: timePeriod,
nextValue,
},
};
return [...result, item];
}, []);
}
getTrafficListData(period: string): Observable<TrafficList> {
return observableOf(this.data[period]);
}
}

57
src/app/@core/mock/user-activity.service.ts
View file

@ -1,57 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
import { UserActive, UserActivityData } from '../data/user-activity';
@Injectable()
export class UserActivityService extends UserActivityData {
private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
private generateUserActivityRandomData(date) {
return {
date,
pagesVisitCount: this.getRandom(1000),
deltaUp: this.getRandom(1) % 2 === 0,
newVisits: this.getRandom(100),
};
}
data = {};
constructor(private periods: PeriodsService) {
super();
this.data = {
week: this.getDataWeek(),
month: this.getDataMonth(),
year: this.getDataYear(),
};
}
private getDataWeek(): UserActive[] {
return this.periods.getWeeks().map((week) => {
return this.generateUserActivityRandomData(week);
});
}
private getDataMonth(): UserActive[] {
const currentDate = new Date();
const days = currentDate.getDate();
const month = this.periods.getMonths()[currentDate.getMonth()];
return Array.from(Array(days)).map((_, index) => {
const date = `${index + 1} ${month}`;
return this.generateUserActivityRandomData(date);
});
}
private getDataYear(): UserActive[] {
return this.periods.getYears().map((year) => {
return this.generateUserActivityRandomData(year);
});
}
getUserActivityData(period: string): Observable<UserActive[]> {
return observableOf(this.data[period]);
}
}

57
src/app/@core/mock/visitors-analytics.service.ts
View file

@ -1,57 +0,0 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
@Injectable()
export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
constructor(private periodService: PeriodsService) {
super();
}
private pieChartValue = 75;
private innerLinePoints: number[] = [
94, 188, 225, 244, 253, 254, 249, 235, 208,
173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
183, 224, 265, 302, 333, 358, 375, 388, 395,
400, 400, 397, 390, 377, 360, 338, 310, 278,
241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
];
private outerLinePoints: number[] = [
85, 71, 59, 50, 45, 42, 41, 44 , 58, 88,
136 , 199, 267, 326, 367, 391, 400, 397,
376, 319, 200, 104, 60, 41, 36, 37, 44,
55, 74, 100 , 131, 159, 180, 193, 199, 200,
195, 184, 164, 135, 103, 73, 50, 33, 22, 15, 11,
];
private generateOutlineLineData(): OutlineData[] {
const months = this.periodService.getMonths();
const outerLinePointsLength = this.outerLinePoints.length;
const monthsLength = months.length;
return this.outerLinePoints.map((p, index) => {
const monthIndex = Math.round(index / 4);
const label = (index % Math.round(outerLinePointsLength / monthsLength) === 0)
? months[monthIndex]
: '';
return {
label,
value: p,
};
});
}
getInnerLineChartData(): Observable<number[]> {
return observableOf(this.innerLinePoints);
}
getOutlineLineChartData(): Observable<OutlineData[]> {
return observableOf(this.generateOutlineLineData());
}
getPieChartData(): Observable<number> {
return observableOf(this.pieChartValue);
}
}

15
src/app/@core/utils/index.ts
View file

@ -1,13 +1,2 @@
import { LayoutService } from './layout.service'; export { AnalyticsService } from './analytics.service';
import { AnalyticsService } from './analytics.service'; export { SeoService } from './seo.service';
import { PlayerService } from './player.service';
import { StateService } from './state.service';
import { SeoService } from './seo.service';
export {
LayoutService,
AnalyticsService,
PlayerService,
SeoService,
StateService,
};

26
src/app/@core/utils/layout.service.ts
View file

@ -1,26 +0,0 @@
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { delay, shareReplay, debounceTime } from 'rxjs/operators';
@Injectable()
export class LayoutService {
protected layoutSize$ = new Subject();
protected layoutSizeChange$ = this.layoutSize$.pipe(
shareReplay({ refCount: true }),
);
changeLayoutSize() {
this.layoutSize$.next();
}
onChangeLayoutSize(): Observable<any> {
return this.layoutSizeChange$.pipe(delay(1));
}
onSafeChangeLayoutSize(): Observable<any> {
return this.layoutSizeChange$.pipe(
debounceTime(350),
);
}
}

66
src/app/@core/utils/player.service.ts
View file

@ -1,66 +0,0 @@
import { Injectable } from '@angular/core';
export class Track {
name: string;
artist: string;
url: string;
cover: string;
}
@Injectable()
export class PlayerService {
current: number;
playlist: Track[] = [
{
name: 'Don\'t Wanna Fight',
artist: 'Alabama Shakes',
url: 'https://p.scdn.co/mp3-preview/6156cdbca425a894972c02fca9d76c0b70e001af',
cover: 'assets/images/cover1.jpg',
},
{
name: 'Harder',
artist: 'Daft Punk',
url: 'https://p.scdn.co/mp3-preview/92a04c7c0e96bf93a1b1b1cae7dfff1921969a7b',
cover: 'assets/images/cover2.jpg',
},
{
name: 'Come Together',
artist: 'Beatles',
url: 'https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9',
cover: 'assets/images/cover3.jpg',
},
];
random(): Track {
this.current = Math.floor(Math.random() * this.playlist.length);
return this.playlist[this.current];
}
next(): Track {
return this.getNextTrack();
}
prev() {
return this.getPrevTrack();
}
private getNextTrack(): Track {
if (this.current === this.playlist.length - 1) {
this.current = 0;
} else {
this.current++;
}
return this.playlist[this.current];
}
private getPrevTrack(): Track {
if (this.current === 0) {
this.current = this.playlist.length - 1;
} else {
this.current--;
}
return this.playlist[this.current];
}
}

92
src/app/@core/utils/state.service.ts
View file

@ -1,92 +0,0 @@
import { Injectable, OnDestroy } from '@angular/core';
import { of as observableOf, Observable, BehaviorSubject } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
@Injectable()
export class StateService implements OnDestroy {
protected layouts: any = [
{
name: 'One Column',
icon: 'nb-layout-default',
id: 'one-column',
selected: true,
},
{
name: 'Two Column',
icon: 'nb-layout-two-column',
id: 'two-column',
},
{
name: 'Center Column',
icon: 'nb-layout-centre',
id: 'center-column',
},
];
protected sidebars: any = [
{
name: 'Sidebar at layout start',
icon: 'nb-layout-sidebar-left',
id: 'start',
selected: true,
},
{
name: 'Sidebar at layout end',
icon: 'nb-layout-sidebar-right',
id: 'end',
},
];
protected layoutState$ = new BehaviorSubject(this.layouts[0]);
protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
alive = true;
constructor(directionService: NbLayoutDirectionService) {
directionService.onDirectionChange()
.pipe(takeWhile(() => this.alive))
.subscribe(direction => this.updateSidebarIcons(direction));
this.updateSidebarIcons(directionService.getDirection());
}
ngOnDestroy() {
this.alive = false;
}
private updateSidebarIcons(direction: NbLayoutDirection) {
const [ startSidebar, endSidebar ] = this.sidebars;
const isLtr = direction === NbLayoutDirection.LTR;
const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
startSidebar.icon = startIconClass;
endSidebar.icon = endIconClass;
}
setLayoutState(state: any): any {
this.layoutState$.next(state);
}
getLayoutStates(): Observable<any[]> {
return observableOf(this.layouts);
}
onLayoutState(): Observable<any> {
return this.layoutState$.asObservable();
}
setSidebarState(state: any): any {
this.sidebarState$.next(state);
}
getSidebarStates(): Observable<any[]> {
return observableOf(this.sidebars);
}
onSidebarState(): Observable<any> {
return this.sidebarState$.asObservable();
}
}

1
src/app/@theme/components/header/header.component.html
View file

@ -8,6 +8,7 @@
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary"> <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option> <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
</nb-select> </nb-select>
<ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
</div> </div>
<div class="header-container"> <div class="header-container">

8
src/app/@theme/components/header/header.component.scss
View file

@ -52,6 +52,11 @@
} }
} }
.direction-switcher {
@include nb-ltr(margin-left, 2rem);
@include nb-rtl(margin-right, 2rem);
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
.control-item { .control-item {
display: none; display: none;
@ -63,7 +68,8 @@
} }
@include media-breakpoint-down(is) { @include media-breakpoint-down(is) {
nb-select { nb-select,
.direction-switcher {
display: none; display: none;
} }
} }

3
src/app/@theme/components/header/header.component.ts
View file

@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme'; import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users'; import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@ -44,7 +43,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
private menuService: NbMenuService, private menuService: NbMenuService,
private themeService: NbThemeService, private themeService: NbThemeService,
private userService: UserData, private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService) { private breakpointService: NbMediaBreakpointsService) {
} }
@ -82,7 +80,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
toggleSidebar(): boolean { toggleSidebar(): boolean {
this.sidebarService.toggle(true, 'menu-sidebar'); this.sidebarService.toggle(true, 'menu-sidebar');
this.layoutService.changeLayoutSize();
return false; return false;
} }

3
src/app/@theme/components/index.ts
View file

@ -1,4 +1,5 @@
export * from './header/header.component'; export * from './header/header.component';
export * from './footer/footer.component'; export * from './footer/footer.component';
export * from './search-input/search-input.component'; export * from './search-input/search-input.component';
export * from './tiny-mce/tiny-mce.component'; export * from './switcher/switcher.component';
export * from './layout-direction-switcher/layout-direction-switcher.component';

45
src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts Normal file
View file

@ -0,0 +1,45 @@
import { Component, OnDestroy, Input } from '@angular/core';
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'ngx-layout-direction-switcher',
template: `
<ngx-switcher
[firstValue]="directions.RTL"
[secondValue]="directions.LTR"
[firstValueLabel]="'RTL'"
[secondValueLabel]="'LTR'"
[value]="currentDirection"
(valueChange)="toggleDirection($event)"
[vertical]="vertical">
</ngx-switcher>
`,
})
export class LayoutDirectionSwitcherComponent implements OnDestroy {
protected destroy$ = new Subject<void>();
directions = NbLayoutDirection;
currentDirection: NbLayoutDirection;
@Input() vertical: boolean = false;
constructor(private directionService: NbLayoutDirectionService) {
this.currentDirection = this.directionService.getDirection();
this.directionService.onDirectionChange()
.pipe(takeUntil(this.destroy$))
.subscribe(newDirection => this.currentDirection = newDirection);
}
toggleDirection(newDirection) {
this.directionService.setDirection(newDirection);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}

91
src/app/@theme/components/switcher/switcher.component.scss Normal file
View file

@ -0,0 +1,91 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.switch-label {
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
margin: 0;
&.vertical {
flex-direction: column;
align-items: flex-start;
.first,
.second {
padding: 0;
}
.switch {
margin-top: 0.5em;
}
}
& > span {
transition: opacity 0.3s ease;
color: nb-theme(text-hint-color);
&.first {
@include nb-ltr(padding-right, 10px);
@include nb-rtl(padding-left, 10px);
}
&.second {
@include nb-ltr(padding-left, 10px);
@include nb-rtl(padding-right, 10px);
}
&.active {
color: nb-theme(text-basic-color);
}
&:active {
opacity: 0.78;
}
}
}
.switch {
position: relative;
display: inline-block;
width: 3rem;
height: 1.5rem;
margin: 0;
input {
display: none;
&:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5rem));
@include nb-rtl(transform, translateX(-1.5rem));
}
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.75rem;
background-color: nb-theme(background-basic-color-2);
}
.slider::before {
position: absolute;
content: '';
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
background-color: nb-theme(color-primary-default);
transition: 0.2s;
}
}
@include media-breakpoint-down(xs) {
align-items: flex-end;
}
}

58
src/app/@theme/components/switcher/switcher.component.ts Normal file
View file

@ -0,0 +1,58 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'ngx-switcher',
styleUrls: ['./switcher.component.scss'],
template: `
<label class="switch-label" [class.vertical]="vertical">
<span class="first" [class.active]="vertical || isFirstValue()">
{{vertical ? currentValueLabel() : firstValueLabel}}
</span>
<div class="switch">
<input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
<span class="slider"></span>
</div>
<span *ngIf="!vertical"
class="second"
[class.active]="isSecondValue()">
{{secondValueLabel}}
</span>
</label>
`,
})
export class SwitcherComponent {
@Input() firstValue: any;
@Input() secondValue: any;
@Input() firstValueLabel: string;
@Input() secondValueLabel: string;
@Input() vertical: boolean;
@Input() value: any;
@Output() valueChange = new EventEmitter<any>();
isFirstValue() {
return this.value === this.firstValue;
}
isSecondValue() {
return this.value === this.secondValue;
}
currentValueLabel() {
return this.isFirstValue()
? this.firstValueLabel
: this.secondValueLabel;
}
changeValue() {
this.value = this.isFirstValue()
? this.secondValue
: this.firstValue;
this.valueChange.emit(this.value);
}
}

37
src/app/@theme/components/tiny-mce/tiny-mce.component.ts
View file

@ -1,37 +0,0 @@
import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
import { LocationStrategy } from '@angular/common';
@Component({
selector: 'ngx-tiny-mce',
template: '',
})
export class TinyMCEComponent implements OnDestroy, AfterViewInit {
@Output() editorKeyup = new EventEmitter<any>();
editor: any;
constructor(
private host: ElementRef,
private locationStrategy: LocationStrategy,
) { }
ngAfterViewInit() {
tinymce.init({
target: this.host.nativeElement,
plugins: ['link', 'paste', 'table'],
skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
this.editorKeyup.emit(editor.getContent());
});
},
height: '320',
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}

2
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -9,7 +9,7 @@ import { Component } from '@angular/core';
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>

2
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -9,7 +9,7 @@ import { Component } from '@angular/core';
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>

2
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

@ -9,7 +9,7 @@ import { Component } from '@angular/core';
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>

6
src/app/@theme/theme.module.ts
View file

@ -19,8 +19,9 @@ import { NbSecurityModule } from '@nebular/security';
import { import {
FooterComponent, FooterComponent,
HeaderComponent, HeaderComponent,
LayoutDirectionSwitcherComponent,
SearchInputComponent, SearchInputComponent,
TinyMCEComponent, SwitcherComponent,
} from './components'; } from './components';
import { import {
CapitalizePipe, CapitalizePipe,
@ -54,10 +55,11 @@ const NB_MODULES = [
NbEvaIconsModule, NbEvaIconsModule,
]; ];
const COMPONENTS = [ const COMPONENTS = [
SwitcherComponent,
LayoutDirectionSwitcherComponent,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
SearchInputComponent, SearchInputComponent,
TinyMCEComponent,
OneColumnLayoutComponent, OneColumnLayoutComponent,
ThreeColumnsLayoutComponent, ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent, TwoColumnsLayoutComponent,

2
src/app/app.component.ts
View file

@ -16,7 +16,7 @@ export class AppComponent implements OnInit {
constructor(private analytics: AnalyticsService, private seoService: SeoService) { constructor(private analytics: AnalyticsService, private seoService: SeoService) {
} }
ngOnInit(): void { ngOnInit() {
this.analytics.trackPageViews(); this.analytics.trackPageViews();
this.seoService.trackCanonicalChanges(); this.seoService.trackCanonicalChanges();
} }

85
src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts
View file

@ -1,85 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar-horizontal',
template: `
<chart type="horizontalBar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarHorizontalComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Dataset 1',
backgroundColor: colors.infoLight,
borderWidth: 1,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
}, {
label: 'Dataset 2',
backgroundColor: colors.successLight,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
elements: {
rectangle: {
borderWidth: 2,
},
},
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
position: 'right',
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
private random() {
return Math.round(Math.random() * 100);
}
}

73
src/app/pages/charts/chartjs/chartjs-bar.component.ts
View file

@ -1,73 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar',
template: `
<chart type="bar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

81
src/app/pages/charts/chartjs/chartjs-line.component.ts
View file

@ -1,81 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-line',
template: `
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsLineComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
borderColor: colors.primary,
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
borderColor: colors.danger,
}, {
data: [18, 48, 77, 9, 100, 27, 40],
label: 'Series C',
backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
borderColor: colors.info,
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

117
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View file

@ -1,117 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-multiple-xaxis',
template: `
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsMultipleXaxisComponent implements OnDestroy {
data: {};
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'dataset - big points',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.primary,
backgroundColor: colors.primary,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - individual point sizes',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.dangerLight,
backgroundColor: colors.dangerLight,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHoverRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.info,
backgroundColor: colors.info,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHitRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.success,
backgroundColor: colors.success,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
fontColor: chartjs.textColor,
},
},
hover: {
mode: 'index',
},
scales: {
xAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
},
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
private random() {
return Math.round(Math.random() * 100);
}
}

56
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View file

@ -1,56 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-pie',
template: `
<chart type="pie" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsPieComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'],
datasets: [{
data: [300, 500, 100],
backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight],
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [
{
display: false,
},
],
yAxes: [
{
display: false,
},
],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

64
src/app/pages/charts/chartjs/chartjs-radar.component.ts
View file

@ -1,64 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-radar',
template: `
<chart type="radar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsRadarComponent implements OnDestroy {
options: any;
data: {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
data: [65, 59, 90, 81, 56, 55, 40],
label: 'Series A',
borderColor: colors.danger,
backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
}, {
data: [28, 48, 40, 19, 96, 27, 100],
label: 'Series B',
borderColor: colors.warning,
backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5),
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
scaleFontColor: 'white',
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
scale: {
pointLabels: {
fontSize: 14,
fontColor: chartjs.textColor,
},
gridLines: {
color: chartjs.axisLineColor,
},
angleLines: {
color: chartjs.axisLineColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

50
src/app/pages/charts/chartjs/chartjs.component.html
View file

@ -1,50 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-chartjs-pie></ngx-chartjs-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-chartjs-bar></ngx-chartjs-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-chartjs-line></ngx-chartjs-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body>
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar Horizontal</nb-card-header>
<nb-card-body>
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Radar</nb-card-header>
<nb-card-body>
<ngx-chartjs-radar></ngx-chartjs-radar>
</nb-card-body>
</nb-card>
</div>
</div>

20
src/app/pages/charts/chartjs/chartjs.component.scss
View file

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-chartjs-pie,
ngx-chartjs-bar,
ngx-chartjs-line,
ngx-chartjs-multiple-xaxis,
ngx-chartjs-bar-horizontal,
ngx-chartjs-radar {
display: block;
height: nb-theme(card-height-medium);
width: 100%;
::ng-deep chart {
display: block;
height: 100%;
width: 100%;
}
}
}

8
src/app/pages/charts/chartjs/chartjs.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chartjs',
styleUrls: ['./chartjs.component.scss'],
templateUrl: './chartjs.component.html',
})
export class ChartjsComponent {}

35
src/app/pages/charts/charts-routing.module.ts
View file

@ -1,35 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChartsComponent } from './charts.component';
import { EchartsComponent } from './echarts/echarts.component';
import { D3Component } from './d3/d3.component';
import { ChartjsComponent } from './chartjs/chartjs.component';
const routes: Routes = [{
path: '',
component: ChartsComponent,
children: [{
path: 'echarts',
component: EchartsComponent,
}, {
path: 'd3',
component: D3Component,
}, {
path: 'chartjs',
component: ChartjsComponent,
}],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ChartsRoutingModule { }
export const routedComponents = [
ChartsComponent,
EchartsComponent,
D3Component,
ChartjsComponent,
];

10
src/app/pages/charts/charts.component.ts
View file

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-charts',
template: `
<router-outlet></router-outlet>
`,
})
export class ChartsComponent {
}

63
src/app/pages/charts/charts.module.ts
View file

@ -1,63 +0,0 @@
import { NgModule } from '@angular/core';
import { NgxEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ChartModule } from 'angular2-chartjs';
import { NbCardModule } from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
import { ChartjsBarComponent } from './chartjs/chartjs-bar.component';
import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
import { D3BarComponent } from './d3/d3-bar.component';
import { D3LineComponent } from './d3/d3-line.component';
import { D3PieComponent } from './d3/d3-pie.component';
import { D3AreaStackComponent } from './d3/d3-area-stack.component';
import { D3PolarComponent } from './d3/d3-polar.component';
import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
import { EchartsLineComponent } from './echarts/echarts-line.component';
import { EchartsPieComponent } from './echarts/echarts-pie.component';
import { EchartsBarComponent } from './echarts/echarts-bar.component';
import { EchartsMultipleXaxisComponent } from './echarts/echarts-multiple-xaxis.component';
import { EchartsAreaStackComponent } from './echarts/echarts-area-stack.component';
import { EchartsBarAnimationComponent } from './echarts/echarts-bar-animation.component';
import { EchartsRadarComponent } from './echarts/echarts-radar.component';
const components = [
ChartjsBarComponent,
ChartjsLineComponent,
ChartjsPieComponent,
ChartjsMultipleXaxisComponent,
ChartjsBarHorizontalComponent,
ChartjsRadarComponent,
D3BarComponent,
D3LineComponent,
D3PieComponent,
D3AreaStackComponent,
D3PolarComponent,
D3AdvancedPieComponent,
EchartsLineComponent,
EchartsPieComponent,
EchartsBarComponent,
EchartsMultipleXaxisComponent,
EchartsAreaStackComponent,
EchartsBarAnimationComponent,
EchartsRadarComponent,
];
@NgModule({
imports: [
ThemeModule,
ChartsRoutingModule,
NgxEchartsModule,
NgxChartsModule,
ChartModule,
NbCardModule,
],
declarations: [...routedComponents, ...components],
})
export class ChartsModule {}

43
src/app/pages/charts/d3/d3-advanced-pie.component.ts
View file

@ -1,43 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-advanced-pie',
template: `
<ngx-charts-advanced-pie-chart
[scheme]="colorScheme"
[results]="single">
</ngx-charts-advanced-pie-chart>
`,
})
export class D3AdvancedPieComponent implements OnDestroy {
single = [
{
name: 'Germany',
value: 8940000,
},
{
name: 'USA',
value: 5000000,
},
{
name: 'France',
value: 7200000,
},
];
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

73
src/app/pages/charts/d3/d3-area-stack.component.ts
View file

@ -1,73 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-area-stack',
template: `
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale">
</ngx-charts-area-chart>
`,
})
export class D3AreaStackComponent implements OnDestroy {
multi = [{
name: 'Germany',
series: [{
name: '2010',
value: 7300000,
}, {
name: '2011',
value: 8940000,
}],
}, {
name: 'USA',
series: [{
name: '2010',
value: 7870000,
}, {
name: '2011',
value: 8270000,
}],
}, {
name: 'France',
series: [{
name: '2010',
value: 5000002,
}, {
name: '2011',
value: 5800000,
}],
}];
showLegend = true;
autoScale = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

45
src/app/pages/charts/d3/d3-bar.component.ts
View file

@ -1,45 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-bar',
template: `
<ngx-charts-bar-vertical
[scheme]="colorScheme"
[results]="results"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
`,
})
export class D3BarComponent implements OnDestroy {
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
showLegend = true;
showXAxis = true;
showYAxis = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

84
src/app/pages/charts/d3/d3-line.component.ts
View file

@ -1,84 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-line',
template: `
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-line-chart>
`,
})
export class D3LineComponent implements OnDestroy {
multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300,
},
{
name: '2011',
value: 8940,
},
],
},
{
name: 'USA',
series: [
{
name: '2010',
value: 7870,
},
{
name: '2011',
value: 8270,
},
],
},
{
name: 'France',
series: [
{
name: '2010',
value: 5002,
},
{
name: '2011',
value: 5800,
},
],
},
];
showLegend = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

38
src/app/pages/charts/d3/d3-pie.component.ts
View file

@ -1,38 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-pie',
template: `
<ngx-charts-pie-chart
[scheme]="colorScheme"
[results]="results"
[legend]="showLegend"
[labels]="showLabels">
</ngx-charts-pie-chart>
`,
})
export class D3PieComponent implements OnDestroy {
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
showLegend = true;
showLabels = true;
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

98
src/app/pages/charts/d3/d3-polar.component.ts
View file

@ -1,98 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-polar',
template: `
<ngx-charts-polar-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale">
</ngx-charts-polar-chart>
`,
})
export class D3PolarComponent implements OnDestroy {
multi = [
{
name: 'Germany',
series: [
{
name: '1990',
value: 31476,
},
{
name: '2000',
value: 36953,
},
{
name: '2010',
value: 40632,
},
],
},
{
name: 'USA',
series: [
{
name: '1990',
value: 37060,
},
{
name: '2000',
value: 45986,
},
{
name: '2010',
value: 49737,
},
],
},
{
name: 'France',
series: [
{
name: '1990',
value: 29476,
},
{
name: '2000',
value: 34774,
},
{
name: '2010',
value: 36240,
},
],
},
];
showLegend = true;
autoScale = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

42
src/app/pages/charts/d3/d3.component.html
View file

@ -1,42 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-d3-pie></ngx-d3-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-d3-bar></ngx-d3-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-d3-line></ngx-d3-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Advanced Pie</nb-card-header>
<nb-card-body>
<ngx-d3-advanced-pie></ngx-d3-advanced-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Area Chart</nb-card-header>
<nb-card-body>
<ngx-d3-area-stack></ngx-d3-area-stack>
</nb-card-body>
</nb-card>
</div>
</div>

46
src/app/pages/charts/d3/d3.component.scss
View file

@ -1,46 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-d3-bar,
ngx-d3-pie,
ngx-d3-advanced-pie,
ngx-d3-area-stack,
ngx-d3-line,
ngx-d3-polar {
display: block;
width: 100%;
height: nb-theme(card-height-medium);
::ng-deep {
.pie-label {
fill: nb-theme(text-basic-color);
}
text {
fill: nb-theme(text-hint-color);
}
.chart-legend {
.legend-labels {
background: nb-theme(background-basic-color-2);
}
.legend-label {
color: nb-theme(text-hint-color);
.active .legend-label-text {
color: nb-theme(text-basic-color);
}
}
}
.total-value,
.item-value,
.item-percent {
line-height: 1.25;
}
.legend-items {
overflow-y: hidden;
}
}
}
}

8
src/app/pages/charts/d3/d3.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-d3',
styleUrls: ['./d3.component.scss'],
templateUrl: './d3.component.html',
})
export class D3Component {}

140
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View file

@ -1,140 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-area-stack',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: echarts.tooltipBackgroundColor,
},
},
},
legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: {
color: echarts.textColor,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'Mail marketing',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Affiliate advertising',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video ad',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Direct interview',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: 'Search engine',
type: 'line',
stack: 'Total amount',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: echarts.textColor,
},
},
},
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

103
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View file

@ -1,103 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-bar-animation',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsBarAnimationComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const xAxisData = [];
const data1 = [];
const data2 = [];
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.primaryLight, colors.infoLight],
legend: {
data: ['bar', 'bar2'],
align: 'left',
textStyle: {
color: echarts.textColor,
},
},
xAxis: [
{
data: xAxisData,
silent: false,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: idx => idx * 10,
},
{
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: idx => idx * 10 + 100,
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: idx => idx * 5,
};
for (let i = 0; i < 100; i++) {
xAxisData.push('Category ' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

92
src/app/pages/charts/echarts/echarts-bar.component.ts
View file

@ -1,92 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-bar',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsBarComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.primaryLight],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'Score',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

106
src/app/pages/charts/echarts/echarts-line.component.ts
View file

@ -1,106 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-line',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsLineComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.danger, colors.primary, colors.info],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: {
color: echarts.textColor,
},
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'log',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
series: [
{
name: 'Line 1',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
},
{
name: 'Line 2',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
},
{
name: 'Line 3',
type: 'line',
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

166
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View file

@ -1,166 +0,0 @@
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-multiple-xaxis',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsMultipleXaxisComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.success, colors.info],
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross',
},
},
legend: {
data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: {
color: echarts.textColor,
},
},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors.info,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12',
],
},
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors.success,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2015-1',
'2015-2',
'2015-3',
'2015-4',
'2015-5',
'2015-6',
'2015-7',
'2015-8',
'2015-9',
'2015-10',
'2015-11',
'2015-12',
],
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: '2015 Precipitation',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: '2016 Precipitation',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

81
src/app/pages/charts/echarts/echarts-pie.component.ts
View file

@ -1,81 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-pie',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsPieComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: {
color: echarts.textColor,
},
},
series: [
{
name: 'Countries',
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
data: [
{ value: 335, name: 'Germany' },
{ value: 310, name: 'France' },
{ value: 234, name: 'Canada' },
{ value: 135, name: 'Russia' },
{ value: 1548, name: 'USA' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: echarts.itemHoverShadowColor,
},
},
label: {
normal: {
textStyle: {
color: echarts.textColor,
},
},
},
labelLine: {
normal: {
lineStyle: {
color: echarts.axisLineColor,
},
},
},
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

76
src/app/pages/charts/echarts/echarts-radar.component.ts
View file

@ -1,76 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-radar',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsRadarComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.danger, colors.warning],
tooltip: {},
legend: {
data: ['Allocated Budget', 'Actual Spending'],
textStyle: {
color: echarts.textColor,
},
},
radar: {
name: {
textStyle: {
color: echarts.textColor,
},
},
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Techology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 },
],
splitArea: {
areaStyle: {
color: 'transparent',
},
},
},
series: [
{
name: 'Budget vs Spending',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: 'Allocated Budget',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: 'Actual Spending',
},
],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

58
src/app/pages/charts/echarts/echarts.component.html
View file

@ -1,58 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-echarts-pie></ngx-echarts-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-echarts-bar></ngx-echarts-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-echarts-line></ngx-echarts-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body>
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Area Stack</nb-card-header>
<nb-card-body>
<ngx-echarts-area-stack></ngx-echarts-area-stack>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar Animation</nb-card-header>
<nb-card-body>
<ngx-echarts-bar-animation></ngx-echarts-bar-animation>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Radar</nb-card-header>
<nb-card-body>
<ngx-echarts-radar></ngx-echarts-radar>
</nb-card-body>
</nb-card>
</div>
</div>

20
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-echarts-pie,
ngx-echarts-bar,
ngx-echarts-line,
ngx-echarts-multiple-xaxis,
ngx-echarts-area-stack,
ngx-echarts-bar-animation,
ngx-echarts-radar {
display: block;
height: nb-theme(card-height-medium);
width: 100%;
}
::ng-deep .echart {
height: 100%;
width: 100%;
}
}

8
src/app/pages/charts/echarts/echarts.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts',
styleUrls: ['./echarts.component.scss'],
templateUrl: './echarts.component.html',
})
export class EchartsComponent {}

23
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -1,23 +0,0 @@
<nb-card size="giant">
<nb-tabset fullWidth>
<nb-tab tabTitle="Contacts">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</nb-tab>
<nb-tab tabTitle="Recent">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>

34
src/app/pages/dashboard/contacts/contacts.component.scss
View file

@ -1,34 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
overflow: hidden;
}
nb-tabset {
display: flex;
flex-direction: column;
::ng-deep ul {
// make same size as card header
padding-bottom: 1px;
::ng-deep .tab-link {
padding: 1.25rem 2rem;
}
}
}
nb-tab {
padding: 0;
}
.contact {
display: flex;
align-items: center;
justify-content: space-between;
&:first-child {
border-top: none;
}
}
}

34
src/app/pages/dashboard/contacts/contacts.component.ts
View file

@ -1,34 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { Contacts, RecentUsers, UserData } from '../../../@core/data/users';
@Component({
selector: 'ngx-contacts',
styleUrls: ['./contacts.component.scss'],
templateUrl: './contacts.component.html',
})
export class ContactsComponent implements OnDestroy {
private alive = true;
contacts: any[];
recent: any[];
constructor(private userService: UserData) {
forkJoin(
this.userService.getContacts(),
this.userService.getRecentUsers(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([contacts, recent]: [Contacts[], RecentUsers[]]) => {
this.contacts = contacts;
this.recent = recent;
});
}
ngOnDestroy() {
this.alive = false;
}
}

43
src/app/pages/dashboard/dashboard.component.html
View file

@ -1,42 +1,5 @@
<div class="row"> <div class="row">
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards"> <nb-card>
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type"> <nb-card-body>Hello from ngx-admin sandbox project.</nb-card-body>
<i [ngClass]="statusCard.iconClass"></i> </nb-card>
</ngx-status-card>
</div>
</div>
<div class="row">
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-temperature></ngx-temperature>
</div>
<div class="col-xxxl-9 col-xxl-8 col-lg-7 col-md-6">
<ngx-electricity></ngx-electricity>
</div>
</div>
<div class="row">
<div class="col-xxxl-9 col-xl-12">
<ngx-rooms></ngx-rooms>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
<ngx-contacts></ngx-contacts>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-solar [chartValue]="solarValue"></ngx-solar>
<ngx-kitten></ngx-kitten>
</div>
<div class="col-xxxl-3 col-xxl-4 col-md-5">
<ngx-traffic></ngx-traffic>
<ngx-weather></ngx-weather>
</div>
<div class="col-xxxl-6 col-xxl-12 col-md-7">
<ngx-security-cameras></ngx-security-cameras>
</div>
</div> </div>

16
src/app/pages/dashboard/dashboard.component.scss
View file

@ -1,16 +0,0 @@
@import '../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.solar-card nb-card-header {
border: none;
padding-bottom: 0;
}
@include media-breakpoint-down(sm) {
ngx-traffic {
display: none;
}
}
}

95
src/app/pages/dashboard/dashboard.component.ts
View file

@ -1,99 +1,8 @@
import {Component, OnDestroy} from '@angular/core'; import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators' ;
import { SolarData } from '../../@core/data/solar';
interface CardSettings {
title: string;
iconClass: string;
type: string;
}
@Component({ @Component({
selector: 'ngx-dashboard', selector: 'ngx-dashboard',
styleUrls: ['./dashboard.component.scss'],
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
}) })
export class DashboardComponent implements OnDestroy { export class DashboardComponent {
private alive = true;
solarValue: number;
lightCard: CardSettings = {
title: 'Light',
iconClass: 'nb-lightbulb',
type: 'primary',
};
rollerShadesCard: CardSettings = {
title: 'Roller Shades',
iconClass: 'nb-roller-shades',
type: 'success',
};
wirelessAudioCard: CardSettings = {
title: 'Wireless Audio',
iconClass: 'nb-audio',
type: 'info',
};
coffeeMakerCard: CardSettings = {
title: 'Coffee Maker',
iconClass: 'nb-coffee-maker',
type: 'warning',
};
statusCards: string;
commonStatusCardsSet: CardSettings[] = [
this.lightCard,
this.rollerShadesCard,
this.wirelessAudioCard,
this.coffeeMakerCard,
];
statusCardsByThemes: {
default: CardSettings[];
cosmic: CardSettings[];
corporate: CardSettings[];
dark: CardSettings[];
} = {
default: this.commonStatusCardsSet,
cosmic: this.commonStatusCardsSet,
corporate: [
{
...this.lightCard,
type: 'warning',
},
{
...this.rollerShadesCard,
type: 'primary',
},
{
...this.wirelessAudioCard,
type: 'danger',
},
{
...this.coffeeMakerCard,
type: 'info',
},
],
dark: this.commonStatusCardsSet,
};
constructor(private themeService: NbThemeService,
private solarService: SolarData) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.statusCards = this.statusCardsByThemes[theme.name];
});
this.solarService.getSolarData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.solarValue = data;
});
}
ngOnDestroy() {
this.alive = false;
}
} }

57
src/app/pages/dashboard/dashboard.module.ts
View file

@ -1,69 +1,16 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { import { NbCardModule } from '@nebular/theme';
NbActionsModule,
NbButtonModule,
NbCardModule,
NbTabsetModule,
NbUserModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts';
import { ThemeModule } from '../../@theme/theme.module'; import { ThemeModule } from '../../@theme/theme.module';
import { DashboardComponent } from './dashboard.component'; import { DashboardComponent } from './dashboard.component';
import { StatusCardComponent } from './status-card/status-card.component';
import { ContactsComponent } from './contacts/contacts.component';
import { RoomsComponent } from './rooms/rooms.component';
import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
import { TemperatureComponent } from './temperature/temperature.component';
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
import { KittenComponent } from './kitten/kitten.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
import { ElectricityChartComponent } from './electricity/electricity-chart/electricity-chart.component';
import { WeatherComponent } from './weather/weather.component';
import { SolarComponent } from './solar/solar.component';
import { PlayerComponent } from './rooms/player/player.component';
import { TrafficComponent } from './traffic/traffic.component';
import { TrafficChartComponent } from './traffic/traffic-chart.component';
import { FormsModule } from '@angular/forms';
@NgModule({ @NgModule({
imports: [ imports: [
FormsModule,
ThemeModule,
NbCardModule, NbCardModule,
NbUserModule, ThemeModule,
NbButtonModule,
NbTabsetModule,
NbActionsModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
NbButtonModule,
NgxEchartsModule,
], ],
declarations: [ declarations: [
DashboardComponent, DashboardComponent,
StatusCardComponent,
TemperatureDraggerComponent,
ContactsComponent,
RoomSelectorComponent,
TemperatureComponent,
RoomsComponent,
KittenComponent,
SecurityCamerasComponent,
ElectricityComponent,
ElectricityChartComponent,
WeatherComponent,
PlayerComponent,
SolarComponent,
TrafficComponent,
TrafficChartComponent,
], ],
}) })
export class DashboardModule { } export class DashboardModule { }

14
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
View file

@ -1,14 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
display: block;
flex: 1;
position: relative;
.echart {
position: absolute;
width: 100%;
height: 100%;
}
}

198
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -1,198 +0,0 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../../@core/utils';
import { ElectricityChart } from '../../../../@core/data/electricity';
@Component({
selector: 'ngx-electricity-chart',
styleUrls: ['./electricity-chart.component.scss'],
template: `
<div echarts
[options]="option"
[merge]="option"
class="echart"
(chartInit)="onChartInit($event)">
</div>
`,
})
export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
private alive = true;
@Input() data: ElectricityChart[];
option: any;
echartsIntance: any;
constructor(private theme: NbThemeService,
private layoutService: LayoutService) {
this.layoutService.onSafeChangeLayoutSize()
.pipe(
takeWhile(() => this.alive),
)
.subscribe(() => this.resizeChart());
}
ngAfterViewInit(): void {
this.theme.getJsTheme()
.pipe(
takeWhile(() => this.alive),
delay(1),
)
.subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 80,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: eTheme.tooltipLineColor,
width: eTheme.tooltipLineWidth,
},
},
textStyle: {
color: eTheme.tooltipTextColor,
fontSize: 20,
fontWeight: eTheme.tooltipFontWeight,
},
position: 'top',
backgroundColor: eTheme.tooltipBg,
borderColor: eTheme.tooltipBorderColor,
borderWidth: 1,
formatter: '{c0} kWh',
extraCssText: eTheme.tooltipExtraCss,
},
xAxis: {
type: 'category',
boundaryGap: false,
offset: 25,
data: this.data.map(i => i.label),
axisTick: {
show: false,
},
axisLabel: {
color: eTheme.xAxisTextColor,
fontSize: 18,
},
axisLine: {
lineStyle: {
color: eTheme.axisLineColor,
width: '2',
},
},
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: eTheme.yAxisSplitLine,
width: '1',
},
},
},
series: [
{
type: 'line',
smooth: true,
symbolSize: 20,
itemStyle: {
normal: {
opacity: 0,
},
emphasis: {
color: '#ffffff',
borderColor: eTheme.itemBorderColor,
borderWidth: 2,
opacity: 1,
},
},
lineStyle: {
normal: {
width: eTheme.lineWidth,
type: eTheme.lineStyle,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.lineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.areaGradFrom,
}, {
offset: 1,
color: eTheme.areaGradTo,
}]),
},
},
data: this.data.map(i => i.value),
},
{
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
normal: {
width: eTheme.lineWidth,
type: eTheme.lineStyle,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14,
opacity: 1,
},
},
data: this.data.map(i => i.value),
},
],
};
});
}
onChartInit(echarts) {
this.echartsIntance = echarts;
}
resizeChart() {
if (this.echartsIntance) {
this.echartsIntance.resize();
}
}
ngOnDestroy() {
this.alive = false;
}
}

47
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -1,47 +0,0 @@
<nb-card class="cards-container">
<nb-card size="large" class="table-card">
<nb-card-header>
Electricity Consumption
</nb-card-header>
<nb-tabset fullWidth>
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
<nb-list>
<nb-list-item *ngFor="let month of year.months">
<span class="month">{{ month.month }}</span>
<span>
<nb-icon
[class.down]="month.down"
[class.up]="!month.down"
[icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
</nb-icon>
{{ month.delta }}
</span>
<span class="results">
{{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>
<nb-card size="large" class="chart-card">
<nb-card-header>
<span class="stats">
<span class="caption">Consumed</span>
<span>816 <span class="caption">kWh</span></span>
</span>
<span class="stats">
<span class="caption">Spent</span>
<span>291 <span class="caption">USD</span></span>
</span>
<nb-select [(selected)]="type" class="type-select">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
</nb-card>
</nb-card>

Some files were not shown because too many files have changed in this diff Show more