@orbcharts/plugin-basic 4.0.0-pre-alpha.0

package/src/plugins/CompositionPlot/types.ts

@@ -0,0 +1,129 @@
+
+import { Observable } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { ContainerPosition, Container, GraphicStyles, Layout } from '../../types/PluginParams'
+import { ComputedDatumSeries } from '../../types/ComputedData'
+import type { ArcScaleType, Placement } from '../../types/Common'
+
+// context
+export interface CompositionPlotExtendContext {
+  layout$: Observable<Layout>
+  computedData$: Observable<ComputedDatumSeries[][]>
+  fontSizePx$: Observable<number>
+  datumLabels$: Observable<string[]>
+  separateSeries$: Observable<boolean>
+  separateName$: Observable<boolean>
+  computedSortedData$: Observable<ComputedDatumSeries[][]>
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  datumList$: Observable<ComputedDatumSeries[]>
+  seriesHighlight$: Observable<ComputedDatumSeries[]>
+  seriesLabels$: Observable<string[]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+  DatumContainerPositionMap$: Observable<Map<string, ContainerPosition>>
+}
+
+// plugin params
+export interface CompositionPlotPluginParams {
+  styles: GraphicStyles
+  visibleFilter: (datum: ModelDatumSeries) => boolean | null
+  sort: ((a: ModelDatumSeries, b: ModelDatumSeries) => number) | null
+  // seriesLabels: string[]
+  container: Container
+  separateSeries: boolean
+  separateName: boolean
+  // sumSeries: boolean
+  datasetIndex: number
+}
+
+// all layer params
+export interface CompositionPlotAllLayerParams {
+  Bubbles: BubblesParams
+  Pie: PieParams
+  PieEventTexts: PieEventTextsParams
+  PieLabels: PieLabelsParams
+  Rose: RoseParams
+  RoseLabels: RoseLabelsParams
+  Indicator: IndicatorParams
+}
+
+// -- layer params --
+export interface BubblesParams {
+  force: {
+    strength: number; // 泡泡引力
+    velocityDecay: number; // 衰減數
+    collisionSpacing: number // 泡泡間距
+  }
+  bubbleLabel: {
+    labelFn: ((d: ComputedDatumSeries) => string)
+    colorType: ColorType
+    fillRate: number
+    lineHeight: number
+    maxLineLength: number
+    wordBreakAll: boolean
+  }
+  // highlightRIncrease: number
+  arcScaleType: ArcScaleType
+}
+
+export interface PieParams {
+  outerRadius: number;
+  innerRadius: number;
+  outerRadiusWhileHighlight: number;
+  startAngle: number;
+  endAngle: number;
+  padAngle: number;
+  strokeColorType: ColorType;
+  strokeWidth: number;
+  cornerRadius: number;
+}
+
+export interface PieEventTextsParams {
+  renderFn: (d: EventData) => string[] | string | null
+  textAttrs: Array<{ [key:string]: string | number }>
+  textStyles: Array<{ [key:string]: string | number }>
+}
+
+export interface PieLabelsParams {
+  // solidColor?: string;
+  // colors?: string[];
+  outerRadius: number
+  outerRadiusWhileHighlight: number
+  // innerRadius?: number;
+  // enterDuration?: number
+  startAngle: number
+  endAngle: number
+  labelCentroid: number
+  // fontSize?: number
+  labelFn: ((d: ComputedDatumSeries) => string)
+  labelColorType: ColorType
+}
+
+export interface RoseParams {
+  outerRadius: number
+  padAngle: number
+  strokeColorType: ColorType
+  strokeWidth: number
+  cornerRadius: number
+  arcScaleType: ArcScaleType
+  angleIncreaseWhileHighlight: number
+}
+
+export interface RoseLabelsParams {
+  outerRadius: number
+  labelCentroid: number
+  labelFn: ((d: ComputedDatumSeries) => string)
+  labelColorType: ColorType
+  arcScaleType: ArcScaleType
+}
+
+export interface IndicatorParams {
+  startAngle: number
+  endAngle: number
+  radius: number
+  indicatorType: 'line' | 'needle' | 'pin' | 'triangle'
+  size: number
+  colorType: ColorType
+  // autoHighlight: boolean
+  value: number
+}

package/src/plugins/CompositionPlot/utils.ts

