@orbcharts/presets-basic 3.0.0-alpha.9 → 3.0.0-beta.1

package/src/index.ts

@@ -1,223 +1,4 @@
-import {
-  createSeriesPreset,
-  createGridPreset,
-  createMultiGridPreset,
-  createMultiValuePreset,
-  createRelationshipPreset,
-  createTreePreset } from './createPreset'
-
-// -- series --
-// 通用 - PRESET_SERIES_[name]
-export const PRESET_SERIES_BASIC = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: [],
-  description: '基本Series參數'
-})
-// Bubbles - PRESET_BUBBLES_[name]
-export const PRESET_BUBBLES_BASIC = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: ['PP_SERIES_LEGEND_ROUND'],
-  description: '基本泡泡圖'
-})
-export const PRESET_BUBBLES_SCALING_BY_RADIUS = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: ['PP_BUBBLES_SCALING_BY_RADIUS', 'PP_SERIES_LEGEND_ROUND'],
-  description: '以半徑尺寸為比例的泡泡圖'
-})
-// Pie - PRESET_PIE_[name]
-export const PRESET_PIE_BASIC = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: ['PP_SERIES_LEGEND_ROUND'],
-  description: '基本圓餅圖'
-})
-export const PRESET_PIE_WITH_INNER_LABELS = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: ['PP_PIE_LABELS_INNER', 'PP_SERIES_LEGEND_ROUND'],
-  description: '圓餅圖及內部資料標籤'
-})
-export const PRESET_PIE_DONUT = createSeriesPreset({
-  // chartParamsId: 'CP_RIGHT_PADDING',
-  allPluginParamsIds: ['PP_PIE_DONUT', 'PP_SERIES_LEGEND_ROUND'],
-  description: '甜甜圈圖'
-})
-export const PRESET_PIE_HALF_DONUT = createSeriesPreset({
-  chartParamsId: 'CP_TOP_AND_NO_BOTTOM_PADDING',
-  allPluginParamsIds: ['PP_PIE_HALF_DONUT', 'PP_PIE_LABELS_HALF_ANGLE', 'PP_SERIES_LEGEND_ROUND'],
-  description: '半圓甜甜圈圖'
-})
-
-// -- grid --
-// 通用 - PRESET_GRID_[name]
-export const PRESET_GRID_BASIC = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING',
-  allPluginParamsIds: ['PP_GRID_LEGEND_BOTTOM'],
-  description: '基本Grid參數'
-})
-export const PRESET_GRID_ROTATE_AXIS_LABEL = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  allPluginParamsIds: ['PP_GROUP_AXIS_ROTATE_LABEL', 'PP_GRID_LEGEND_BOTTOM'],
-  description: '傾斜標籤'
-})
-export const PRESET_GRID_HORIZONTAL = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_AND_LEFT_PADDING',
-  dataFormatterId: 'DF_GRID_BOTTOM_VALUE_AXIS',
-  allPluginParamsIds: ['PP_GRID_LEGEND_BOTTOM'],
-  description: '橫向圖'
-})
-export const PRESET_GRID_DIVERGING_SCALE = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING',
-  dataFormatterId: 'DF_GRID_DIVERGING_SCALE',
-  allPluginParamsIds: ['PP_GRID_LEGEND_BOTTOM'],
-  description: '正負值分向圖'
-})
-export const PRESET_GRID_2_SERIES_SLOT = createGridPreset({
-  chartParamsId:  'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_GRID_2_SERIES_SLOT',
-  allPluginParamsIds: ['PP_GROUP_AXIS_ROTATE_LABEL', 'PP_GRID_LEGEND_BOTTOM'],
-  description: '2組Series圖表'
-})
-export const PRESET_GRID_3_SERIES_SLOT = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_GRID_3_SERIES_SLOT',
-  allPluginParamsIds: ['PP_GROUP_AXIS_ROTATE_LABEL', 'PP_GRID_LEGEND_BOTTOM', 'PP_GROUP_AXIS_ROTATE_LABEL'],
-  description: '3組Series圖表'
-})
-export const PRESET_GRID_4_SERIES_SLOT = createGridPreset({
-  chartParamsId:  'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_GRID_4_SERIES_SLOT',
-  allPluginParamsIds: ['PP_GROUP_AXIS_ROTATE_LABEL', 'PP_GRID_LEGEND_BOTTOM'],
-  description: '4組Series圖表'
-})
-// Bars - PRESET_BARS_[name]
-export const PRESET_BARS_ROUND = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING',
-  allPluginParamsIds: ['PP_BARS_ROUND', 'PP_GRID_LEGEND_BOTTOM_WITH_ROUND_LIST'],
-  description: '圓角長條圖'
-})
-export const PRESET_BARS_HORIZONTAL_AND_ROUND = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_AND_LEFT_PADDING',
-  dataFormatterId: 'DF_GRID_BOTTOM_VALUE_AXIS',
-  allPluginParamsIds: ['PP_BARS_ROUND', 'PP_GRID_LEGEND_BOTTOM_WITH_ROUND_LIST'],
-  description: '橫向圓角長條圖'
-})
-export const PRESET_BARS_THIN = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING',
-  allPluginParamsIds: ['PP_BARS_THIN', 'PP_GRID_LEGEND_BOTTOM'],
-  description: '細長條圖'
-})
-export const PRESET_BARS_HORIZONTAL_AND_THIN = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_AND_LEFT_PADDING',
-  dataFormatterId: 'DF_GRID_BOTTOM_VALUE_AXIS',
-  allPluginParamsIds: ['PP_BARS_ROUND', 'PP_GRID_LEGEND_BOTTOM_WITH_ROUND_LIST'],
-  description: '橫向圓角長條圖'
-})
-// Lines - PRESET_LINES_[name]
-export const PRESET_LINES_BASIC = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-  allPluginParamsIds: ['PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-  description: '基本Grid參數'
-})
-export const PRESET_LINES_ROTATE_AXIS_LABEL = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING_WITH_SERIES_HIGHLIGHT',
-  allPluginParamsIds: ['PP_GROUP_AXIS_ROTATE_LABEL', 'PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-  description: '傾斜標籤'
-})
-export const PRESET_LINES_HORIZONTAL = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_AND_LEFT_PADDING_WITH_SERIES_HIGHLIGHT',
-  dataFormatterId: 'DF_GRID_BOTTOM_VALUE_AXIS',
-  allPluginParamsIds: ['PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-  description: '橫向圓角長條圖'
-})
-// export const PRESET_LINES_WITH_SOLID_DOTS = createGridPreset({
-//   chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-//   allPluginParamsIds: ['PP_DOTS_SOLID', 'PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-//   description: '折線圖及實心圓點'
-// })
-export const PRESET_LINES_CURVE = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-  allPluginParamsIds: ['PP_LINES_CURVE', 'PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-  description: '弧線折線圖'
-})
-// export const PRESET_LINES_CURVES_WITH_SOLID_DOTS = createGridPreset({
-//   chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-//   allPluginParamsIds: ['PP_LINES_CURVE', 'PP_DOTS_SOLID', 'PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-//   description: '弧線折線圖及實心圓點'
-// })
-export const PRESET_LINES_HIGHLIGHT_GROUP_DOTS = createGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING_WITH_GROUP_HIGHLIGHT',
-  allPluginParamsIds: ['PP_DOTS_ONLY_SHOW_HIGHLIGHTED', 'PP_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-  description: '折線圖及Highlight Group圓點'
-})
-
-// -- multi-grid --
-// 通用 - PRESET_MULTI_GRID_[name]
-export const PRESET_MULTI_GRID_BASIC = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_RECT_AND_LINE_LIST'],
-  description: '基本MultiGrid參數'
-})
-export const PRESET_MULTI_GRID_ROUND_STYLE = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_ROUND_AND_LINE_LIST', 'PP_MULTI_BARS_ROUND', 'PP_MULTI_LINES_CURVE'],
-  description: 'MultiGrid圓弧風格'
-})
-export const PRESET_MULTI_GRID_2_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_2_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM', 'PP_MULTI_GROUP_AXIS_2_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_2_GRID_SLOT', 'PP_MULTI_BARS_2_GRID_SLOT', 'PP_MULTI_BAR_STACK_2_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_2_GRID_SLOT', 'PP_MULTI_LINES_2_GRID_SLOT'],
-  description: '2組Grid圖表'
-})
-export const PRESET_MULTI_GRID_3_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_3_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM', 'PP_MULTI_GROUP_AXIS_3_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_3_GRID_SLOT', 'PP_MULTI_BARS_3_GRID_SLOT', 'PP_MULTI_BAR_STACK_3_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_3_GRID_SLOT', 'PP_MULTI_LINES_3_GRID_SLOT'],
-  description: '3組Grid圖表'
-})
-export const PRESET_MULTI_GRID_4_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_4_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM', 'PP_MULTI_GROUP_AXIS_4_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_4_GRID_SLOT', 'PP_MULTI_BARS_4_GRID_SLOT', 'PP_MULTI_BAR_STACK_4_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_4_GRID_SLOT', 'PP_MULTI_LINES_4_GRID_SLOT'],
-  description: '4組Grid圖表'
-})
-// // MultiBars, MultiLines - PRESET_MULTI_BARS_MULTI_LINES_[name]
-// export const PRESET_MULTI_BARS_MULTI_LINES_BASIC = createMultiGridPreset({
-//   chartParamsId: 'CP_BOTTOM_PADDING_WITH_SERIES_HIGHLIGHT',
-//   allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_RECT_AND_LINE_LIST'],
-//   description: '基本MultiGrid參數'
-// })
-// MultiLines - PRESET_MULTI_LINES_[name]
-// export const PRESET_MULTI_LINES_BASIC = createMultiGridPreset({
-//   chartParamsId: 'CP_BOTTOM_PADDING',
-//   allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_LINE_LIST'],
-//   description: '基本MultiGrid參數'
-// })
-export const PRESET_MULTI_LINES_2_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_2_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_LINE_LIST', 'PP_MULTI_GROUP_AXIS_2_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_2_GRID_SLOT', 'PP_MULTI_BARS_2_GRID_SLOT', 'PP_MULTI_BAR_STACK_2_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_2_GRID_SLOT', 'PP_MULTI_LINES_2_GRID_SLOT'],
-  description: '2組折線圖表'
-})
-export const PRESET_MULTI_LINES_3_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_3_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_LINE_LIST', 'PP_MULTI_GROUP_AXIS_3_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_3_GRID_SLOT', 'PP_MULTI_BARS_3_GRID_SLOT', 'PP_MULTI_BAR_STACK_3_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_3_GRID_SLOT', 'PP_MULTI_LINES_3_GRID_SLOT'],
-  description: '3組折線圖表'
-})
-export const PRESET_MULTI_LINES_4_GRID_SLOT = createMultiGridPreset({
-  chartParamsId: 'CP_BOTTOM_LONG_PADDING',
-  dataFormatterId: 'DF_MULTI_GRID_4_GRID_SLOT',
-  allPluginParamsIds: ['PP_MULTI_GRID_LEGEND_BOTTOM_WITH_LINE_LIST', 'PP_MULTI_GROUP_AXIS_4_GRID_SLOT', 'PP_MULTI_VALUE_AXIS_4_GRID_SLOT', 'PP_MULTI_BARS_4_GRID_SLOT', 'PP_MULTI_BAR_STACK_4_GRID_SLOT', 'PP_MULTI_BARS_TRIANGLE_4_GRID_SLOT', 'PP_MULTI_LINES_4_GRID_SLOT'],
-  description: '4組折線圖表'
-})
-
-// -- multi-value --
-
-// -- relationship --
-
-// -- tree --
-// 通用 - PRESET_TREE_[name]
-export const PRESET_TREE_BASIC = createTreePreset({
-  chartParamsId: 'CP_BOTTOM_SLIGHT_PADDING',
-  allPluginParamsIds: ['PP_TREE_LEGEND_BOTTOM'],
-  description: '基本Tree參數'
-})
+export * from './series'
+export * from './grid'
+export * from './multiGrid'
+export * from './tree'

