diff --git a/package-lock.json b/package-lock.json
index 72bcb355..27b3256d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 39e10973..53041f6b 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/pages/charts/charts.module.ts b/src/app/pages/charts/charts.module.ts
index 7d242455..ca46b7b4 100644
--- a/src/app/pages/charts/charts.module.ts
+++ b/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';
diff --git a/src/app/pages/charts/echarts/bar/bar.component.ts b/src/app/pages/charts/echarts/bar/bar.component.ts
index 45043c3d..499aca61 100644
--- a/src/app/pages/charts/echarts/bar/bar.component.ts
+++ b/src/app/pages/charts/echarts/bar/bar.component.ts
@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts-bar',
template: `
-
+
`,
})
export class EchartsBarComponent {
- barChartOptions = {
+ options = {
color: ['#3398DB'],
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss
index 58cfba02..b6f7cee3 100644
--- a/src/app/pages/charts/echarts/echarts.component.scss
+++ b/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%;
}
}