新增多种图形数据

* ztree setting output change

Change-Id: Ifdb8e8129848a2166f7eb8c0562023469a938f7f

* doughnut data

Change-Id: Ida104371ba434bea359467b50ca8a82d4e37d927

* strip graph data

Change-Id: Iac601df157df29e52b890e987c2bbceec87f4fb3

* stack area graph data

Change-Id: I5ff783044b7caddddf3d231c8087e4baf624bd74

* scatter graph data

Change-Id: I35d0fdbd8b1b67ca05933daf83c9cbfe1ebf76c1

* add graph global theme

Change-Id: I080457f42a472c791e9ad21fbca7ef60014d1176

* set global graph theme

Change-Id: I267dc3a2ab459a6751b7e5df8b19fbd2d0a584b9

* radar graph data

Change-Id: I37d50760604ccaad4e65317cac92f6ac0c84f0fc

* radar data

Change-Id: If46204e3bb3ffe75b340d4b2d17743d9e4d98f05

* scatter data

Change-Id: I19ff2c436668e9a915f3c44d2284ce5b2efc9640

* k-line data

Change-Id: I0c22ed4a01ca15945752b85831d83145bf9e1f8c

* box plot data

Change-Id: Idaba0a1aa45fe1ef4bed93d0b3421fd53ddf60f5

* heat data

Change-Id: I942867968fccbef4fed702144944e522fb08eebd

* relational data

Change-Id: I4ec20ef07c60655a1057fa79a27629797c4b309d

* funnel plot data

Change-Id: I0cba3ac67fa75868b144e69b023a0dfdfb5f2a42

* gauge data

Change-Id: Ib07675fa090ee46fd516d44a24f1b958db0975e6

* line bar data

Change-Id: Ifdadb0e4a4c3bcccbb7bd2c6f18458fbadb56cb8

* pie data

Change-Id: I3ad7d2b6fe32cdb501fe6552a92d6f13bf7c641f

* restructure

Change-Id: I3a487b7e5ea8cfff21928c30fcc96b2c11090c08

* restructure

Change-Id: I3a487b7e5ea8cfff21928c30fcc96b2c11090c08

* restructure

Change-Id: I11416e20ae3183dd5cd12aa0843e372debd0971e

* line bar data

Change-Id: I567f53d62d4258e1810c51420adf0c381c2d4c42

* data format

Change-Id: I4ddb4cfe31f6da72b1b01975897e6fe9469839fa

* rewrite graph input data format

Change-Id: I81ef3057b98100fb29cac4f11619d682b865f274

* code review

Change-Id: Id8cb3a090195879888f0ab684ba2ed85e9cd59a1

* 优化代码格式

src/app/demo/collapse/full/demo.component.html

@@ -56,7 +56,7 @@ <h3>标题和内容</h3>
                         </j-collapse-pane>
 
                         <j-collapse-pane header="line" [isActive]="true">
-                            <jigsaw-graph [data]="lineBarGraphData"></jigsaw-graph>
+                            <jigsaw-graph [data]="lineGraphData"></jigsaw-graph>
                         </j-collapse-pane>
                     </j-collapse>
                 </div>

src/app/demo/collapse/full/demo.component.ts

@@ -1,29 +1,29 @@
 import {Component} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {TableData} from "jigsaw/core/data/table-data";