package/src/multiGrid/PRESET_MULTI_GRID_BASIC.ts

@@ -0,0 +1,38 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+// import { ALL_PLUGIN_PARAMS_MULTI_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_GRID_BASIC: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_GRID_BASIC',
+  description: '基本MultiGrid參數',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 120,
+      left: 60
+    },
+    highlightTarget: 'series'
+  },
+  allPluginParams: {
+    // ...ALL_PLUGIN_PARAMS_MULTI_GRID,
+    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+      gridList: [
+        {
+        },
+        {
+          listRectHeight: 2,
+        }
+      ]
+    }
+  }
+}

package/src/multiGrid/PRESET_MULTI_GRID_DIVERGING.ts

@@ -0,0 +1,86 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_GRID_DIVERGING',
+  description: '雙向折線圖',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 120,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    gridList: [
+      // 第一個grid
+      {
+        groupAxis: {
+          position: 'right'
+        },
+        valueAxis: {
+          position: 'bottom'
+        },
+      },
+      // 第二個grid
+      {
+        groupAxis: {
+          position: 'left'
+        },
+        valueAxis: {
+          position: 'bottom'
+        },
+      }
+    ],
+    // 設定排版方式
+    container: {
+      gap: 200,
+      rowAmount: 1,
+      columnAmount: 2
+    },
+    separateGrid: true // 將兩個grid拆分
+  },
+  allPluginParams: {
+    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiGroupAxis: {
+      tickPadding: 60, // 加長間距
+      gridIndexes: [0] // 只顯示一個
+    },
+    MultiValueAxis: {
+      gridIndexes: [0, 1]
+    },
+    MultiValueStackAxis: {
+      gridIndexes: [0, 1]
+    },
+    MultiBars: {
+      gridIndexes: [0, 1]
+    },
+    MultiBarStack: {
+      gridIndexes: [0, 1]
+    },
+    MultiBarsTriangle: {
+      gridIndexes: [0, 1]
+    },
+    MultiLines: {
+      gridIndexes: [0, 1]
+    },
+    MultiLineAreas: {
+      gridIndexes: [0, 1]
+    },
+    MultiDots: {
+      gridIndexes: [0, 1]
+    },
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiGrid/PRESET_MULTI_GRID_ROUND_STYLE.ts

@@ -0,0 +1,58 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type {
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+type PresetMultiGridRoundPluginParams = Omit<PresetMultiGridPluginParams, 'MultiBarsTriangle'>
+
+export const PRESET_MULTI_GRID_ROUND_STYLE: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_GRID_ROUND_STYLE',
+  description: 'MultiGrid圓弧風格',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 120,
+      left: 60
+    },
+    highlightTarget: 'series'
+  },
+  allPluginParams: {
+    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiBars: {
+      barWidth: 0,
+      barPadding: 1,
+      barGroupPadding: 10,
+      barRadius: true,
+    },
+    MultiBarStack: {},
+    MultiDots: {},
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+      gridList: [
+        {
+          listRectRadius: 7,
+        },
+        {
+          listRectHeight: 2,
+        }
+      ]
+    },
+    MultiGroupAxis: {},
+    MultiLineAreas: {},
+    MultiLines: {
+      lineCurve: 'curveMonotoneX',
+      lineWidth: 3
+    },
+    MultiValueAxis: {},
+    MultiValueStackAxis: {},
+    OverlappingValueAxes: {},
+    OverlappingValueStackAxes: {},
+  }
+}

