update analysis

src/app/analysis/analysis.module.ts

@@ -21,6 +21,7 @@ import { BrandComponent } from './crowd/brand/brand.component';
 import { OperatorsComponent } from './crowd/operators/operators.component';
 import { RegionComponent } from './crowd/region/region.component';
 import { EquipmentBrandComponent } from './equipment/brand/brand.component';
+import { PreferenceFieldComponent } from './preference/field/field.component';
 
 @NgModule({
   imports: [
@@ -43,7 +44,8 @@ import { EquipmentBrandComponent } from './equipment/brand/brand.component';
     BrandComponent,
     OperatorsComponent,
     RegionComponent,
-    EquipmentBrandComponent
+    EquipmentBrandComponent,
+    PreferenceFieldComponent
   ],
   providers: [
     {provide: 'AnalysisService', useClass: AnalysisService}

src/app/analysis/analysis.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { environment } from '../../environments/environment';
@@ -34,7 +33,7 @@ export class AnalysisService {
     return this._crowdOverview$.asObservable();
   }
 
-  constructor(private _http: Http, private http: HttpClient) {
+  constructor(private http: HttpClient) {
     this._crowdApplist$ = new BehaviorSubject<any>([]);
     this._crowdCateList$ = new BehaviorSubject<any>([]);
     this._crowdDevice$ = new BehaviorSubject<any>([]);
@@ -51,14 +50,14 @@ export class AnalysisService {
 
   getCrowdAppList() {
     const url = `${this.apiUrl}/crowdAppList.json`;
-    return this._http.get(url).map(res => res.json().datas).subscribe(res => {
+    return this.http.get(url).subscribe(res => {
       this._crowdApplist$.next(res);
     });
   }
 
   getCrowdCateList() {
     const url = `${this.apiUrl}/crowdCateList.json`;
-    return this._http.get(url).map(res => res.json().datas).subscribe(res => {
+    return this.http.get(url).subscribe(res => {
       this._crowdCateList$.next(res);
     });
   }
@@ -72,7 +71,7 @@ export class AnalysisService {
 
   scenesData() {
     const url = `${this.apiUrl}/scenes.json`;
-    return this._http.get(url).map(res => res.json().datas).subscribe(res => {
+    return this.http.get(url).subscribe(res => {
       this._scenes$.next(res);
     });
   }

src/app/analysis/preference/field/field.component.html

@@ -0,0 +1,16 @@
+<mat-card>
+  <mat-card-title>人群领域偏好</mat-card-title>
+  <mat-card-content>
+    <ngx-charts-bar-horizontal *ngIf="data?.length"
+                             [scheme]="colorScheme"
+                             [results]="data"
+                             [gradient]="gradient"
+                             [xAxis]="showXAxis"
+                             [yAxis]="showYAxis"
+                             [legend]="showLegend"
+                             [showXAxisLabel]="showXAxisLabel"
+                             [showYAxisLabel]="showYAxisLabel"
+                             (select)="onSelect($event)">
+    </ngx-charts-bar-horizontal>
+  </mat-card-content>
+</mat-card>

src/app/analysis/preference/field/field.component.scss

@@ -0,0 +1,12 @@
+mat-card {
+  margin: 5px;
+  padding: 0;
+}
+
+mat-card-title {
+  padding: 16px 24px;
+}
+
+mat-card-content {
+  min-height: 400px;
+}

src/app/analysis/preference/field/field.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'analysis-preference-field',
+  templateUrl: './field.component.html',
+  styleUrls: ['./field.component.scss']
+})
+export class PreferenceFieldComponent implements OnInit {
+
+  @Input() data: any;
+
+  // options
+  showXAxis = true;
+  showYAxis = true;
+  gradient = false;
+  showLegend = false;
+  showXAxisLabel = true;
+  xAxisLabel = 'Country';
+  showYAxisLabel = true;
+  yAxisLabel = 'Population';
+
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
+  };
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  onSelect(event) {
+    console.log(event);
+  }
+
+}

src/app/analysis/preference/preference.component.html

@@ -1,16 +1,6 @@
 <div fxLayout="row" fxLayoutWrap>
   <div fxFlex.gt-sm="50">
-    <mat-card>
-      <mat-card-title>人群领域偏好</mat-card-title>
-      <mat-card-content>
-        <canvas baseChart height="200px"
-                [datasets]="barChartData"
-                [labels]="barChartLabels"
-                [options]="barChartOptions"
-                [legend]="barChartLegend"
-                [chartType]="barChartType"></canvas>
-      </mat-card-content>
-    </mat-card>
+    <analysis-preference-field [data]="field_data"></analysis-preference-field>
   </div>
   <div fxFlex.gt-sm="50">
     <mat-card>

src/app/analysis/preference/preference.component.scss

@@ -13,9 +13,10 @@ mat-card-title {
 }
 
 mat-card-content {
-  padding: 0 24px 24px 24px;
+  min-height: 400px;
 }
 
+
 .table {
   width: 100%;
   tr > td {
@@ -32,7 +33,8 @@ mat-card-content {
 }
 
 .fixedHeight {
-  max-height: 522px;
+  max-height: 400px;
+  min-height: 400px;
   overflow: auto;
 }
 .num {

src/app/analysis/preference/preference.component.ts

@@ -7,13 +7,7 @@ import { Component, OnInit, Inject } from '@angular/core';
 })
 export class PreferenceComponent implements OnInit {
 
-  public barChartOptions: any = {};
-  public barChartLabels: string[] = [];
-  public barChartType: string = 'horizontalBar';
-  public barChartLegend: boolean = true;
-  public barChartData: any[] = [
-    {data: [], label: '活跃人数(万)'}
-  ];
+  field_data: any = [];
 
   coverRateListDatas: any[] = [];
   activeDatas: any[] = [];
@@ -22,49 +16,43 @@ export class PreferenceComponent implements OnInit {
   }
 
   ngOnInit() {
+    this._service.getCrowdCateList();
     this.getCrowdCateList();
     this.coverRateList();
+
+    this._service.getCrowdAppList();
     this.getCrowdAppList();
   }
 
   getCrowdCateList() {
-    this._service.getCrowdCateList();
 
     this._service.crowdCateList$.subscribe(res => {
-      const list = res.list;
-      if (!list) {
-        return;
-      }
 
-      let crowdActiveNums = [];
-      let categoryName = list.map(v => {
-        crowdActiveNums.push(v.crowdActiveNums);
-        return v.categoryName;
-      });
+      if (res.datas) {
+        res.datas.list.map((item) => {
+          this.field_data.push({
+            name: item.categoryName,
+            value: item.crowdActiveNums
+          });
+        });
+      }
 
-      this.barChartLabels = categoryName;
-      this.barChartData[0].data = crowdActiveNums;
     });
   }
 
   coverRateList() {
     this._service.crowdCateList$.subscribe(res => {
-      const coverRateList = res.coverRateList;
-      if (!coverRateList) {
-        return;
+      if (res.datas) {
+        this.coverRateListDatas = res.datas.coverRateList;
       }
-      this.coverRateListDatas = coverRateList;
     });
   }
 
   getCrowdAppList() {
-    this._service.getCrowdAppList();
     this._service.crowdApplist$.subscribe(res => {
-      const activeDatas = res.activeDatas;
-      if (!activeDatas) {
-        return;
+      if (res.datas) {
+        this.activeDatas = res.datas.activeDatas.datas;
       }
-      this.activeDatas = activeDatas.datas;
     });
   }
 

src/app/analysis/scene-portrait/scene-portrait.component.html

@@ -2,12 +2,17 @@
   <mat-card>
     <mat-card-title>场景概览</mat-card-title>
     <mat-card-content>
-      <canvas baseChart height="100px"
-              [datasets]="bubbleChartData"
-              [labels]="bubbleChartLabels"
-              [options]="bubbleChartOptions"
-              [legend]="bubbleChartLegend"
-              [chartType]="bubbleChartType"></canvas>
+      <ngx-charts-bubble-chart
+        [results]="bubble"
+        [legend]="showLegend"
+        [xAxis]="showXAxis"
+        [yAxis]="showYAxis"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [xAxisLabel]="xAxisLabel"
+        [yAxisLabel]="yAxisLabel"
+        [scheme]="colorScheme">
+      </ngx-charts-bubble-chart>
     </mat-card-content>
   </mat-card>
 </div>

src/app/analysis/scene-portrait/scene-portrait.component.scss

@@ -6,13 +6,12 @@
 mat-card {
   margin: 5px;
   padding: 0;
-  min-height: 400px;
 }
 
 mat-card-title {
   padding: 16px 24px;
 }
 
 mat-card-content {
-  padding: 0 24px 24px 24px;
+  min-height: 400px;
 }

src/app/analysis/scene-portrait/scene-portrait.component.ts

@@ -7,57 +7,34 @@ import { Component, OnInit, Inject } from '@angular/core';
 })
 export class ScenePortraitComponent implements OnInit {
 
-  bubbleChartData = [{
-    data: [
-      {x: 20, y: 30, r: 15},
-      {x: 40, y: 10, r: 10}
-    ],
-    label: '教育学习',
-    backgroundColor: '#FF6384',
-    hoverBackgroundColor: '#FF6388'
-  },
-    {
-      data: [
-        {x: 12, y: 17, r: 20},
-        {x: 64, y: 17, r: 10}
-      ],
-      label: '日常消费',
-      backgroundColor: '#40ff00',
-      hoverBackgroundColor: '#FF6388'
-    }];
-  // bubbleChartData = [{data: [], label: '', backgroundColor: '', hoverBackgroundColor: ''}];
-  bubbleChartLabels: string[] = ['教育学习', '日常消费'];
-  bubbleChartOptions: any = {};
-  bubbleChartLegend: string[] = [];
-  bubbleChartType: string = 'bubble';
+  bubble: any = [];
+  // options
+  showXAxis = true;
+  showYAxis = true;
+  gradient = false;
+  showLegend = false;
+  showXAxisLabel = true;
+  xAxisLabel = 'Country';
+  showYAxisLabel = true;
+  yAxisLabel = 'Population';
+
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
+  };
 
   constructor(@Inject('AnalysisService') private _service) {
   }
 
   ngOnInit() {
+    this._service.scenesData();
     this.scenes();
   }
 
   scenes() {
-    this._service.scenesData();
     this._service.scenes$.subscribe(res => {
-      if (!res.scene) {
-        return;
-      }
-      let d = [];
-      console.log(res.scene.ratioSort);
-      res.scene.ratioSort.map(item => {
-        d.push({
-          data: [
-            {x: item.tgi.toFixed(2), y: item.activeNums.toFixed(2), r: 15},
-          ],
-          label: item.scenName,
-          backgroundColor: '#FF6384',
-          hoverBackgroundColor: '#FF6388'
-        });
-      });
+      if (res.datas) {
 
-      console.log(d);
+      }
     });
   }