Skip to content

Commit a0a61c9

Browse files
author
xueren.dt
committed
docs: add insights example
1 parent c3807b6 commit a0a61c9

File tree

8 files changed

+381
-0
lines changed

8 files changed

+381
-0
lines changed

‎site/.dumirc.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,15 @@ export default defineConfig({
154154
},
155155
order: 3,
156156
},
157+
{
158+
slug: 'insight',
159+
icon: 'block',
160+
title: {
161+
zh: '自动洞察(insight)',
162+
en: 'Insight',
163+
},
164+
order: 4,
165+
}
157166
],
158167
/** 首页技术栈介绍 */
159168
detail: {

‎site/examples/insight/basic/demo/basic.jsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState, useEffect } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Spin, Steps } from 'antd';
4+
import { getInsights } from '@antv/ava';
5+
import { JsonView, defaultStyles, collapseAllNested } from 'react-json-view-lite';
6+
7+
const App = () => {
8+
const [result, setResult] = useState({});
9+
const [data, setData] = useState([]);
10+
const [currentStep, setCurrentStep] = useState(0);
11+
const [loading, setLoading] = useState(true);
12+
13+
const getMyInsights = async () => {
14+
fetch('https://cdn.jsdelivr.net/npm/vega-datasets@2.2.0/data/gapminder.json')
15+
.then((res) => res.json())
16+
.then((data) => {
17+
if (data) {
18+
setData(data);
19+
const insightResult = getInsights(data);
20+
setResult(insightResult);
21+
setLoading(false);
22+
}
23+
});
24+
};
25+
26+
useEffect(() => {
27+
getMyInsights();
28+
}, []);
29+
30+
const dataContent = <JsonView data={data} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
31+
32+
const insightsContent = <JsonView data={result} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
33+
34+
const steps = [
35+
{
36+
title: 'Data',
37+
desc: 'Source data:',
38+
content: dataContent,
39+
},
40+
{
41+
title: 'Insights',
42+
desc: 'Insights extracted from data:',
43+
content: insightsContent,
44+
},
45+
];
46+
47+
return (
48+
<>
49+
<div style={{ width: '50%', margin: '0 auto' }}>
50+
<Steps current={currentStep} onChange={setCurrentStep} items={steps} size="default" />
51+
</div>
52+
<p>{steps[currentStep].desc}</p>
53+
54+
<div className="steps-content" style={{ height: 'calc(100% - 80px)' }}>
55+
<Spin spinning={loading}>{steps[currentStep].content}</Spin>
56+
</div>
57+
</>
58+
);
59+
};
60+
61+
ReactDOM.render(<App />, document.getElementById('container'));

