@orbcharts/presets-basic 3.0.0-beta.1 → 3.0.0-beta.11

package/src/grid/PRESET_LINE_AREAS_ROTATE_AXIS_LABEL.ts

@@ -9,20 +9,36 @@ export const PRESET_LINE_AREAS_ROTATE_AXIS_LABEL: PresetPartial<'grid', Partial<
   name: 'PRESET_LINE_AREAS_ROTATE_AXIS_LABEL',
   description: '傾斜標籤',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 160,
-      left: 60
+      bottom: 140,
+      left: 80
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    grid: {
+    // grid: {
       groupAxis: {
         scalePadding: 0
       }
-    }
+    // }
   },
   allPluginParams: {
     // ...ALL_PLUGIN_PARAMS_NONE_DATA,

package/src/grid/PRESET_LINE_AREAS_SEPARATE_SERIES.ts

@@ -9,22 +9,38 @@ export const PRESET_LINE_AREAS_SEPARATE_SERIES: PresetPartial<'grid', Partial<Pr
   name: 'PRESET_LINE_AREAS_SEPARATE_SERIES',
   description: 'LineAreas 分開顯示Series',
   chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#4BABFF",
+          "#FFA0A0",
+          "#7DD3C4",
+          "#F9B052",
+          "#8454D4",
+          "#42C724",
+          "#FF4B4B",
+          "#904026",
+          "#4B25B3",
+          "#C50669"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 160,
-      left: 60
+      bottom: 140,
+      left: 80
     },
     highlightTarget: 'series'
   },
   dataFormatter: {
-    grid: {
+    // grid: {
       // seriesSlotIndexes: [0, 1],
       separateSeries: true,
       groupAxis: {
         scalePadding: 0
       }
-    },
+    // },
   },
   allPluginParams: {
     // ...ALL_PLUGIN_PARAMS_NONE_DATA,

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './series'
 export * from './grid'
 export * from './multiGrid'
+export * from './multiValue'
+export * from './relationship'
 export * from './tree'

package/src/multiGrid/PRESET_MULTI_GRID_BASIC.ts

@@ -10,11 +10,27 @@ export const PRESET_MULTI_GRID_BASIC: PresetPartial<'multiGrid', Partial<PresetM
   name: 'PRESET_MULTI_GRID_BASIC',
   description: '基本MultiGrid參數',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 120,
-      left: 60
+      bottom: 100,
+      left: 80
     },
     highlightTarget: 'series'
   },

package/src/multiGrid/PRESET_MULTI_GRID_DIVERGING.ts

@@ -10,11 +10,27 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
   name: 'PRESET_MULTI_GRID_DIVERGING',
   description: '雙向折線圖',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 120,
-      left: 60
+      bottom: 100,
+      left: 80
     },
   },
   dataFormatter: {
@@ -40,7 +56,7 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
     ],
     // 設定排版方式
     container: {
-      gap: 200,
+      gap: 160,
       rowAmount: 1,
       columnAmount: 2
     },
@@ -49,19 +65,19 @@ export const PRESET_MULTI_GRID_DIVERGING: PresetPartial<'multiGrid', Partial<Pre
   allPluginParams: {
     // ...ALL_PLUGIN_PARAMS_NONE_DATA,
     MultiGroupAxis: {
-      tickPadding: 60, // 加長間距
+      // tickPadding: 60, // 加長間距
       gridIndexes: [0] // 只顯示一個
     },
     MultiValueAxis: {
       gridIndexes: [0, 1]
     },
-    MultiValueStackAxis: {
+    MultiStackedValueAxis: {
       gridIndexes: [0, 1]
     },
     MultiBars: {
       gridIndexes: [0, 1]
     },
-    MultiBarStack: {
+    MultiStackedBar: {
       gridIndexes: [0, 1]
     },
     MultiBarsTriangle: {

package/src/multiGrid/PRESET_MULTI_GRID_ROUND_STYLE.ts

@@ -12,11 +12,27 @@ export const PRESET_MULTI_GRID_ROUND_STYLE: PresetPartial<'multiGrid', Partial<P
   name: 'PRESET_MULTI_GRID_ROUND_STYLE',
   description: 'MultiGrid圓弧風格',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 120,
-      left: 60
+      bottom: 100,
+      left: 80
     },
     highlightTarget: 'series'
   },
@@ -28,7 +44,7 @@ export const PRESET_MULTI_GRID_ROUND_STYLE: PresetPartial<'multiGrid', Partial<P
       barGroupPadding: 10,
       barRadius: true,
     },
-    MultiBarStack: {},
+    MultiStackedBar: {},
     MultiDots: {},
     MultiGridLegend: {
       // position: 'bottom',
@@ -51,8 +67,8 @@ export const PRESET_MULTI_GRID_ROUND_STYLE: PresetPartial<'multiGrid', Partial<P
       lineWidth: 3
     },
     MultiValueAxis: {},
-    MultiValueStackAxis: {},
+    MultiStackedValueAxis: {},
     OverlappingValueAxes: {},
-    OverlappingValueStackAxes: {},
+    OverlappingStackedValueAxes: {},
   }
 }

