Skip to content

Commit 025179c

Browse files
xuwei-fit2cloudxuwei-fit2cloud
committed
feat: add g2-ssr
1 parent a1cd1e6 commit 025179c

File tree

9 files changed

+524
-0
lines changed

9 files changed

+524
-0
lines changed

‎g2-ssr/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
components.d.ts
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
package-lock.json

‎g2-ssr/Arial_Unicode.ttf‎

22.2 MB
Binary file not shown.

‎g2-ssr/app.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const http = require('http');
2+
const url = require("url");
3+
const util = require('util');
4+
const { createChart } = require('@antv/g2-ssr');
5+
const port = 3000;
6+
const { getPieOptions } = require('./charts/pie.js');
7+
const { getLineOptions } = require('./charts/line.js');
8+
const { getColumnOptions } = require('./charts/column.js');
9+
const { getBarOptions } = require('./charts/bar.js');
10+
11+
http.createServer((req, res) => {
12+
res.statusCode = 200,
13+
res.setHeader('Content-Type', 'text/plain;charset=utf-8');
14+
if (req.method === 'GET') {
15+
toGet(req, res);
16+
} else if (req.method === 'POST') {
17+
toPost(req, res);
18+
}
19+
}).listen(port, () => {
20+
console.log(`Server listening on: http://localhost:${port}`);
21+
});
22+
23+
function getOptions(type, axis, data) {
24+
25+
const base_options = {
26+
width: 640,
27+
height: 480,
28+
imageType: 'png',
29+
theme: {
30+
view: {
31+
viewFill: '#FFFFFF',
32+
},
33+
}
34+
}
35+
36+
switch (type) {
37+
case 'bar':
38+
return getBarOptions(base_options, axis, data);
39+
case 'column':
40+
return getColumnOptions(base_options, axis, data);
41+
case 'line':
42+
return getLineOptions(base_options, axis, data);
43+
case 'pie':
44+
return getPieOptions(base_options, axis, data);
45+
}
46+
47+
return base_options
48+
}
49+
50+
51+
// 创建 Chart 和配置
52+
async function GenerateCharts(obj) {
53+
console.log(obj)
54+
const options = getOptions(obj.type, JSON.parse(obj.axis), JSON.parse(obj.data));
55+
console.log(options);
56+
const chart = await createChart(options);
57+
58+
// 导出
59+
chart.exportToFile(obj.path || 'chart');
60+
// -> chart.png
61+
62+
chart.toBuffer();
63+
}
64+
65+
// -> get buffer
66+
67+
68+
//获取GET请求内容
69+
function toGet(req, res) {
70+
let data = 'GET请求内容：\n' + util.inspect(url.parse(req.url));
71+
res.end(data);
72+
console.log(data);
73+
}
74+
75+
//获取POST请求内容、cookie
76+
function toPost(req, res) {
77+
req.on('data', async function (chunk) {
78+
await GenerateCharts(JSON.parse(chunk))
79+
res.end('complete');
80+
});
81+
}

