Skip to content

Commit f5e6afb

Browse files
BBSQQpddpd
BBSQQ
authored and
pddpd
committed
docs(ntv): site examples
1 parent eb2ee9c commit f5e6afb

26 files changed

+2128
-23
lines changed

‎playground/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"antd": "^4.8.0",
5656
"antv-site-demo-rc": "0.2.4",
5757
"csstype": "^3.0.5",
58-
"lodash": "^4.17.20",
58+
"lodash": "^4.17.21",
5959
"react": "^17.0.2",
6060
"react-dom": "^17.0.2",
6161
"react-json-view": "^1.19.1",

‎site/.dumi/global.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ if (window) {
1515
(window as any).classnames = require('classnames');
1616
(window as any).pica = require('pica');
1717
(window as any).qrcode = require('qrcode');
18+
(window as any).mockjs = require('mockjs');
19+
(window as any).moment = require('moment');
20+
(window as any).lodash = require('lodash');
1821
(window as any).reactVega = require('react-vega');
1922
(window as any).reactColor = require('react-color');
2023
(window as any).thumbnails = require('@antv/thumbnails');
@@ -27,6 +30,7 @@ if (window) {
2730
(window as any).g2plot = require('@antv/g2plot');
2831

2932
(window as any).ava = require('../../packages/ava/src');
33+
(window as any).avaReact = require('../../packages/ava-react/src');
3034

3135
require('antd/lib/alert/style/index.css');
32-
}
36+
}

