From 70235619765055ab989eb184bdb1cce0fd2821ea Mon Sep 17 00:00:00 2001 From: yihe Date: Sun, 19 Nov 2023 15:15:54 +0800 Subject: [PATCH 1/2] docs: add insight mark demos --- .../{intelligent => auto}/demo/auto.ts | 0 .../{intelligent => auto}/demo/meta.json | 0 site/examples/intelligent/auto/index.en.md | 4 + site/examples/intelligent/auto/index.zh.md | 4 + .../insight/demo/category-outlier.ts | 107 +++++++++++++ .../intelligent/insight/demo/change-point.ts | 90 +++++++++++ .../intelligent/insight/demo/insight.ts | 29 ++++ .../intelligent/insight/demo/low-variance.ts | 106 +++++++++++++ .../intelligent/insight/demo/meta.json | 56 +++++++ .../insight/demo/time-series-outlier.ts | 143 ++++++++++++++++++ .../intelligent/insight/demo/trend.ts | 26 ++++ site/examples/intelligent/insight/index.en.md | 4 + site/examples/intelligent/insight/index.zh.md | 4 + .../intelligent/intelligent/index.en.md | 4 - .../intelligent/intelligent/index.zh.md | 4 - site/package.json | 2 +- 16 files changed, 574 insertions(+), 9 deletions(-) rename site/examples/intelligent/{intelligent => auto}/demo/auto.ts (100%) rename site/examples/intelligent/{intelligent => auto}/demo/meta.json (100%) create mode 100644 site/examples/intelligent/auto/index.en.md create mode 100644 site/examples/intelligent/auto/index.zh.md create mode 100644 site/examples/intelligent/insight/demo/category-outlier.ts create mode 100644 site/examples/intelligent/insight/demo/change-point.ts create mode 100644 site/examples/intelligent/insight/demo/insight.ts create mode 100644 site/examples/intelligent/insight/demo/low-variance.ts create mode 100644 site/examples/intelligent/insight/demo/meta.json create mode 100644 site/examples/intelligent/insight/demo/time-series-outlier.ts create mode 100644 site/examples/intelligent/insight/demo/trend.ts create mode 100644 site/examples/intelligent/insight/index.en.md create mode 100644 site/examples/intelligent/insight/index.zh.md delete mode 100644 site/examples/intelligent/intelligent/index.en.md delete mode 100644 site/examples/intelligent/intelligent/index.zh.md diff --git a/site/examples/intelligent/intelligent/demo/auto.ts b/site/examples/intelligent/auto/demo/auto.ts similarity index 100% rename from site/examples/intelligent/intelligent/demo/auto.ts rename to site/examples/intelligent/auto/demo/auto.ts diff --git a/site/examples/intelligent/intelligent/demo/meta.json b/site/examples/intelligent/auto/demo/meta.json similarity index 100% rename from site/examples/intelligent/intelligent/demo/meta.json rename to site/examples/intelligent/auto/demo/meta.json diff --git a/site/examples/intelligent/auto/index.en.md b/site/examples/intelligent/auto/index.en.md new file mode 100644 index 0000000000..d5c3ea9157 --- /dev/null +++ b/site/examples/intelligent/auto/index.en.md @@ -0,0 +1,4 @@ +--- +title: Auto Chart +order: 1 +--- \ No newline at end of file diff --git a/site/examples/intelligent/auto/index.zh.md b/site/examples/intelligent/auto/index.zh.md new file mode 100644 index 0000000000..5b974c4bf8 --- /dev/null +++ b/site/examples/intelligent/auto/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 自动可视化 +order: 1 +--- \ No newline at end of file diff --git a/site/examples/intelligent/insight/demo/category-outlier.ts b/site/examples/intelligent/insight/demo/category-outlier.ts new file mode 100644 index 0000000000..140bd3b38a --- /dev/null +++ b/site/examples/intelligent/insight/demo/category-outlier.ts @@ -0,0 +1,107 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data([ + { + date: '2000', + fertility: 743.37, + }, + { + date: '2001', + fertility: 729.34, + }, + { + date: '2002', + fertility: 709.12, + }, + { + date: '2003', + fertility: 786.99, + }, + { + date: '2004', + fertility: 711.23, + }, + { + date: '2005', + fertility: 781.99, + }, + { + date: '2006', + fertility: 795.71, + }, + { + date: '2007', + fertility: 789.24, + }, + { + date: '2008', + fertility: 93.51, + }, + { + date: '2009', + fertility: 783.98, + }, + { + date: '2010', + fertility: 702.78, + }, + { + date: '2011', + fertility: 797.05, + }, + { + date: '2012', + fertility: 785.12, + }, + { + date: '2013', + fertility: 798.85, + }, + { + date: '2014', + fertility: 34.49, + }, + { + date: '2015', + fertility: 758.74, + }, + { + date: '2016', + fertility: 730.55, + }, + { + date: '2017', + fertility: 778.53, + }, + { + date: '2018', + fertility: 31.47, + }, + { + date: '2019', + fertility: 791, + }, + { + date: '2020', + fertility: 796.41, + }, + ]) + .encode('x', 'date') + .encode('y', 'fertility'); + +chart.interval(); +chart.categoryOutlier(); + +chart.render(); diff --git a/site/examples/intelligent/insight/demo/change-point.ts b/site/examples/intelligent/insight/demo/change-point.ts new file mode 100644 index 0000000000..2c1edcedc6 --- /dev/null +++ b/site/examples/intelligent/insight/demo/change-point.ts @@ -0,0 +1,90 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data([ + { + date: '2000', + discount_price: 43.37, + }, + { + date: '2001', + discount_price: 29.34, + }, + { + date: '2002', + discount_price: 49.12, + }, + { + date: '2003', + discount_price: 56.99, + }, + { + date: '2004', + discount_price: 61.23, + }, + { + date: '2005', + discount_price: 781.99, + }, + { + date: '2006', + discount_price: 895.71, + }, + { + date: '2007', + discount_price: 789.24, + }, + { + date: '2008', + discount_price: 793.51, + }, + { + date: '2009', + discount_price: 783.98, + }, + { + date: '2010', + discount_price: 782.78, + }, + { + date: '2011', + discount_price: 797.05, + }, + { + date: '2012', + discount_price: 785.12, + }, + { + date: '2013', + discount_price: 798.85, + }, + { + date: '2014', + discount_price: 734.49, + }, + { + date: '2015', + discount_price: 708.74, + }, + { + date: '2016', + discount_price: 730.55, + }, + ]) + .encode('x', 'date') + .encode('y', 'discount_price'); + +chart.line(); +chart.changePoint(); +chart.render(); diff --git a/site/examples/intelligent/insight/demo/insight.ts b/site/examples/intelligent/insight/demo/insight.ts new file mode 100644 index 0000000000..7878c97f25 --- /dev/null +++ b/site/examples/intelligent/insight/demo/insight.ts @@ -0,0 +1,29 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data({ + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', + }) + .encode('x', 'date') + .encode('y', 'close'); + +chart.line(); +// 指定洞察类型为趋势 +chart.insight({ + insightType: 'trend', +}); + +chart.render(); diff --git a/site/examples/intelligent/insight/demo/low-variance.ts b/site/examples/intelligent/insight/demo/low-variance.ts new file mode 100644 index 0000000000..7b7d7dff86 --- /dev/null +++ b/site/examples/intelligent/insight/demo/low-variance.ts @@ -0,0 +1,106 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data([ + { + date: '2000', + fertility: 743.37, + }, + { + date: '2001', + fertility: 729.34, + }, + { + date: '2002', + fertility: 769.12, + }, + { + date: '2003', + fertility: 786.99, + }, + { + date: '2004', + fertility: 791.23, + }, + { + date: '2005', + fertility: 781.99, + }, + { + date: '2006', + fertility: 795.71, + }, + { + date: '2007', + fertility: 789.24, + }, + { + date: '2008', + fertility: 793.51, + }, + { + date: '2009', + fertility: 783.98, + }, + { + date: '2010', + fertility: 782.78, + }, + { + date: '2011', + fertility: 797.05, + }, + { + date: '2012', + fertility: 785.12, + }, + { + date: '2013', + fertility: 798.85, + }, + { + date: '2014', + fertility: 734.49, + }, + { + date: '2015', + fertility: 708.74, + }, + { + date: '2016', + fertility: 730.55, + }, + { + date: '2017', + fertility: 778.53, + }, + { + date: '2018', + fertility: 731.47, + }, + { + date: '2019', + fertility: 791, + }, + { + date: '2020', + fertility: 896.41, + }, + ]) + .encode('x', 'date') + .encode('y', 'fertility'); + +chart.interval(); +chart.lowVariance(); +chart.render(); diff --git a/site/examples/intelligent/insight/demo/meta.json b/site/examples/intelligent/insight/demo/meta.json new file mode 100644 index 0000000000..02e0064ca2 --- /dev/null +++ b/site/examples/intelligent/insight/demo/meta.json @@ -0,0 +1,56 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "insight.ts", + "title": { + "zh": "洞察标注", + "en": "Insight marks" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DweUTbVAaIEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "trend.ts", + "title": { + "zh": "趋势", + "en": "Trend" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DweUTbVAaIEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "time-series-outlier.ts", + "title": { + "zh": "时序异常", + "en": "Time Series Outlier" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*N5OkR5VKYMAAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "low-variance.ts", + "title": { + "zh": "低方差", + "en": "Low Variance" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Y0QJSZSbig8AAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "change-point.ts", + "title": { + "zh": "突变点", + "en": "Change Point" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_p5WRZAmT1oAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "category-outlier.ts", + "title": { + "zh": "类别异常", + "en": "Category Outlier" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B64DT43QAVMAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/site/examples/intelligent/insight/demo/time-series-outlier.ts b/site/examples/intelligent/insight/demo/time-series-outlier.ts new file mode 100644 index 0000000000..67a1d196a5 --- /dev/null +++ b/site/examples/intelligent/insight/demo/time-series-outlier.ts @@ -0,0 +1,143 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data([ + { + date: '2001', + discount_price: 727.12, + }, + { + date: '2002', + discount_price: 729.59, + }, + { + date: '2003', + discount_price: 730.21, + }, + { + date: '2004', + discount_price: 732.11, + }, + { + date: '2005', + discount_price: 733.22, + }, + { + date: '2006', + discount_price: 741.19, + }, + { + date: '2007', + discount_price: 742.37, + }, + { + date: '2008', + discount_price: 752.34, + }, + { + date: '2009', + discount_price: 761.12, + }, + { + date: '2010', + discount_price: 783.99, + }, + { + date: '2011', + discount_price: 791.23, + }, + { + date: '2012', + discount_price: 781.99, + }, + { + date: '2013', + discount_price: 835.71, + }, + { + date: '2014', + discount_price: 839.24, + }, + { + date: '2015', + discount_price: 883.51, + }, + { + date: '2016', + discount_price: 873.98, + }, + { + date: '2017', + discount_price: 802.78, + }, + { + date: '2018', + discount_price: 807.05, + }, + { + date: '2019', + discount_price: 885.12, + }, + { + date: '2020', + discount_price: 1018.85, + }, + { + date: '2021', + discount_price: 934.49, + }, + { + date: '2022', + discount_price: 908.74, + }, + { + date: '2023', + discount_price: 930.55, + }, + { + date: '2024', + discount_price: 978.53, + }, + { + date: '2025', + discount_price: 931.47, + }, + { + date: '2026', + discount_price: 891, + }, + { + date: '2027', + discount_price: 836.41, + }, + { + date: '2028', + discount_price: 826.11, + }, + { + date: '2029', + discount_price: 820.11, + }, + { + date: '2030', + discount_price: 811.11, + }, + ]) + .encode('x', 'date') + .encode('y', 'discount_price'); + +chart.line(); +chart.timeSeriesOutlier(); + +chart.render(); diff --git a/site/examples/intelligent/insight/demo/trend.ts b/site/examples/intelligent/insight/demo/trend.ts new file mode 100644 index 0000000000..21796b2a19 --- /dev/null +++ b/site/examples/intelligent/insight/demo/trend.ts @@ -0,0 +1,26 @@ +import { Runtime, corelib, extend } from '@antv/g2'; +import { autolib } from '@antv/g2-extension-ava'; + +const Chart = extend(Runtime, { + ...corelib(), + ...autolib(), +}); + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .data({ + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', + }) + .encode('x', 'date') + .encode('y', 'close'); + +chart.line(); +chart.trend(); + +chart.render(); diff --git a/site/examples/intelligent/insight/index.en.md b/site/examples/intelligent/insight/index.en.md new file mode 100644 index 0000000000..68dfadd107 --- /dev/null +++ b/site/examples/intelligent/insight/index.en.md @@ -0,0 +1,4 @@ +--- +title: Insight Marks +order: 2 +--- \ No newline at end of file diff --git a/site/examples/intelligent/insight/index.zh.md b/site/examples/intelligent/insight/index.zh.md new file mode 100644 index 0000000000..d54221c078 --- /dev/null +++ b/site/examples/intelligent/insight/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 洞察标注 +order: 2 +--- \ No newline at end of file diff --git a/site/examples/intelligent/intelligent/index.en.md b/site/examples/intelligent/intelligent/index.en.md deleted file mode 100644 index 5cc84f4f72..0000000000 --- a/site/examples/intelligent/intelligent/index.en.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Intelligent -order: 1 ---- \ No newline at end of file diff --git a/site/examples/intelligent/intelligent/index.zh.md b/site/examples/intelligent/intelligent/index.zh.md deleted file mode 100644 index 5f4d217073..0000000000 --- a/site/examples/intelligent/intelligent/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 智能可视化 -order: 1 ---- \ No newline at end of file diff --git a/site/package.json b/site/package.json index cc4e992f3b..2546416aa2 100644 --- a/site/package.json +++ b/site/package.json @@ -20,7 +20,7 @@ "@antv/g-svg": "^1.10.21", "@antv/g-webgl": "^1.9.29", "@antv/g2-extension-3d": "^0.1.3", - "@antv/g2-extension-ava": "^0.1.1", + "@antv/g2-extension-ava": "^0.2.0", "@antv/s2": "^1.52.0", "antd": "^4.24.14", "d3-array": "^3.2.4", From 76db1c4763d80f16a6fe9cc1d0110192d7642eb7 Mon Sep 17 00:00:00 2001 From: yihe Date: Mon, 20 Nov 2023 17:46:45 +0800 Subject: [PATCH 2/2] docs: supplement optional parameters of insight mark --- .../intelligent/insight/demo/insight.ts | 59 +++++++++++++++---- .../intelligent/insight/demo/meta.json | 16 ++--- 2 files changed, 54 insertions(+), 21 deletions(-) diff --git a/site/examples/intelligent/insight/demo/insight.ts b/site/examples/intelligent/insight/demo/insight.ts index 7878c97f25..652a3a4474 100644 --- a/site/examples/intelligent/insight/demo/insight.ts +++ b/site/examples/intelligent/insight/demo/insight.ts @@ -11,19 +11,52 @@ const chart = new Chart({ autoFit: true, }); -chart - .data({ - type: 'fetch', - value: - 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', - }) - .encode('x', 'date') - .encode('y', 'close'); - -chart.line(); -// 指定洞察类型为趋势 -chart.insight({ - insightType: 'trend', +chart.options({ + children: [ + { + type: 'line', + data: { + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', + }, + encode: { + x: 'date', + y: 'close', + }, + }, + // insight mark + { + type: 'insight', + data: { + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', + }, + // Specify to add marks of type 'trend' + insightType: 'trend', + // If the value of dimensions or measures is not specified, it will be obtained from the encode information by default. + dimensions: [{ fieldName: 'date' }], + measures: [{ fieldName: 'close', method: 'SUM' }], + options: { + // Filter out not significant insights + filterInsight: true, + // Verify whether the input meets the algorithm requirements + dataValidation: true, + // Adjust the significance test threshold + algorithmParameter: { + // Parameter for trend mark + trend: { + threshold: 0.05, + }, + }, + // Generate Chinese spec + visualizationOptions: { + lang: 'zh-CN', + }, + }, + }, + ], }); chart.render(); diff --git a/site/examples/intelligent/insight/demo/meta.json b/site/examples/intelligent/insight/demo/meta.json index 02e0064ca2..621727cc53 100644 --- a/site/examples/intelligent/insight/demo/meta.json +++ b/site/examples/intelligent/insight/demo/meta.json @@ -4,14 +4,6 @@ "en": "Category" }, "demos": [ - { - "filename": "insight.ts", - "title": { - "zh": "洞察标注", - "en": "Insight marks" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DweUTbVAaIEAAAAAAAAAAAAADmJ7AQ/original" - }, { "filename": "trend.ts", "title": { @@ -51,6 +43,14 @@ "en": "Category Outlier" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B64DT43QAVMAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "insight.ts", + "title": { + "zh": "洞察标注算法的详细参数", + "en": "Detailed Parameters of Insight Mark" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DweUTbVAaIEAAAAAAAAAAAAADmJ7AQ/original" } ] }