feat(charts): update echarts library

package-lock.json

@@ -401,11 +401,6 @@
         }
       }
     },
-    "angular2-echarts": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/angular2-echarts/-/angular2-echarts-1.1.7.tgz",
-      "integrity": "sha1-7xLLzfpHew2C6XT425cIbhjvlpY="
-    },
     "angular2-toaster": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-4.0.0.tgz",
@@ -1152,6 +1147,16 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+      "dev": true,
+      "requires": {
+        "align-text": "0.1.4",
+        "lazy-cache": "0.2.7"
+      }
+    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -4580,27 +4585,6 @@
             "wordwrap": "0.0.2"
           },
           "dependencies": {
-            "center-align": {
-              "version": "0.1.3",
-              "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-              "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "align-text": "0.1.4",
-                "lazy-cache": "0.2.7"
-              }
-            },
-            "right-align": {
-              "version": "0.1.3",
-              "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-              "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "align-text": "0.1.4"
-              }
-            },
             "wordwrap": {
               "version": "0.0.2",
               "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
@@ -4659,13 +4643,6 @@
               "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
               "dev": true,
               "optional": true
-            },
-            "uglify-to-browserify": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-              "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-              "dev": true,
-              "optional": true
             }
           }
         },
@@ -4680,15 +4657,6 @@
             "cliui": "2.1.0",
             "decamelize": "1.2.0",
             "window-size": "0.1.0"
-          },
-          "dependencies": {
-            "window-size": {
-              "version": "0.1.0",
-              "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-              "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-              "dev": true,
-              "optional": true
-            }
           }
         }
       }
@@ -5548,6 +5516,11 @@
       "resolved": "https://registry.npmjs.org/ng2-tree/-/ng2-tree-2.0.0-alpha.5.tgz",
       "integrity": "sha1-GX8zr5Lxb0qRaKM5TtDL+cFwiko="
     },
+    "ngx-echarts": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-1.2.2.tgz",
+      "integrity": "sha1-fiuLAetrxpb+5pWEG0EtgjRYqT4="
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
@@ -7379,6 +7352,15 @@
         "signal-exit": "3.0.2"
       }
     },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+      "dev": true,
+      "requires": {
+        "align-text": "0.1.4"
+      }
+    },
     "rimraf": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
@@ -8828,6 +8810,13 @@
         }
       }
     },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+      "dev": true,
+      "optional": true
+    },
     "ultron": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
@@ -9193,27 +9182,6 @@
             "center-align": "0.1.3",
             "right-align": "0.1.3",
             "wordwrap": "0.0.2"
-          },
-          "dependencies": {
-            "center-align": {
-              "version": "0.1.3",
-              "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-              "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-              "dev": true,
-              "requires": {
-                "align-text": "0.1.4",
-                "lazy-cache": "0.2.7"
-              }
-            },
-            "right-align": {
-              "version": "0.1.3",
-              "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-              "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-              "dev": true,
-              "requires": {
-                "align-text": "0.1.4"
-              }
-            }
           }
         },
         "is-fullwidth-code-point": {
@@ -9265,13 +9233,6 @@
             "yargs": "3.10.0"
           },
           "dependencies": {
-            "uglify-to-browserify": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-              "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-              "dev": true,
-              "optional": true
-            },
             "yargs": {
               "version": "3.10.0",
               "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
@@ -9282,14 +9243,6 @@
                 "cliui": "2.1.0",
                 "decamelize": "1.2.0",
                 "window-size": "0.1.0"
-              },
-              "dependencies": {
-                "window-size": {
-                  "version": "0.1.0",
-                  "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-                  "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-                  "dev": true
-                }
               }
             }
           }
@@ -9564,6 +9517,12 @@
         }
       }
     },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
+      "dev": true
+    },
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",

package.json

@@ -38,7 +38,6 @@
     "@asymmetrik/angular2-leaflet": "2.1.4",
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
     "@swimlane/ngx-charts": "5.2.0",
-    "angular2-echarts": "1.1.7",
     "angular2-toaster": "4.0.0",
     "bootstrap": "4.0.0-alpha.6",
     "chart.js": "2.5.0",
@@ -56,6 +55,7 @@
     "ng2-ckeditor": "1.1.6",
     "ng2-smart-table": "1.1.0",
     "ng2-tree": "2.0.0-alpha.5",
+    "ngx-echarts": "1.2.2",
     "normalize.css": "6.0.0",
     "open-sans-fontface": "^1.4.0",
     "rxjs": "5.4.0",

src/app/pages/charts/charts.module.ts

@@ -12,7 +12,7 @@ import { D3PieComponent } from './d3/pie/pie.component';
 import { EchartsLineComponent } from './echarts/line/line.component';
 import { EchartsPieComponent } from './echarts/pie/pie.component';
 import { EchartsBarComponent } from './echarts/bar/bar.component';
-import { AngularEchartsModule } from 'angular2-echarts';
+import { AngularEchartsModule } from 'ngx-echarts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ChartsModule as Ng2Charts } from 'ng2-charts/ng2-charts';
 

src/app/pages/charts/echarts/bar/bar.component.ts

@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-echarts-bar',
   template: `
-    <div echarts [options]="barChartOptions" class="echart"></div>
+    <div echarts [options]="options" class="echart"></div>
   `,
 })
 export class EchartsBarComponent {
 
-  barChartOptions = {
+  options = {
 
     color: ['#3398DB'],
 

src/app/pages/charts/echarts/echarts.component.scss

@@ -1,9 +1,13 @@
 @import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
-  display: block;
+
+  ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
+    display: block;
+    height: 100%;
+  }
 
   /deep/ .echart {
-    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+    height: 100%;
   }
 }