@orbcharts/core 3.0.0-alpha.33 → 3.0.0-alpha.34

package/src/base/createBaseChart.ts

@@ -84,6 +84,18 @@ function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOn
   })
 }
 
+function mergeDataFormatter <T>(dataFormatter: any, defaultDataFormatter: T, chartType: ChartType): T {
+  const mergedData = mergeOptionsWithDefault(dataFormatter, defaultDataFormatter)
+
+  if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
+    // multiGrid欄位為陣列，需要各別來merge預設值
+    (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
+      return mergeOptionsWithDefault(d, (defaultDataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
+    })
+  }
+  return mergedData
+}
+
 export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
   defaultDataFormatter: DataFormatterTypeMap<T>
   computedDataFn: ComputedDataFn<T>
@@ -127,12 +139,14 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
     const mergedPresetWithDefault: Preset<T> = ((options) => {
       const _options = options ? options : CHART_OPTIONS_DEFAULT as ChartOptionsPartial<T>
       const preset = _options.preset ? _options.preset : {} as PresetPartial<T>
+
       return {
         chartParams: preset.chartParams
           ? mergeOptionsWithDefault(preset.chartParams, CHART_PARAMS_DEFAULT)
           : CHART_PARAMS_DEFAULT,
         dataFormatter: preset.dataFormatter
-          ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
+          // ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
+          ? mergeDataFormatter(preset.dataFormatter, defaultDataFormatter, chartType)
           : defaultDataFormatter,
         allPluginParams: preset.allPluginParams
           ? preset.allPluginParams
@@ -147,15 +161,16 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
         takeUntil(destroy$),
         startWith({}),
         map((dataFormatter) => {
-          const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
+          // const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
 
-          if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
-            // multiGrid欄位為陣列，需要各別來merge預設值
-            (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
-              return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
-            })
-          }
-          return mergedData
+          // if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
+          //   // multiGrid欄位為陣列，需要各別來merge預設值
+          //   (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
+          //     return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
+          //   })
+          // }
+          // return mergedData
+          return mergeDataFormatter(dataFormatter, mergedPresetWithDefault.dataFormatter, chartType)
         }),
         shareReplay(1)
       )

package/src/defaults.ts

@@ -34,7 +34,6 @@ export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
 // }
 
 // export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
-// @Q@ 桃園儀表板
 // ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
 
 export const PADDING_DEFAULT: Padding = {

package/src/multiValue/computeMultiValueData.ts

@@ -82,6 +82,7 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
       dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
       dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
     ]
+    debugger
     // 篩選顯示狀態
     const visibleFilter = (datum: DataMultiValueDatum, rowIndex: number, columnIndex: number, context: DataFormatterContext<"multiValue">) => {
       // 如果不在scale的範圍內則為false，不再做visibleFilter的判斷

package/src/tree/computeTreeData.ts

@@ -1,7 +1,7 @@
 import type { DataTree, DataTreeObj, DataTreeDatum } from '../types/DataTree'
 import type { ComputedDataFn } from '../types/ComputedData'
 import type { ComputedDataTree } from '../types/ComputedDataTree'
-import { isObject } from '../utils/commonUtils'
+import { isPlainObject } from '../utils/commonUtils'
 
 export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
   const { data = [], dataFormatter, chartParams } = context
@@ -23,7 +23,7 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
   try {
     // 建立樹狀結構資料
     const dataTreeObj: DataTreeObj = (function () {
-      if (isObject(data) === true) {
+      if (isPlainObject(data) === true) {
         // 原本就是樹狀結構則直接複製
         return structuredClone(data) as DataTreeObj
       } else if (Array.isArray(data) === false) {

package/src/utils/commonUtils.ts

@@ -1,7 +1,7 @@
 // import * as d3 from 'd3'
 
-// 是否為物件
-export function isObject(variable: any) {
+// 是否為原始物件
+export function isPlainObject(variable: any) {
   return Object.prototype.toString.call(variable) === "[object Object]";
 }
 
@@ -12,7 +12,7 @@ export function isFunction(fn: any) {
 
 // 將可選的參數和預設值合併
 export function mergeOptionsWithDefault<Options extends { [key: string]: any; }> (options: {[key: string]: any}, defaultOptions: Options): Options {
-  if (isObject(options) === false || isObject(defaultOptions) === false) {
+  if (isPlainObject(options) === false || isPlainObject(defaultOptions) === false) {
     return Object.assign({}, defaultOptions)
   }
   const mergeObjColumns = (_options: {[key: string]: any}, _defaultOptions: {[key: string]: any}) => {
@@ -22,12 +22,12 @@ export function mergeOptionsWithDefault<Options extends { [key: string]: any; }>
         continue
       }
       let objValue: any = undefined
-      // 下一層的object
-      if (isObject(_options[key]) && isObject(_defaultOptions[key])) {
+      // 下一層的plain object
+      if (isPlainObject(_options[key]) && isPlainObject(_defaultOptions[key])) {
         objValue = mergeObjColumns(_options[key], _defaultOptions[key])
         obj[key as keyof Options] = objValue
       }
-      // 不是object直接賦值
+      // 不是plain object直接賦值
       else {
         obj[key as keyof Options] = _options[key]
       }

package/src/utils/orbchartsUtils.ts

@@ -13,7 +13,7 @@ import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataG
 import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
 import type { Layout } from '../types/Layout'
 // import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
-import { isObject } from './commonUtils'
+import { isPlainObject } from './commonUtils'
 
 export function formatValueToLabel (value: any, valueFormatter: string | ((text: d3.NumberValue) => string)) {
   if (valueFormatter! instanceof Function == true) {
@@ -103,7 +103,7 @@ export function getMinAndMaxSeries (data: DataSeries): [number, number] {
     ? data.flat()
     : data as (DataSeriesValue | DataSeriesDatum)[]
   const arr = flatData
-    .filter(d => (d == null || (isObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
+    .filter(d => (d == null || (isPlainObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
     .map(d => typeof d === 'number' ? d : d.value )
   return getMinAndMax(arr)
 }
@@ -112,7 +112,7 @@ export function getMinAndMaxSeries (data: DataSeries): [number, number] {
 export function getMinAndMaxGrid (data: DataGrid): [number, number] {
   const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
   const arr = flatData
-    .filter(d => (d == null || (isObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+    .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
     .map(d => typeof d === 'number' ? d : d.value )
   return getMinAndMax(arr)
 }
@@ -121,7 +121,7 @@ export function getMinAndMaxGrid (data: DataGrid): [number, number] {
 export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
   const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
   const arr = flatData
-    .filter(d => (d == null || (isObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+    .filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
     .map(d => typeof d === 'number' ? d : d.value )
   return getMinAndMax(arr)
 }
@@ -130,7 +130,7 @@ export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
 export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
   const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
   const arr = flatData
-    .filter(d => (d == null || (isObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
+    .filter(d => (d == null || (isPlainObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
     .map(d => typeof d === 'number' ? d : d.value )
   return getMinAndMax(arr)
 }