‎site/examples/insight/basic/demo/custom.jsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { useState, useEffect } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Spin, Steps } from 'antd';
4+
import { getInsights } from '@antv/ava';
5+
import { JsonView, defaultStyles, collapseAllNested } from 'react-json-view-lite';
6+
7+
const App = () => {
8+
const [result, setResult] = useState({});
9+
const [data, setData] = useState([]);
10+
const [currentStep, setCurrentStep] = useState(0);
11+
const [loading, setLoading] = useState(true);
12+
13+
const getMyInsights = async () => {
14+
fetch('https://cdn.jsdelivr.net/npm/vega-datasets@2.2.0/data/gapminder.json')
15+
.then((res) => res.json())
16+
.then((data) => {
17+
if (data) {
18+
setData(data);
19+
const insightResult = getInsights(data, {
20+
// 取前10个洞察
21+
// limit the result insights to only the top 20
22+
limit: 10,
23+
// 自定义指标字段
24+
// custom measures
25+
measures: [
26+
{ fieldName: 'life_expect', method: 'MEAN' },
27+
{ fieldName: 'pop', method: 'SUM' },
28+
{ fieldName: 'fertility', method: 'MEAN' },
29+
],
30+
// 自定义维度字段
31+
// custom dimensions
32+
dimensions: [{ fieldName: 'country' }, { fieldName: 'year' }],
33+
});
34+
setResult(insightResult);
35+
setLoading(false);
36+
}
37+
});
38+
};
39+
40+
useEffect(() => {
41+
getMyInsights();
42+
}, []);
43+
44+
const dataContent = <JsonView data={data} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
45+
46+
const insightsContent = <JsonView data={result} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
47+
48+
const steps = [
49+
{
50+
title: 'Data',
51+
desc: 'Source data:',
52+
content: dataContent,
53+
},
54+
{
55+
title: 'Insights',
56+
desc: 'Insights extracted from data:',
57+
content: insightsContent,
58+
},
59+
];
60+
61+
return (
62+
<>
63+
<div style={{ width: '50%', margin: '0 auto' }}>
64+
<Steps current={currentStep} onChange={setCurrentStep} items={steps} size="default" />
65+
</div>
66+
<p>{steps[currentStep].desc}</p>
67+
68+
<div className="steps-content" style={{ height: 'calc(100% - 80px)' }}>
69+
<Spin spinning={loading}>{steps[currentStep].content}</Spin>
70+
</div>
71+
</>
72+
);
73+
};
74+
75+
ReactDOM.render(<App />, document.getElementById('container'));

‎site/examples/insight/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.jsx",
9+
"title": {
10+
"zh": "基础用法",
11+
"en": "Basic usage"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/zt2jXO97%262/li-basic.gif"
14+
},
15+
{
16+
"filename": "custom.jsx",
17+
"title": {
18+
"zh": "自定义指标和维度",
19+
"en": "Custom measures and dimensions"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ixkElKx8UT/li-custom-measures.gif"
22+
},
23+
{
24+
"filename": "specify-type.jsx",
25+
"title": {
26+
"zh": "指定洞察类型",
27+
"en": "Extract insight of a specified type"
28+
},
29+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/zt2jXO97%262/li-basic.gif"
30+
}
31+
]
32+
}

