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

package/src/plugins/Legend/layers/Legend.ts

@@ -0,0 +1,114 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  filter,
+  switchMap,
+  takeUntil,
+  distinctUntilChanged,
+  shareReplay,
+  debounceTime,
+  Observable,
+  Subject, 
+  BehaviorSubject} from 'rxjs'
+import type { LegendExtendContext, LegendPluginParams, LegendParams } from "../types"
+import { defineSVGLayer } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { createBaseLegend } from "../../../baseLayers/BaseLegend"
+import { DEFAULT_SERIES_LEGEND_PARAMS } from "../defaults"
+import { LAYER_INDEX_OF_INFO } from '../../../const/layerIndex'
+
+const pluginName = 'Legend'
+const layerName = 'Legend'
+
+export const Legend = defineSVGLayer<LegendExtendContext, LegendPluginParams, LegendParams>({
+  name: layerName,
+  defaultParams: DEFAULT_SERIES_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  initShow: true,
+  validator: (params) => {
+    const result = validateObject(params, {
+      placement: {
+        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
+        test: (value) => {
+          return [
+            'top', 'top-start', 'top-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end',
+            'right', 'right-start', 'right-end'
+          ].includes(value)
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+
+    const destroy$ = new Subject()
+
+    const legendLabels$: Observable<string[]> = context.SeriesDataMap$.pipe(
+      takeUntil(destroy$),
+      map(data => {
+        return Array.from(data.keys())
+      })
+    )
+
+    // 全部列點矩型使用相同樣式參數
+    const baseLegendParams$ = layerParams$.pipe(
+      takeUntil(destroy$),
+      map(d => {
+        const labelList = [
+          {
+            listRectWidth: d.listRectWidth,
+            listRectHeight: d.listRectHeight,
+            listRectRadius: d.listRectRadius,
+          }
+        ]
+        return {
+          ...d,
+          labelList
+        }
+      })
+    )
+
+    const unsubscribeBaseLegend = createBaseLegend({
+      pluginName,
+      layerName,
+      rootSelection: d3.select(context.svg),
+      legendLabels$,
+      baseLegendParams$,
+      layout$: context.layout$,
+      theme$: context.theme$,
+      fontSizePx$: context.fontSizePx$
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseLegend()
+    }
+  }
+})

package/src/plugins/Legend/types.ts

@@ -0,0 +1,45 @@
+
+import { Observable } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { GraphicStyles, Layout } from '../../types/PluginParams'
+import { ComputedDatumSeries } from '../../types/ComputedData'
+import type { Placement } from '../../types/Common'
+
+// context
+export interface LegendExtendContext {
+  layout$: Observable<Layout>
+  fontSizePx$: Observable<number>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+}
+
+// plugin params
+export interface LegendPluginParams {
+  styles: GraphicStyles
+  visibleFilter: (datum: ModelDatumSeries) => boolean | null
+  sort: ((a: ModelDatumSeries, b: ModelDatumSeries) => number) | null
+  // container: Container
+  // separateSeries: boolean
+  // separateName: boolean
+  datasetIndex: number
+}
+
+// all layer params
+export interface LegendAllLayerParams {
+  Legend: LegendParams
+}
+
+// -- layer params --
+
+export interface LegendParams {
+  // position: 'top' | 'bottom' | 'left' | 'right'
+  // justify: 'start' | 'center' | 'end'
+  placement: Placement
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+  textColorType: ColorType
+}

package/src/plugins/Legend/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/NetworkPlot/NetworkPlot.ts

@@ -0,0 +1,228 @@
+import * as d3 from 'd3'
+import {
+  shareReplay,
+  map,
+  filter,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  Subject,
+  switchMap,
+  Observable,
+  BehaviorSubject
+} from 'rxjs'
+
+import type { NetworkPlotExtendContext, NetworkPlotPluginParams, NetworkPlotAllLayerParams } from './types'
+import { defineSVGPlugin } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_NETWORK_PLOT_PARAMS } from './defaults'
+import {
+  categoryDataMapObservable,
+  containerSizeObservable,
+  layoutObservable,
+  fontSizePxObservable,
+  highlightObservable,
+  seriesDataMapObservable
+} from '../../utils/observables'
+import {
+  multivariateComputedDataObservable,
+  categoryLabelsObservable,
+  NodeMapObservable,
+  EdgeMapObservable,
+  graphVisibleComputedDataObservable
+} from './contextObservables'
+import { ForceDirected } from './layers/ForceDirected'
+import { ForceDirectedBubbles } from './layers/ForceDirectedBubbles'
+const forceDirected = new ForceDirected()
+const forceDirectedBubbles = new ForceDirectedBubbles()
+
+export const NetworkPlot = defineSVGPlugin<
+  NetworkPlotExtendContext,
+  NetworkPlotPluginParams,
+  NetworkPlotAllLayerParams
+>({
+  name: 'NetworkPlot',
+  defaultParams: DEFAULT_NETWORK_PLOT_PARAMS,
+  layers: [forceDirected, forceDirectedBubbles],
+  setup: (props) => {
+
+    const selectedGraphData$ = combineLatest({
+      graphData: props.context.graphData$,
+      datasetIndex: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.datasetIndex)
+      )
+    }).pipe(
+      debounceTime(0),
+      map(({ graphData, datasetIndex }) => graphData[datasetIndex]),
+      shareReplay(1)
+    )
+
+    const layout$ = layoutObservable({
+      size$: props.context.size$,
+      padding$: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.styles.padding)
+      )
+    }).pipe(
+      shareReplay(1)
+    )
+
+    // combineLatest({
+    //   layout: layout$,
+    //   plugins: props.context.plugins$
+    // }).pipe(
+    //   debounceTime(0)
+    // ).subscribe(data => {
+    //   d3
+    //     .select(props.context.svg)
+    //     .selectAll(':scope > g') // 所有 layer
+    //     .attr('transform', `translate(${data.layout.left}, ${data.layout.top})`)
+    // })
+
+    // const layoutSubscription = layout$.subscribe(layout => {
+    //   props.svg.setAttribute('transform', `translate(${layout.left}, ${layout.top})`)
+    // })
+
+    const computedData$ = multivariateComputedDataObservable({
+      selectedGraphData$: selectedGraphData$,
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const fontSizePx$ = fontSizePxObservable(props.context.theme$).pipe(
+      shareReplay(1)
+    )
+
+    const graphHighlightNodes$ = highlightObservable({
+      datumList$: computedData$.pipe(map(data => data.nodes)),
+      styles$: props.pluginParams$.pipe(map(pluginParams => pluginParams.styles)),
+      event$: props.context.event$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const graphHighlightEdges$ = highlightObservable({
+      datumList$: computedData$.pipe(map(data => data.edges)),
+      styles$: props.pluginParams$.pipe(map(pluginParams => pluginParams.styles)),
+      event$: props.context.event$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const CategoryNodeMap$ = categoryDataMapObservable({
+      datumList$: computedData$.pipe(map(data => data.nodes))
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const CategoryEdgeMap$ = categoryDataMapObservable({
+      datumList$: computedData$.pipe(map(data => data.edges))
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const NodeMap$ = NodeMapObservable(computedData$).pipe(
+      shareReplay(1)
+    )
+
+    const EdgeMap$ = EdgeMapObservable(computedData$).pipe(
+      shareReplay(1)
+    )
+
+    const categoryLabels$ = categoryLabelsObservable(CategoryNodeMap$, CategoryEdgeMap$).pipe(
+      shareReplay(1)
+    )
+
+    const visibleComputedData$ = graphVisibleComputedDataObservable({
+      computedData$: computedData$,
+      NodeMap$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const extendsContext: NetworkPlotExtendContext = {
+      layout$,
+      computedData$,
+      fontSizePx$,
+      graphHighlightNodes$,
+      graphHighlightEdges$,
+      categoryLabels$,
+      CategoryNodeMap$,
+      CategoryEdgeMap$,
+      NodeMap$,
+      EdgeMap$,
+      visibleComputedData$
+    }
+
+    props.context = {
+      ...props.context,
+      ...extendsContext,
+    }
+    
+    return () => {
+      // layoutSubscription.unsubscribe()
+    }
+  },
+  validator: (params: NetworkPlotPluginParams) => {
+    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/NetworkPlot/contextObservables.ts

@@ -0,0 +1,123 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  debounceTime,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type { ModelData, ModelDatumSeries } from '@orbcharts/core'
+import type {
+  ComputedData,
+  ComputedDatumGraphNode,
+  ComputedDatumGraphEdge,
+} from '../../types'
+import { NetworkPlotPluginParams } from './types'
+
+export const multivariateComputedDataObservable = ({ selectedGraphData$, pluginParams$ }: {
+  selectedGraphData$: Observable<ModelData<'graph'>>
+  pluginParams$: Observable<NetworkPlotPluginParams>
+}): Observable<ComputedData<'graph'>> => {
+  return combineLatest({
+    selectedGraphData: selectedGraphData$,
+    pluginParams: pluginParams$
+  }).pipe(
+    debounceTime(0),
+    map(({ selectedGraphData, pluginParams }) => {
+      const filteredNodes = selectedGraphData.nodes.map((datum, index) => {
+        const visibleFilter = pluginParams.visibleFilter
+        return {
+          ...datum,
+          visible: visibleFilter ? visibleFilter(datum) : true,
+        }
+      })
+      const NodesMap: Map<string, ComputedDatumGraphNode> = new Map(
+        filteredNodes.map(d => [d.id, d])
+      )
+      const filteredEdges = selectedGraphData.edges.map((datum, index) => {
+        const sourceNode = NodesMap.get(datum.source)
+        const targetNode = NodesMap.get(datum.target)
+        return {
+          ...datum,
+          visible: sourceNode && targetNode && sourceNode.visible && targetNode.visible
+            ? true
+            : false
+        }
+      })
+      return {
+        nodes: filteredNodes,
+        edges: filteredEdges
+      }
+    })
+  )
+}
+
+export const categoryLabelsObservable = (
+  CategoryNodeMap$: Observable<Map<string, ComputedDatumGraphNode[]>>,
+  CategoryEdgeMap$: Observable<Map<string, ComputedDatumGraphEdge[]>>
+): Observable<string[]> => {
+  return combineLatest({
+    CategoryNodeMap: CategoryNodeMap$,
+    CategoryEdgeMap: CategoryEdgeMap$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return [...Array.from(data.CategoryNodeMap.keys()), ...Array.from(data.CategoryEdgeMap.keys())]
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a) === JSON.stringify(b)
+    }),
+  )
+}
+
+export const NodeMapObservable = (computedData$: Observable<ComputedData<'graph'>>) => {
+  return computedData$.pipe(
+    map(data => {
+      const nodeMap = new Map<string, ComputedDatumGraphNode>()
+      data.nodes.forEach(node => {
+        nodeMap.set(node.id, node)
+      })
+      return nodeMap
+    }),
+  )
+}
+
+export const EdgeMapObservable = (computedData$: Observable<ComputedData<'graph'>>) => {
+  return computedData$.pipe(
+    map(data => {
+      const edgeMap = new Map<string, ComputedDatumGraphEdge>()
+      data.edges.forEach(edge => {
+        edgeMap.set(edge.id, edge)
+      })
+      return edgeMap
+    }),
+  )
+}
+
+// 所有可見的節點
+export const graphVisibleComputedDataObservable = ({ computedData$, NodeMap$ }: {
+  computedData$: Observable<ComputedData<'graph'>>
+  NodeMap$: Observable<Map<string, ComputedDatumGraphNode>>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    NodeMap: NodeMap$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return {
+        nodes: data.computedData.nodes.filter(node => node.visible),
+        edges: data.computedData.edges
+          .filter(edge => edge.visible)
+          // 依照節點是否存在篩選
+          .filter(edge => {
+            return data.NodeMap.has(edge.source) && data.NodeMap.has(edge.target)
+          })
+      }
+    })
+  )
+}

package/src/plugins/NetworkPlot/defaults.ts

@@ -0,0 +1,147 @@
+import type {
+  ForceDirectedParams,
+  ForceDirectedBubblesParams,
+} from './types'
+import { NetworkPlotPluginParams } from './types'
+
+export const DEFAULT_NETWORK_PLOT_PARAMS: NetworkPlotPluginParams = {
+  styles: {
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 20,
+      left: 20
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum) => true,
+  datasetIndex: 0
+}
+
+export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
+  // node: {
+  //   dotRadius: 10,
+  //   dotFillColorType: 'label',
+  //   dotStrokeColorType: 'label',
+  //   dotStrokeWidth: 1,
+  //   dotStyleFn: (node) => '',
+  //   labelColorType: 'primary',
+  //   labelSizeFixed: false,
+  //   labelStyleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+  // },
+  // edge: {
+  //   arrowColorType: 'primary',
+  //   arrowStrokeWidth: 1.5,
+  //   arrowWidth: 5,
+  //   arrowHeight: 5,
+  //   arrowStyleFn: (node) => '',
+  //   labelColorType: 'secondary',
+  //   labelSizeFixed: false,
+  //   labelStyleFn: (node) => ''
+  // },
+  dot: {
+    radius: 10,
+    fillColorType: 'data',
+    strokeColorType: 'data',
+    strokeWidth: 1,
+    styleFn: (node) => '',
+  },
+  dotLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    // styleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+    styleFn: (node) => ''
+  },
+  arrow: {
+    colorType: 'primary',
+    strokeWidth: 1.5,
+    pointerWidth: 5,
+    pointerHeight: 5,
+    styleFn: (node) => '',
+  },
+  arrowLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    styleFn: (node) => ''
+  },
+  force: {
+    nodeStrength: -500, // 泡泡引力
+    linkDistance: 100, // 連結長度
+    velocityDecay: 0.1, // 衰減數
+    alphaDecay: 0.05
+    // collisionSpacing: 2 // 泡泡間距
+  },
+  zoomable: true,
+  transform: {
+    x: 0,
+    y: 0,
+    k: 1
+  },
+  scaleExtent: {
+    min: 0,
+    max: Infinity
+  }
+}
+DEFAULT_FORCE_DIRECTED_PARAMS.dot.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.dotLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
+
+export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams = {
+  bubble: {
+    radiusMin: 15,
+    radiusMax: 45,
+    arcScaleType: 'area',
+    fillColorType: 'data',
+    strokeColorType: 'data',
+    strokeWidth: 1,
+    styleFn: (node) => '',
+  },
+  bubbleLabel: {
+    fillRate: 0.9,
+    lineHeight: 1,
+    maxLineLength: 6,
+    wordBreakAll: true,
+    colorType: 'dataContrast',
+    styleFn: (node) => ''
+  },
+  arrow: {
+    colorType: 'primary',
+    strokeWidthMin: 1.5,
+    strokeWidthMax: 4.5,
+    pointerWidth: 5,
+    pointerHeight: 5,
+    styleFn: (node) => '',
+  },
+  arrowLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    styleFn: (node) => ''
+  },
+  force: {
+    nodeStrength: -500, // 泡泡引力
+    linkDistance: 130, // 連結長度
+    velocityDecay: 0.1, // 衰減數
+    alphaDecay: 0.05
+    // collisionSpacing: 2 // 泡泡間距
+  },
+  zoomable: true,
+  transform: {
+    x: 0,
+    y: 0,
+    k: 1
+  },
+  scaleExtent: {
+    min: 0,
+    max: Infinity
+  }
+}
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubble.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubbleLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
+