‎g2-ssr/charts/bar.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
const {checkIsPercent} = require("./utils");
2+
3+
function getBarOptions(baseOptions, axis, data) {
4+
5+
const x = axis.filter((item) => item.type === 'x')
6+
const y = axis.filter((item) => item.type === 'y')
7+
const series = axis.filter((item) => item.type === 'series')
8+
9+
if (x.length === 0 || y.length === 0) {
10+
return
11+
}
12+
13+
const _data = checkIsPercent(y[0], data)
14+
15+
const options = {
16+
...baseOptions,
17+
type: 'interval',
18+
data: _data.data,
19+
coordinate: {transform: [{type: 'transpose'}]},
20+
encode: {
21+
x: x[0].value,
22+
y: y[0].value,
23+
color: series.length > 0 ? series[0].value : undefined,
24+
},
25+
style: {
26+
radiusTopLeft: (d) => {
27+
if (d[y[0].value] && d[y[0].value] > 0) {
28+
return 4
29+
}
30+
return 0
31+
},
32+
radiusTopRight: (d) => {
33+
if (d[y[0].value] && d[y[0].value] > 0) {
34+
return 4
35+
}
36+
return 0
37+
},
38+
radiusBottomLeft: (d) => {
39+
if (d[y[0].value] && d[y[0].value] < 0) {
40+
return 4
41+
}
42+
return 0
43+
},
44+
radiusBottomRight: (d) => {
45+
if (d[y[0].value] && d[y[0].value] < 0) {
46+
return 4
47+
}
48+
return 0
49+
},
50+
},
51+
axis: {
52+
x: {
53+
title: x[0].name,
54+
labelFontSize: 12,
55+
labelAutoHide: {
56+
type: 'hide',
57+
keepHeader: true,
58+
keepTail: true,
59+
},
60+
labelAutoRotate: false,
61+
labelAutoWrap: true,
62+
labelAutoEllipsis: true,
63+
},
64+
y: {title: y[0].name},
65+
},
66+
scale: {
67+
x: {
68+
nice: true,
69+
},
70+
y: {
71+
nice: true,
72+
},
73+
},
74+
interaction: {
75+
elementHighlight: {background: true},
76+
},
77+
tooltip: (data) => {
78+
if (series.length > 0) {
79+
return {
80+
name: data[series[0].value],
81+
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
82+
}
83+
} else {
84+
return {name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`}
85+
}
86+
},
87+
labels: [
88+
{
89+
text: (data) => {
90+
const value = data[y[0].value]
91+
if (value === undefined || value === null) {
92+
return ''
93+
}
94+
return `${value}${_data.isPercent ? '%' : ''}`
95+
},
96+
transform: [
97+
{type: 'contrastReverse'},
98+
{type: 'exceedAdjust'},
99+
{type: 'overlapHide'},
100+
],
101+
},
102+
],
103+
}
104+
105+
if (series.length > 0) {
106+
options.transform = [{type: 'stackY'}]
107+
}
108+
109+
return options
110+
}
111+
112+
module.exports = {getBarOptions}

‎g2-ssr/charts/column.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const {checkIsPercent} = require("./utils");
2+
3+
function getColumnOptions(baseOptions, axis, data) {
4+
5+
const x = axis.filter((item) => item.type === 'x')
6+
const y = axis.filter((item) => item.type === 'y')
7+
const series = axis.filter((item) => item.type === 'series')
8+
9+
if (x.length === 0 || y.length === 0) {
10+
return
11+
}
12+
13+
const _data = checkIsPercent(y[0], data)
14+
15+
const options = {
16+
...baseOptions,
17+
type: 'interval',
18+
data: _data.data,
19+
encode: {
20+
x: x[0].value,
21+
y: y[0].value,
22+
color: series.length > 0 ? series[0].value : undefined,
23+
},
24+
style: {
25+
radiusTopLeft: (d) => {
26+
if (d[y[0].value] && d[y[0].value] > 0) {
27+
return 4
28+
}
29+
return 0
30+
},
31+
radiusTopRight: (d) => {
32+
if (d[y[0].value] && d[y[0].value] > 0) {
33+
return 4
34+
}
35+
return 0
36+
},
37+
radiusBottomLeft: (d) => {
38+
if (d[y[0].value] && d[y[0].value] < 0) {
39+
return 4
40+
}
41+
return 0
42+
},
43+
radiusBottomRight: (d) => {
44+
if (d[y[0].value] && d[y[0].value] < 0) {
45+
return 4
46+
}
47+
return 0
48+
},
49+
},
50+
axis: {
51+
x: {
52+
title: x[0].name,
53+
labelFontSize: 12,
54+
labelAutoHide: {
55+
type: 'hide',
56+
keepHeader: true,
57+
keepTail: true,
58+
},
59+
labelAutoRotate: false,
60+
labelAutoWrap: true,
61+
labelAutoEllipsis: true,
62+
},
63+
y: {title: y[0].name},
64+
},
65+
scale: {
66+
x: {
67+
nice: true,
68+
},
69+
y: {
70+
nice: true,
71+
},
72+
},
73+
interaction: {
74+
elementHighlight: {background: true},
75+
},
76+
tooltip: (data) => {
77+
if (series.length > 0) {
78+
return {
79+
name: data[series[0].value],
80+
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
81+
}
82+
} else {
83+
return {name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`}
84+
}
85+
},
86+
labels: [
87+
{
88+
text: (data) => {
89+
const value = data[y[0].value]
90+
if (value === undefined || value === null) {
91+
return ''
92+
}
93+
return `${value}${_data.isPercent ? '%' : ''}`
94+
},
95+
position: 'top',
96+
dy: -25,
97+
transform: [
98+
{type: 'contrastReverse'},
99+
{type: 'exceedAdjust'},
100+
{type: 'overlapHide'},
101+
],
102+
},
103+
],
104+
}
105+
106+
if (series.length > 0) {
107+
options.transform = [{type: 'stackY'}]
108+
}
109+
110+
return options
111+
}
112+
113+
module.exports = {getColumnOptions}

0 commit comments

Comments
 (0)