‎site/examples/insight/basic/demo/specify-type.jsx‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import React, { useState, useEffect, useMemo } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Spin, Steps } from 'antd';
4+
import { insightPatternsExtractor } from '@antv/ava';
5+
import { JsonView, defaultStyles, collapseAllNested } from 'react-json-view-lite';
6+
7+
const App = () => {
8+
const data = useMemo(
9+
() => [
10+
{
11+
date: '2019-08-01',
12+
discount_price: 727.12,
13+
},
14+
{
15+
date: '2019-08-02',
16+
discount_price: 729.59,
17+
},
18+
{
19+
date: '2019-08-03',
20+
discount_price: 730.21,
21+
},
22+
{
23+
date: '2019-08-04',
24+
discount_price: 732.11,
25+
},
26+
{
27+
date: '2019-08-05',
28+
discount_price: 733.22,
29+
},
30+
{
31+
date: '2019-08-06',
32+
discount_price: 741.19,
33+
},
34+
{
35+
date: '2019-08-07',
36+
discount_price: 742.37,
37+
},
38+
{
39+
date: '2019-08-08',
40+
discount_price: 752.34,
41+
},
42+
{
43+
date: '2019-08-09',
44+
discount_price: 761.12,
45+
},
46+
{
47+
date: '2019-08-10',
48+
discount_price: 783.99,
49+
},
50+
{
51+
date: '2019-08-11',
52+
discount_price: 791.23,
53+
},
54+
{
55+
date: '2019-08-12',
56+
discount_price: 781.99,
57+
},
58+
{
59+
date: '2019-08-13',
60+
discount_price: 835.71,
61+
},
62+
{
63+
date: '2019-08-14',
64+
discount_price: 839.24,
65+
},
66+
{
67+
date: '2019-08-15',
68+
discount_price: 883.51,
69+
},
70+
{
71+
date: '2019-08-16',
72+
discount_price: 873.98,
73+
},
74+
{
75+
date: '2019-08-17',
76+
discount_price: 802.78,
77+
},
78+
{
79+
date: '2019-08-18',
80+
discount_price: 807.05,
81+
},
82+
{
83+
date: '2019-08-19',
84+
discount_price: 885.12,
85+
},
86+
{
87+
date: '2019-08-20',
88+
discount_price: 1018.85,
89+
},
90+
{
91+
date: '2019-08-21',
92+
discount_price: 934.49,
93+
},
94+
{
95+
date: '2019-08-22',
96+
discount_price: 908.74,
97+
},
98+
{
99+
date: '2019-08-23',
100+
discount_price: 930.55,
101+
},
102+
{
103+
date: '2019-08-24',
104+
discount_price: 978.53,
105+
},
106+
{
107+
date: '2019-08-25',
108+
discount_price: 931.47,
109+
},
110+
{
111+
date: '2019-08-26',
112+
discount_price: 891,
113+
},
114+
{
115+
date: '2019-08-27',
116+
discount_price: 836.41,
117+
},
118+
{
119+
date: '2019-08-28',
120+
discount_price: 826.11,
121+
},
122+
{
123+
date: '2019-08-29',
124+
discount_price: 820.11,
125+
},
126+
{
127+
date: '2019-08-30',
128+
discount_price: 811.11,
129+
},
130+
],
131+
[]
132+
);
133+
const [result, setResult] = useState([]);
134+
const [insightLoading, setInsightLoading] = useState(true);
135+
const [currentStep, setCurrentStep] = useState(0);
136+
137+
const getMyInsights = async () => {
138+
if (data) {
139+
const insightResult = insightPatternsExtractor({
140+
data,
141+
dimensions: [{ fieldName: 'date' }],
142+
measures: [{ fieldName: 'discount_price', method: 'SUM' }],
143+
insightType: 'time_series_outlier',
144+
options: {
145+
dataValidation: true,
146+
algorithmParameter: {
147+
outlier: {
148+
method: 'IQR',
149+
iqrK: 1.5,
150+
},
151+
},
152+
},
153+
});
154+
setResult(insightResult);
155+
setInsightLoading(false);
156+
}
157+
};
158+
159+
useEffect(() => {
160+
getMyInsights();
161+
}, []);
162+
163+
const dataContent = <JsonView data={data} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
164+
165+
const insightsContent = <JsonView data={result} shouldExpandNode={collapseAllNested} style={defaultStyles} />;
166+
167+
const steps = [
168+
{
169+
title: 'Data',
170+
desc: 'Source data:',
171+
content: dataContent,
172+
},
173+
{
174+
title: 'Insights',
175+
desc: 'Insights extracted from data:',
176+
content: insightsContent,
177+
},
178+
];
179+
180+
return (
181+
<>
182+
<div style={{ width: '50%', margin: '0 auto' }}>
183+
<Steps current={currentStep} onChange={setCurrentStep} items={steps} size="default" />
184+
</div>
185+
<p>{steps[currentStep].desc}</p>
186+
187+
<div className="steps-content" style={{ height: 'calc(100% - 80px)' }}>
188+
<Spin spinning={insightLoading}>{steps[currentStep].content}</Spin>
189+
</div>
190+
</>
191+
);
192+
};
193+
194+
ReactDOM.render(<App />, document.getElementById('container'));

‎site/examples/insight/basic/index.en.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Auto-Insights
3+
order: 0
4+
---
5+

‎site/examples/insight/basic/index.zh.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 自动洞察
3+
order: 0
4+
---

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { AVA } from './advisor';
22
export { bindRenderer } from './bind';
33
export { type Spec } from './types';
4+
export { getInsights, generateInsightVisualizationSpec, insightPatternsExtractor, getSpecificInsight } from './insight';

0 commit comments

Comments
 (0)