‎site/.dumirc.ts‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,31 @@ export default defineConfig({
99
defaultLanguage: 'zh',
1010
siteUrl: homepage,
1111
isAntVSite: false,
12-
githubUrl: repository.url,
12+
githubUrl: repository.url,
1313
// 是否显示搜索框
14-
showSearch: true,
15-
// 是否显示头部的 GitHub icon
16-
showGithubCorner: true,
17-
// 是否显示 GitHub star 数量
18-
showGithubStars: true,
19-
// 是否显示 AntV 产品汇总的卡片
20-
showAntVProductsCard: true,
21-
// 是否显示官网语言切换
22-
showLanguageSwitcher: true,
23-
// 是否显示头部菜单的微信公众号
24-
showWxQrcode: true,
25-
// 是否在 demo 页展示图表视图切换
26-
showChartResize: true,
27-
// 是否在 demo 页展示API文档
28-
showAPIDoc: true,
14+
showSearch: true,
15+
// 是否显示头部的 GitHub icon
16+
showGithubCorner: true,
17+
// 是否显示 GitHub star 数量
18+
showGithubStars: true,
19+
// 是否显示 AntV 产品汇总的卡片
20+
showAntVProductsCard: true,
21+
// 是否显示官网语言切换
22+
showLanguageSwitcher: true,
23+
// 是否显示头部菜单的微信公众号
24+
showWxQrcode: true,
25+
// 是否在 demo 页展示图表视图切换
26+
showChartResize: true,
27+
// 是否在 demo 页展示API文档
28+
showAPIDoc: true,
2929
// 添加国内镜像链接
3030
internalSite: {
3131
url: 'https://ava.antv.antgroup.com',
3232
name: {
3333
zh: '国内镜像',
3434
en: 'China Mirror',
3535
},
36-
},
36+
},
3737
navs: [
3838
{
3939
slug: 'docs/guide',
@@ -147,7 +147,7 @@ export default defineConfig({
147147
zh: 'DataWizard',
148148
en: 'DataWizard',
149149
},
150-
order: 3,
150+
order: 3,
151151
},
152152
{
153153
slug: 'api/chart-advisor',
@@ -248,6 +248,14 @@ export default defineConfig({
248248
},
249249
order: 6,
250250
},
251+
{
252+
slug: 'ntv',
253+
title: {
254+
zh: '解读文本可视化（NTV）',
255+
en: 'Narrative Text Vis (NTV)',
256+
},
257+
order: 10,
258+
},
251259
],
252260
// 编辑器配置
253261
playground: {
@@ -270,7 +278,7 @@ export default defineConfig({
270278
{ name: '京东', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ' },
271279
{ name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ' },
272280
{ name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ' },
273-
],
281+
],
274282
cases: [
275283
{
276284
logo: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*-dLnTIexOxwAAAAAAAAAAABkARQnAQ',
@@ -350,4 +358,4 @@ export default defineConfig({
350358
],
351359
scripts: [
352360
],
353-
});
361+
});

‎site/.eslintrc.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ module.exports = {
22
rules: {
33
// to handle gatsby browser defined local packages not error
44
'import/no-unresolved': 0,
5-
'react/prop-types': 0
5+
'react/prop-types': 0,
6+
// for import ava and ava-react
7+
'import/no-extraneous-dependencies': 0,
68
}
79
};

‎site/examples/ntv/basic/demo/basic.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
3+
import ReactDOM from 'react-dom';
4+
import { NarrativeTextVis } from '@antv/ava-react';
5+
6+
import type { NtvTypes } from '@antv/ava-react';
7+
8+
const spec: NtvTypes.NarrativeTextSpec = {
9+
sections: [
10+
{
11+
paragraphs: [
12+
{
13+
type: 'normal',
14+
phrases: [
15+
{ type: 'entity', value: 'DAU', metadata: { entityType: 'metric_name' } },
16+
{ type: 'text', value: ' ' },
17+
{ type: 'entity', value: '1.23亿', metadata: { entityType: 'metric_value', origin: 123077.34 } },
18+
{ type: 'text', value: '，环比昨日 ' },
19+
{ type: 'entity', value: '80万', metadata: { entityType: 'delta_value', assessment: 'positive' } },
20+
{ type: 'text', value: '（' },
21+
{ type: 'entity', value: '2.3%', metadata: { entityType: 'ratio_value', assessment: 'positive' } },
22+
{ type: 'text', value: '）。' },
23+
{ type: 'text', value: '最近 3 个动态 7 天' },
24+
{
25+
type: 'entity',
26+
value: '趋势上涨',
27+
metadata: {
28+
entityType: 'trend_desc',
29+
detail: [1, 2, 6, 18, 24, 48],
30+
},
31+
},
32+
{ type: 'text', value: '。' },
33+
{ type: 'text', value: '按垂直行业分：' },
34+
],
35+
},
36+
{
37+
type: 'bullets',
38+
isOrder: true,
39+
bullets: [
40+
...[
41+
['数金服务', '3.23亿', '40.12%'],
42+
['民生服务', '1.23亿', '20.12%'],
43+
].map<NtvTypes.BulletItemSpec>((item) => ({
44+
type: 'bullet-item',
45+
phrases: [
46+
{ type: 'entity', value: item[0], metadata: { entityType: 'dim_value' } },
47+
{ type: 'text', value: ' ' },
48+
{ type: 'entity', value: item[1], metadata: { entityType: 'metric_value' } },
49+
{ type: 'text', value: '（占比 ' },
50+
{ type: 'entity', value: item[2], metadata: { entityType: 'proportion' } },
51+
{ type: 'text', value: ' ）。' },
52+
],
53+
})),
54+
{
55+
type: 'bullet-item',
56+
phrases: [{ type: 'text', value: '...' }],
57+
},
58+
],
59+
},
60+
],
61+
},
62+
],
63+
};
64+
65+
ReactDOM.render(<NarrativeTextVis spec={spec} />, document.getElementById('container'));

‎site/examples/ntv/basic/demo/entity-phrases.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React from 'react';
2+
3+
import ReactDOM from 'react-dom';
4+
import { Descriptions } from 'antd';
5+
import { NarrativeTextVis } from '@antv/ava-react';
6+
7+
const { Phrase } = NarrativeTextVis;
8+
9+
const App = () => (
10+
<div style={{ marginBottom: 48 }}>
11+
<Descriptions bordered size="small">
12+
<Descriptions.Item label="指标名 metric_name">
13+
<Phrase
14+
spec={{
15+
type: 'entity',
16+
value: 'DAU',
17+
metadata: {
18+
entityType: 'metric_name',
19+
},
20+
}}
21+
/>
22+
</Descriptions.Item>
23+
<Descriptions.Item label="指标值 metric_value">
24+
<Phrase
25+
spec={{
26+
type: 'entity',
27+
value: '90.1w',
28+
metadata: {
29+
entityType: 'metric_value',
30+
origin: 901632.11,
31+
},
32+
}}
33+
/>
34+
</Descriptions.Item>
35+
<Descriptions.Item label="其他指标 other_metric_value">
36+
<Phrase
37+
spec={{
38+
type: 'entity',
39+
value: '30%',
40+
metadata: {
41+
entityType: 'other_metric_value',
42+
origin: 0.30012,
43+
},
44+
}}
45+
/>
46+
</Descriptions.Item>
47+
<Descriptions.Item label="差值 delta_value">
48+
<Phrase
49+
spec={{
50+
type: 'entity',
51+
value: '100.33',
52+
metadata: {
53+
entityType: 'delta_value',
54+
assessment: 'positive',
55+
detail: ['120.12', '220.45'],
56+
origin: 100.33456,
57+
},
58+
}}
59+
/>
60+
</Descriptions.Item>
61+
<Descriptions.Item label="比率 ratio_value">
62+
<Phrase
63+
spec={{
64+
type: 'entity',
65+
value: '30%',
66+
metadata: {
67+
entityType: 'ratio_value',
68+
assessment: 'negative',
69+
origin: 0.30012,
70+
},
71+
}}
72+
/>
73+
</Descriptions.Item>
74+
<Descriptions.Item label="贡献度 contribute_ratio">
75+
<Phrase
76+
spec={{
77+
type: 'entity',
78+
value: '20%',
79+
metadata: {
80+
entityType: 'contribute_ratio',
81+
origin: 0.2000077,
82+
},
83+
}}
84+
/>
85+
</Descriptions.Item>
86+
<Descriptions.Item label="趋势描述 trend_desc">
87+
<Phrase
88+
spec={{
89+
type: 'entity',
90+
value: 'periodic',
91+
metadata: {
92+
entityType: 'trend_desc',
93+
detail: [
94+
264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226,
95+
192,
96+
],
97+
},
98+
}}
99+
/>
100+
</Descriptions.Item>
101+
<Descriptions.Item label="维度值 dim_value">
102+
<Phrase
103+
spec={{
104+
type: 'entity',
105+
value: '北京',
106+
metadata: {
107+
entityType: 'dim_value',
108+
detail: {
109+
left: '城市',
110+
op: '=',
111+
right: '北京',
112+
},
113+
},
114+
}}
115+
/>
116+
</Descriptions.Item>
117+
<Descriptions.Item label="时间描述 time_desc">
118+
<Phrase
119+
spec={{
120+
type: 'entity',
121+
value: '2021-10-11',
122+
metadata: {
123+
entityType: 'time_desc',
124+
},
125+
}}
126+
/>
127+
</Descriptions.Item>
128+
<Descriptions.Item label="占比 proportion">
129+
<Phrase
130+
spec={{
131+
type: 'entity',
132+
value: '30%',
133+
metadata: {
134+
entityType: 'proportion',
135+
origin: 0.30012,
136+
},
137+
}}
138+
/>
139+
</Descriptions.Item>
140+
</Descriptions>
141+
</div>
142+
);
143+
144+
ReactDOM.render(<App />, document.getElementById('container'));

‎site/examples/ntv/basic/demo/meta.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "basic.tsx",
9+
"title": {
10+
"en": "Basic",
11+
"zh": "基本示例"
12+
},
13+
"screenshot": "https://mdn.alipayobjects.com/huamei_vvq19s/afts/img/A*67I9SKDXqvgAAAAAAAAAAAAADi2DAQ/original"
14+
},
15+
{
16+
"filename": "entity-phrases.tsx",
17+
"title": {
18+
"en": "Entity Phrases",
19+
"zh": "实体短语一览"
20+
},
21+
"screenshot": "https://mdn.alipayobjects.com/huamei_vvq19s/afts/img/A*8ObFTp4TfOcAAAAAAAAAAAAADi2DAQ/original"
22+
},
23+
{
24+
"filename": "theme-size.tsx",
25+
"title": {
26+
"en": "Size",
27+
"zh": "设置大小"
28+
},
29+
"screenshot": "https://mdn.alipayobjects.com/huamei_vvq19s/afts/img/A*JwKTT5EGpREAAAAAAAAAAAAADi2DAQ/original"
30+
}
31+
]
32+
}

0 commit comments

Comments
 (0)