@orbcharts/core 3.0.3 → 3.0.5

package/src/series/dataFormatterValidator.ts

@@ -1,47 +1,47 @@
-import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
-import { validateColumns } from '../utils/validator'
-
-export const dataFormatterValidator: DataFormatterValidator<'series'> = (dataFormatter: DataFormatterTypeMap<'series'>) => {
-  const result = validateColumns(dataFormatter, {
-    visibleFilter: {
-      toBeTypes: ['Function']
-    },
-    sort: {
-      toBeTypes: ['Function', 'null']
-    },
-    seriesLabels: {
-      toBeTypes: ['string[]']
-    },
-    container: {
-      toBeTypes: ['object']
-    },
-    separateSeries: {
-      toBeTypes: ['boolean']
-    },
-    sumSeries: {
-      toBeTypes: ['boolean']
-    }
-  })
-  if (dataFormatter.container) {
-    const containerResult = validateColumns(dataFormatter.container, {
-      columnAmount: {
-        toBeTypes: ['number']
-      },
-      rowAmount: {
-        toBeTypes: ['number']
-      },
-      columnGap: {
-        toBe: '"auto" | number',
-        test: (value: any) => value === 'auto' || typeof value === 'number'
-      },
-      rowGap: {
-        toBe: '"auto" | number',
-        test: (value: any) => value === 'auto' || typeof value === 'number'
-      },
-    })
-    if (containerResult.status === 'error') {
-      return containerResult
-    }
-  }
-  return result
+import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
+
+export const dataFormatterValidator: DataFormatterValidator<'series'> = (dataFormatter: DataFormatterTypeMap<'series'>) => {
+  const result = validateColumns(dataFormatter, {
+    visibleFilter: {
+      toBeTypes: ['Function']
+    },
+    sort: {
+      toBeTypes: ['Function', 'null']
+    },
+    seriesLabels: {
+      toBeTypes: ['string[]']
+    },
+    container: {
+      toBeTypes: ['object']
+    },
+    separateSeries: {
+      toBeTypes: ['boolean']
+    },
+    sumSeries: {
+      toBeTypes: ['boolean']
+    }
+  })
+  if (dataFormatter.container) {
+    const containerResult = validateColumns(dataFormatter.container, {
+      columnAmount: {
+        toBeTypes: ['number']
+      },
+      rowAmount: {
+        toBeTypes: ['number']
+      },
+      columnGap: {
+        toBe: '"auto" | number',
+        test: (value: any) => value === 'auto' || typeof value === 'number'
+      },
+      rowGap: {
+        toBe: '"auto" | number',
+        test: (value: any) => value === 'auto' || typeof value === 'number'
+      },
+    })
+    if (containerResult.status === 'error') {
+      return containerResult
+    }
+  }
+  return result
 }

package/src/series/dataValidator.ts

@@ -1,13 +1,13 @@
-import type { DataValidator, DataTypeMap } from '../../lib/core-types'
-import { validateColumns } from '../utils/validator'
-
-export const dataValidator: DataValidator<'series'> = (data: DataTypeMap<'series'>) => {
-  const result = validateColumns({ data }, {
-    data: {
-      toBe: '(DataSeriesDatum | DataSeriesValue)[][] | (DataSeriesDatum | DataSeriesValue)[]',
-      // 畢免資料量過大檢查不完，不深度檢查
-      test: (value) => Array.isArray(value)
-    }
-  })
-  return result
+import type { DataValidator, DataTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
+
+export const dataValidator: DataValidator<'series'> = (data: DataTypeMap<'series'>) => {
+  const result = validateColumns({ data }, {
+    data: {
+      toBe: '(DataSeriesDatum | DataSeriesValue)[][] | (DataSeriesDatum | DataSeriesValue)[]',
+      // 畢免資料量過大檢查不完，不深度檢查
+      test: (value) => Array.isArray(value)
+    }
+  })
+  return result
 }

package/src/series/seriesObservables.ts

@@ -1,176 +1,210 @@
-import {
-  combineLatest,
-  distinctUntilChanged,
-  filter,
-  map,
-  merge,
-  takeUntil,
-  shareReplay,
-  switchMap,
-  Subject,
-  Observable } from 'rxjs'
-import type {
-  ChartParams,
-  ComputedDatumSeries,
-  ComputedDataTypeMap,
-  DataFormatterTypeMap,
-  ContainerPosition,
-  Layout } from '../../lib/core-types'
-import { calcContainerPosition } 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 seriesVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
-  return computedData$.pipe(
-    map(data => {
-      return data.map(series => {
-        return series.filter(datum => datum.visible != false)
-      })
-    })
-  )
-}
-
-export const seriesComputedSortedDataObservable = ({ 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<ContainerPosition[]> => {
-
-  const gridContainerPosition$ = combineLatest({
-    computedData: computedData$,
-    fullDataFormatter: fullDataFormatter$,
-    layout: layout$,
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      
-      if (data.fullDataFormatter.separateSeries) {
-        // -- 依slotIndexes計算 --
-        return calcContainerPosition(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 } = calcContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-        //   return {
-        //     slotIndex: seriesIndex,
-        //     rowIndex,
-        //     columnIndex,
-        //     startX,
-        //     startY,
-        //     centerX,
-        //     centerY,
-        //     width,
-        //     height,
-        //   }
-        // })
-      } else {
-        // -- 無拆分 --
-        return calcContainerPosition(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 } = calcContainerPosition(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<ContainerPosition[]>
-  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, ContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
-          return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
-        }))
-        : new Map<string, ContainerPosition>(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,
+  ContainerPosition,
+  Layout } from '../../lib/core-types'
+import { calcContainerPosition } from '../utils/orbchartsUtils'
+
+export const datumLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  const DatumLabels = new Set<string>()
+  return computedData$.pipe(
+    map(data => {
+      data.forEach(series => {
+        series.forEach(datum => {
+          DatumLabels.add(datum.label)
+        })
+      })
+      return Array.from(DatumLabels)
+    }),
+  )
+}
+
+export const separateSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
+  return fullDataFormatter$.pipe(
+    map(data => data.separateSeries),
+    distinctUntilChanged(),
+  )
+}
+
+export const separateLabelObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
+  return fullDataFormatter$.pipe(
+    map(data => data.separateLabel),
+    distinctUntilChanged(),
+  )
+}
+
+export const sumSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
+  return fullDataFormatter$.pipe(
+    map(data => data.sumSeries),
+    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) === JSON.stringify(b)
+    }),
+  )
+}
+
+export const seriesVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data.map(series => {
+        return series.filter(datum => datum.visible != false)
+      })
+    })
+  )
+}
+
+export const seriesComputedSortedDataObservable = ({ computedData$, separateSeries$, separateLabel$, sumSeries$, datumLabels$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'series'>>,
+  separateSeries$: Observable<boolean>,
+  separateLabel$: Observable<boolean>,
+  sumSeries$: Observable<boolean>,
+  datumLabels$: Observable<string[]>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    separateSeries: separateSeries$,
+    separateLabel: separateLabel$,
+    sumSeries: sumSeries$,
+    datumLabels: datumLabels$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+
+      // sum series
+      const sumData: ComputedDatumSeries[][] = data.sumSeries == true
+        ? data.computedData.map(d => {
+            return [
+              // 加總為一筆資料
+              d.reduce((acc, current) => {
+                if (acc == null) {
+                  // * 取得第一筆資料
+                  return current
+                }
+                // 加總 value
+                acc.value = acc.value + current.value
+                return acc
+              }, null)
+            ]
+          })
+        : data.computedData
+      
+      // separate series
+      const separateSeriesData: ComputedDatumSeries[][] = data.separateSeries == true
+        // 有拆分的話每個series為一組
+        ? sumData
+        // 無拆分的話所有資料為一組
+        : [sumData.flat()]
+
+      // separate label
+      const separateLabelData: ComputedDatumSeries[][] = data.separateLabel == true
+        // 有拆分的話每個label為一組
+        ? (() => {
+          // datumLabel 的 index 對應
+          const datumLabelIndexMap = data.datumLabels.reduce((acc, datumLabel, index) => {
+            acc[datumLabel] = index
+            return acc
+          }, {} as { [key: string]: number })
+          
+          return separateSeriesData
+            .map(series => {
+              return series.reduce((acc, current) => {
+                const index = datumLabelIndexMap[current.label]
+                if (acc[index] == null) {
+                  acc[index] = []
+                }
+                acc[index].push(current)
+                return acc
+              }, [] as ComputedDatumSeries[][])
+            })
+            .flat()
+        })()
+        // 無拆分
+        : separateSeriesData
+      
+      return data.separateSeries == true && data.separateLabel == true
+        // 全部拆分時全部一起排序
+        ? separateLabelData
+            .sort((a, b) => a[0].seq - b[0].seq)
+        // 依各個 container 排序
+        : separateLabelData
+            .map(series => {
+              return series.sort((a, b) => a.seq - b.seq)
+            })
+    })
+  )
+}
+
+
+// 所有container位置（對應series）
+export const seriesContainerPositionObservable = ({ computedSortedData$, fullDataFormatter$, layout$ }: {
+  computedSortedData$: Observable<ComputedDatumSeries[][]>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
+  layout$: Observable<Layout>
+}): Observable<ContainerPosition[]> => {
+
+  const gridContainerPosition$ = combineLatest({
+    computedSortedData: computedSortedData$,
+    fullDataFormatter: fullDataFormatter$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+
+      // 已分類資料的分類數量
+      const amount = data.computedSortedData.length
+
+      return calcContainerPosition(data.layout, data.fullDataFormatter.container, amount)
+    })
+  )
+
+  return gridContainerPosition$
+}
+
+export const datumContainerPositionMapObservable = ({ seriesContainerPosition$, computedSortedData$ }: {
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+  computedSortedData$: Observable<ComputedDatumSeries[][]>
+}) => {
+  return combineLatest({
+    seriesContainerPosition: seriesContainerPosition$,
+    computedSortedData: computedSortedData$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      return new Map<string, ContainerPosition>(
+        data.computedSortedData
+          .map((series, seriesIndex) => {
+            return series.map(datum => {
+              const m: [string, ContainerPosition] = [datum.id, data.seriesContainerPosition[seriesIndex]]
+              return m
+            })
+          })
+          .flat()
+      )
+    })
+  )
 }