@orbcharts/core 3.0.0-alpha.55 → 3.0.0-alpha.57

package/src/series/seriesObservables.ts

@@ -1,176 +1,176 @@
-import {
-  combineLatest,
-  distinctUntilChanged,
-  filter,
-  map,
-  merge,
-  takeUntil,
-  shareReplay,
-  switchMap,
-  Subject,
-  Observable } from 'rxjs'
-import type {
-  ChartParams,
-  ComputedDatumSeries,
-  ComputedDataTypeMap,
-  DataFormatterTypeMap,
-  SeriesContainerPosition,
-  Layout } from '../types'
-import { calcSeriesContainerLayout } from '../utils/orbchartsUtils'
-
-export const separateSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
-  return fullDataFormatter$.pipe(
-    map(data => data.separateSeries),
-    distinctUntilChanged(),
-  )
-}
-
-export const seriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
-  return computedData$.pipe(
-    map(data => {
-      return data
-        .filter(series => series.length)
-        .map(series => {
-          return series[0].seriesLabel
-        })
-    }),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
-}
-
-export const visibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
-  return computedData$.pipe(
-    map(data => {
-      return data.map(series => {
-        return series.filter(datum => datum.visible != false)
-      })
-    })
-  )
-}
-
-export const computedLayoutDataObservable = ({ computedData$, fullDataFormatter$ }: {
-  computedData$: Observable<ComputedDataTypeMap<'series'>>,
-  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
-}) => {
-  return combineLatest({
-    computedData: computedData$,
-    fullDataFormatter: fullDataFormatter$
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      const sumData: ComputedDatumSeries[][] = data.fullDataFormatter.sumSeries == true
-        ? data.computedData.map(d => {
-            return [
-              // 加總為一筆資料
-              d.reduce((acc, current) => {
-                if (acc == null) {
-                  return current // 取得第一筆資料
-                }
-                acc.value = acc.value + current.value
-                return acc
-              }, null)
-            ]
-          })
-        : data.computedData
-      
-      return data.fullDataFormatter.separateSeries == true
-        // 有拆分的話每個series為一組
-        ? sumData
-          .map(series => {
-            return series.sort((a, b) => a.seq - b.seq)
-          })
-        // 無拆分的話所有資料為一組
-        : [
-          sumData
-            .flat()
-            .sort((a, b) => a.seq - b.seq)
-        ]
-    })
-  )
-}
-
-
-// 所有container位置（對應series）
-export const seriesContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
-  computedData$: Observable<ComputedDataTypeMap<'series'>>
-  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
-  layout$: Observable<Layout>
-}): Observable<SeriesContainerPosition[]> => {
-
-  const gridContainerPosition$ = combineLatest({
-    computedData: computedData$,
-    fullDataFormatter: fullDataFormatter$,
-    layout: layout$,
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      
-      if (data.fullDataFormatter.separateSeries) {
-        // -- 依slotIndexes計算 --
-        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
-        // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
-        //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-        //   return {
-        //     slotIndex: seriesIndex,
-        //     rowIndex,
-        //     columnIndex,
-        //     startX,
-        //     startY,
-        //     centerX,
-        //     centerY,
-        //     width,
-        //     height,
-        //   }
-        // })
-      } else {
-        // -- 無拆分 --
-        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, 1)
-        // const columnIndex = 0
-        // const rowIndex = 0
-        // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-        //   return {
-        //     slotIndex: 0,
-        //     rowIndex,
-        //     columnIndex,
-        //     startX,
-        //     startY,
-        //     centerX,
-        //     centerY,
-        //     width,
-        //     height,
-        //   }
-        // })
-      }
-    })
-  )
-
-  return gridContainerPosition$
-}
-
-export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
-  seriesLabels$: Observable<string[]>
-  separateSeries$: Observable<boolean>
-}) => {
-  return combineLatest({
-    seriesContainerPosition: seriesContainerPosition$,
-    seriesLabels: seriesLabels$,
-    separateSeries: separateSeries$,
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      return data.separateSeries
-        ? new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
-          return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
-        }))
-        : new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
-          return [seriesLabel, data.seriesContainerPosition[0]]
-        }))
-    })
-  )
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  ChartParams,
+  ComputedDatumSeries,
+  ComputedDataTypeMap,
+  DataFormatterTypeMap,
+  SeriesContainerPosition,
+  Layout } from '../types'
+import { calcSeriesContainerLayout } from '../utils/orbchartsUtils'
+
+export const separateSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
+  return fullDataFormatter$.pipe(
+    map(data => data.separateSeries),
+    distinctUntilChanged(),
+  )
+}
+
+export const seriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data
+        .filter(series => series.length)
+        .map(series => {
+          return series[0].seriesLabel
+        })
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+export const visibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data.map(series => {
+        return series.filter(datum => datum.visible != false)
+      })
+    })
+  )
+}
+
+export const computedLayoutDataObservable = ({ computedData$, fullDataFormatter$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'series'>>,
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      const sumData: ComputedDatumSeries[][] = data.fullDataFormatter.sumSeries == true
+        ? data.computedData.map(d => {
+            return [
+              // 加總為一筆資料
+              d.reduce((acc, current) => {
+                if (acc == null) {
+                  return current // 取得第一筆資料
+                }
+                acc.value = acc.value + current.value
+                return acc
+              }, null)
+            ]
+          })
+        : data.computedData
+      
+      return data.fullDataFormatter.separateSeries == true
+        // 有拆分的話每個series為一組
+        ? sumData
+          .map(series => {
+            return series.sort((a, b) => a.seq - b.seq)
+          })
+        // 無拆分的話所有資料為一組
+        : [
+          sumData
+            .flat()
+            .sort((a, b) => a.seq - b.seq)
+        ]
+    })
+  )
+}
+
+
+// 所有container位置（對應series）
+export const seriesContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'series'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
+  layout$: Observable<Layout>
+}): Observable<SeriesContainerPosition[]> => {
+
+  const gridContainerPosition$ = combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      
+      if (data.fullDataFormatter.separateSeries) {
+        // -- 依slotIndexes計算 --
+        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
+        // return data.computedData.map((seriesData, seriesIndex) => {
+        //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
+        //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
+        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   return {
+        //     slotIndex: seriesIndex,
+        //     rowIndex,
+        //     columnIndex,
+        //     startX,
+        //     startY,
+        //     centerX,
+        //     centerY,
+        //     width,
+        //     height,
+        //   }
+        // })
+      } else {
+        // -- 無拆分 --
+        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, 1)
+        // const columnIndex = 0
+        // const rowIndex = 0
+        // return data.computedData.map((seriesData, seriesIndex) => {
+        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   return {
+        //     slotIndex: 0,
+        //     rowIndex,
+        //     columnIndex,
+        //     startX,
+        //     startY,
+        //     centerX,
+        //     centerY,
+        //     width,
+        //     height,
+        //   }
+        // })
+      }
+    })
+  )
+
+  return gridContainerPosition$
+}
+
+export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
+  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesLabels$: Observable<string[]>
+  separateSeries$: Observable<boolean>
+}) => {
+  return combineLatest({
+    seriesContainerPosition: seriesContainerPosition$,
+    seriesLabels: seriesLabels$,
+    separateSeries: separateSeries$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      return data.separateSeries
+        ? new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+          return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
+        }))
+        : new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+          return [seriesLabel, data.seriesContainerPosition[0]]
+        }))
+    })
+  )
 }

