diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/charts')
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 + }) + } + + +} |