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

package/src/plugins/CompositionPlot/CompositionPlot.ts

@@ -0,0 +1,308 @@
+import * as d3 from 'd3'
+import {
+  shareReplay,
+  map, 
+  combineLatest,
+  debounceTime} from 'rxjs'
+
+import type { CompositionPlotExtendContext, CompositionPlotPluginParams, CompositionPlotAllLayerParams } from './types'
+import { defineSVGPlugin } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_COMPOSITION_PLOT_PARAMS } from './defaults'
+import {
+  categoryDataMapObservable,
+  containerSizeObservable,
+  layoutObservable,
+  fontSizePxObservable,
+  highlightObservable,
+  seriesDataMapObservable
+} from '../../utils/observables'
+import {
+  datumContainerPositionMapObservable,
+  datumLabelsObservable,
+  separateNameObservable,
+  separateSeriesObservable,
+  seriesComputedDataObservable,
+  seriesComputedSortedDataObservable,
+  seriesContainerPositionObservable,
+  seriesLabelsObservable,
+  seriesVisibleComputedDataObservable
+} from './contextObservables'
+import { Bubbles } from './layers/Bubbles'
+import { Pie } from './layers/Pie'
+import { PieEventTexts } from './layers/PieEventTexts'
+import { PieLabels } from './layers/PieLabels'
+import { Rose } from './layers/Rose'
+import { RoseLabels } from './layers/RoseLabels'
+
+const bubbles = new Bubbles()
+const pie = new Pie()
+const pieEventTexts = new PieEventTexts()
+const pieLabels = new PieLabels()
+const rose = new Rose()
+const roseLabels = new RoseLabels()
+
+export const CompositionPlot = defineSVGPlugin<
+  CompositionPlotExtendContext,
+  CompositionPlotPluginParams,
+  CompositionPlotAllLayerParams
+>({
+  name: 'CompositionPlot',
+  defaultParams: DEFAULT_COMPOSITION_PLOT_PARAMS,
+  layers: [bubbles, pie, pieEventTexts, pieLabels, rose, roseLabels],
+  setup: (props) => {
+    // props.context.seriesData$.subscribe(seriesData => {
+    //   console.log('CompositionPlot seriesData', seriesData)
+    // })
+    const selectedSeriesData$ = combineLatest({
+      seriesData: props.context.seriesData$,
+      datasetIndex: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.datasetIndex)
+      )
+    }).pipe(
+      debounceTime(0),
+      map(({ seriesData, datasetIndex }) => seriesData[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$ = seriesComputedDataObservable({
+      selectedSeriesData$,
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const fontSizePx$ = fontSizePxObservable(props.context.theme$).pipe(
+      shareReplay(1)
+    )
+
+    const datumLabels$ = datumLabelsObservable({
+      selectedSeriesData$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const separateSeries$ = separateSeriesObservable({
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const separateName$ = separateNameObservable({
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    // const sumSeries$ = sumSeriesObservable({
+    //   fullDataFormatter$: observer.fullDataFormatter$
+    // }).pipe(
+    //   shareReplay(1)
+    // )
+
+    const computedSortedData$ = seriesComputedSortedDataObservable({
+      seriesComputedData$: computedData$,
+      separateSeries$: separateSeries$,
+      separateName$: separateName$,
+      // sumSeries$: sumSeries$,
+      datumLabels$: datumLabels$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const visibleComputedSortedData$ = seriesVisibleComputedDataObservable({
+      seriesComputedData$: computedSortedData$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const datumList$ = computedData$.pipe(
+      map(d => d.flat())
+    ).pipe(
+      shareReplay(1)
+    )
+
+    const seriesHighlight$ = highlightObservable({
+      datumList$,
+      styles$: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.styles)
+      ),
+      event$: props.context.event$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const seriesLabels$ = seriesLabelsObservable({
+      selectedSeriesData$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const SeriesDataMap$ = seriesDataMapObservable({
+      datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const seriesContainerPosition$ = seriesContainerPositionObservable({
+      computedSortedData$: computedSortedData$,
+      pluginParams$: props.pluginParams$,
+      layout$: layout$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const DatumContainerPositionMap$ = datumContainerPositionMapObservable({
+      seriesContainerPosition$: seriesContainerPosition$,
+      computedSortedData$: computedSortedData$,
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const extendsContext: CompositionPlotExtendContext = {
+      layout$,
+      computedData$,
+      fontSizePx$,
+      datumLabels$,
+      separateSeries$,
+      separateName$,
+      computedSortedData$,
+      visibleComputedSortedData$,
+      datumList$,
+      seriesHighlight$,
+      seriesLabels$,
+      SeriesDataMap$,
+      seriesContainerPosition$,
+      DatumContainerPositionMap$,
+    }
+
+    props.context = {
+      ...props.context,
+      ...extendsContext,
+    }
+    
+    return () => {
+      // layoutSubscription.unsubscribe()
+    }
+  },
+  validator: (params: CompositionPlotPluginParams) => {
+    const result = validateObject(params, {
+      styles: {
+        toBeTypes: ['object'],
+      },
+      visibleFilter: {
+        toBeTypes: ['Function', 'null']
+      },
+      sort: {
+        toBeTypes: ['Function', 'null']
+      },
+      container: {
+        toBeTypes: ['object']
+      },
+      separateSeries: {
+        toBeTypes: ['boolean']
+      },
+      separateName: {
+        toBeTypes: ['boolean']
+      },
+      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
+        }
+      }
+    }
+    if (params.container) {
+      const containerResult = validateObject(params.container, {
+        columnAmount: {
+          toBeTypes: ['number']
+        },
+        rowAmount: {
+          toBeTypes: ['number']
+        },
+        columnGap: {
+          toBe: 'number | "auto"',
+          test: (value: any) => typeof value === 'number' || value === 'auto'
+        },
+        rowGap: {
+          toBe: 'number | "auto"',
+          test: (value: any) => typeof value === 'number' || value === 'auto'
+        }
+      })
+      if (containerResult.status === 'error') {
+        return containerResult
+      }
+    }
+    
+    return result
+  },
+})

package/src/plugins/CompositionPlot/contextObservables.ts

@@ -0,0 +1,251 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  debounceTime,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable
+} from 'rxjs'
+import type {
+  ModelDatumSeries,
+  ModelDataSeries,
+  // DataFormatterTypeMap,
+  // ContainerPosition,
+  // Layout
+} from '@orbcharts/core'
+import type { CompositionPlotPluginParams } from './types'
+import type { Layout, ContainerPosition } from '../../types/PluginParams'
+import type { ComputedDatumSeries } from '../../types/ComputedData'
+import { calcContainerPosition } from '../../utils/orbchartsUtils'
+
+export const seriesComputedDataObservable = ({ selectedSeriesData$, pluginParams$ }: {
+  selectedSeriesData$: Observable<ModelDataSeries>
+  pluginParams$: Observable<CompositionPlotPluginParams>
+}): Observable<ComputedDatumSeries[][]> => {
+  return combineLatest({
+    selectedSeriesData: selectedSeriesData$,
+    pluginParams: pluginParams$
+  }).pipe(
+    debounceTime(0),
+    map(({ selectedSeriesData, pluginParams }) => {
+      return selectedSeriesData
+          // 攤為一維陣列
+          .flat()
+          // 排序後給 seq
+          .sort(pluginParams.sort ?? undefined)
+          .map((datum, index) => {
+            const visibleFilter = pluginParams.visibleFilter
+            return {
+              ...datum,
+              visible: visibleFilter ? visibleFilter(datum) : true,
+              seq: index
+            }
+          })
+          // 恢復原排序
+          .sort((a, b) => a.index - b.index)
+          // 依seriesIndex分組（二維陣列）
+          .reduce((acc, datum) => {
+            if (!acc[datum.seriesIndex]) {
+              acc[datum.seriesIndex] = []
+            }
+            acc[datum.seriesIndex].push(datum)
+            return acc
+          }, [])
+      })
+  )
+}
+
+export const datumLabelsObservable = ({ selectedSeriesData$ }: { selectedSeriesData$: Observable<ModelDataSeries> }) => {
+  const DatumLabels = new Set<string>()
+  return selectedSeriesData$.pipe(
+    map(selectedSeriesData => {
+      selectedSeriesData.forEach(series => {
+        series.forEach(datum => {
+          DatumLabels.add(datum.name)
+        })
+      })
+      return Array.from(DatumLabels)
+    }),
+  )
+}
+
+export const separateSeriesObservable = ({ pluginParams$ }: { pluginParams$: Observable<CompositionPlotPluginParams> }) => {
+  return pluginParams$.pipe(
+    map(data => data.separateSeries),
+    distinctUntilChanged(),
+  )
+}
+
+export const separateNameObservable = ({ pluginParams$ }: { pluginParams$: Observable<CompositionPlotPluginParams> }) => {
+  return pluginParams$.pipe(
+    map(data => data.separateName),
+    distinctUntilChanged(),
+  )
+}
+
+// export const sumSeriesObservable = ({ pluginParams$ }: { pluginParams$: Observable<CompositionPlotPluginParams> }) => {
+//   return pluginParams$.pipe(
+//     map(data => data.sumSeries),
+//     distinctUntilChanged(),
+//   )
+// }
+
+export const seriesLabelsObservable = ({ selectedSeriesData$ }: { selectedSeriesData$: Observable<ModelDataSeries> }) => {
+  return selectedSeriesData$.pipe(
+    map(data => {
+      const seriesLabels = data
+        .filter(series => series.length)
+        .map(series => {
+          return series[0].series
+        })
+      return Array.from(new Set(seriesLabels))
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a) === JSON.stringify(b)
+    }),
+  )
+}
+
+export const seriesVisibleComputedDataObservable = ({ seriesComputedData$ }: { seriesComputedData$: Observable<ComputedDatumSeries[][]> }) => {
+  return seriesComputedData$.pipe(
+    map(data => {
+      return data.map(series => {
+        return series.filter(datum => datum.visible != false)
+      })
+    })
+  )
+}
+
+export const seriesComputedSortedDataObservable = ({ seriesComputedData$, separateSeries$, separateName$, datumLabels$ }: {
+  seriesComputedData$: Observable<ComputedDatumSeries[][]>,
+  separateSeries$: Observable<boolean>,
+  separateName$: Observable<boolean>,
+  // sumSeries$: Observable<boolean>,
+  datumLabels$: Observable<string[]>
+}) => {
+  return combineLatest({
+    seriesComputedData: seriesComputedData$,
+    separateSeries: separateSeries$,
+    separateName: separateName$,
+    // sumSeries: sumSeries$,
+    datumLabels: datumLabels$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      // // sum series
+      // const sumData: ComputedDatumSeries[][] = data.sumSeries == true
+      //   ? data.seriesComputedData.map(d => {
+      //       return [
+      //         // 加總為一筆資料
+      //         d.reduce((acc, current) => {
+      //           if (acc == null) {
+      //             // * 取得第一筆資料
+      //             return current
+      //           }
+      //           // 加總 value
+      //           acc.value = acc.value + current.value
+      //           return acc
+      //         }, null)
+      //       ]
+      //     })
+      //   : data.seriesComputedData
+      
+      // separate series
+      const separateSeriesData: ComputedDatumSeries[][] = data.separateSeries == true
+        // 有拆分的話每個series為一組
+        ? data.seriesComputedData
+        // 無拆分的話所有資料為一組
+        : [data.seriesComputedData.flat()]
+
+      // separate label
+      const separateNameData: ComputedDatumSeries[][] = data.separateName == 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.name]
+                if (acc[index] == null) {
+                  acc[index] = []
+                }
+                acc[index].push(current)
+                return acc
+              }, [] as ComputedDatumSeries[][])
+            })
+            .flat()
+        })()
+        // 無拆分
+        : separateSeriesData
+      
+      return data.separateSeries == true && data.separateName == true
+        // 全部拆分時全部一起排序
+        ? separateNameData
+            .sort((a, b) => a[0].seq - b[0].seq)
+        // 依各個 container 排序
+        : separateNameData
+            .map(series => {
+              return series.sort((a, b) => a.seq - b.seq)
+            })
+    })
+  )
+}
+
+
+// 所有container位置（對應series）
+export const seriesContainerPositionObservable = ({ computedSortedData$, pluginParams$, layout$ }: {
+  computedSortedData$: Observable<ComputedDatumSeries[][]>
+  pluginParams$: Observable<CompositionPlotPluginParams>
+  layout$: Observable<Layout>
+}): Observable<ContainerPosition[]> => {
+
+  const gridContainerPosition$ = combineLatest({
+    computedSortedData: computedSortedData$,
+    pluginParams: pluginParams$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      // 已分類資料的分類數量
+      const amount = data.computedSortedData.length
+
+      return calcContainerPosition(data.layout, data.pluginParams.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()
+      )
+    })
+  )
+}

package/src/plugins/CompositionPlot/defaults.ts

@@ -0,0 +1,162 @@
+import type { IndicatorParams, PieEventTextsParams, PieLabelsParams, RoseLabelsParams, RoseParams, CompositionPlotPluginParams, } from './types'
+import type { EventData, ModelDatumSeries } from '@orbcharts/core'
+import type { BubblesParams, PieParams } from './types'
+import { DEFAULT_CONTAINER } from '../../const/sharedPluginParams'
+
+export const DEFAULT_COMPOSITION_PLOT_PARAMS: CompositionPlotPluginParams = {
+  styles: {
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 60,
+      left: 20
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum: ModelDatumSeries) => true,
+  sort: null,
+  // seriesLabels: [],
+  container: {
+    ...DEFAULT_CONTAINER
+  },
+  separateSeries: false,
+  separateName: false,
+  // sumSeries: false,
+  datasetIndex: 0
+}
+DEFAULT_COMPOSITION_PLOT_PARAMS.visibleFilter.toString = () => '(datum) => true'
+
+export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
+  force: {
+    strength: 0.08, // 泡泡引力
+    velocityDecay: 0.3, // 衰減數
+    collisionSpacing: 2 // 泡泡間距
+  },
+  bubbleLabel: {
+    labelFn: d => String(d.name),
+    colorType: 'dataContrast',
+    fillRate: 0.6,
+    lineHeight: 1,
+    maxLineLength: 6,
+    wordBreakAll: true,
+  },
+  // highlightRIncrease: 0,
+  arcScaleType: 'area'
+}
+DEFAULT_BUBBLES_PARAMS.bubbleLabel.labelFn.toString = () => `d => String(d.name)`
+
+export const DEFAULT_PIE_PARAMS: PieParams = {
+  outerRadius: 0.85,
+  innerRadius: 0,
+  outerRadiusWhileHighlight: 0.9,
+  startAngle: 0,
+  endAngle: Math.PI * 2,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 1,
+  // padRadius: 100,
+  cornerRadius: 0,
+}
+
+
+export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
+  renderFn: (eventData: EventData) => {
+    if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+      return [String(eventData.target!.value)]
+    }
+    return [
+      // String(
+      //   Math.round(
+      //     eventData.data.reduce((acc, seriesData) => {
+      //       return acc + seriesData.reduce((_acc, data) => {
+      //         return _acc + (data.value ?? 0)
+      //       }, 0)
+      //     }, 0) * (eventData.tween ?? 1)
+      //   )
+      // )
+    ]
+  },
+  textAttrs: [
+    {
+      "transform": "translate(0, 0)"
+    }
+  ],
+  textStyles: [
+    {
+      "font-weight": "bold",
+      "text-anchor": "middle",
+      "pointer-events": "none",
+      "dominant-baseline": "middle",
+      "font-size": 64,
+      "fill": "#000"
+    }
+  ]
+}
+DEFAULT_PIE_EVENT_TEXTS_PARAMS.renderFn.toString = () => `(eventData) => {
+  if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+    return [String(eventData.target.value)]
+  }
+  return [
+    String(
+      Math.round(
+        eventData.data.reduce((acc, seriesData) => {
+          return acc + seriesData.reduce((_acc, data) => {
+            return _acc + (data.value ?? 0)
+          }, 0)
+        }, 0) * (eventData.tween ?? 1)
+      )
+    )
+  ]
+}`
+
+export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
+  // solidColor: undefined,
+  // colors: DEFAULT_COLORS,
+  outerRadius: 0.85,
+  outerRadiusWhileHighlight: 0.9,
+  // innerRadius: 0,
+  // enterDuration: 800,
+  startAngle: 0,
+  endAngle: Math.PI * 2,
+  labelCentroid: 2.1,
+  // fontSize: 12,
+  labelColorType: 'primary',
+  labelFn: d => String(d.name),
+}
+DEFAULT_PIE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.name)`
+
+export const DEFAULT_ROSE_PARAMS: RoseParams = {
+  outerRadius: 0.95,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 0.5,
+  cornerRadius: 0,
+  arcScaleType: 'area',
+  angleIncreaseWhileHighlight: 0.05
+}
+
+export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
+  outerRadius: 0.95,
+  labelCentroid: 2.1,
+  labelFn: d => String(d.name),
+  labelColorType: 'primary',
+  arcScaleType: 'area'
+}
+DEFAULT_ROSE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.name)`
+
+export const DEFAULT_INDICATOR_PARAMS: IndicatorParams = {
+  // startAngle: 0,
+  // endAngle: Math.PI * 2,
+  startAngle: - Math.PI / 2,
+  endAngle: Math.PI / 2,
+  radius: 0.6,
+  indicatorType: 'needle',
+  size: 10,
+  colorType: 'data',
+  // autoHighlight: false,
+  value: 0,
+}