@orbcharts/presets-basic 3.0.0-beta.10 → 3.0.0-beta.12

package/src/grid/PRESET_LINE_AREAS_HORIZONTAL.ts

@@ -2,34 +2,47 @@ import type { PresetPartial } from '../../lib/core-types'
 import type { PresetGridPluginParams,
   PresetNoneDataPluginParams
 } from '../types'
-// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
 
 export const PRESET_LINE_AREAS_HORIZONTAL: PresetPartial<'grid', Partial<PresetGridPluginParams>
 & Partial<PresetNoneDataPluginParams>> = {
   name: 'PRESET_LINE_AREAS_HORIZONTAL',
-  description: '橫向折線圖',
+  description: 'Horizontal LineArea',
+  descriptionZh: '橫向折線區域圖',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 120,
+      top: 40,
+      right: 40,
+      bottom: 100,
       left: 160
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    // grid: {
-      valueAxis: {
-        position: 'bottom'
-      },
-      groupAxis: {
-        position: 'left',
-        scalePadding: 0
-      },
-    // }
+    valueAxis: {
+      position: 'bottom'
+    },
+    groupAxis: {
+      position: 'left',
+      scalePadding: 0
+    },
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     Lines: {},
     LineAreas: {},
     Dots: {},
@@ -37,8 +50,6 @@ export const PRESET_LINE_AREAS_HORIZONTAL: PresetPartial<'grid', Partial<PresetG
     ValueAxis: {},
     GroupAux: {},
     GridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       listRectHeight: 2

package/src/grid/PRESET_LINE_AREAS_LOOSE_TICKS.ts

@@ -2,30 +2,43 @@ import type { PresetPartial } from '../../lib/core-types'
 import type { PresetGridPluginParams,
   PresetNoneDataPluginParams
 } from '../types'
-// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
 
 export const PRESET_LINE_AREAS_LOOSE_TICKS: PresetPartial<'grid', Partial<PresetGridPluginParams>
 & Partial<PresetNoneDataPluginParams>> = {
   name: 'PRESET_LINE_AREAS_LOOSE_TICKS',
-  description: '寬鬆標籤',
+  description: 'Loose Ticks LineArea',
+  descriptionZh: '寬鬆標籤的折線區域圖',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 120,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 100,
+      left: 80
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    // grid: {
-      groupAxis: {
-        scalePadding: 0
-      }
-    // }
+    groupAxis: {
+      scalePadding: 0
+    }
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     Lines: {},
     LineAreas: {},
     Dots: {},
@@ -35,8 +48,6 @@ export const PRESET_LINE_AREAS_LOOSE_TICKS: PresetPartial<'grid', Partial<Preset
     ValueAxis: {},
     GroupAux: {},
     GridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       listRectHeight: 2

package/src/grid/PRESET_LINE_AREAS_ROTATE_AXIS_LABEL.ts

@@ -2,30 +2,43 @@ import type { PresetPartial } from '../../lib/core-types'
 import type { PresetGridPluginParams,
   PresetNoneDataPluginParams
 } from '../types'
-// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
 
 export const PRESET_LINE_AREAS_ROTATE_AXIS_LABEL: PresetPartial<'grid', Partial<PresetGridPluginParams>
 & Partial<PresetNoneDataPluginParams>> = {
   name: 'PRESET_LINE_AREAS_ROTATE_AXIS_LABEL',
-  description: '傾斜標籤',
+  description: 'Rotate Axis Label LineArea',
+  descriptionZh: '傾斜標籤的折線區域圖',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 160,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 140,
+      left: 80
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    // grid: {
-      groupAxis: {
-        scalePadding: 0
-      }
-    // }
+    groupAxis: {
+      scalePadding: 0
+    }
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     Lines: {},
     LineAreas: {},
     Dots: {},
@@ -38,8 +51,6 @@ export const PRESET_LINE_AREAS_ROTATE_AXIS_LABEL: PresetPartial<'grid', Partial<
       labelRotate: -30
     },
     GridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       listRectHeight: 2

package/src/grid/PRESET_LINE_AREAS_SEPARATE_SERIES.ts

@@ -2,32 +2,44 @@ import type { PresetPartial } from '../../lib/core-types'
 import type { PresetGridPluginParams,
   PresetNoneDataPluginParams
 } from '../types'
-// import { ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
 
 export const PRESET_LINE_AREAS_SEPARATE_SERIES: PresetPartial<'grid', Partial<PresetGridPluginParams>
 & Partial<PresetNoneDataPluginParams>> = {
   name: 'PRESET_LINE_AREAS_SEPARATE_SERIES',
-  description: 'LineAreas 分開顯示Series',
+  description: 'Separate Series LineArea',
+  descriptionZh: '分開顯示Series的折線區域圖',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 160,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 140,
+      left: 80
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    // grid: {
-      // seriesSlotIndexes: [0, 1],
-      separateSeries: true,
-      groupAxis: {
-        scalePadding: 0
-      }
-    // },
+    separateSeries: true,
+    groupAxis: {
+      scalePadding: 0
+    }
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     Lines: {},
     LineAreas: {},
     Dots: {},
@@ -40,8 +52,6 @@ export const PRESET_LINE_AREAS_SEPARATE_SERIES: PresetPartial<'grid', Partial<Pr
       labelRotate: -30
     },
     GridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       listRectHeight: 2

package/src/grid/PRESET_LINE_AREAS_SIMPLE.ts

@@ -0,0 +1,57 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+
+export const PRESET_LINE_AREAS_SIMPLE: PresetPartial<'grid', Partial<PresetGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_LINE_AREAS_SIMPLE',
+  description: 'Simple LineArea',
+  descriptionZh: '簡單折線區域圖',
+  chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
+    padding: {
+      top: 40,
+      right: 40,
+      bottom: 80,
+      left: 40
+    },
+    highlightTarget: 'series'
+  },
+  dataFormatter: {
+    groupAxis: {
+      scalePadding: 0
+    },
+    valueAxis: {
+      scaleRange: [0, 0.95]
+    }
+  },
+  pluginParams: {
+    Lines: {},
+    LineAreas: {},
+    Dots: {},
+    GroupAxis: {},
+    ValueAxis: {},
+    GroupAux: {},
+    GridLegend: {
+      placement: 'bottom',
+      padding: 7,
+      listRectHeight: 2
+    }
+  }
+}

