-
+
+
+
+
+
Auto-display
+
+ -
+ 数据控制
+ 清空数据
+ 添加表格
+ 添加柱状图
+ 添加堆叠区域图
+ 添加饼图
+ 添加仪表盘
+
+ -
+ 数据删除
+
+ 数据源 - {{i +
+ 1}}
+
+
+
+
+
基本用法
+
+
\ No newline at end of file
diff --git a/src/app/for-internal/demo/pc/auto-display/basic/demo.component.ts b/src/app/for-internal/demo/pc/auto-display/basic/demo.component.ts
index 243882aebe..8f479f7bee 100644
--- a/src/app/for-internal/demo/pc/auto-display/basic/demo.component.ts
+++ b/src/app/for-internal/demo/pc/auto-display/basic/demo.component.ts
@@ -1,266 +1,266 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
-import { AutoDisplayData, JigsawAutoDisplay } from "jigsaw/public_api";
-
-@Component({
- templateUrl: "./demo.component.html",
- styleUrls: ['./../../assets/demo.common.css', './demo.component.css'],
- encapsulation: ViewEncapsulation.None
-})
-export class JigsawAutoDisplayBasicDemoComponent implements OnInit {
- @ViewChild('autoDisplay')
- public autoDisplay: JigsawAutoDisplay
-
- public data: AutoDisplayData[] = [];
-
- public addTableData() {
- this.data.push({
- renderAs: 'table',
- initData: {
- data: [
- ["Tiger Nixon1", "System Architect", "$320,00", "2011/04/25", "Edinburgh", "542"],
- ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
- ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
- ["Garrett Winslters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
- ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
- ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
- ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
- ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
- ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
- ["Garrett Wintsers2", "Accountant", "$170,50", "2011/07/25", "Tokyo", "8422"],
- ["Tiger Nixon3", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
- ["Tiger Nixon3", "System Architect", "$3,800", "2011/04/25", "Edinburgh", "5421"],
- ["Tiger Nixon3", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
- ["Tiger Nixon1", "System Architect", "$320,80", "2011/04/25", "Edinburgh", "542111"],
- ["Garrett Winters1", "Accountant", "$170,750", "2011/07/25", "Tokyo", "84212"],
- ["Tiger Nixon2", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
- ["Tigesr Nixon1", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
- ["Garrett Winters1", "Accountant", "$170,750", "2011/07/25", "Tokyo", "8422"],
- ["Tigers Nixon2", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"]
- ],
- field: ["name", "position", "salary", "enroll-date", "office", "extn"],
- header: ["姓名", "职位", "薪资", "入职日期", "部门", "其他"]
- }
- })
- this.autoDisplay.update();
- }
-
- public addBarGraph() {
- this.data.push({
- renderAs: 'origin-echarts',
- initData: {
- color: ['#3398DB'],
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '直接访问',
- type: 'bar',
- barWidth: '60%',
- data: [10, 52, 200, 334, 390, 330, 220]
- }
- ]
- }
- })
- this.autoDisplay.update();
- }
-
- public addGaugeGraph() {
- this.data.push({
- renderAs: 'origin-echarts',
- initData: {
- tooltip: {
- formatter: '{a}
{b} : {c}%'
- },
- toolbox: {
- feature: {
- restore: {},
- saveAsImage: {}
- }
- },
- series: [
- {
- name: '业务指标',
- type: 'gauge',
- detail: { formatter: '{value}%' },
- data: [{ value: 50, name: '完成率' }]
- }
- ]
- }
- })
- this.autoDisplay.update();
- }
-
- public addPieGraph() {
- this.data.push({
- renderAs: 'origin-echarts',
- initData: {
- title: {
- text: '某站点用户访问来源',
- subtext: '纯属虚构',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a}
{b} : {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: '55%',
- center: ['50%', '60%'],
- data: [
- { value: 335, name: '直接访问' },
- { value: 310, name: '邮件营销' },
- { value: 234, name: '联盟广告' },
- { value: 135, name: '视频广告' },
- { value: 1548, name: '搜索引擎' }
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- }
- })
- this.autoDisplay.update();
- }
-
- public addStackGraph() {
- this.data.push({
- renderAs: 'origin-echarts',
- initData: {
- title: {
- text: '堆叠区域图'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
- top: 20,
- left: 'center'
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '邮件营销',
- type: 'line',
- stack: '总量',
- areaStyle: { normal: {} },
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '联盟广告',
- type: 'line',
- stack: '总量',
- areaStyle: { normal: {} },
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '视频广告',
- type: 'line',
- stack: '总量',
- areaStyle: { normal: {} },
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '直接访问',
- type: 'line',
- stack: '总量',
- areaStyle: { normal: {} },
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '搜索引擎',
- type: 'line',
- stack: '总量',
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- },
- areaStyle: { normal: {} },
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
- }
- })
- this.autoDisplay.update();
- }
-
- public removeData(index: number) {
- this.data.splice(index, 1);
- this.autoDisplay.update();
- }
-
- public clearData() {
- this.data = [];
- }
-
- ngOnInit(): void {
- // this.addTableData();
- }
-
- // ====================================================================
- // ignore the following lines, they are not important to this demo
- // ====================================================================
- summary: string = "";
- description: string = "";
-}
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
+import { AutoDisplayData, JigsawAutoDisplay } from "jigsaw/public_api";
+
+@Component({
+ templateUrl: "./demo.component.html",
+ styleUrls: ['./../../assets/demo.common.css', './demo.component.css'],
+ encapsulation: ViewEncapsulation.None
+})
+export class JigsawAutoDisplayBasicDemoComponent implements OnInit {
+ @ViewChild('autoDisplay')
+ public autoDisplay: JigsawAutoDisplay
+
+ public data: AutoDisplayData[] = [];
+
+ public addTableData() {
+ this.data.push({
+ renderAs: 'table',
+ initData: {
+ data: [
+ ["Tiger Nixon1", "System Architect", "$320,00", "2011/04/25", "Edinburgh", "542"],
+ ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
+ ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
+ ["Garrett Winslters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
+ ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
+ ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
+ ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
+ ["Garrett Winters1", "Accountant", "$170,7", "2011/07/25", "Tokyo", "8422"],
+ ["Tiger Nixon2", "System Architect", "$320,8000", "2011/04/25", "Edinburgh", "5421"],
+ ["Garrett Wintsers2", "Accountant", "$170,50", "2011/07/25", "Tokyo", "8422"],
+ ["Tiger Nixon3", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
+ ["Tiger Nixon3", "System Architect", "$3,800", "2011/04/25", "Edinburgh", "5421"],
+ ["Tiger Nixon3", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
+ ["Tiger Nixon1", "System Architect", "$320,80", "2011/04/25", "Edinburgh", "542111"],
+ ["Garrett Winters1", "Accountant", "$170,750", "2011/07/25", "Tokyo", "84212"],
+ ["Tiger Nixon2", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
+ ["Tigesr Nixon1", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"],
+ ["Garrett Winters1", "Accountant", "$170,750", "2011/07/25", "Tokyo", "8422"],
+ ["Tigers Nixon2", "System Architect", "$320,800", "2011/04/25", "Edinburgh", "5421"]
+ ],
+ field: ["name", "position", "salary", "enroll-date", "office", "extn"],
+ header: ["姓名", "职位", "薪资", "入职日期", "部门", "其他"]
+ }
+ })
+ this.autoDisplay.update();
+ }
+
+ public addBarGraph() {
+ this.data.push({
+ renderAs: 'origin-echarts',
+ initData: {
+ color: ['#3398DB'],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisTick: {
+ alignWithLabel: true
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '直接访问',
+ type: 'bar',
+ barWidth: '60%',
+ data: [10, 52, 200, 334, 390, 330, 220]
+ }
+ ]
+ }
+ })
+ this.autoDisplay.update();
+ }
+
+ public addGaugeGraph() {
+ this.data.push({
+ renderAs: 'origin-echarts',
+ initData: {
+ tooltip: {
+ formatter: '{a}
{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ detail: { formatter: '{value}%' },
+ data: [{ value: 50, name: '完成率' }]
+ }
+ ]
+ }
+ })
+ this.autoDisplay.update();
+ }
+
+ public addPieGraph() {
+ this.data.push({
+ renderAs: 'origin-echarts',
+ initData: {
+ title: {
+ text: '某站点用户访问来源',
+ subtext: '纯属虚构',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b} : {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '60%'],
+ data: [
+ { value: 335, name: '直接访问' },
+ { value: 310, name: '邮件营销' },
+ { value: 234, name: '联盟广告' },
+ { value: 135, name: '视频广告' },
+ { value: 1548, name: '搜索引擎' }
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+ })
+ this.autoDisplay.update();
+ }
+
+ public addStackGraph() {
+ this.data.push({
+ renderAs: 'origin-echarts',
+ initData: {
+ title: {
+ text: '堆叠区域图'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+ top: 20,
+ left: 'center'
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: '邮件营销',
+ type: 'line',
+ stack: '总量',
+ areaStyle: { normal: {} },
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: '联盟广告',
+ type: 'line',
+ stack: '总量',
+ areaStyle: { normal: {} },
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '视频广告',
+ type: 'line',
+ stack: '总量',
+ areaStyle: { normal: {} },
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: '直接访问',
+ type: 'line',
+ stack: '总量',
+ areaStyle: { normal: {} },
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: '搜索引擎',
+ type: 'line',
+ stack: '总量',
+ label: {
+ normal: {
+ show: true,
+ position: 'top'
+ }
+ },
+ areaStyle: { normal: {} },
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+ }
+ })
+ this.autoDisplay.update();
+ }
+
+ public removeData(index: number) {
+ this.data.splice(index, 1);
+ this.autoDisplay.update();
+ }
+
+ public clearData() {
+ this.data = [];
+ }
+
+ ngOnInit(): void {
+ // this.addTableData();
+ }
+
+ // ====================================================================
+ // ignore the following lines, they are not important to this demo
+ // ====================================================================
+ summary: string = "";
+ description: string = "";
+}
diff --git a/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts b/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts
index a95267a7a3..812e24524f 100644
--- a/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts
+++ b/src/app/for-internal/demo/pc/auto-display/demo-set.module.ts
@@ -1,13 +1,16 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { JigsawAutoDisplayBasicDemoModule } from "./basic/demo.module";
-import { JigsawAutoDisplayBasicDemoComponent } from "./basic/demo.component";
-
-export const routerConfig = [
- { path: "basic", component: JigsawAutoDisplayBasicDemoComponent }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routerConfig), JigsawAutoDisplayBasicDemoModule]
-})
-export class AutoDisplayDemoModule { }
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { JigsawAutoDisplayBasicDemoModule } from "./basic/demo.module";
+import { JigsawAutoDisplayBasicDemoComponent } from "./basic/demo.component";
+import { JigsawAutoDisplayModeledGraphDemoModule } from "./modeled-graph/demo.module";
+import { JigsawAutoDisplayModeledGraphDemoComponent } from "./modeled-graph/demo.component";
+
+export const routerConfig = [
+ { path: "basic", component: JigsawAutoDisplayBasicDemoComponent },
+ { path: "modeled-graph", component: JigsawAutoDisplayModeledGraphDemoComponent },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routerConfig), JigsawAutoDisplayBasicDemoModule, JigsawAutoDisplayModeledGraphDemoModule]
+})
+export class AutoDisplayDemoModule { }
diff --git a/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.css b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.css
new file mode 100644
index 0000000000..6d022375bc
--- /dev/null
+++ b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.css
@@ -0,0 +1,15 @@
+.data-tags {
+ display: flex;
+ flex-wrap: wrap;
+ width: 80%;
+}
+
+.data-tags>.jigsaw-tag-host {
+ margin-right: 4px;
+ margin-bottom: 2px;
+}
+
+.demo-container {
+ width: 100%;
+ height: 600px;
+}
\ No newline at end of file
diff --git a/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.html b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.html
new file mode 100644
index 0000000000..b0a8a1cd7b
--- /dev/null
+++ b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.html
@@ -0,0 +1,33 @@
+
+
+
+
+
Auto-display
+
+ -
+ 数据控制
+ 清空数据
+ 添加南丁玫瑰图
+ 添加环南丁玫瑰图
+ 添加太阳图
+ 添加填充饼图
+ 添加环形饼图
+ 添加双饼图
+ 添加标题饼图
+ 添加基础柱状图
+ 添加双数据柱状图
+ 添加堆叠柱状图
+
+ -
+ 数据删除
+
+ 数据源 - {{i +
+ 1}}
+
+
+
+
+
基本用法
+
+
+
\ No newline at end of file
diff --git a/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.ts b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.ts
new file mode 100644
index 0000000000..789ee8e8ef
--- /dev/null
+++ b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.component.ts
@@ -0,0 +1,136 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
+import { AutoDisplayData, JigsawAutoDisplay } from "jigsaw/public_api";
+
+@Component({
+ templateUrl: "./demo.component.html",
+ styleUrls: ['./../../assets/demo.common.css', './demo.component.css'],
+ encapsulation: ViewEncapsulation.None
+})
+export class JigsawAutoDisplayModeledGraphDemoComponent implements OnInit {
+ @ViewChild('autoDisplay')
+ public autoDisplay: JigsawAutoDisplay
+
+ public template = require('./../assets/graph-templates.json');
+ public derivedTemplate = require('./../assets/graph-derived-configs.json');
+
+ public data: AutoDisplayData[] = [];
+
+ public modeledData = {
+ data: [
+ ["Sagitar", "31954", "899.48", "177.36", "902.11", "226.06", "608.18", "4", "0.66", "1.49", "6"],
+ ["Focus", "35384", "340.84", "948.05", "653.80", "118.46", "733.72", "196", "0.62", "0.28", "7"],
+ ["Civic", "21426", "736.70", "788.63", "907.83", "877.41", "894.30", "108", "0.28", "1.26", "1"],
+ ["Sagitar", "19371", "299.50", "370.96", "633.86", "864.26", "849.42", "31", "0.06", "1.25", "4"],
+ ["Focus", "21284", "493.49", "91.13", "754.91", "945.15", "932.82", "151", "0.80", "0.38", "4"],
+ ["Civic", "44932", "909.29", "837.55", "806.17", "661.52", "548.85", "134", "1.87", "0.79", "2"],
+ ["Sagitar", "13208", "806.94", "603.21", "477.66", "277.56", "171.22", "141", "0.08", "0.16", "4"],
+ ["Focus", "39270", "624.62", "494.69", "223.36", "722.37", "465.06", "163", "0.48", "0.23", "5"],
+ ["Civic", "43419", "43.18", "957.29", "883.61", "408.84", "637.25", "59", "1.79", "1.79", "1"],
+ ["Sagitar", "10892", "426.70", "212.12", "838.93", "170.50", "683.50", "171", "1.60", "1.11", "1"]
+ ],
+ header: [
+ "Vehicle Model",
+ "Sales of Current Month",
+ "R&D Spending",
+ "Management Spending",
+ "Sales Spending",
+ "Market Spending",
+ "CRM Spending",
+ "Real-time Average Speed",
+ "Real-time Fuel Consumption",
+ "Real-time Water Temperature",
+ "Real-time Rotation Speed"
+ ],
+ field: [
+ "vehicle_model",
+ "sales",
+ "rd_spending",
+ "management_spending",
+ "sales_spending",
+ "market_spending",
+ "custom_service_spending",
+ "real_time_average_speed",
+ "real_time_fuel_consumption",
+ "real_time_water_temperature",
+ "real_time_rotating_speed"
+ ],
+ }
+
+ public tableData = {
+ data: [["January", "Nanjing", "386.07", "527.18", "286.08"], ["January", "Shanghai", "239.62", "652.33", "615.39"], ["January", "Beijing", "392.24", "83.17", "184.22"], ["January", "Nanjing", "734.41", "507.27", "968.95"], ["January", "Shanghai", "259.71", "849.52", "609.12"], ["January", "Beijing", "785.27", "157.20", "204.03"], ["January", "Nanjing", "823.10", "191.44", "331.10"], ["January", "Shanghai", "928.05", "160.84", "319.72"], ["January", "Beijing", "912.51", "912.15", "784.64"], ["January", "Nanjing", "560.46", "117.51", "102.40"], ["February", "Nanjing", "600.66", "205.14", "264.38"], ["February", "Shanghai", "570.97", "277.39", "7.65"], ["February", "Beijing", "297.38", "627.24", "186.00"], ["February", "Nanjing", "1.34", "892.55", "745.39"], ["February", "Shanghai", "499.37", "734.58", "979.80"], ["February", "Beijing", "792.43", "713.52", "377.38"], ["February", "Nanjing", "844.28", "916.30", "172.60"], ["February", "Shanghai", "961.46", "275.33", "365.07"], ["February", "Beijing", "600.49", "115.29", "455.07"], ["February", "Nanjing", "946.30", "864.81", "43.22"], ["March", "Nanjing", "23.18", "293.56", "655.54"], ["March", "Shanghai", "774.82", "219.36", "253.74"], ["March", "Beijing", "740.54", "299.28", "483.18"], ["March", "Nanjing", "903.49", "207.27", "658.76"], ["March", "Shanghai", "162.71", "115.67", "189.49"], ["March", "Beijing", "501.63", "514.37", "976.29"], ["March", "Nanjing", "736.99", "661.66", "478.93"], ["March", "Shanghai", "321.13", "769.62", "468.05"], ["March", "Beijing", "441.86", "558.60", "21.43"], ["March", "Nanjing", "927.18", "553.67", "491.35"], ["April", "Nanjing", "957.95", "88.06", "461.68"], ["April", "Shanghai", "779.49", "237.83", "133.61"], ["April", "Beijing", "334.27", "663.06", "945.51"], ["April", "Nanjing", "540.91", "320.51", "9.43"], ["April", "Shanghai", "657.80", "176.55", "910.78"], ["April", "Beijing", "390.48", "217.01", "914.32"], ["April", "Nanjing", "447.76", "74.78", "663.27"], ["April", "Shanghai", "567.01", "124.42", "497.23"], ["April", "Beijing", "389.89", "299.30", "866.62"], ["April", "Nanjing", "488.06", "500.23", "665.18"], ["May", "Nanjing", "36.03", "466.21", "898.73"], ["May", "Shanghai", "885.25", "632.42", "850.98"], ["May", "Beijing", "875.97", "915.62", "758.36"], ["May", "Nanjing", "421.96", "307.66", "480.75"], ["May", "Shanghai", "425.81", "859.81", "486.42"], ["May", "Beijing", "519.48", "850.95", "785.63"], ["May", "Nanjing", "96.54", "859.53", "23.97"], ["May", "Shanghai", "749.90", "956.04", "504.77"], ["May", "Beijing", "521.22", "553.89", "38.54"], ["May", "Nanjing", "56.05", "167.76", "754.86"], ["June", "Nanjing", "507.53", "214.25", "333.65"], ["June", "Shanghai", "252.13", "628.16", "739.51"], ["June", "Beijing", "741.21", "593.30", "369.50"], ["June", "Nanjing", "41.38", "890.52", "286.08"], ["June", "Shanghai", "930.59", "882.81", "610.56"], ["June", "Beijing", "591.42", "275.19", "833.66"], ["June", "Nanjing", "903.78", "669.77", "449.42"], ["June", "Shanghai", "912.81", "675.43", "507.20"], ["June", "Beijing", "727.28", "186.87", "329.94"], ["June", "Nanjing", "906.28", "596.51", "493.21"], ["January", "Nanjing", "937.02", "312.74", "905.10"], ["January", "Shanghai", "964.81", "987.76", "178.20"], ["January", "Beijing", "14.41", "939.38", "189.30"], ["January", "Nanjing", "69.58", "501.00", "678.76"], ["January", "Shanghai", "755.31", "126.40", "48.35"], ["January", "Beijing", "922.33", "430.88", "248.28"], ["January", "Nanjing", "350.26", "304.21", "596.49"], ["January", "Shanghai", "105.79", "354.91", "89.63"], ["January", "Beijing", "517.00", "570.65", "439.39"], ["January", "Nanjing", "38.83", "277.79", "250.56"], ["February", "Nanjing", "32.25", "733.27", "360.64"], ["February", "Shanghai", "193.94", "464.36", "675.74"], ["February", "Beijing", "274.67", "962.15", "911.90"], ["February", "Nanjing", "188.11", "750.50", "867.15"], ["February", "Shanghai", "276.19", "716.48", "243.22"], ["February", "Beijing", "484.04", "697.49", "506.96"], ["February", "Nanjing", "993.74", "465.06", "555.41"], ["February", "Shanghai", "659.29", "641.66", "737.02"], ["February", "Beijing", "123.77", "448.44", "122.04"], ["February", "Nanjing", "222.90", "481.97", "414.84"], ["March", "Nanjing", "87.90", "286.56", "616.55"], ["March", "Shanghai", "872.68", "495.67", "537.07"], ["March", "Beijing", "842.38", "460.94", "806.54"], ["March", "Nanjing", "718.82", "512.87", "349.44"], ["March", "Shanghai", "352.17", "874.48", "93.46"], ["March", "Beijing", "403.58", "107.73", "9.64"], ["March", "Nanjing", "299.33", "325.07", "456.36"], ["March", "Shanghai", "239.82", "88.84", "347.58"], ["March", "Beijing", "387.88", "983.93", "95.56"], ["March", "Nanjing", "193.32", "569.20", "231.72"], ["April", "Nanjing", "267.73", "657.81", "145.74"], ["April", "Shanghai", "383.02", "244.48", "184.30"], ["April", "Beijing", "480.75", "690.77", "94.72"], ["April", "Nanjing", "402.79", "981.61", "638.83"], ["April", "Shanghai", "959.80", "890.91", "858.97"], ["April", "Beijing", "534.88", "51.88", "783.74"], ["April", "Nanjing", "870.24", "839.62", "88.06"], ["April", "Shanghai", "752.69", "356.15", "298.25"], ["April", "Beijing", "670.39", "274.71", "966.71"], ["April", "Nanjing", "411.67", "528.39", "325.33"]],
+ header: ["Sales Month", "City", "R&D Spending", "Management Spending", "Sales Spending"],
+ field: ["time", "city", "rd_spending", "management_spending", "sales_spending"]
+ }
+
+ public addModeledPieGraph(index) {
+ const data: any = {
+ renderAs: 'modeled-echarts',
+ initData: {
+ type: 'pie',
+ template: index,
+ data: this.modeledData.data,
+ header: this.modeledData.header,
+ field: this.modeledData.field,
+ dimensionField: "vehicle_model",
+ indicatorsField: ["sales", "management_spending"],
+ },
+ }
+ this._getModeledPieGraph(data);
+ this.data.push(data);
+ this.autoDisplay.update();
+ }
+
+ public addModeledRectangulartGraph(index) {
+ let indicatorsField = ["rd_spending"];
+ if (index == 24) {
+ indicatorsField = ["rd_spending", "management_spending"];
+ } else if (index == 25) {
+ indicatorsField = ["rd_spending", "management_spending", "sales_spending"];
+ }
+ const stack = index == 25 ? 'month' : "";
+ const data: any = {
+ renderAs: 'modeled-echarts',
+ initData: {
+ type: 'bar',
+ template: index,
+ data: this.tableData.data,
+ header: this.tableData.header,
+ field: this.tableData.field,
+ axisField: "time",
+ dimensionField: "city",
+ indicatorsField: indicatorsField,
+ stack: stack
+ },
+ }
+ this._getModeledPieGraph(data);
+ this.data.push(data);
+ this.autoDisplay.update();
+ }
+
+ private _getModeledPieGraph(data) {
+ const index = data.initData.template;
+ data.initData.template = eval("(" + this.derivedTemplate[index].option + ")");
+ console.log(data);
+ return data;
+ }
+
+ public removeData(index: number) {
+ this.data.splice(index, 1);
+ this.autoDisplay.update();
+ }
+
+ public clearData() {
+ this.data = [];
+ }
+
+ ngOnInit(): void {
+ // this.addTableData();
+ console.log(this.derivedTemplate);
+ }
+
+ // ====================================================================
+ // ignore the following lines, they are not important to this demo
+ // ====================================================================
+ summary: string = "";
+ description: string = "";
+}
diff --git a/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.module.ts b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.module.ts
new file mode 100644
index 0000000000..fb8f288fa1
--- /dev/null
+++ b/src/app/for-internal/demo/pc/auto-display/modeled-graph/demo.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { JigsawDemoDescriptionModule } from "app/for-internal/description/demo-description";
+import { JigsawAutoDisplayModule, JigsawButtonModule, JigsawHeaderModule, JigsawTagModule } from "jigsaw/public_api";
+import { JigsawAutoDisplayModeledGraphDemoComponent } from "./demo.component";
+
+@NgModule({
+ imports: [JigsawHeaderModule, CommonModule, JigsawDemoDescriptionModule, JigsawAutoDisplayModule, JigsawButtonModule,
+ JigsawTagModule],
+ declarations: [JigsawAutoDisplayModeledGraphDemoComponent],
+ exports: [JigsawAutoDisplayModeledGraphDemoComponent]
+})
+export class JigsawAutoDisplayModeledGraphDemoModule { }
diff --git a/src/app/for-internal/demo/pc/modeled-graph/demo-set.module.ts b/src/app/for-internal/demo/pc/modeled-graph/demo-set.module.ts
index c620290e76..105173e743 100644
--- a/src/app/for-internal/demo/pc/modeled-graph/demo-set.module.ts
+++ b/src/app/for-internal/demo/pc/modeled-graph/demo-set.module.ts
@@ -4,13 +4,16 @@ import { FunnelGraphComponent } from "./funnel/demo.component";
import { FunnelGraphModule } from "./funnel/demo.module";
import { PieGraphDemoComponent } from "./pie/demo.component";
import { PieGraphDemoModule } from "./pie/demo.module";
+import { RectangularGraphDemoComponent } from "./rectangular/demo.component";
+import { RectangularGraphDemoModule } from "./rectangular/demo.module";
export const routerConfig = [
{ path: "pie", component: PieGraphDemoComponent },
- { path: "funnel", component: FunnelGraphComponent }
+ { path: "funnel", component: FunnelGraphComponent },
+ { path: "rectangular", component: RectangularGraphDemoComponent },
];
@NgModule({
- imports: [RouterModule.forChild(routerConfig), FunnelGraphModule, PieGraphDemoModule]
+ imports: [RouterModule.forChild(routerConfig), FunnelGraphModule, PieGraphDemoModule, RectangularGraphDemoModule]
})
export class ModeledGraphDemoModule { }
diff --git a/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.html b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.html
new file mode 100644
index 0000000000..863fdc78dc
--- /dev/null
+++ b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
柱状图
+
+
+
\ No newline at end of file
diff --git a/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.ts b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.ts
new file mode 100644
index 0000000000..1ab9f69e74
--- /dev/null
+++ b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.component.ts
@@ -0,0 +1,377 @@
+import { Component } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { ModeledRectangularGraphData } from "jigsaw/public_api";
+
+@Component({
+ templateUrl: './demo.component.html'
+})
+export class RectangularGraphDemoComponent {
+ public rectangularGraphData: ModeledRectangularGraphData;
+
+ constructor(public http: HttpClient) {
+ this.rectangularGraphData = new ModeledRectangularGraphData();
+ this.rectangularGraphData.data = [
+ ["January", "Nanjing", "115.68"],
+ ["January", "Shanghai", "608.00"],
+ ["January", "Beijing", "70.02"],
+ ["January", "Nanjing", "355.14"],
+ ["January", "Shanghai", "694.53"],
+ ["January", "Beijing", "235.41"],
+ ["January", "Nanjing", "409.99"],
+ ["January", "Shanghai", "495.87"],
+ ["January", "Beijing", "972.02"],
+ ["January", "Nanjing", "129.55"],
+ ["February", "Nanjing", "446.71"],
+ ["February", "Shanghai", "612.56"],
+ ["February", "Beijing", "972.08"],
+ ["February", "Nanjing", "148.53"],
+ ["February", "Shanghai", "110.31"],
+ ["February", "Beijing", "773.81"],
+ ["February", "Nanjing", "548.24"],
+ ["February", "Shanghai", "923.53"],
+ ["February", "Beijing", "165.43"],
+ ["February", "Nanjing", "72.80"],
+ ["March", "Nanjing", "351.10"],
+ ["March", "Shanghai", "979.78"],
+ ["March", "Beijing", "931.23"],
+ ["March", "Nanjing", "112.31"],
+ ["March", "Shanghai", "686.67"],
+ ["March", "Beijing", "435.14"],
+ ["March", "Nanjing", "767.87"],
+ ["March", "Shanghai", "594.32"],
+ ["March", "Beijing", "255.47"],
+ ["March", "Nanjing", "521.48"],
+ ["April", "Nanjing", "401.27"],
+ ["April", "Shanghai", "71.27"],
+ ["April", "Beijing", "885.27"],
+ ["April", "Nanjing", "316.03"],
+ ["April", "Shanghai", "151.79"],
+ ["April", "Beijing", "205.06"],
+ ["April", "Nanjing", "916.09"],
+ ["April", "Shanghai", "303.21"],
+ ["April", "Beijing", "754.66"],
+ ["April", "Nanjing", "274.61"],
+ ["May", "Nanjing", "612.02"],
+ ["May", "Shanghai", "985.26"],
+ ["May", "Beijing", "590.04"],
+ ["May", "Nanjing", "44.54"],
+ ["May", "Shanghai", "51.11"],
+ ["May", "Beijing", "350.48"],
+ ["May", "Nanjing", "162.03"],
+ ["May", "Shanghai", "776.87"],
+ ["May", "Beijing", "302.25"],
+ ["May", "Nanjing", "470.78"],
+ ["June", "Nanjing", "481.01"],
+ ["June", "Shanghai", "850.36"],
+ ["June", "Beijing", "516.43"],
+ ["June", "Nanjing", "167.12"],
+ ["June", "Shanghai", "851.92"],
+ ["June", "Beijing", "461.48"],
+ ["June", "Nanjing", "549.01"],
+ ["June", "Shanghai", "205.12"],
+ ["June", "Beijing", "386.23"],
+ ["June", "Nanjing", "279.92"],
+ ["January", "Nanjing", "164.05"],
+ ["January", "Shanghai", "986.70"],
+ ["January", "Beijing", "472.35"],
+ ["January", "Nanjing", "939.87"],
+ ["January", "Shanghai", "686.13"],
+ ["January", "Beijing", "937.38"],
+ ["January", "Nanjing", "783.67"],
+ ["January", "Shanghai", "62.02"],
+ ["January", "Beijing", "188.91"],
+ ["January", "Nanjing", "34.67"],
+ ["February", "Nanjing", "727.15"],
+ ["February", "Shanghai", "148.33"],
+ ["February", "Beijing", "288.39"],
+ ["February", "Nanjing", "961.23"],
+ ["February", "Shanghai", "178.68"],
+ ["February", "Beijing", "810.04"],
+ ["February", "Nanjing", "180.64"],
+ ["February", "Shanghai", "331.40"],
+ ["February", "Beijing", "912.26"],
+ ["February", "Nanjing", "268.26"],
+ ["March", "Nanjing", "400.60"],
+ ["March", "Shanghai", "911.55"],
+ ["March", "Beijing", "583.63"],
+ ["March", "Nanjing", "108.06"],
+ ["March", "Shanghai", "571.05"],
+ ["March", "Beijing", "174.45"],
+ ["March", "Nanjing", "944.43"],
+ ["March", "Shanghai", "989.20"],
+ ["March", "Beijing", "913.66"],
+ ["March", "Nanjing", "346.83"],
+ ["April", "Nanjing", "353.70"],
+ ["April", "Shanghai", "397.01"],
+ ["April", "Beijing", "443.06"],
+ ["April", "Nanjing", "604.45"],
+ ["April", "Shanghai", "408.74"],
+ ["April", "Beijing", "612.79"],
+ ["April", "Nanjing", "843.55"],
+ ["April", "Shanghai", "265.88"],
+ ["April", "Beijing", "814.23"],
+ ["April", "Nanjing", "909.38"]
+ ];
+ this.rectangularGraphData.header = [
+ "Sales Month",
+ "City",
+ "R&D Spending"
+ ];
+ this.rectangularGraphData.field = [
+ "time",
+ "city",
+ "rd_spending"
+ ];
+
+ this.rectangularGraphData.dimensionField = "city";
+ // this.rectangularGraphData.legendSource = "kpi";
+ this.rectangularGraphData.dimensions = [];
+ // this.rectangularGraphData.yAxis2 = {
+ // "position": "right",
+ // "name": "Management Spending",
+ // "nameLocation": "end",
+ // "type": "value"
+ // };
+ // this.rectangularGraphData.yAxis1 = {
+ // "position": "left",
+ // "name": "R&D Spending",
+ // "nameLocation": "end",
+ // "type": "value"
+ // };
+ this.rectangularGraphData.xAxis = {
+ "field": "time",
+ "style": {
+ "name": "",
+ "nameLocation": "end",
+ "type": "category"
+ }
+ };
+ this.rectangularGraphData.indicators = [
+ {
+ "aggregateBy": "average",
+ "field": "rd_spending",
+ "name": "R&D Spending",
+ "yAxisIndex": 0,
+ "shade": "bar",
+ "stack": ""
+ }
+ ];
+ this.rectangularGraphData.template.option = {
+ "color": [
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#3B69FF"
+ },
+ {
+ "offset": 1,
+ "color": "#5096EE"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#EF6F61"
+ },
+ {
+ "offset": 1,
+ "color": "#FF9C6D"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#71C032"
+ },
+ {
+ "offset": 1,
+ "color": "#51E5A5"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#FAAA55"
+ },
+ {
+ "offset": 1,
+ "color": "#FCD549"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#D142D9"
+ },
+ {
+ "offset": 1,
+ "color": "#F82979"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#26BFA5"
+ },
+ {
+ "offset": 1,
+ "color": "#31B7E8"
+ }
+ ],
+ "global": false
+ },
+ {
+ "type": "linear",
+ "x": 0,
+ "y": 0,
+ "x2": 1,
+ "y2": 1,
+ "colorStops": [
+ {
+ "offset": 0,
+ "color": "#816AFF"
+ },
+ {
+ "offset": 1,
+ "color": "#BA56E0"
+ }
+ ],
+ "global": false
+ }
+ ],
+ "title": {
+ "x": "center",
+ "textStyle": {},
+ "subtextStyle": {},
+ "show": true,
+ "text": "基础柱状图",
+ "titleChecked": true,
+ "textAlign": "auto",
+ "textVerticalAlign": "auto",
+ "left": "center"
+ },
+ "tooltip": {
+ "trigger": "axis",
+ "axisPointer": {
+ "type": "cross",
+ "crossStyle": {
+ "color": "#999"
+ }
+ },
+ "extraCssText": "z-index: 999",
+ "showDelay": 0,
+ "hideDelay": 0,
+ "transitionDuration": 0
+ },
+ "legend": {
+ "data": null,
+ "show": true,
+ "type": "scroll",
+ "orient": "horizontal",
+ "left": "center",
+ "top": "25"
+ },
+ "xAxis": {
+ "type": "category",
+ "axisPointer": {
+ "type": "shadow"
+ }
+ },
+ "yAxis": [
+ {
+ "type": "value",
+ "splitLine": {
+ "show": false
+ },
+ "axisLabel": {
+ "formatter": "{value}"
+ }
+ },
+ {
+ "type": "value",
+ "axisLabel": {
+ "formatter": "{value}"
+ }
+ }
+ ],
+ "dataZoom": [
+ {
+ "type": "slider",
+ "show": false,
+ "start": 0,
+ "end": 100
+ },
+ {
+ "type": "inside",
+ "disabled": true,
+ "start": 0,
+ "end": 100
+ },
+ {
+ "type": "inside",
+ "disabled": true,
+ "start": 0,
+ "end": 100
+ }
+ ],
+ "grid": {
+ "bottom": 30,
+ "show": false
+ },
+ };
+ this.rectangularGraphData.refresh();
+ console.log(this.rectangularGraphData);
+ }
+
+ // ====================================================================
+ // ignore the following lines, they are not important to this demo
+ // ====================================================================
+ summary: string = '这个demo展示了如何使用饼图';
+ description: string = '';
+}
diff --git a/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.module.ts b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.module.ts
new file mode 100644
index 0000000000..72a869468e
--- /dev/null
+++ b/src/app/for-internal/demo/pc/modeled-graph/rectangular/demo.module.ts
@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {JigsawGraphModule, JigsawHeaderModule} from "jigsaw/public_api";
+import {JigsawDemoDescriptionModule} from "app/for-internal/description/demo-description";
+import {RectangularGraphDemoComponent} from "./demo.component";
+
+@NgModule({
+ declarations: [RectangularGraphDemoComponent],
+ exports: [RectangularGraphDemoComponent],
+ imports: [JigsawGraphModule, JigsawDemoDescriptionModule, JigsawHeaderModule, JigsawHeaderModule]
+})
+export class RectangularGraphDemoModule {
+
+}
diff --git a/src/jigsaw/pc-components/auto-display/inner-component.ts b/src/jigsaw/pc-components/auto-display/inner-component.ts
index 7b5e182b01..d896d6c179 100644
--- a/src/jigsaw/pc-components/auto-display/inner-component.ts
+++ b/src/jigsaw/pc-components/auto-display/inner-component.ts
@@ -15,6 +15,7 @@ import {
import {AbstractJigsawViewBase, JigsawRendererHost} from "../../common/common";
import {
AutoDisplayGraphRenderer,
+ AutoDisplayModeledGraphRenderer,
AutoDisplayRendererBase,
AutoDisplayTableRenderer,
DisplayRendererBase
@@ -133,6 +134,8 @@ export class JigsawAutoDisplayInnerBase extends JigsawDisplayInnerBase implement
switch (renderer) {
case 'origin-echarts':
return AutoDisplayGraphRenderer;
+ case 'modeled-echarts':
+ return AutoDisplayModeledGraphRenderer;
case 'table':
return AutoDisplayTableRenderer;
default:
diff --git a/src/jigsaw/pc-components/auto-display/renderer/auto-display-renderer.ts b/src/jigsaw/pc-components/auto-display/renderer/auto-display-renderer.ts
index 8a14913869..9ad113fef8 100644
--- a/src/jigsaw/pc-components/auto-display/renderer/auto-display-renderer.ts
+++ b/src/jigsaw/pc-components/auto-display/renderer/auto-display-renderer.ts
@@ -1,92 +1,155 @@
-import {
- Directive,
- Injector,
- OnInit,
- OnDestroy,
- ChangeDetectionStrategy,
- Component,
- Input,
- NgModule,
-} from "@angular/core"
-import { CommonModule } from "@angular/common";
-import { JigsawTrustedHtmlModule } from "../../../common/directive/trusted-html/trusted-html";
-import { JigsawTableModule } from "../../table/table";
-import { JigsawGraphModule } from "../../graph/index";
-import { AbstractGraphData, GraphData } from "../../../common/core/data/graph-data";
-import { TableData } from "../../../common/core/data/table-data";
-import { CommonUtils } from "../../../common/core/utils/common-utils";
-
-@Directive()
-export abstract class DisplayRendererBase implements OnInit, OnDestroy {
- constructor(// @RequireMarkForCheck 需要用到，勿删
- protected _injector: Injector) {
- }
-
- /**
- * @NoMarkForCheckRequired
- */
- @Input()
- public initData: any;
-
- ngOnInit(): void {
- }
-
- ngOnDestroy(): void {
- }
-}
-
-@Directive()
-export abstract class AutoDisplayRendererBase extends DisplayRendererBase implements OnInit, OnDestroy {
-}
-
-/**
- * @internal
- * */
-@Component({
- templateUrl: './auto-display-table.html',
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AutoDisplayTableRenderer extends AutoDisplayRendererBase {
- public data: TableData;
-
- ngOnInit() {
- super.ngOnInit();
- this.data = new TableData();
- this.data.fromObject(this.initData);
- }
-}
-
-/**
- * @internal
- * */
-@Component({
- templateUrl: './auto-display-graph.html',
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AutoDisplayGraphRenderer extends AutoDisplayRendererBase {
- public data: AbstractGraphData;
-
- ngOnInit() {
- super.ngOnInit();
- if (CommonUtils.isUndefined(this.initData?.tooltip)) {
- return;
- }
- if (!this.initData.tooltip.hasOwnProperty('showDelay')) {
- this.initData.tooltip.showDelay = 0;
- }
- if (!this.initData.tooltip.hasOwnProperty('hideDelay')) {
- this.initData.tooltip.hideDelay = 0;
- }
- if (!this.initData.tooltip.hasOwnProperty('transitionDuration')) {
- this.initData.tooltip.transitionDuration = 0;
- }
- this.data = new GraphData(this.initData);
- }
-}
-
-@NgModule({
- declarations: [AutoDisplayTableRenderer, AutoDisplayGraphRenderer],
- imports: [CommonModule, JigsawTrustedHtmlModule, JigsawTableModule, JigsawGraphModule]
-})
-export class JigsawAutoDisplayRendererModule {
-}
+import {
+ Directive,
+ Injector,
+ OnInit,
+ OnDestroy,
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ NgModule,
+ Type,
+} from "@angular/core"
+import { CommonModule } from "@angular/common";
+import { JigsawTrustedHtmlModule } from "../../../common/directive/trusted-html/trusted-html";
+import { JigsawTableModule } from "../../table/table";
+import { JigsawGraphModule } from "../../graph/index";
+import { AbstractGraphData, GraphData } from "../../../common/core/data/graph-data";
+import { AbstractModeledGraphData, ModeledPieGraphData, ModeledRectangularGraphData } from "../../../common/core/data/modeled-graph-data";
+import { TableData } from "../../../common/core/data/table-data";
+import { CommonUtils } from "../../../common/core/utils/common-utils";
+
+@Directive()
+export abstract class DisplayRendererBase implements OnInit, OnDestroy {
+ constructor(// @RequireMarkForCheck 需要用到，勿删
+ protected _injector: Injector) {
+ }
+
+ /**
+ * @NoMarkForCheckRequired
+ */
+ @Input()
+ public initData: any;
+
+ ngOnInit(): void {
+ }
+
+ ngOnDestroy(): void {
+ }
+}
+
+@Directive()
+export abstract class AutoDisplayRendererBase extends DisplayRendererBase implements OnInit, OnDestroy {
+}
+
+/**
+ * @internal
+ * */
+@Component({
+ templateUrl: './auto-display-table.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AutoDisplayTableRenderer extends AutoDisplayRendererBase {
+ public data: TableData;
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.data = new TableData();
+ this.data.fromObject(this.initData);
+ }
+}
+
+/**
+ * @internal
+ * */
+@Component({
+ templateUrl: './auto-display-graph.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AutoDisplayGraphRenderer extends AutoDisplayRendererBase {
+ public data: AbstractGraphData;
+
+ ngOnInit() {
+ super.ngOnInit();
+ if (CommonUtils.isUndefined(this.initData?.tooltip)) {
+ return;
+ }
+ if (!this.initData.tooltip.hasOwnProperty('showDelay')) {
+ this.initData.tooltip.showDelay = 0;
+ }
+ if (!this.initData.tooltip.hasOwnProperty('hideDelay')) {
+ this.initData.tooltip.hideDelay = 0;
+ }
+ if (!this.initData.tooltip.hasOwnProperty('transitionDuration')) {
+ this.initData.tooltip.transitionDuration = 0;
+ }
+ this.data = new GraphData(this.initData);
+ }
+}
+
+/**
+ * @internal
+ * */
+@Component({
+ templateUrl: './auto-display-graph.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AutoDisplayModeledGraphRenderer extends AutoDisplayRendererBase {
+ public data;
+
+ ngOnInit() {
+ super.ngOnInit();
+ console.log(this.initData);
+ switch (this.initData.type) {
+ case 'pie':
+ this.data = new ModeledPieGraphData();
+ this.data.data = this.initData.data;
+ this.data.header = this.initData.header;
+ this.data.field = this.initData.field;
+ this.data.template.option = {
+ "tooltip": this.initData.template.tooltip,
+ "legend": this.initData.template.legend,
+ "title": this.initData.template.title,
+ }
+ this.data["series"] = this.initData.template.series;
+ this.data["series"].map((series, index) => {
+ series.dimensionField = this.initData.dimensionField;
+ series.indicators = [{ field: this.initData.indicatorsField[index], aggregateBy: "average" }]
+ });
+
+ console.log(this.data);
+ this.data.refresh();
+ return;
+ case 'bar':
+ this.data = new ModeledRectangularGraphData();
+ this.data.data = this.initData.data;
+ this.data.header = this.initData.header;
+ this.data.field = this.initData.field;
+ this.data.template.option = {
+ "tooltip": this.initData.template.tooltip,
+ "legend": this.initData.template.legend,
+ "title": this.initData.template.title,
+ }
+ this.data.dimensionField = this.initData.dimensionField;
+ this.data.xAxis = { "field": this.initData.axisField };
+ this.data.indicators = this.initData.indicatorsField.map(indicator => ({
+ "aggregateBy": "average",
+ "field": indicator,
+ "shade": "bar",
+ "stack": this.initData.stack ? this.initData.stack : ""
+ }));
+
+ console.log(this.data);
+ this.data.refresh();
+ return;
+ default:
+ return;
+ }
+ }
+}
+
+@NgModule({
+ declarations: [AutoDisplayTableRenderer, AutoDisplayGraphRenderer, AutoDisplayModeledGraphRenderer],
+ imports: [CommonModule, JigsawTrustedHtmlModule, JigsawTableModule, JigsawGraphModule]
+})
+export class JigsawAutoDisplayRendererModule {
+}