docs: add insight mark demos (#5811)

* docs: add insight mark demos * docs: supplement optional parameters of insight mark
antvis · Nov 20, 2023 · eb7abe7 · eb7abe7
1 parent 2808b74
commit eb7abe7
Show file tree

Hide file tree

Showing 16 changed files with 607 additions and 9 deletions.
diff --git a/...ples/intelligent/intelligent/demo/auto.ts → site/examples/intelligent/auto/demo/auto.ts b/...ples/intelligent/intelligent/demo/auto.ts → site/examples/intelligent/auto/demo/auto.ts
diff --git a/...es/intelligent/intelligent/demo/meta.json → .../examples/intelligent/auto/demo/meta.json b/...es/intelligent/intelligent/demo/meta.json → .../examples/intelligent/auto/demo/meta.json
diff --git a/site/examples/intelligent/auto/index.en.md b/site/examples/intelligent/auto/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Auto Chart
+order: 1
+---
diff --git a/site/examples/intelligent/auto/index.zh.md b/site/examples/intelligent/auto/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 自动可视化
+order: 1
+---
diff --git a/site/examples/intelligent/insight/demo/category-outlier.ts 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
@@ -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
@@ -0,0 +1,62 @@
+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.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/low-variance.ts 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();