package/src/grid/index.ts

@@ -4,9 +4,11 @@ export { PRESET_BARS_ROUND } from './PRESET_BARS_ROUND'
 export { PRESET_BARS_THIN } from './PRESET_BARS_THIN'
 export { PRESET_GRID_BASIC } from './PRESET_GRID_BASIC'
 export { PRESET_GRID_HORIZONTAL } from './PRESET_GRID_HORIZONTAL'
+export { PRESET_GRID_PN_SCALE_SIMPLE } from './PRESET_GRID_PN_SCALE_SIMPLE'
 export { PRESET_GRID_PN_SCALE } from './PRESET_GRID_PN_SCALE'
 export { PRESET_GRID_ROTATE_AXIS_LABEL } from './PRESET_GRID_ROTATE_AXIS_LABEL'
 export { PRESET_GRID_SEPARATE_SERIES } from './PRESET_GRID_SEPARATE_SERIES'
+export { PRESET_GRID_SIMPLE } from './PRESET_GRID_SIMPLE'
 export { PRESET_LINE_AREAS_BASIC } from './PRESET_LINE_AREAS_BASIC'
 export { PRESET_LINE_AREAS_CURVE } from './PRESET_LINE_AREAS_CURVE'
 // export { PRESET_LINE_AREAS_HIGHLIGHT_GROUP_DOTS } from './PRESET_LINE_AREAS_HIGHLIGHT_GROUP_DOTS'
@@ -14,10 +16,12 @@ export { PRESET_LINE_AREAS_HORIZONTAL } from './PRESET_LINE_AREAS_HORIZONTAL'
 export { PRESET_LINE_AREAS_LOOSE_TICKS } from './PRESET_LINE_AREAS_LOOSE_TICKS'
 export { PRESET_LINE_AREAS_ROTATE_AXIS_LABEL } from './PRESET_LINE_AREAS_ROTATE_AXIS_LABEL'
 export { PRESET_LINE_AREAS_SEPARATE_SERIES } from './PRESET_LINE_AREAS_SEPARATE_SERIES'
+export { PRESET_LINE_AREAS_SIMPLE } from './PRESET_LINE_AREAS_SIMPLE'
 export { PRESET_LINES_BASIC } from './PRESET_LINES_BASIC'
 export { PRESET_LINES_CURVE } from './PRESET_LINES_CURVE'
 // export { PRESET_LINES_HIGHLIGHT_GROUP_DOTS } from './PRESET_LINES_HIGHLIGHT_GROUP_DOTS'
 export { PRESET_LINES_HORIZONTAL } from './PRESET_LINES_HORIZONTAL'
 export { PRESET_LINES_LOOSE_TICKS } from './PRESET_LINES_LOOSE_TICKS'
 export { PRESET_LINES_ROTATE_AXIS_LABEL } from './PRESET_LINES_ROTATE_AXIS_LABEL'
+export { PRESET_LINES_SIMPLE } from './PRESET_LINES_SIMPLE'
 export { PRESET_LINES_WITH_SOLID_DOTS } from './PRESET_LINES_WITH_SOLID_DOTS'

package/src/multiGrid/PRESET_MULTI_GRID_BASIC.ts

