feat: implement the customer page chart adaptive

Change-Id: Ic8f4501ba3f81dc2f94734e4701cd7e1f28df43b
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 20 insertions, 3 deletions

diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
index 6de63b0f..4f532f8f 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -15,9 +15,9 @@
 -->
 <div class="content">
   <div class="chearts">
-    <div class="Cu">
+    <div class="Cu" #chart>
       <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
-      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart" #pie></app-pie>
       <div *ngIf="!serviceChart">No Service Instances </div>
     </div>
     <div class="type">
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
index 3fc73911..39c42a0d 100644
--- a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
@@ -13,17 +13,22 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, TemplateRef } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ManagemencsService } from '../../../core/services/managemencs.service';
 import { NzNotificationService } from 'ng-zorro-antd';
+import { Observable } from 'rxjs';
+
 @Component({
     selector: 'app-customer',
     templateUrl: './customer.component.html',
     styleUrls: ['./customer.component.less']
 })
 export class CustomerComponent implements OnInit {
+    @ViewChild('chart') chart;
+    @ViewChild('pie') pie;
     public chose = '';
 
+    resizeMark;
     constructor(
         private managemencs: ManagemencsService,
         private notification: NzNotificationService
@@ -32,8 +37,20 @@ export class CustomerComponent implements OnInit {
 
     ngOnInit() {
         this.getAllCustomers();
+        this.resizeMark = Observable.fromEvent(window,'resize')
+            .subscribe((event) => {
+                this.pie.resize(this.chart.nativeElement.offsetHeight,210)
+            })
     }
 
+    ngAfterViewInit(){
+        this.pie.resize(this.chart.nativeElement.offsetHeight,210)
+    }
+
+    ngOnDestroy(){
+        this.resizeMark.unsubscribe()
+      }
+
     AllCustomersdata = [];
     AllServiceTypes = [];
     customerber = [];