Added Chart.js

+ Some improvements on Helper classes and Fuse Card

package-lock.json

@@ -1749,6 +1749,46 @@
         "supports-color": "4.5.0"
       }
     },
+    "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.1"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.18.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+          "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+        }
+      }
+    },
+    "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"
+      },
+      "dependencies": {
+        "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="
+        }
+      }
+    },
+    "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.1.3"
+      }
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -2049,8 +2089,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "0.3.0",
@@ -8012,6 +8051,14 @@
       "dev": true,
       "optional": true
     },
+    "ng2-charts": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.6.0.tgz",
+      "integrity": "sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==",
+      "requires": {
+        "chart.js": "2.7.1"
+      }
+    },
     "ngrx-store-freeze": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.2.0.tgz",

package.json

@@ -43,12 +43,14 @@
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.23.2",
     "angular-in-memory-web-api": "0.5.2",
+    "chart.js": "2.7.1",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
     "d3": "4.12.2",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
     "moment": "2.20.1",
+    "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.10",

src/app/core/modules/shared.module.ts

@@ -22,6 +22,7 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
 import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
 import { TranslateModule } from '@ngx-translate/core';
+import { ChartsModule } from 'ng2-charts';
 
 @NgModule({
     declarations   : [
@@ -43,7 +44,8 @@ import { TranslateModule } from '@ngx-translate/core';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule
+        NgxDatatableModule,
+        ChartsModule
     ],
     exports        : [
         FlexLayoutModule,
@@ -62,7 +64,8 @@ import { TranslateModule } from '@ngx-translate/core';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        TranslateModule
+        TranslateModule,
+        ChartsModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent

src/app/core/scss/partials/_cards.scss

@@ -9,6 +9,11 @@
         min-width: 0;
     }
 
+    &.auto-width {
+        min-width: 0;
+        max-width: none;
+    }
+
     // Buttons
     .mat-button {
         min-width: 0 !important;

src/app/core/scss/partials/_helpers.scss

@@ -216,3 +216,30 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
 .border-radius-100 {
     border-radius: 100%;
 }
+
+.border-radius-2 {
+    border-radius: 2px;
+}
+
+.border-radius-4 {
+    border-radius: 4px;
+}
+
+.border-radius-8 {
+    border-radius: 8px;
+}
+
+.border-radius-16 {
+    border-radius: 16px;
+}
+
+// ######################
+// CURSOR HELPERS
+// ######################
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-default {
+    cursor: default;
+}