@@ -3,27 +3,39 @@ 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參數',
+  description: 'Basic MultiGrid',
+  descriptionZh: '基本MultiGrid參數',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 120,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 100,
+      left: 80
     },
     highlightTarget: 'series'
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_MULTI_GRID,
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     MultiGridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       gridList: [

package/src/multiGrid/PRESET_MULTI_GRID_DIVERGING.ts

@@ -3,18 +3,34 @@ 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: '雙向折線圖',
+  description: 'Diverging Grid',
+  descriptionZh: '雙向Grid',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 120,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 100,
+      left: 80
     },
   },
   dataFormatter: {
@@ -40,16 +56,14 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
     ],
     // 設定排版方式
     container: {
-      gap: 200,
+      gap: 160,
       rowAmount: 1,
       columnAmount: 2
     },
     separateGrid: true // 將兩個grid拆分
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     MultiGroupAxis: {
-      tickPadding: 60, // 加長間距
       gridIndexes: [0] // 只顯示一個
     },
     MultiValueAxis: {
@@ -61,7 +75,7 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
     MultiBars: {
       gridIndexes: [0, 1]
     },
-    MultiStackedBar: {
+    MultiStackedBars: {
       gridIndexes: [0, 1]
     },
     MultiBarsTriangle: {
@@ -77,8 +91,6 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
       gridIndexes: [0, 1]
     },
     MultiGridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
     }

package/src/multiGrid/PRESET_MULTI_GRID_DIVERGING_SIMPLE.ts

@@ -0,0 +1,101 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { 
+  PresetMultiGridPluginParams,
+  PresetNoneDataPluginParams
+} from '../types'
+
+export const PRESET_MULTI_GRID_DIVERGING_SIMPLE: PresetPartial<'multiGrid', Partial<PresetMultiGridPluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_GRID_DIVERGING_SIMPLE',
+  description: 'Simple diverging Grid',
+  descriptionZh: '簡單雙向Grid',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
+    padding: {
+      top: 40,
+      right: 40,
+      bottom: 60,
+      left: 40
+    },
+  },
+  dataFormatter: {
+    gridList: [
+      // 第一個grid
+      {
+        groupAxis: {
+          position: 'right'
+        },
+        valueAxis: {
+          position: 'bottom',
+          scaleRange: [0, 0.95]
+        },
+      },
+      // 第二個grid
+      {
+        groupAxis: {
+          position: 'left'
+        },
+        valueAxis: {
+          position: 'bottom',
+          scaleRange: [0, 0.95]
+        },
+      }
+    ],
+    // 設定排版方式
+    container: {
+      gap: 100,
+      rowAmount: 1,
+      columnAmount: 2
+    },
+    separateGrid: true // 將兩個grid拆分
+  },
+  pluginParams: {
+    MultiGroupAxis: {
+      tickPadding: 10,
+      gridIndexes: [0] // 只顯示一個
+    },
+    MultiValueAxis: {
+      gridIndexes: [0, 1]
+    },
+    MultiStackedValueAxis: {
+      gridIndexes: [0, 1]
+    },
+    MultiBars: {
+      gridIndexes: [0, 1]
+    },
+    MultiStackedBars: {
+      gridIndexes: [0, 1]
+    },
+    MultiBarsTriangle: {
+      gridIndexes: [0, 1]
+    },
+    MultiLines: {
+      gridIndexes: [0, 1]
+    },
+    MultiLineAreas: {
+      gridIndexes: [0, 1]
+    },
+    MultiDots: {
+      gridIndexes: [0, 1]
+    },
+    MultiGridLegend: {
+      placement: 'bottom',
+      padding: 7,
+    }
+  }
+}

package/src/multiGrid/PRESET_MULTI_GRID_ROUND_STYLE.ts

@@ -3,36 +3,49 @@ 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>
+export const PRESET_MULTI_GRID_ROUND_STYLE: PresetPartial<'multiGrid', Partial<PresetMultiGridRoundPluginParams>
 & Partial<PresetNoneDataPluginParams>> = {
   name: 'PRESET_MULTI_GRID_ROUND_STYLE',
-  description: 'MultiGrid圓弧風格',
+  description: 'MultiGrid with round style',
+  descriptionZh: 'MultiGrid圓弧風格',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
-      top: 60,
-      right: 60,
-      bottom: 120,
-      left: 60
+      top: 40,
+      right: 40,
+      bottom: 100,
+      left: 80
     },
     highlightTarget: 'series'
   },
-  allPluginParams: {
-    // ...ALL_PLUGIN_PARAMS_NONE_DATA,
+  pluginParams: {
     MultiBars: {
       barWidth: 0,
       barPadding: 1,
       barGroupPadding: 10,
       barRadius: true,
     },
-    MultiStackedBar: {},
+    MultiStackedBars: {},
     MultiDots: {},
     MultiGridLegend: {
-      // position: 'bottom',
-      // justify: 'center',
       placement: 'bottom',
       padding: 14,
       gridList: [