summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/shared/components/charts
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/shared/components/charts
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/charts')
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html22
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less0
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts71
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/line/line.component.html22
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/line/line.component.less0
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/line/line.component.ts105
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html24
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less0
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts114
12 files changed, 433 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
new file mode 100644
index 00000000..7c1eee6b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
@@ -0,0 +1,22 @@
+<!--
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<div echarts
+[initOpts]="initOpts"
+[options]="barOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Bar Chart
+</div>
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
new file mode 100644
index 00000000..d979ffb6
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarComponent } from './bar.component';
+
+describe('BarComponent', () => {
+ let component: BarComponent;
+ let fixture: ComponentFixture<BarComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BarComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
new file mode 100644
index 00000000..609ce3ee
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
@@ -0,0 +1,71 @@
+/*
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+ selector: 'app-bar',
+ templateUrl: './bar.component.html',
+ styleUrls: ['./bar.component.less']
+})
+export class BarComponent implements OnInit {
+
+ // chart Data
+ @Input() chartData;
+ // init Data
+ @Input() initData;
+
+ constructor() { }
+
+ ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: this.initData.height,
+ width: this.initData.width,
+
+ };
+ this.barOption = {
+ tooltip: this.initData.option.tooltip,
+ grid: this.initData.option.grid,
+ xAxis: this.initData.option.xAxis,
+ yAxis: this.initData.option.yAxis,
+ series: this.initData.option.series
+ }
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+ if (this.chartIntance) {
+ this.chartDataChange()
+ }
+ }
+ // Initialize the height of the graphic
+ initOpts: any;
+ // Line chart configuration
+ barOption: any;
+ // Instance object
+ chartIntance: any;
+ // Data change
+ updateOption: any;
+ chartDataChange() {
+ this.updateOption = this.chartData;
+ console.log(this.initData.customer)
+ }
+ chartInit(chart) {
+ this.chartIntance = chart;
+ }
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.html b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
new file mode 100644
index 00000000..e032eb27
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
@@ -0,0 +1,22 @@
+<!--
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<div echarts
+[initOpts]="initOpts"
+[options]="lineOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Line Chart
+</div>
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.less b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
new file mode 100644
index 00000000..afe70654
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineComponent } from './line.component';
+
+describe('LineComponent', () => {
+ let component: LineComponent;
+ let fixture: ComponentFixture<LineComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ LineComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LineComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
new file mode 100644
index 00000000..25881699
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
@@ -0,0 +1,105 @@
+/*
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+ selector: 'app-line',
+ templateUrl: './line.component.html',
+ styleUrls: ['./line.component.less']
+})
+export class LineComponent implements OnInit {
+ // chart Data
+ @Input() chartData;
+ // init Data
+ @Input() initData;
+
+ constructor() { }
+
+ ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: this.initData.height,
+ width: this.initData.width
+ };
+ this.lineOption ={
+ tooltip : this.initData.option.tooltip,
+ icon:'circle',
+ legend: this.initData.option.legend,
+ dataZoom: this.initData.option.dataZoom,
+ grid: {
+ left: '0%',
+ right: '3%',
+ top: '10%',
+ bottom: '18%',
+ containLabel: true
+ },
+ xAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine:{
+ show: false
+ },
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ data: this.initData.option.xAxis.data
+ },
+ yAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine:{
+ show: false
+ },
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ splitLine:{
+ lineStyle:{
+ type:"dashed",
+ }
+ }
+ },
+ series : this.initData.option.series
+ }
+ }
+
+ ngOnChanges(changes:SimpleChanges){
+ // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+ if(this.chartIntance){
+ this.chartDataChange()
+ }
+ }
+ // Initialize the height of the graphic
+ initOpts:any;
+ // Line chart configuration
+ lineOption:any;
+ // Instance object
+ chartIntance:any;
+ // Data change
+ updateOption:any;
+ chartDataChange(){
+ this.updateOption = this.chartData;
+ }
+ chartInit(chart){
+ this.chartIntance = chart;
+ }
+
+
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
new file mode 100644
index 00000000..d063f22a
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
@@ -0,0 +1,24 @@
+<!--
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<div echarts
+[initOpts]="initOpts"
+[options]="pieOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)"
+(chartMouseOver)="pieMouseOver($event)"
+(chartMouseOut)="pieMouseOut($event)">
+ Pie Chart
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
new file mode 100644
index 00000000..528da25c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieComponent } from './pie.component';
+
+describe('PieComponent', () => {
+ let component: PieComponent;
+ let fixture: ComponentFixture<PieComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PieComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PieComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
new file mode 100644
index 00000000..dc5c80a0
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
@@ -0,0 +1,114 @@
+/*
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+ selector: 'app-pie',
+ templateUrl: './pie.component.html',
+ styleUrls: ['./pie.component.less']
+})
+export class PieComponent implements OnInit {
+ // chart Data
+ @Input() chartData;
+ // init Data
+ @Input() initData;
+
+ constructor() { }
+
+ ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: this.initData.height
+ };
+ this.pieOption = {
+ backgroundColor:this.initData.option.backgroundColor,
+ legend: this.initData.option.legend,
+ color:this.initData.option.color,
+ tooltip: this.initData.option.tooltip || '',
+ series : [
+ {
+ name: this.initData.option.series[0].name,
+ type: 'pie',
+ radius : this.initData.option.series[0].radius,
+ center:this.initData.option.series[0].center,
+ legendHoverLink: false,
+ hoverOffset: 3,
+ avoidLabelOverlap: false,
+ // minAngle:1,
+ label: this.initData.option.series[0].label,
+ data:[],
+ itemStyle: this.initData.option.series[0].itemStyle
+ }
+ ]
+ }
+ }
+
+ ngOnChanges(changes:SimpleChanges){
+
+ // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+ if(this.chartIntance){
+ this.chartDataChange()
+ }
+ }
+
+ // Initialize the height of the graphic
+ initOpts:any;
+ // Alarm pie chart
+ pieOption:any;
+ // Instance object
+ chartIntance:any;
+ // Data change
+ updateOption:any;
+ chartDataChange(){
+ this.updateOption = this.chartData;
+ // Wait until the updateOption is finished and then execute
+ this.chartIntance.on('finished',()=>{
+ this.chartIntance.dispatchAction({
+ type:'highlight',
+ seriesIndex: 0,
+ dataIndex:0
+ })
+ //Since all view changes are rendered, this event is logged out after the update
+ this.chartIntance.off('finished')
+ })
+ }
+
+ chartInit(chart){
+ this.chartIntance = chart;
+ }
+
+ pieMouseOver(e){
+ this.chartIntance.dispatchAction({
+ type:'downplay'
+ })
+ this.chartIntance.dispatchAction({
+ type:'highlight',
+ seriesIndex: 0,
+ dataIndex:e.dataIndex
+ })
+ }
+
+ pieMouseOut(e){
+ this.chartIntance.dispatchAction({
+ type:'highlight',
+ seriesIndex: 0,
+ dataIndex:e.dataIndex
+ })
+ }
+
+
+}