Tag+ All statistic (#190)

Tag+ All statistic

Co-authored-by: Xinzhe Wang <[email protected]>

admin-frontend/src/app/entity/content.ts

@@ -7,4 +7,5 @@ export class ContentResponse
 {
     status: string;
     files: Media[];
+    tags: string[];
 }

admin-frontend/src/app/entity/info.ts

@@ -8,7 +8,7 @@ export class sellInfo{
     public description: string;
     public contentID: string;
     public userID: number;
-    public tag: string [];
+    public tags: string [];
 }
 
 export class buyInfo{
@@ -21,7 +21,7 @@ export class buyInfo{
     public description: string;
     public contentID: string;
     public userID: number;
-    public tag: string [];
+    public tags: string [];
 }
 
 export class InfoResponse{

admin-frontend/src/app/info-statistic/info-statistic.component.html

@@ -3,10 +3,33 @@
           <div echarts (chartDblClick)="clickForce($event)"	theme="dark"  class= 'tpc'[loading]="true" [options]="fdgoption"></div>
       </div>
       <div class='outer-div' id='good'>
-        <div echarts theme="dark"  class= 'tpc'[loading]="true" [options]="goodoption"></div>
+        <div echarts theme="dark" 
+        (chartBrushSelected)="onBrushSelected($event)" class= 'tpc'[loading]="true" [options]="goodoption"></div>
     </div>
         <div class='outer-div' id='cld'>
-            <div echarts theme="dark" class= 'tpc'[loading]="true" [options]="cldoption">
+            <div *ngIf="!selectedInfo || selectedInfo.length==0" echarts theme="dark" class= 'tpc'[loading]="true" [options]="cldoption">
+            </div>            
+            <div *ngIf="selectedInfo && selectedInfo.length!=0">
+          <nz-table #headerTable [nzData]="selectedInfo" [nzPageSize]="10" [nzScroll]="{ y: '500px' }">
+            <thead>
+              <tr>
+                <th nzWidth="100px" >交易ID</th>
+                <th nzWidth="100px">标签名称</th>
+                <th>价格</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let data of headerTable.data">
+                <td>
+                   <a routerLink="/info/buyInfo/{{data[2]}}">
+                    {{ data[2] }}
+                    </a>
+                  </td>
+                <td>{{ data[0] }}</td>
+                <td>{{ data[1] }}</td>
+              </tr>
+            </tbody>
+          </nz-table>    
             </div>
         </div>
 

admin-frontend/src/app/info-statistic/info-statistic.component.spec.ts

@@ -86,6 +86,7 @@ describe('InfoStatisticComponent', () => {
     expect(fdgFormatter({dataType: 'node',data:{name: '1', value: '2'}})).toEqual('1 has completed 2 transaction');   
     expect(fdgFormatter({dataType: 'edge',data:{source: '1', target: '2', value: '2'}})).
     toEqual('1 has selled 2 goods to 2');
+    component.onBrushSelected({batch:[{selected: [{dataIndex:[]}]}]});
     component.tr= [
        {transactionID: 2, infoID: 1, category: 2, fromUserID: 10003, toUserID: 3,createTime :1 ,status:6},
       {transactionID: 3, infoID: 1, category: 3, fromUserID: 10003, toUserID: 3,createTime :1 ,status:6},
@@ -97,6 +98,8 @@ describe('InfoStatisticComponent', () => {
        {transactionID: 9, infoID: 200003, category: 1, fromUserID: 1366, toUserID: 10003,createTime :1 ,status:6},
        {transactionID: 10, infoID: 16473, category: 1, fromUserID: 1366, toUserID: 9368,createTime :1 ,status:6}]
     component.forceGraph();
-
+    component.randamColor();
+    expect(component.cldsz([1,1])).toEqual(1);
+    expect(component.cldfm({data:[1,1]})).toEqual('1 completed transactions created in 1');
   });
 });

admin-frontend/src/app/info-statistic/info-statistic.component.ts

@@ -8,6 +8,7 @@ import { Transaction } from '../entity/transaction';
 import { TransactionService } from '../transaction.service';
 import { Format } from '../Formatter/format';
 import { Router } from '@angular/router';
+import { FileService } from '../file.service';
 const name = ['LJH', 'WXZ', 'ZWJ', 'KHQ', 'MZD', 'ZEL', 'JZM', 'HJT', 'TRUMP',
 'LJH2', 'WXZ2', 'ZWJ2', 'KHQ2', 'MZD2', 'ZEL2', 'JZM2', 'HJT2', 'TRUMP2',
 'LJH3', 'WXZ3', 'ZWJ3', 'KHQ3', 'MZD3', 'ZEL3', 'JZM3', 'HJT3', 'TRUMP3'];
@@ -29,11 +30,13 @@ export class InfoStatisticComponent implements OnInit {
   tsoption: any;
   lqoption: any;
   goodoption: any;
+  prcdata: any[];
+  selectedInfo: buyInfo[];
   bi: buyInfo[]=[];
   si: sellInfo[]=[];
   tr: Transaction[]=[];
   pl: boolean = false;
-  constructor(private router: Router, private trs: TransactionService, private is: InfoService) { }
+  constructor(private router: Router, private trs: TransactionService, private is: InfoService, private fileService: FileService) { }
   ngOnInit() {
     const now = new Date().getFullYear();
     this.getAllInfo();
@@ -42,13 +45,29 @@ export class InfoStatisticComponent implements OnInit {
     this.forceGraph();
     this.calenderGraph();
     this.lineGraph();
-    this.boxGraph();    
+    this.prcGraph();    
 
   }
   pauseLine(){
       this.pl=!this.pl;
   }
-
+  getComment(){
+    if(!this.pl){
+    this.prcGraph();
+    this.cloudGrpah();
+    }
+    this.bi.forEach(
+      info => {
+        this.fileService.getContent(info.contentID).subscribe(
+          e => {
+              if(e){
+              info.tags = e.tags;
+              }
+          }
+      )
+      }
+    );
+  }
   getAllTR(beg, end){
     this.tr = this.trs.getAllTR(6,beg,end);
     if(!this.pl){
@@ -64,20 +83,32 @@ export class InfoStatisticComponent implements OnInit {
     this.bi = this.bi.sort( (a,b) => a.releaseTime - b.releaseTime);
     this.si = this.is.getAllSellInfo();
     this.si = this.si.sort( (a,b) => a.releaseTime - b.releaseTime);
+    this.getComment();
     if(!this.pl)this.lineGraph();
       setTimeout(() => {
           this.getAllInfo();
       }, 10000);
   }
 
-  boxGraph() {
-    var data = prepareBoxplotData([
-    [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
-    [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
-    [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
-    [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
-    [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
-]);
+    onBrushSelected(param){
+    this.selectedInfo = param.batch[0].selected[0].dataIndex.map(
+        i => this.prcdata[i]
+    );
+}
+
+
+  prcGraph() {
+      this.prcdata=[];
+    this.bi.forEach( e => 
+        {
+            if(e.tags && e.price)
+        e.tags.forEach(
+            t => {
+                this.prcdata.push([t, e.price, e.buyInfoID]);
+            }
+        )
+        }
+    );
 this.goodoption = {
     backgroundColor: '#01193d',
     title: [
@@ -86,6 +117,36 @@ this.goodoption = {
             left: 'center',
         }
     ],
+    toolbox: {
+			brush: {
+				outOfBrush: {
+					color: '#abc'
+				},
+				brushStyle: {
+					borderWidth: 2,
+					color: 'rgba(0,0,0,0.2)',
+					borderColor: 'rgba(0,0,0,0.5)',
+				},
+				seriesIndex: [0, 1],
+				throttleType: 'debounce',
+				throttleDelay: 300,
+				geoIndex: 0
+			},
+    },
+	brush: {
+	outOfBrush: {
+		color: '#abc'
+	},
+	brushStyle: {
+		borderWidth: 2,
+		color: 'rgba(0,0,0,0.2)',
+		borderColor: 'rgba(0,0,0,0.5)',
+	},
+	seriesIndex: [0, 1],
+	throttleType: 'debounce',
+	throttleDelay: 300,
+	geoIndex: 'all'
+	},
     tooltip: {
         trigger: 'item',
         axisPointer: {
@@ -105,59 +166,60 @@ this.goodoption = {
             start: 0,
             end: 40
         }
-    ],
+    ],    
+    dataset: {
+        dimensions: ['tag','price','buyInfoID'],
+        source: this.prcdata
+    },
     grid: {
         left: '10%',
         right: '10%',
         bottom: '15%'
     },
     xAxis: {
         type: 'category',
-        data: data.axisData,
         boundaryGap: true,
-        nameGap: 30,
-        axisLine: {onZero: false},
-        splitArea: {
-            show: false
-        },
-        axisLabel: {
-            formatter: 'tag {value}'
-        },
-        splitLine: {
-            show: false
-        },
+        nameGap: 30
     },
     yAxis: {
         type: 'value',
         name: 'yuan'
     },
     series: [
         {
-            name: 'boxplot',
-            type: 'boxplot',
-            data: data.boxData,
-            tooltip: {
-                formatter: function (param) {
-                    return [
-                        'tag ' + param.name + ': ',
-                        'upper: ' + param.data[5],
-                        'Q3: ' + param.data[4],
-                        'median: ' + param.data[3],
-                        'Q1: ' + param.data[2],
-                        'lower: ' + param.data[1]
-                    ].join('<br/>');
-                }
-            }
-        },
-        {
-            name: 'outlier',
+            name: 'tag price',
             type: 'scatter',
-            data: data.outliers
+            encode: {
+                x: 'tag',
+                y: 'price'
+            }
         }
     ]
 };
   }
   cloudGrpah() {
+    const fre = new Map();
+    this.bi.forEach( e => 
+        {
+            if(e.tags)
+        e.tags.forEach(
+            t => {
+                if(t in fre)fre[t] +=1;
+                else fre[t]=1;
+            }
+        )
+        }
+    )
+    const clddata = [];
+    for( const k in fre) 
+    clddata.push({ name: k,
+      value: fre[k],
+      textStyle: {
+          normal: {},
+          emphasis: {}
+      }
+  });
+
     this.cldoption = {
     backgroundColor: '#01193d',
       title: {
@@ -180,30 +242,24 @@ this.goodoption = {
           normal: {
               fontFamily: 'sans-serif',
               fontWeight: 'bold',
-              color: () => {
-                  // Random color
-                  return 'rgb(' + [
-                      Math.round(Math.random() * 250),
-                      Math.round(Math.random() * 250),
-                      Math.round(Math.random() * 250)
-                  ].join(',') + ')';
-              }
+              color: this.randamColor
           },
           emphasis: {
               shadowBlur: 10,
               shadowColor: '#333'
           }
       },
-      data: name.map( node => {return { name: node,
-      value: Math.round(Math.random() * 1000),
-      textStyle: {
-          normal: {},
-          emphasis: {}
-      }
-  }; }
-  )
-  }]
+      data: clddata 
+  }
+  ]
 };
+  }
+  randamColor(){return 'rgb(' + [
+                      Math.round(Math.random() * 250),
+                      Math.round(Math.random() * 250),
+                      Math.round(Math.random() * 250)
+                  ].join(',') + ')';
+
   }
   calenderGraph() {
     let td =new Map();
@@ -271,17 +327,14 @@ this.goodoption = {
           series: [{
             type: 'effectScatter',
             coordinateSystem: 'calendar',
-            symbolSize: (val) => {
-                return val[1];
-            },
+            symbolSize: this.cldsz,
             showEffectOn: 'render',
             rippleEffect: {
                 brushType: 'stroke'
             },
             hoverAnimation: true,
             tooltip: {
-                formatter:(param)=>
-                param.data[1] + ' completed transactions created in ' +param.data[0]
+                formatter: this.cldfm,
             },
             itemStyle: {
                     color: '#f4e925',
@@ -292,6 +345,12 @@ this.goodoption = {
           }]
         };
   }
+  cldsz(val){
+                return val[1];
+}
+  cldfm(param) {
+      return param.data[1] + ' completed transactions created in ' +param.data[0]
+}
   forceGraph() {
     let td =new Map();
     let join = [];

admin-frontend/src/app/info/buy-info/buy-info.component.html

@@ -26,7 +26,7 @@
       <div class='infoitem'>
           <span class="badge">状态</span>{{getstate(info.status)}}
       </div>
-      <nz-tag *ngFor="let tag of tags">
+      <nz-tag *ngFor="let tag of info.tags">
         {{tag}}
       </nz-tag>
       </div>

admin-frontend/src/app/info/buy-info/buy-info.component.spec.ts

@@ -90,5 +90,6 @@ describe('BuyInfoComponent', () => {
     c.buyinfos= [new buyInfo];
     c.size = 1;
     c.checkcount();
+    c.getcontent();
   });
 });