package/src/tree/computeTreeData.ts

@@ -1,132 +1,132 @@
-import type { DataTree, DataTreeObj, DataTreeDatum } from '../types/DataTree'
-import type { ComputedDataFn } from '../types/ComputedData'
-import type { ComputedDataTree } from '../types/ComputedDataTree'
-import { isPlainObject } from '../utils/commonUtils'
-import { seriesColorPredicate } from '../utils/orbchartsUtils'
-
-export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
-  const { data = [], dataFormatter, chartParams } = context
-
-  // <categoryLabel, categoryIndex>
-  const CategoryIndexMap = new Map<string, number>(
-    dataFormatter.categoryLabels.map((label, index) => [label, index])
-  )
-
-  let computedBranchData: ComputedDataTree = {
-    id: '',
-    index: 0,
-    label: '',
-    description: '',
-    categoryIndex: 0,
-    categoryLabel: '',
-    color: '',
-    visible: true,
-    // tooltipContent: '',
-    data: {},
-    value: 0,
-    level: 0,
-    seq: 0,
-    children: []
-  }
-
-  try {
-    // 建立樹狀結構資料
-    const dataTreeObj: DataTreeObj = (function () {
-      if (isPlainObject(data) === true) {
-        // 原本就是樹狀結構則直接複製
-        // return structuredClone(data) as DataTreeObj
-        return JSON.parse(JSON.stringify(data)) as DataTreeObj
-      } else if (Array.isArray(data) === false) {
-        return {
-          id: ''
-        }
-      }
-      // -- 陣列格式轉物件 --
-      // let rootId = ''
-      let root: DataTreeDatum | undefined = undefined
-      // const DataMap: Map<string, DataTreeDatum> = new Map()
-      const ChildrenMap: Map<string, DataTreeDatum[]> = new Map()
-      ;(data as DataTreeDatum[]).forEach(d => {
-        // DataMap.set(d.id, d)
-
-        if (!d.parent) {
-          // rootId = d.id
-          root = d
-        } else {
-          const children: DataTreeDatum[] = ChildrenMap.get(d.parent) ?? []
-          children.push(d)
-          ChildrenMap.set(d.parent!, children)
-        }
-      })
-
-      const createBranchData = (root: DataTreeDatum): DataTreeObj => {
-        return {
-          id: root.id,
-          label: root.label,
-          data: root.data,
-          // tooltipContent: root.tooltipContent,
-          value: root.value,
-          categoryLabel: root.categoryLabel,
-          children: (ChildrenMap.get(root.id) ?? []).map(d => {
-            // 遞迴
-            return createBranchData(d)
-          })
-        }
-      }
-      if (root) {
-        return createBranchData(root)
-      } else {
-        return {
-          id: ''
-        }
-      }    
-    })()
-
-    let index = 0
-    
-    const formatBranchData = (branch: DataTreeObj, level: number, seq: number): ComputedDataTree => {
-      const childLayer = level + 1
-      const categoryLabel: string | null = branch.categoryLabel ?? null
-      let categoryIndex = 0
-      if (categoryLabel != null) {
-        if (!CategoryIndexMap.has(categoryLabel)) {
-          CategoryIndexMap.set(categoryLabel, CategoryIndexMap.size)
-        }
-        categoryIndex = CategoryIndexMap.get(categoryLabel) ?? 0
-      }
-
-      const currentIndex = index
-      index++
-      const formattedBranchData: ComputedDataTree = {
-        id: branch.id,
-        index: currentIndex,
-        level,
-        seq,
-        label: branch.label ?? '',
-        description: branch.description ?? '',
-        categoryIndex,
-        categoryLabel,
-        color: seriesColorPredicate(categoryIndex, chartParams),
-        data: branch.data ?? {},
-        // tooltipContent: branch.tooltipContent ? branch.tooltipContent : dataFormatter.tooltipContentFormat(branch, level, seq, context),
-        value: branch.value,
-        visible: true, // 先給預設值
-        children: (branch.children ?? []).map((d, i) => {
-          // 遞迴
-          return formatBranchData(d, childLayer, i)
-        })
-      }
-
-      formattedBranchData.visible = dataFormatter.visibleFilter(formattedBranchData, context)
-
-      return formattedBranchData
-    }
-    computedBranchData = formatBranchData(dataTreeObj, 0, 0)
-  } catch (e) {
-    // console.error(e)
-    throw Error(e)
-  }
-
-  return computedBranchData
-
-}
+import type { DataTree, DataTreeObj, DataTreeDatum } from '../types/DataTree'
+import type { ComputedDataFn } from '../types/ComputedData'
+import type { ComputedDataTree } from '../types/ComputedDataTree'
+import { isPlainObject } from '../utils/commonUtils'
+import { seriesColorPredicate } from '../utils/orbchartsUtils'
+
+export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
+  const { data = [], dataFormatter, chartParams } = context
+
+  // <categoryLabel, categoryIndex>
+  const CategoryIndexMap = new Map<string, number>(
+    dataFormatter.categoryLabels.map((label, index) => [label, index])
+  )
+
+  let computedBranchData: ComputedDataTree = {
+    id: '',
+    index: 0,
+    label: '',
+    description: '',
+    categoryIndex: 0,
+    categoryLabel: '',
+    color: '',
+    visible: true,
+    // tooltipContent: '',
+    data: {},
+    value: 0,
+    level: 0,
+    seq: 0,
+    children: []
+  }
+
+  try {
+    // 建立樹狀結構資料
+    const dataTreeObj: DataTreeObj = (function () {
+      if (isPlainObject(data) === true) {
+        // 原本就是樹狀結構則直接複製
+        // return structuredClone(data) as DataTreeObj
+        return JSON.parse(JSON.stringify(data)) as DataTreeObj
+      } else if (Array.isArray(data) === false) {
+        return {
+          id: ''
+        }
+      }
+      // -- 陣列格式轉物件 --
+      // let rootId = ''
+      let root: DataTreeDatum | undefined = undefined
+      // const DataMap: Map<string, DataTreeDatum> = new Map()
+      const ChildrenMap: Map<string, DataTreeDatum[]> = new Map()
+      ;(data as DataTreeDatum[]).forEach(d => {
+        // DataMap.set(d.id, d)
+
+        if (!d.parent) {
+          // rootId = d.id
+          root = d
+        } else {
+          const children: DataTreeDatum[] = ChildrenMap.get(d.parent) ?? []
+          children.push(d)
+          ChildrenMap.set(d.parent!, children)
+        }
+      })
+
+      const createBranchData = (root: DataTreeDatum): DataTreeObj => {
+        return {
+          id: root.id,
+          label: root.label,
+          data: root.data,
+          // tooltipContent: root.tooltipContent,
+          value: root.value,
+          categoryLabel: root.categoryLabel,
+          children: (ChildrenMap.get(root.id) ?? []).map(d => {
+            // 遞迴
+            return createBranchData(d)
+          })
+        }
+      }
+      if (root) {
+        return createBranchData(root)
+      } else {
+        return {
+          id: ''
+        }
+      }    
+    })()
+
+    let index = 0
+    
+    const formatBranchData = (branch: DataTreeObj, level: number, seq: number): ComputedDataTree => {
+      const childLayer = level + 1
+      const categoryLabel: string | null = branch.categoryLabel ?? null
+      let categoryIndex = 0
+      if (categoryLabel != null) {
+        if (!CategoryIndexMap.has(categoryLabel)) {
+          CategoryIndexMap.set(categoryLabel, CategoryIndexMap.size)
+        }
+        categoryIndex = CategoryIndexMap.get(categoryLabel) ?? 0
+      }
+
+      const currentIndex = index
+      index++
+      const formattedBranchData: ComputedDataTree = {
+        id: branch.id,
+        index: currentIndex,
+        level,
+        seq,
+        label: branch.label ?? '',
+        description: branch.description ?? '',
+        categoryIndex,
+        categoryLabel,
+        color: seriesColorPredicate(categoryIndex, chartParams),
+        data: branch.data ?? {},
+        // tooltipContent: branch.tooltipContent ? branch.tooltipContent : dataFormatter.tooltipContentFormat(branch, level, seq, context),
+        value: branch.value,
+        visible: true, // 先給預設值
+        children: (branch.children ?? []).map((d, i) => {
+          // 遞迴
+          return formatBranchData(d, childLayer, i)
+        })
+      }
+
+      formattedBranchData.visible = dataFormatter.visibleFilter(formattedBranchData, context)
+
+      return formattedBranchData
+    }
+    computedBranchData = formatBranchData(dataTreeObj, 0, 0)
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return computedBranchData
+
+}