-import {LineBarGraphData, PieGraphDataByColumn} from "jigsaw/core/data/graph-data";
+import {LineGraphData, PieGraphData} from "jigsaw/core/data/graph-data";
 
 @Component({
     templateUrl: './demo.component.html',
     styleUrls: ['./demo.component.css']
 })
 export class CollapseFullComponent {
     tableData: TableData;
-    public pieGraphDataByCol: PieGraphDataByColumn;
-    public lineBarGraphData: LineBarGraphData;
+    public pieGraphDataByCol: PieGraphData;
+    public lineGraphData: LineGraphData;
 
     constructor(http: HttpClient) {
         this.tableData = new TableData();
         this.tableData.http = http;
         this.tableData.fromAjax('mock-data/hr-list');
 
-        this.pieGraphDataByCol = new PieGraphDataByColumn();
+        this.pieGraphDataByCol = new PieGraphData();
         this.pieGraphDataByCol.http = http;
         this.pieGraphDataByCol.fromAjax('mock-data/marketing');
 
-        this.lineBarGraphData = new LineBarGraphData();
-        this.lineBarGraphData.http = http;
-        this.lineBarGraphData.fromAjax('mock-data/marketing');
+        this.lineGraphData = new LineGraphData();
+        this.lineGraphData.http = http;
+        this.lineGraphData.fromAjax('mock-data/marketing');
     }
 
     goodsList = [

src/app/demo/graph/bar/demo.component.html

@@ -0,0 +1,39 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>柱状图</h2>
+
+    <div class="live-demo">
+        <h3>BarGraphData静态数据</h3>
+        <jigsaw-graph [data]="barData" height="400"></jigsaw-graph>
+    </div>
+
+    <div class="live-demo">
+        <h3>BarGraphData异步数据</h3>
+        <jigsaw-graph [data]="barFromAjax" height="400"></jigsaw-graph>
+    </div>
+
+    <div class="live-demo">
+        <h3>BarGraphDataByRow静态数据</h3>
+        <jigsaw-graph [data]="barByRow" height="400"></jigsaw-graph>
+    </div>
+
+    <div class="live-demo">
+        <h3>BarGraphDataByRow异步数据</h3>
+        <jigsaw-graph [data]="barByRowFromAjax" height="400"></jigsaw-graph>
+    </div>
+</div>
+
+
+
+
+
+
+
+
+
+

src/app/demo/graph/bar/demo.component.ts

@@ -0,0 +1,91 @@
+import {Component} from "@angular/core";
+import {BarGraphData, BarGraphDataByRow} from "jigsaw/core/data/graph-data";
+import {HttpClient, HttpRequest} from "@angular/common/http";
+import {AjaxInterceptor} from "../../../app.interceptor";
+
+@Component({
+    templateUrl: './demo.component.html'
+})
+export class BarGraphComponent {
+    barData: BarGraphData;
+    barFromAjax: BarGraphData;
+    barByRow: BarGraphDataByRow;
+    barByRowFromAjax: BarGraphDataByRow;
+    constructor(public http: HttpClient) {
+        this.barData = new BarGraphData();
+        this.barData.rowDescriptor = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+        this.barData.header = ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'];
+        this.barData.data = [
+            [120, 220, 150, 320, 820],
+            [132, 182, 232, 332, 932],
+            [101, 191, 201, 301, 901],
+            [134, 234, 154, 334, 934],
+            [90, 290, 190, 390, 1290],
+            [230, 330, 330, 330, 1330],
+            [210, 310, 410, 320, 1320]
+        ];
+
+        this.barFromAjax = new BarGraphData();
+        this.barFromAjax.http = http;
+        this.barFromAjax.fromAjax({url: '/graph-data/line-data', params: {byCol: true}});
+
+
+        this.barByRow = new BarGraphDataByRow();
+        this.barByRow.rowDescriptor = ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'];
+        this.barByRow.header = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+        this.barByRow.data = [
+            [120, 132, 101, 134, 90, 230, 210],
+            [220, 182, 191, 234, 290, 330, 310],
+            [150, 232, 201, 154, 190, 330, 410],
+            [320, 332, 301, 334, 390, 330, 320],
+            [820, 932, 901, 934, 1290, 1330, 1320]
+        ];
+
+        this.barByRowFromAjax = new BarGraphDataByRow();
+        this.barByRowFromAjax.http = http;
+        this.barByRowFromAjax.fromAjax({url: '/graph-data/line-data', params: {byRow: true}});
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个demo展示了如何使用折线图';
+    description: string = require('!!raw-loader!./readme.md');
+}
+
+/* 模拟请求代码 start */
+AjaxInterceptor.registerProcessor('/graph-data/line-data', dealAreaRequest);
+
+function dealAreaRequest(req: HttpRequest<any>) {
+    if(req.params.get('byCol')) {
+        return {
+            "rowDescriptor": ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            "header": ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+            "data": [
+                [120, 220, 150, 320, 820],
+                [132, 182, 232, 332, 932],
+                [101, 191, 201, 301, 901],
+                [134, 234, 154, 334, 934],
+                [90, 290, 190, 390, 1290],
+                [230, 330, 330, 330, 1330],
+                [210, 310, 410, 320, 1320]
+            ]
+        }
+    }else if(req.params.get('byRow')) {
+        return {
+            "rowDescriptor": ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+            "header": ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            "data": [
+                [120, 132, 101, 134, 90, 230, 210],
+                [220, 182, 191, 234, 290, 330, 310],
+                [150, 232, 201, 154, 190, 330, 410],
+                [320, 332, 301, 334, 390, 330, 320],
+                [820, 932, 901, 934, 1290, 1330, 1320]
+            ]
+        }
+    }
+
+}
+
+/* 模拟请求代码 end */
+

src/app/demo/graph/line-bar-graph-ajax/demo.module.ts → src/app/demo/graph/bar/demo.module.ts

@@ -1,13 +1,13 @@
 import {NgModule} from "@angular/core";
 import {JigsawGraphModule} from "jigsaw/component/graph/index";
-import {AjaxLineGraphComponent} from "./demo.component";
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {BarGraphComponent} from "./demo.component";
 
 @NgModule({
-    declarations: [AjaxLineGraphComponent],
-    exports: [AjaxLineGraphComponent],
+    declarations: [BarGraphComponent],
+    exports: [BarGraphComponent],
     imports: [JigsawGraphModule, JigsawDemoDescriptionModule]
 })
-export class AjaxLineGraphModule {
+export class BarGraphModule {
 
 }

src/app/demo/graph/bar/readme.md

@@ -0,0 +1,35 @@
+所有graph data从ajax获取的数据的格式必须是table data的格式
+
+### BarGraphData
+
+```
+{
+    "rowDescriptor": ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    "header": ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+    "data": [
+        [120, 220, 150, 320, 820],
+        [132, 182, 232, 332, 932],
+        [101, 191, 201, 301, 901],
+        [134, 234, 154, 334, 934],
+        [90, 290, 190, 390, 1290],
+        [230, 330, 330, 330, 1330],
+        [210, 310, 410, 320, 1320]
+    ]
+}
+```
+
+### BarGraphDataByRow
+
+```
+{
+    "rowDescriptor": ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+    "header": ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    "data": [
+        [120, 132, 101, 134, 90, 230, 210],
+        [220, 182, 191, 234, 290, 330, 310],
+        [150, 232, 201, 154, 190, 330, 410],
+        [320, 332, 301, 334, 390, 330, 320],
+        [820, 932, 901, 934, 1290, 1330, 1320]
+    ]
+}
+```

src/app/demo/graph/box-plot/demo.component.html

@@ -0,0 +1,28 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>箱线图</h2>
+
+    <div class="live-demo">
+        <h3>BoxPlotGraphData静态数据</h3>
+        <jigsaw-graph [data]="boxPlotData" height="400" (click)="handleClick($event)"></jigsaw-graph>
+    </div>
+
+    <div class="live-demo">
+        <h3>BoxPlotGraphData异步数据</h3>
+        <jigsaw-graph [data]="boxPlotFromAjax" height="400" (click)="handleClick($event)"></jigsaw-graph>
+    </div>
+</div>
+
+
+
+
+
+
+
+
+

src/app/demo/graph/box-plot/demo.component.ts

@@ -0,0 +1,57 @@
+import {Component} from '@angular/core';
+import {BoxPlotGraphData} from "jigsaw/core/data/graph-data";
+import {AjaxInterceptor} from "../../../app.interceptor";
+import {HttpClient, HttpRequest} from "@angular/common/http";
+
+@Component({
+    templateUrl: './demo.component.html'
+})
+export class BoxPlotGraphComponent {
+    constructor(public http: HttpClient) {
+        this.boxPlotData = new BoxPlotGraphData();
+        this.boxPlotData.title = 'Michelson-Morley Experiment';
+        this.boxPlotData.data = [
+            [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]
+        ];
+
+        this.boxPlotFromAjax = new BoxPlotGraphData();
+        this.boxPlotFromAjax.http = http;
+        this.boxPlotFromAjax.title = 'Michelson-Morley Experiment';
+        this.boxPlotFromAjax.fromAjax('/graph-data/box-plot-data');
+    }
+
+    boxPlotData: BoxPlotGraphData;
+    boxPlotFromAjax: BoxPlotGraphData;
+
+    handleClick($event) {
+        console.log($event);
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '';
+    description: string = '';
+}
+
+
+/* 模拟请求代码 start */
+AjaxInterceptor.registerProcessor('/graph-data/box-plot-data', dealAreaRequest);
+
+function dealAreaRequest(req: HttpRequest<any>) {
+    return {
+        "data": [
+            [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]
+        ]
+    }
+}
+
+/* 模拟请求代码 end */

src/app/demo/graph/box-plot/demo.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from "@angular/core";
+import {JigsawGraphModule} from "jigsaw/component/graph/index";
+import {BoxPlotGraphComponent} from "./demo.component";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    declarations: [BoxPlotGraphComponent],
+    exports: [BoxPlotGraphComponent],
+    imports: [JigsawGraphModule, JigsawDemoDescriptionModule, CommonModule]
+})
+export class BoxPlotGraphModule {
+
+}