@@ -0,0 +1,53 @@
+import * as d3 from 'd3'
+// import type { ModelDatumSeries } from '@orbcharts/core'
+import type { ComputedDatumSeries } from '../../types/ComputedData'
+// import type { D3PieDatum, PieDatum } from '../types'
+
+// 由d3.pie()建出來的資料格式
+export interface D3PieDatum {
+  data: any
+  index: number,
+  value: number,
+  startAngle: number,
+  endAngle: number,
+  padAngle: number,  
+}
+
+export interface PieDatum extends D3PieDatum {
+  data: ComputedDatumSeries
+  id: string
+}
+
+export function makePieData ({ data, startAngle, endAngle }: {
+  data: ComputedDatumSeries[]
+  startAngle: number
+  endAngle: number
+  // itemLabels: string[]
+  // arcLabels: string[]
+}): PieDatum[] {
+  let pie = d3.pie<any, any>()
+    .startAngle(startAngle)
+    // .endAngle(startAngle + (endAngle - startAngle) * t)
+    .endAngle(endAngle)
+    .value(d => d.value)
+    // .value((d) => d.visible == false ? 0 : d.value)
+    // .sort(null) // 不要排序
+    .sort((a, b) => a.seq - b.seq)
+    // .sort((a: any, b: any) => {
+    //   return b.value - a.value
+    // })
+    // .sort(d3.ascending)
+  const pieData = pie(data)
+  return pieData.map((d: D3PieDatum, i: number) => {
+    // const itemLabel = d.data.itemLabel
+    let _d: any = d
+    _d.id = d.data.id
+    return _d
+    // return {
+    //   ...d,
+    //   itemIndex: itemLabels.indexOf(itemLabel),
+    //   itemLabel,
+    //   id: d.data.id,
+    // }
+  })
+}

package/src/plugins/HierarchyPlot/HierarchyPlot.ts