package/src/multiGrid/PRESET_MULTI_GRID_SEPARATE_GRID.ts

@@ -10,11 +10,27 @@ export const PRESET_MULTI_GRID_SEPARATE_GRID: PresetPartial<'multiGrid', Partial
   name: 'PRESET_MULTI_GRID_SEPARATE_GRID',
   description: '2組Grid圖表',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 160,
-      left: 60
+      bottom: 140,
+      left: 80
     },
   },
   dataFormatter: {
@@ -29,13 +45,13 @@ export const PRESET_MULTI_GRID_SEPARATE_GRID: PresetPartial<'multiGrid', Partial
     MultiValueAxis: {
       gridIndexes: 'all'
     },
-    MultiValueStackAxis: {
+    MultiStackedValueAxis: {
       gridIndexes: 'all'
     },
     MultiBars: {
       gridIndexes: 'all'
     },
-    MultiBarStack: {
+    MultiStackedBar: {
       gridIndexes: 'all'
     },
     MultiBarsTriangle: {

package/src/multiGrid/PRESET_MULTI_LINES_SEPARATE_GRID.ts

@@ -10,11 +10,27 @@ export const PRESET_MULTI_LINES_SEPARATE_GRID: PresetPartial<'multiGrid', Partia
   name: 'PRESET_MULTI_LINES_SEPARATE_GRID',
   description: '多組分開折線圖表',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 160,
-      left: 60
+      bottom: 140,
+      left: 80
     },
   },
   dataFormatter: {
@@ -29,13 +45,13 @@ export const PRESET_MULTI_LINES_SEPARATE_GRID: PresetPartial<'multiGrid', Partia
     MultiValueAxis: {
       gridIndexes: 'all'
     },
-    MultiValueStackAxis: {
+    MultiStackedValueAxis: {
       gridIndexes: 'all'
     },
     MultiBars: {
       gridIndexes: 'all'
     },
-    MultiBarStack: {
+    MultiStackedBar: {
       gridIndexes: 'all'
     },
     MultiBarsTriangle: {

package/src/multiGrid/PRESET_MULTI_LINE_AREAS_SEPARATE_GRID.ts

@@ -10,11 +10,27 @@ export const PRESET_MULTI_LINE_AREAS_SEPARATE_GRID: PresetPartial<'multiGrid', P
   name: 'PRESET_MULTI_LINE_AREAS_SEPARATE_GRID',
   description: '2組區域圖表',
   chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#4BABFF",
+          "#94D6CB",
+          "#F9B052",
+          "#8454D4",
+          "#D58C75",
+          "#42C724",
+          "#FF8B8B",
+          "#904026",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
     padding: {
       top: 60,
       right: 60,
-      bottom: 160,
-      left: 60
+      bottom: 140,
+      left: 80
     },
   },
   dataFormatter: {
@@ -47,13 +63,13 @@ export const PRESET_MULTI_LINE_AREAS_SEPARATE_GRID: PresetPartial<'multiGrid', P
     MultiValueAxis: {
       gridIndexes: 'all'
     },
-    MultiValueStackAxis: {
+    MultiStackedValueAxis: {
       gridIndexes: 'all'
     },
     MultiBars: {
       gridIndexes: 'all'
     },
-    MultiBarStack: {
+    MultiStackedBar: {
       gridIndexes: 'all'
     },
     MultiBarsTriangle: {

package/src/multiValue/PRESET_MULTI_VALUE_BASIC.ts

@@ -0,0 +1,39 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_VALUE_BASIC: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_VALUE_BASIC',
+  description: '基本MultiValue參數',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#7DD3C4",
+          "#FFA0A0",
+          "#6CBAFF",
+          "#55D339",
+          "#F9B052",
+          "#FF6C6C",
+          "#8E6BC9",
+          "#0088FF",
+          "#904026",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiValue/PRESET_MULTI_VALUE_SEPARATE_CATEGORY.ts

@@ -0,0 +1,42 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_MULTI_VALUE_SEPARATE_CATEGORY: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_MULTI_VALUE_SEPARATE_CATEGORY',
+  description: 'MultiValue 分開顯示category',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#7DD3C4",
+          "#FFA0A0",
+          "#6CBAFF",
+          "#55D339",
+          "#F9B052",
+          "#FF6C6C",
+          "#8E6BC9",
+          "#0088FF",
+          "#904026",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    separateCategory: true
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiValue/PRESET_SCATTER_BASIC.ts

@@ -0,0 +1,39 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_SCATTER_BASIC: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_SCATTER_BASIC',
+  description: '基本散布圖',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#16B59B",
+          "#0088FF",
+          "#FF3232",
+          "#8E6BC9",
+          "#904026",
+          "#D117EA",
+          "#F38428",
+          "#6BDC51",
+          "#C50669",
+          "#4B25B3"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiValue/PRESET_SCATTER_BUBBLES_BASIC.ts

@@ -0,0 +1,39 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_SCATTER_BUBBLES_BASIC: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_SCATTER_BUBBLES_BASIC',
+  description: '基本的散布泡泡圖',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#6CBAFF",
+          "#FF6C6C",
+          "#F9B052",
+          "#7DD3C4",
+          "#AA93D2",
+          "#0088FF",
+          "#FFBABA",
+          "#86DC72",
+          "#EF76FF",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}

package/src/multiValue/PRESET_SCATTER_BUBBLES_LINEAR_OPACITY.ts

@@ -0,0 +1,42 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_SCATTER_BUBBLES_LINEAR_OPACITY: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_SCATTER_BUBBLES_LINEAR_OPACITY',
+  description: '漸變透明度的散布泡泡圖',
+  chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#6CBAFF",
+          "#FF6C6C",
+          "#F9B052",
+          "#7DD3C4",
+          "#AA93D2",
+          "#0088FF",
+          "#FFBABA",
+          "#86DC72",
+          "#EF76FF",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    },
+    ScatterBubbles: {
+      valueLinearOpacity: [0.6, 0.95]
+    }
+  }
+}

package/src/multiValue/PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS.ts

@@ -0,0 +1,42 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_SCATTER_BUBBLES_SCALING_BY_RADIUS',
+  description: '以半徑尺寸為比例的散布泡泡圖',
+  chartParams: {
+    colors: {
+      light: {
+        label: [
+          "#6CBAFF",
+          "#FF6C6C",
+          "#F9B052",
+          "#7DD3C4",
+          "#AA93D2",
+          "#0088FF",
+          "#FFBABA",
+          "#86DC72",
+          "#EF76FF",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    },
+    ScatterBubbles: {
+      arcScaleType: 'radius'
+    }
+  }
+}

package/src/multiValue/PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY.ts

@@ -0,0 +1,42 @@
+import type { PresetPartial } from '../../lib/core-types'
+import type { PresetMultiValuePluginParams, PresetNoneDataPluginParams } from '../types'
+// import { ALL_PLUGIN_PARAMS_GRID, ALL_PLUGIN_PARAMS_NONE_DATA } from '../params'
+
+export const PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY: PresetPartial<'multiValue', Partial<PresetMultiValuePluginParams>
+& Partial<PresetNoneDataPluginParams>> = {
+  name: 'PRESET_SCATTER_BUBBLES_SEPARATE_CATEGORY',
+  description: '分開顯示category的散布泡泡圖',
+  chartParams: {
+    colors: {
+      light: {
+        label:  [
+          "#6CBAFF",
+          "#FF6C6C",
+          "#F9B052",
+          "#7DD3C4",
+          "#AA93D2",
+          "#0088FF",
+          "#FFBABA",
+          "#86DC72",
+          "#EF76FF",
+          "#C4C4C4"
+        ],
+      }
+    },
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 100,
+      left: 60
+    },
+  },
+  dataFormatter: {
+    separateCategory: true
+  },
+  allPluginParams: {
+    MultiValueLegend: {
+      placement: 'bottom',
+      padding: 14,
+    }
+  }
+}