@orbcharts/core 3.0.0-alpha.48 → 3.0.0-alpha.49

package/src/tree/createTreeContextObserver.ts

@@ -1,61 +1,61 @@
-import { map, shareReplay } from 'rxjs'
-import type { ContextObserverFn } from '../types'
-import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
-import {
-  nodeListObservable,
-  existCategoryLabelsObservable,
-  treeVisibleComputedDataObservable
-} from './treeObservables'
-
-export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
-
-  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
-    shareReplay(1)
-  )
-
-  const nodeList$ = nodeListObservable({
-    computedData$: observer.computedData$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const treeHighlight$ = highlightObservable({
-    datumList$: nodeList$,
-    fullChartParams$: observer.fullChartParams$,
-    event$: subject.event$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const existCategoryLabels$ = existCategoryLabelsObservable({
-    nodeList$,
-    fullDataFormatter$: observer.fullDataFormatter$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const CategoryDataMap$ = categoryDataMapObservable({
-    datumList$: nodeList$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const visibleComputedData$ = treeVisibleComputedDataObservable({
-    computedData$: observer.computedData$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  return {
-    fullParams$: observer.fullParams$,
-    fullChartParams$: observer.fullChartParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    computedData$: observer.computedData$,
-    layout$: observer.layout$,
-    textSizePx$,
-    treeHighlight$,
-    existCategoryLabels$,
-    CategoryDataMap$,
-    visibleComputedData$
-  }
-}
+import { map, shareReplay } from 'rxjs'
+import type { ContextObserverFn } from '../types'
+import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
+import {
+  nodeListObservable,
+  existCategoryLabelsObservable,
+  treeVisibleComputedDataObservable
+} from './treeObservables'
+
+export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
+
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
+  const nodeList$ = nodeListObservable({
+    computedData$: observer.computedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const treeHighlight$ = highlightObservable({
+    datumList$: nodeList$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const existCategoryLabels$ = existCategoryLabelsObservable({
+    nodeList$,
+    fullDataFormatter$: observer.fullDataFormatter$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const CategoryDataMap$ = categoryDataMapObservable({
+    datumList$: nodeList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = treeVisibleComputedDataObservable({
+    computedData$: observer.computedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    textSizePx$,
+    treeHighlight$,
+    existCategoryLabels$,
+    CategoryDataMap$,
+    visibleComputedData$
+  }
+}

package/src/tree/treeObservables.ts

@@ -1,95 +1,95 @@
-import {
-  combineLatest,
-  distinctUntilChanged,
-  filter,
-  map,
-  merge,
-  takeUntil,
-  shareReplay,
-  switchMap,
-  Subject,
-  Observable } from 'rxjs'
-import type {
-  ChartParams,
-  ComputedDataTree,
-  ComputedDataTypeMap,
-  DataFormatterTree } from '../types'
-
-
-// 所有節點list結構
-export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
-  return computedData$.pipe(
-    map(data => {
-      function setNodeList (accNodeList: ComputedDataTree[], branch: ComputedDataTree) {
-        accNodeList.push(branch)
-        if (branch.children) {
-          branch.children.forEach(childBranch => {
-            accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
-          })
-        }
-        return accNodeList
-      }
-      return setNodeList([], data)
-    })
-  )
-}
-
-export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
-  nodeList$: Observable<ComputedDataTree[]>
-  fullDataFormatter$: Observable<DataFormatterTree>
-}) => {
-
-  const categoryLabels$ = fullDataFormatter$.pipe(
-    map(d => d.categoryLabels),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
-
-  return combineLatest({
-    nodeList: nodeList$,
-    categoryLabels: categoryLabels$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      const CurrentLabelSet = new Set(data.categoryLabels)
-      const ExistLabelSet = new Set(
-        data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
-      )
-      // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
-      Array.from(ExistLabelSet).forEach(label => {
-        if (!CurrentLabelSet.has(label)) {
-          CurrentLabelSet.add(label)
-        }
-      })
-      // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
-      Array.from(CurrentLabelSet).forEach(label => {
-        if (!ExistLabelSet.has(label)) {
-          ExistLabelSet.delete(label)
-        }
-      })
-
-      return Array.from(CurrentLabelSet)
-    }),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
-}
-
-// 所有可見的節點
-export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
-  return computedData$.pipe(
-    map(data => {
-      function filterChildren (accTree: ComputedDataTree) {
-        if (accTree.children) {
-          accTree.children = accTree.children
-            .filter(child => child.visible) // 篩選visible
-            .map(child => filterChildren(child)) // 遞迴子節點
-        }
-        return accTree
-      }
-      return filterChildren(data)
-    })
-  )
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  ChartParams,
+  ComputedDataTree,
+  ComputedDataTypeMap,
+  DataFormatterTree } from '../types'
+
+
+// 所有節點list結構
+export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function setNodeList (accNodeList: ComputedDataTree[], branch: ComputedDataTree) {
+        accNodeList.push(branch)
+        if (branch.children) {
+          branch.children.forEach(childBranch => {
+            accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
+          })
+        }
+        return accNodeList
+      }
+      return setNodeList([], data)
+    })
+  )
+}
+
+export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
+  nodeList$: Observable<ComputedDataTree[]>
+  fullDataFormatter$: Observable<DataFormatterTree>
+}) => {
+
+  const categoryLabels$ = fullDataFormatter$.pipe(
+    map(d => d.categoryLabels),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+
+  return combineLatest({
+    nodeList: nodeList$,
+    categoryLabels: categoryLabels$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      const CurrentLabelSet = new Set(data.categoryLabels)
+      const ExistLabelSet = new Set(
+        data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
+      )
+      // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
+      Array.from(ExistLabelSet).forEach(label => {
+        if (!CurrentLabelSet.has(label)) {
+          CurrentLabelSet.add(label)
+        }
+      })
+      // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
+      Array.from(CurrentLabelSet).forEach(label => {
+        if (!ExistLabelSet.has(label)) {
+          ExistLabelSet.delete(label)
+        }
+      })
+
+      return Array.from(CurrentLabelSet)
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+// 所有可見的節點
+export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function filterChildren (accTree: ComputedDataTree) {
+        if (accTree.children) {
+          accTree.children = accTree.children
+            .filter(child => child.visible) // 篩選visible
+            .map(child => filterChildren(child)) // 遞迴子節點
+        }
+        return accTree
+      }
+      return filterChildren(data)
+    })
+  )
 }

package/src/types/Chart.ts

@@ -1,48 +1,50 @@
-import type { ChartParams, ChartParamsPartial } from './ChartParams'
-import type { ContextSubject } from './ContextSubject'
-import type { ContextObserverFn } from './ContextObserver'
-import type { ComputedDataFn } from './ComputedData'
-import type { DataFormatterTypeMap, DataFormatterPartialTypeMap } from './DataFormatter'
-
-export type ChartType = 'series' | 'grid' | 'multiGrid' | 'multiValue' | 'tree' | 'relationship'
-
-export interface CreateBaseChart {
-  <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
-    defaultDataFormatter: DataFormatterTypeMap<T>
-    computedDataFn: ComputedDataFn<T>
-    contextObserverFn: ContextObserverFn<T>
-  }): CreateChart<T>
-}
-
-
-export interface CreateChart<T extends ChartType> {
-  // (element: HTMLElement | Element, pluginParams: any[], chartParams?: Partial<ChartParams>): Chart<T>
-  (element: HTMLElement | Element, options?: ChartOptionsPartial<T>): ChartEntity<T>
-}
-
-export interface ChartEntity<T extends ChartType> extends ContextSubject<T> {
-  selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
-  destroy: () => void
-}
-
-export interface ChartOptions<T extends ChartType> {
-  preset: Preset<T>
-}
-
-export interface ChartOptionsPartial<T extends ChartType> {
-  preset?: PresetPartial<T>
-}
-
-export interface Preset<T extends ChartType> {
-  chartParams: ChartParams
-  dataFormatter: DataFormatterTypeMap<T>
-  allPluginParams: {[key: string]: any}
-  description: string
-}
-
-export interface PresetPartial<T extends ChartType> {
-  chartParams?: ChartParamsPartial
-  dataFormatter?: DataFormatterPartialTypeMap<T>
-  allPluginParams?: {[key: string]: any}
-  description?: string
-}
+import type { ChartParams, ChartParamsPartial } from './ChartParams'
+import type { ContextSubject } from './ContextSubject'
+import type { ContextObserverFn } from './ContextObserver'
+import type { ComputedDataFn } from './ComputedData'
+import type { DataFormatterTypeMap, DataFormatterPartialTypeMap } from './DataFormatter'
+
+export type ChartType = 'series' | 'grid' | 'multiGrid' | 'multiValue' | 'tree' | 'relationship'
+
+export interface CreateBaseChart {
+  <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
+    defaultDataFormatter: DataFormatterTypeMap<T>
+    computedDataFn: ComputedDataFn<T>
+    contextObserverFn: ContextObserverFn<T>
+  }): CreateChart<T>
+}
+
+
+export interface CreateChart<T extends ChartType> {
+  // (element: HTMLElement | Element, pluginParams: any[], chartParams?: Partial<ChartParams>): Chart<T>
+  (element: HTMLElement | Element, options?: ChartOptionsPartial<T>): ChartEntity<T>
+}
+
+export interface ChartEntity<T extends ChartType> extends ContextSubject<T> {
+  selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
+  destroy: () => void
+}
+
+export interface ChartOptions<T extends ChartType> {
+  preset: Preset<T, unknown>
+}
+
+export interface ChartOptionsPartial<T extends ChartType> {
+  preset?: Preset<T, unknown>
+}
+
+export interface Preset<T extends ChartType, AllPluginParams> {
+  name: string
+  description: string
+  chartParams: ChartParams
+  dataFormatter: DataFormatterTypeMap<T>
+  allPluginParams: AllPluginParams
+}
+
+export interface PresetPartial<T extends ChartType, AllPluginParams> {
+  name?: string
+  description?: string
+  chartParams?: ChartParamsPartial
+  dataFormatter?: DataFormatterPartialTypeMap<T>
+  allPluginParams?: AllPluginParams
+}

package/src/types/ChartParams.ts

@@ -1,51 +1,51 @@
-import type { Padding } from './Padding'
-
-export interface ChartParams {
-  padding: Padding,
-  highlightTarget: HighlightTarget
-  highlightDefault: string | null
-  colorScheme: 'dark' | 'light'
-  colors: {
-    light: ColorScheme
-    dark: ColorScheme
-  }
-  styles: Styles
-  transitionDuration: number
-  transitionEase: string
-  // [key: string]: any
-}
-
-export type ChartParamsPartial = Partial<ChartParams | {
-  padding: Partial<Padding>,
-  colors: Partial<{
-    light: Partial<ColorScheme>
-    dark: Partial<ColorScheme>
-  }>
-  styles: Partial<Styles>
-}>
-
-function test (): ChartParamsPartial {
-  return {
-    colorScheme: 'dark',
-    padding: {
-      top: 10
-    }
-  }
-}
-
-export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
-
-export interface Styles {
-  textSize: string | number
-  unhighlightedOpacity: number
-}
-
-export interface ColorScheme {
-  series: string[]
-  primary: string
-  secondary: string
-  white: string
-  background: string
-}
-
-export type ColorType = 'none' | keyof ColorScheme
+import type { Padding } from './Padding'
+
+export interface ChartParams {
+  padding: Padding,
+  highlightTarget: HighlightTarget
+  highlightDefault: string | null
+  colorScheme: 'dark' | 'light'
+  colors: {
+    light: ColorScheme
+    dark: ColorScheme
+  }
+  styles: Styles
+  transitionDuration: number
+  transitionEase: string
+  // [key: string]: any
+}
+
+export type ChartParamsPartial = Partial<ChartParams | {
+  padding: Partial<Padding>,
+  colors: Partial<{
+    light: Partial<ColorScheme>
+    dark: Partial<ColorScheme>
+  }>
+  styles: Partial<Styles>
+}>
+
+function test (): ChartParamsPartial {
+  return {
+    colorScheme: 'dark',
+    padding: {
+      top: 10
+    }
+  }
+}
+
+export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
+
+export interface Styles {
+  textSize: string | number
+  unhighlightedOpacity: number
+}
+
+export interface ColorScheme {
+  series: string[]
+  primary: string
+  secondary: string
+  white: string
+  background: string
+}
+
+export type ColorType = 'none' | keyof ColorScheme