package/src/multiGrid/PRESET_MULTI_GRID_SEPARATE_GRID.ts

@@ -0,0 +1,60 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_GRID_SEPARATE_GRID: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_GRID_SEPARATE_GRID',
+  description: '2組Grid圖表',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 160,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    separateGrid: true,
+  },
+  allPluginParams: {
+    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiGroupAxis: {
+      tickTextRotate: -30,
+      gridIndexes: 'all'
+    },
+    MultiValueAxis: {
+      gridIndexes: 'all'
+    },
+    MultiValueStackAxis: {
+      gridIndexes: 'all'
+    },
+    MultiBars: {
+      gridIndexes: 'all'
+    },
+    MultiBarStack: {
+      gridIndexes: 'all'
+    },
+    MultiBarsTriangle: {
+      gridIndexes: 'all'
+    },
+    MultiLines: {
+      gridIndexes: 'all'
+    },
+    MultiLineAreas: {
+      gridIndexes: 'all'
+    },
+    MultiDots: {
+      gridIndexes: 'all'
+    },
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiGrid/PRESET_MULTI_LINES_SEPARATE_GRID.ts

@@ -0,0 +1,86 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_LINES_SEPARATE_GRID: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_LINES_SEPARATE_GRID',
+  description: '多組分開折線圖表',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 160,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    separateGrid: true,
+  },
+  allPluginParams: {
+    ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiGroupAxis: {
+      tickTextRotate: -30,
+      gridIndexes: 'all'
+    },
+    MultiValueAxis: {
+      gridIndexes: 'all'
+    },
+    MultiValueStackAxis: {
+      gridIndexes: 'all'
+    },
+    MultiBars: {
+      gridIndexes: 'all'
+    },
+    MultiBarStack: {
+      gridIndexes: 'all'
+    },
+    MultiBarsTriangle: {
+      gridIndexes: 'all'
+    },
+    MultiLines: {
+      gridIndexes: 'all'
+    },
+    MultiLineAreas: {
+      gridIndexes: 'all'
+    },
+    MultiDots: {
+      gridIndexes: 'all'
+    },
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+      gridList: [
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        }
+      ]
+    }
+  }
+}