@@ -0,0 +1,190 @@
+import * as d3 from 'd3'
+import {
+  shareReplay,
+  map,
+  filter,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  Subject,
+  switchMap,
+  Observable,
+  BehaviorSubject
+} from 'rxjs'
+
+import type { HierarchyPlotExtendContext, HierarchyPlotPluginParams, HierarchyPlotAllLayerParams } from './types'
+import { defineSVGPlugin } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_HIERARCHY_PLOT_PARAMS } from './defaults'
+import {
+  categoryDataMapObservable,
+  containerSizeObservable,
+  layoutObservable,
+  fontSizePxObservable,
+  highlightObservable,
+  seriesDataMapObservable
+} from '../../utils/observables'
+import {
+  treeComputedDataObservable,
+  nodeListObservable,
+  categoryLabelsObservable,
+  treeVisibleComputedDataObservable
+} from './contextObservables'
+import { TreeMap } from './layers/TreeMap'
+const treeMap = new TreeMap()
+
+export const HierarchyPlot = defineSVGPlugin<
+  HierarchyPlotExtendContext,
+  HierarchyPlotPluginParams,
+  HierarchyPlotAllLayerParams
+>({
+  name: 'HierarchyPlot',
+  defaultParams: DEFAULT_HIERARCHY_PLOT_PARAMS,
+  layers: [treeMap],
+  setup: (props) => {
+
+    const selectedTreeData$ = combineLatest({
+      treeData: props.context.treeData$,
+      datasetIndex: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.datasetIndex)
+      )
+    }).pipe(
+      debounceTime(0),
+      map(({ treeData, datasetIndex }) => treeData[datasetIndex]),
+      shareReplay(1)
+    )
+
+    const layout$ = layoutObservable({
+      size$: props.context.size$,
+      padding$: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.styles.padding)
+      )
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const computedData$ = treeComputedDataObservable({
+      selectedTreeData$: selectedTreeData$,
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const fontSizePx$ = fontSizePxObservable(props.context.theme$).pipe(
+      shareReplay(1)
+    )
+
+    const nodeList$ = nodeListObservable({
+      computedData$: computedData$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const treeHighlight$ = highlightObservable({
+      datumList$: nodeList$,
+      styles$: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.styles)
+      ),
+      event$: props.context.event$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const CategoryDataMap$ = categoryDataMapObservable({
+      datumList$: nodeList$
+    }).pipe(
+      shareReplay(1)
+    )
+    
+    const categoryLabels$ = categoryLabelsObservable(CategoryDataMap$).pipe(
+      shareReplay(1)
+    )
+
+    const visibleComputedData$ = treeVisibleComputedDataObservable({
+      computedData$: computedData$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const extendsContext: HierarchyPlotExtendContext = {
+      layout$,
+      computedData$,
+      fontSizePx$,
+      treeHighlight$,
+      categoryLabels$,
+      CategoryDataMap$,
+      visibleComputedData$
+    }
+
+    props.context = {
+      ...props.context,
+      ...extendsContext,
+    }
+    
+    return () => {
+      // layoutSubscription.unsubscribe()
+    }
+  },
+  validator: (params: HierarchyPlotPluginParams) => {
+    const result = validateObject(params, {
+      styles: {
+        toBeTypes: ['object'],
+      },
+      visibleFilter: {
+        toBeTypes: ['Function']
+      },
+      datasetIndex: {
+        toBeTypes: ['number']
+      }
+    })
+    if (result.status === 'error') {
+      return result
+    }
+    if (params.styles) {
+      const stylesResult = validateObject(params.styles, {
+        padding: {
+          toBeTypes: ['object']
+        },
+        highlightTarget: {
+          toBeTypes: ['string']
+        },
+        highlightDefault: {
+          toBeTypes: ['string', 'null']
+        },
+        unhighlightedOpacity: {
+          toBeTypes: ['number']
+        },
+        transitionDuration: {
+          toBeTypes: ['number']
+        },
+        transitionEase: {
+          toBeTypes: ['string']
+        }
+      })
+      if (stylesResult.status === 'error') {
+        return stylesResult
+      }
+      if (params.styles.padding) {
+        const paddingResult = validateObject(params.styles.padding, {
+          top: {
+            toBeTypes: ['number']
+          },
+          right: {
+            toBeTypes: ['number']
+          },
+          bottom: {
+            toBeTypes: ['number']
+          },
+          left: {
+            toBeTypes: ['number']
+          }
+        })
+        if (paddingResult.status === 'error') {
+          return paddingResult
+        }
+      }
+    }
+    
+    return result
+  },
+})

package/src/plugins/HierarchyPlot/contextObservables.ts

@@ -0,0 +1,136 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  debounceTime,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type { ModelData, ModelDatumSeries, ModelDatumTree } from '@orbcharts/core'
+import type {
+  ComputedData,
+  ComputedDatumTree,
+} from '../../types'
+import { HierarchyPlotPluginParams } from './types'
+
+export const treeComputedDataObservable = ({ selectedTreeData$, pluginParams$ }: {
+  selectedTreeData$: Observable<ModelData<'tree'>>
+  pluginParams$: Observable<HierarchyPlotPluginParams>
+}): Observable<ComputedData<'tree'>> => {
+  return combineLatest({
+    selectedTreeData: selectedTreeData$,
+    pluginParams: pluginParams$
+  }).pipe(
+    debounceTime(0),
+    map(({ selectedTreeData, pluginParams }) => {
+      function buildComputedTree (node: ModelDatumTree, parentVisible: boolean = true): ComputedDatumTree {
+        // 父節點必須可見，子節點才有機會可見
+        const selfVisible = parentVisible && (
+          !pluginParams.visibleFilter || pluginParams.visibleFilter(node)
+        )
+
+        return {
+          ...node,
+          visible: selfVisible,
+          children: (node.children || []).map(child => buildComputedTree(child, selfVisible))
+        }
+      }
+      return buildComputedTree(selectedTreeData)
+    })
+  )
+}
+
+// 所有節點list結構
+export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedData<'tree'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function setNodeList (accNodeList: ComputedDatumTree[], branch: ComputedDatumTree) {
+        accNodeList.push(branch)
+        if (branch.children) {
+          branch.children.forEach(childBranch => {
+            accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
+          })
+        }
+        return accNodeList
+      }
+      return setNodeList([], data)
+    })
+  )
+}
+
+// export const categoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
+//   nodeList$: Observable<ComputedDataTree[]>
+//   fullDataFormatter$: Observable<DataFormatterTree>
+// }) => {
+
+//   const categoryLabels$ = fullDataFormatter$.pipe(
+//     map(d => d.categoryLabels),
+//     distinctUntilChanged((a, b) => {
+//       return JSON.stringify(a) === JSON.stringify(b)
+//     }),
+//   )
+
+//   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) === JSON.stringify(b)
+//     }),
+//   )
+// }
+
+export const categoryLabelsObservable = (CategoryDataMap$: Observable<Map<string, ComputedDatumTree[]>>) => {
+  return CategoryDataMap$.pipe(
+    map(data => {
+      return Array.from(data.keys())
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a) === JSON.stringify(b)
+    }),
+  )
+}
+
+// 所有可見的節點
+export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedData<'tree'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      function filterChildren (accTree: ComputedDatumTree): ComputedDatumTree {
+        const nextChildren = (accTree.children || [])
+          .filter(child => child.visible !== false) // 預設視為可見
+          .map(child => filterChildren(child)) // 遞迴子節點
+
+        return {
+          ...accTree,
+          children: nextChildren
+        }
+      }
+      return filterChildren(data)
+    })
+  )
+}

package/src/plugins/HierarchyPlot/defaults.ts

@@ -0,0 +1,31 @@
+import type {
+  TreeMapParams
+} from './types'
+import { HierarchyPlotPluginParams } from './types'
+
+export const DEFAULT_HIERARCHY_PLOT_PARAMS: HierarchyPlotPluginParams = {
+  styles: {
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 60,
+      left: 20
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum) => true,
+  datasetIndex: 0
+}
+
+export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
+  paddingInner: 2,
+  paddingOuter: 2,
+  labelColorType: 'dataContrast',
+  squarifyRatio: 1.618034, // 黃金比例
+  sort: (a, b) => b.value - a.value
+}
+DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`

package/src/plugins/HierarchyPlot/index.ts

@@ -0,0 +1,3 @@
+export { HierarchyPlot } from './HierarchyPlot'
+export * from './defaults'
+export * from './types'