docs: add tutorial and demo

VisActor · Feb 5, 2025 · 5a58043 · 5a58043
1 parent 0c867d8
commit 5a58043
Show file tree

Hide file tree

Showing 10 changed files with 312 additions and 2,069 deletions.
diff --git a/docs/assets/demo/en/table-type/pivot-analysis-table-grid-tree.md b/docs/assets/demo/en/table-type/pivot-analysis-table-grid-tree.md
@@ -0,0 +1,68 @@
+---
+category: examples
+group: table-type
+title: Pivot Table Grid Tree Mode
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-grid-tree.gif
+link: data_analysis/pivot_table_tree
+option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree'%7C'grid-tree')
+---
+
+# Pivot Table Grid Tree Mode
+
+Pivot analysis table with grid tree display mode
+
+## Key Configurations
+
+- `PivotTable` Table type
+- `rowHierarchyType` Set the hierarchical display to `grid-tree`, defaults to tiling mode `grid`.
+- `columnHierarchyType` Set the hierarchical display to `grid-tree`, defaults to tiling mode `grid`.
+- `rowExpandLevel` Set default expanded level, defaults to `1`.
+- `columnExpandLevel` Set default expanded level, defaults to `1`.
+- `indicatorsAsCol` Whether to display indicators as column headers, defaults to `true`.
+- `columns` Column dimension configuration
+- `rows` Row dimension configuration
+- `indicators` Indicator configuration
+- `dataConfig` Configure data rules, optional configuration items
+
+## Code Demo
+
+```javascript livedemo template=vtable
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
+    .then((res) => res.json())
+    .then((data) => {
+const option = {
+    rows: ['Order Year','Region', 'Segment','Ship Mode'],
+    columns: ['Category', 'Sub-Category'],
+    indicators: ['Sales', 'Profit'],
+    enableDataAnalysis: true,
+    indicatorTitle: 'Indicators',
+    //indicatorsAsCol: false,
+    rowHierarchyType:'grid-tree',
+    columnHierarchyType:'grid-tree',
+    corner: { titleOnDimension: 'column' },
+    dataConfig: {
+      totals: {
+        row: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          subTotalsDimensions: ['Order Year','Region', 'Segment'],
+          grandTotalLabel: 'Total',
+          subTotalLabel: 'SubTotal'
+        },
+        column: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          subTotalsDimensions: ['Category'],
+          grandTotalLabel: 'Total',
+          subTotalLabel: 'SubTotal'
+        }
+      }
+    },
+    records:data,
+    widthMode: 'autoWidth' // 宽度模式：standard 标准模式； adaptive 自动填满容器
+  };
+    tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
+    window['tableInstance'] = tableInstance;
+  });
+```
diff --git a/docs/assets/demo/en/table-type/pivot-analysis-table-tree.md b/docs/assets/demo/en/table-type/pivot-analysis-table-tree.md
@@ -1,13 +1,13 @@
 ---
 category: examples
 group: table-type
-title: Pivot analysis tree table
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-tree.png
-link: data_analysis/pivot_table_dataAnalysis
-option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree')
+title: Pivot Table Row Header Tree Mode
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-tree.gif
+link: data_analysis/pivot_table_tree
+option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree'%7C'grid-tree')
 ---
 
-# Pivot analysis tree table
+# Pivot Table Row Header Tree Mode
 
 Pivot analysis tree table
 

diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json
@@ -128,17 +128,15 @@
         {
           "path": "pivot-analysis-table-tree",
           "title": {
-            "zh": "透视分析表格树形展示",
-            "en": "Pivot Analysis Tree Table"
-          },
-          "meta": {
-            "title": "Pivot Analysis Tree Table",
-            "keywords": "",
-            "category": "demo",
-            "group": "table-type",
-            "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-tree.png",
-            "link": "'../../guide/table_type/Pivot_table/pivot_table_useage'",
-            "option": ""
+            "zh": "透视表行头树形展示",
+            "en": "Pivot Table Row Header Tree Mode"
+          }
+        },
+        {
+          "path": "pivot-analysis-table-grid-tree",
+          "title": {
+            "zh": "透视表平铺树形展示",
+            "en": "Pivot Table Grid Tree Mode"
           }
         },
         {

diff --git a/docs/assets/demo/zh/table-type/pivot-analysis-table-grid-tree.md b/docs/assets/demo/zh/table-type/pivot-analysis-table-grid-tree.md
@@ -0,0 +1,68 @@
+---
+category: examples
+group: table-type
+title: 透视表平铺树形展示
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-grid-tree.gif
+link: data_analysis/pivot_table_tree
+option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree'%7C'grid-tree')
+---
+
+# 透视表平铺树形展示
+
+透视分析表格平铺树形展示
+
+## 关键配置
+
+- `PivotTable` 表格类型
+- `rowHierarchyType` 将层级展示设置为`grid-tree`，默认为平铺模式`grid`。
+- `columnHierarchyType` 将层级展示设置为`grid-tree`，默认为平铺模式`grid`。
+- `rowExpandLevel` 设置默认展开层级，默认为`1`。
+- `columnExpandLevel` 设置默认展开层级，默认为`1`。
+- `indicatorsAsCol` 指标是否作为列表头展示，默认为`true`。
+- `columns` 列维度配置
+- `rows` 行维度配置
+- `indicators` 指标配置
+- `dataConfig` 配置数据规则，可选配置项
+
+## 代码演示
+
+```javascript livedemo template=vtable
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
+    .then((res) => res.json())
+    .then((data) => {
+const option = {
+    rows: ['Order Year','Region', 'Segment','Ship Mode'],
+    columns: ['Category', 'Sub-Category'],
+    indicators: ['Sales', 'Profit'],
+    enableDataAnalysis: true,
+    indicatorTitle: 'Indicators',
+    //indicatorsAsCol: false,
+    rowHierarchyType:'grid-tree',
+    columnHierarchyType:'grid-tree',
+    corner: { titleOnDimension: 'column' },
+    dataConfig: {
+      totals: {
+        row: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          subTotalsDimensions: ['Order Year','Region', 'Segment'],
+          grandTotalLabel: 'Total',
+          subTotalLabel: 'SubTotal'
+        },
+        column: {
+          showGrandTotals: true,
+          showSubTotals: true,
+          subTotalsDimensions: ['Category'],
+          grandTotalLabel: 'Total',
+          subTotalLabel: 'SubTotal'
+        }
+      }
+    },
+    records:data,
+    widthMode: 'autoWidth' // 宽度模式：standard 标准模式； adaptive 自动填满容器
+  };
+    tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
+    window['tableInstance'] = tableInstance;
+  });
+```
diff --git a/docs/assets/demo/zh/table-type/pivot-analysis-table-tree.md b/docs/assets/demo/zh/table-type/pivot-analysis-table-tree.md
@@ -1,13 +1,13 @@
 ---
 category: examples
 group: table-type
-title: 透视分析表格
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-tree.png
-link: data_analysis/pivot_table_dataAnalysis
-option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree')
+title: 透视表行头树形展示
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/pivot-analysis-table-tree.gif
+link: data_analysis/pivot_table_tree
+option: PivotTable#rowHierarchyType('grid'%20%7C%20'tree'%7C'grid-tree')
 ---
 
-# 透视分析表格树形展示
+# 透视表行头树形展示
 
 透视分析表格树形展示