package/src/multiGrid/PRESET_MULTI_LINE_AREAS_SEPARATE_GRID.ts

@@ -0,0 +1,104 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_LINE_AREAS_SEPARATE_GRID: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_LINE_AREAS_SEPARATE_GRID',
+  description: '2組區域圖表',
+  chartParams: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 160,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    gridList: [
+      {
+        // slotIndex: 0
+        groupAxis: {
+          scalePadding: 0
+        }
+      },
+      {
+        // slotIndex: 1,
+        groupAxis: {
+          scalePadding: 0
+        }
+      }
+    ],
+    separateGrid: true,
+    // container: {
+    //   rowAmount: 1,
+    //   columnAmount: 2,
+    // }
+  },
+  allPluginParams: {
+    ...ALL_PLUGIN_PARAMS_NONE_DATA,
+    MultiGroupAxis: {
+      tickTextRotate: -30,
+      gridIndexes: 'all'
+    },
+    MultiValueAxis: {
+      gridIndexes: 'all'
+    },
+    MultiValueStackAxis: {
+      gridIndexes: 'all'
+    },
+    MultiBars: {
+      gridIndexes: 'all'
+    },
+    MultiBarStack: {
+      gridIndexes: 'all'
+    },
+    MultiBarsTriangle: {
+      gridIndexes: 'all'
+    },
+    MultiLines: {
+      gridIndexes: 'all'
+    },
+    MultiLineAreas: {
+      gridIndexes: 'all'
+    },
+    MultiDots: {
+      gridIndexes: 'all'
+    },
+    MultiGridLegend: {
+      // position: 'bottom',
+      // justify: 'center',
+      placement: 'bottom',
+      padding: 14,
+      gridList: [
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        },
+        {
+          listRectHeight: 2,
+        }
+      ]
+    }
+  }
+}

package/src/multiGrid/index.ts

@@ -0,0 +1,6 @@
+export { PRESET_MULTI_GRID_BASIC } from './PRESET_MULTI_GRID_BASIC'
+export { PRESET_MULTI_GRID_DIVERGING } from './PRESET_MULTI_GRID_DIVERGING'
+export { PRESET_MULTI_GRID_ROUND_STYLE } from './PRESET_MULTI_GRID_ROUND_STYLE'
+export { PRESET_MULTI_GRID_SEPARATE_GRID } from './PRESET_MULTI_GRID_SEPARATE_GRID'
+export { PRESET_MULTI_LINE_AREAS_SEPARATE_GRID } from './PRESET_MULTI_LINE_AREAS_SEPARATE_GRID'
+export { PRESET_MULTI_LINES_SEPARATE_GRID } from './PRESET_MULTI_LINES_SEPARATE_GRID'