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

package/src/plugins/HierarchyPlot/layers/TreeMap.ts

@@ -0,0 +1,371 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  of,
+  first,
+  switchMap,
+  debounceTime,
+  takeUntil,
+  distinctUntilChanged,
+  shareReplay,
+  iif,
+  EMPTY,
+  Observable,
+  Subject,
+  BehaviorSubject
+} from 'rxjs'
+import type { Theme, EventData } from '@orbcharts/core'
+import type { HierarchyPlotPluginParams, HierarchyPlotExtendContext, TreeMapParams } from '../types'
+import { defineSVGLayer } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_TREE_MAP_PARAMS } from "../defaults"
+import { multivariateSelectionsObservable } from "../../../utils/multivariateObservables"
+import { getColor, getDatumColor } from '../../../utils/orbchartsUtils'
+import { createClassName, createUniID } from '../../../utils/orbchartsUtils'
+import type { ComputedData, ComputedDatumTree } from '../../../types/ComputedData'
+import type { ContainerPosition, GraphicStyles, Layout } from '../../../types/PluginParams'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+
+const pluginName = 'HierarchyPlot'
+const layerName = 'TreeMap'
+
+const treeClassName = createClassName(pluginName, layerName, 'tree')
+const tileClassName = createClassName(pluginName, layerName, 'tile')
+
+function renderTree ({ selection, treeData, layerParams, theme, fontSizePx }: {
+  selection: d3.Selection<any, any, any, any>
+  treeData: d3.HierarchyRectangularNode<ComputedData<'tree'>>[]
+  layerParams: TreeMapParams
+  theme: Theme
+  fontSizePx: number
+}) {
+  const padding = fontSizePx / 2
+  const lineHeight = fontSizePx // 行高
+
+  const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedData<'tree'>>>(`g.${treeClassName}`)
+    .data(treeData, d => d.data.id)
+    .join('g')
+    .attr('class', treeClassName)
+  
+  cell
+    // .transition()
+    // .duration(fullChartParams.transitionDuration)
+    .attr('transform', (d) => !d.x0 || !d.y0 ? null : `translate(${d.x0},${d.y0})`)
+    .each((d, i, nodes) => {
+      const eachCell = d3.select(nodes[i])
+
+      const tile = eachCell
+        .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedData<'tree'>>>(`rect.${tileClassName}`)
+        .data([d], d => d.data.id)
+        .join('rect')
+        .attr("id", d => d.data.id)
+        .attr("class", tileClassName)
+        .attr('cursor', 'pointer')
+        .attr("width", (d) => d.x1 - d.x0)
+        .attr("height", (d) => d.y1 - d.y0)
+        .attr('fill', d => d.data.color)
+        .attr('data-name', d => d.data.name)
+        .attr('data-category', d => d.data.series)
+        .attr('data-value', d => d.data.value)
+        
+      const label = eachCell
+        .selectAll('g')
+        .data([d])
+        .join('g')
+        .each((d, i, nodes) => {
+          const eachLabel = d3.select(nodes[i])
+          const text = eachLabel
+            .selectAll('text')
+            .data([d])
+            .join('text')
+            .text(d => d.data.name)
+            .attr('dominant-baseline', 'hanging')
+            .attr("x", padding)
+            .attr("y", padding)
+            .attr('font-size', theme.fontSize)
+            .each(function(d) {
+              // -- tspan（自動斷行） --
+              const textElement = d3.select(this);
+              const words = d.data.name.split(/\s+/).reverse() // 以空隔分割字串
+              let word;
+              let line: string[] = []
+              const x = textElement.attr("x")
+              let y = textElement.attr("y")
+              let dy = 0
+              let tspan = textElement
+                .text(null)
+                .append("tspan")
+                .attr('cursor', 'pointer')
+                .attr('fill', getDatumColor({
+                  colorType: layerParams.labelColorType,
+                  datum: d.data,
+                  theme
+                }))
+                .attr('font-size', theme.fontSize)
+                .attr("x", x)
+                .attr("y", y)
+              
+              while (word = words.pop()) {
+                line.push(word)
+                tspan.text(line.join(" "))
+                if (tspan.node().getComputedTextLength() > (d.x1 - d.x0 - padding)) {
+                  line.pop()
+                  tspan.text(line.join(" "))
+                  line = [word]
+                  dy += lineHeight
+                  tspan = textElement
+                    .append("tspan")
+                    .attr('cursor', 'pointer')
+                    .attr('fill', getDatumColor({
+                      colorType: layerParams.labelColorType,
+                      datum: d.data,
+                      theme
+                    }))
+                    .attr('font-size', theme.fontSize)
+                    .attr("x", x)
+                    .attr("y", y)
+                    .attr("dy", dy + "px")                    
+                    .text(word)
+                }
+              }
+            })
+          })
+
+  })
+
+  return cell
+}
+
+function highlight ({ selection, ids, styles }: {
+  selection: d3.Selection<any, d3.HierarchyRectangularNode<ComputedData<'tree'>>, any, any>
+  ids: string[]
+  styles: GraphicStyles
+}) {
+  selection.interrupt('highlight')
+
+  if (!ids.length) {
+    // remove highlight
+    selection
+      .transition('highlight')
+      .duration(200)
+      .style('opacity', 1)
+    return
+  }
+  
+  selection
+    .each((d, i, n) => {
+      if (ids.includes(d.data.id)) {
+        d3.select(n[i])
+          .style('opacity', 1)
+      } else {
+        d3.select(n[i])
+          .style('opacity', styles.unhighlightedOpacity)
+      }
+    })
+}
+
+export const TreeMap = defineSVGLayer<HierarchyPlotExtendContext, HierarchyPlotPluginParams, TreeMapParams>({
+  name: layerName,
+  defaultParams: DEFAULT_TREE_MAP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: true,
+  validator: (params) => {
+    const result = validateObject(params, {
+      paddingInner: {
+        toBeTypes: ['number']
+      },
+      paddingOuter: {
+        toBeTypes: ['number']
+      },
+      labelColorType: {
+        toBeOption: 'ColorType'
+      },
+      squarifyRatio: {
+        toBeTypes: ['number']
+      },
+      sort: {
+        toBeTypes: ['Function']
+      }
+    })
+    return result
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+
+    const destroy$ = new Subject()
+
+    const selection = d3.select(svgG)
+
+    context.layout$
+      .pipe(
+        takeUntil(destroy$)
+      )
+      .subscribe(layout => {
+        selection
+          .attr('transform', `translate(${layout.left}, ${layout.top})`)
+      })
+
+    const treeData$ = combineLatest({
+      layout: context.layout$,
+      visibleComputedData: context.visibleComputedData$,
+      layerParams: layerParams$
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0),
+      map(data => {
+        const treemap = d3.treemap()
+          .size([data.layout.width, data.layout.height])
+          .paddingInner(data.layerParams.paddingInner)
+          .paddingOuter(data.layerParams.paddingOuter)
+          .round(true)
+          .tile(d3.treemapSquarify.ratio(data.layerParams.squarifyRatio))
+
+        const root = d3.hierarchy(data.visibleComputedData)
+          .sum(d => d.value)
+          .sort(data.layerParams.sort as (a: any, b: any) => number)
+          
+        //call treemap
+        treemap(root)
+
+        const treeData: d3.HierarchyRectangularNode<ComputedDatumTree>[] = root.leaves() as any
+
+        return treeData
+      })
+    )
+
+    const cellSelection$ = combineLatest({
+      selection: of(selection),
+      treeData: treeData$,
+      layerParams: layerParams$,
+      theme: context.theme$,
+      fontSizePx: context.fontSizePx$
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0),
+      map(data => {
+        return renderTree({
+          selection,
+          treeData: data.treeData,
+          layerParams: data.layerParams,
+          theme: data.theme,
+          fontSizePx: data.fontSizePx
+        })
+      })
+    )
+
+    // const highlightTarget$ = pluginParams$.pipe(
+    //   takeUntil(destroy$),
+    //   map(d => d.styles.highlightTarget),
+    //   distinctUntilChanged()
+    // )
+
+    cellSelection$.subscribe(cellSelection => {
+      cellSelection
+        .on('mouseover', (event, datum) => {
+          event.stopPropagation()
+
+          context.eventTrigger$.next({
+            // type: 'tree',
+            // eventName: 'mouseover',
+            // pluginName,
+            // highlightTarget: data.highlightTarget,
+            // datum: datum.data,
+            // category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
+            // categoryIndex: datum.data.categoryIndex,
+            // categoryLabel: datum.data.categoryLabel,
+            // event,
+            // data: data.computedData
+            eventName: 'mouseover',
+            pluginName,
+            layerName,
+            target: datum.data,
+            event
+          })
+        })
+        .on('mousemove', (event, datum) => {
+          event.stopPropagation()
+
+          context.eventTrigger$.next({
+            // type: 'tree',
+            // eventName: 'mousemove',
+            // pluginName,
+            // highlightTarget: data.highlightTarget,
+            // datum: datum.data,
+            // category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
+            // categoryIndex: datum.data.categoryIndex,
+            // categoryLabel: datum.data.categoryLabel,
+            // event,
+            // data: data.computedData
+            eventName: 'mousemove',
+            pluginName,
+            layerName,
+            target: datum.data,
+            event
+          })
+        })
+        .on('mouseout', (event, datum) => {
+          event.stopPropagation()
+
+          context.eventTrigger$.next({
+            // type: 'tree',
+            // eventName: 'mouseout',
+            // pluginName,
+            // highlightTarget: data.highlightTarget,
+            // datum: datum.data,
+            // category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
+            // categoryIndex: datum.data.categoryIndex,
+            // categoryLabel: datum.data.categoryLabel,
+            // event,
+            // data: data.computedData
+            eventName: 'mouseout',
+            pluginName,
+            layerName,
+            target: datum.data,
+            event
+          })
+        })
+        .on('click', (event, datum) => {
+          event.stopPropagation()
+
+          context.eventTrigger$.next({
+            // type: 'tree',
+            // eventName: 'click',
+            // pluginName,
+            // highlightTarget: data.highlightTarget,
+            // datum: datum.data,
+            // category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
+            // categoryIndex: datum.data.categoryIndex,
+            // categoryLabel: datum.data.categoryLabel,
+            // event,
+            // data: data.computedData
+            eventName: 'click',
+            pluginName,
+            layerName,
+            target: datum.data,
+            event
+          })
+        })
+    })
+
+    combineLatest({
+      cellSelection: cellSelection$,
+      highlight: context.treeHighlight$.pipe(
+        map(data => data.map(d => d.id))
+      ),
+      styles: pluginParams$.pipe(map(p => p.styles)),
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0)
+    ).subscribe(data => {
+      highlight({
+        selection: data.cellSelection,
+        ids: data.highlight,
+        styles: data.styles
+      })
+    })
+
+    return () => {
+      destroy$.next(undefined)
+    }
+  }
+})

package/src/plugins/HierarchyPlot/types.ts

@@ -0,0 +1,36 @@
+
+import { Observable, Subject } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { AxisPosition, ContainerPosition, ContainerPositionScaled, Container, GraphicStyles, Layout, VisibleFilter, XYAxis, CategoryAxis } from '../../types/PluginParams'
+import type { ComputedData, ComputedDatumTree } from '../../types'
+
+export interface HierarchyPlotExtendContext {
+  layout$: Observable<Layout>
+  computedData$: Observable<ComputedData<'tree'>>
+  fontSizePx$: Observable<number>
+  treeHighlight$: Observable<ComputedDatumTree[]>
+  categoryLabels$: Observable<string[]>
+  CategoryDataMap$: Observable<Map<string, ComputedDatumTree[]>>
+  visibleComputedData$: Observable<ComputedData<'tree'>>
+}
+
+// plugin params
+export interface HierarchyPlotPluginParams {
+  styles: GraphicStyles
+  visibleFilter: VisibleFilter<'grid'>
+  datasetIndex: number
+}
+
+// all layer params
+export interface HierarchyPlotAllLayerParams {
+  TreeMap: TreeMapParams
+}
+
+// -- layer params --
+export interface TreeMapParams {
+  paddingInner: number
+  paddingOuter: number
+  labelColorType: ColorType
+  squarifyRatio: number
+  sort: (a: ComputedDatumTree, b: ComputedDatumTree) => number
+}

package/src/plugins/Legend/Legend.ts

@@ -0,0 +1,151 @@
+import {
+  shareReplay,
+  map, 
+  combineLatest,
+  debounceTime} from 'rxjs'
+
+import type { LegendExtendContext, LegendPluginParams, LegendAllLayerParams } from './types'
+import { defineSVGPlugin } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_SERIES_LEGEND_PLUGIN_PARAMS } from './defaults'
+import {
+  layoutObservable,
+  fontSizePxObservable,
+  seriesDataMapObservable
+} from '../../utils/observables'
+import {
+  seriesComputedDataObservable,
+} from './contextObservables'
+import { Legend as LegendLayer } from './layers/Legend'
+
+const seriesLegend = new LegendLayer()
+
+export const Legend = defineSVGPlugin<
+  LegendExtendContext,
+  LegendPluginParams,
+  LegendAllLayerParams
+>({
+  name: 'Legend',
+  defaultParams: DEFAULT_SERIES_LEGEND_PLUGIN_PARAMS,
+  layers: [seriesLegend],
+  setup: (props) => {
+
+    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)
+    )
+
+    // 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 datumList$ = computedData$.pipe(
+      map(d => d.flat())
+    ).pipe(
+      shareReplay(1)
+    )
+
+    const SeriesDataMap$ = seriesDataMapObservable({
+      datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const extendsContext: LegendExtendContext = {
+      layout$,
+      fontSizePx$,
+      SeriesDataMap$,
+    }
+
+    props.context = {
+      ...props.context,
+      ...extendsContext,
+    }
+    
+    return () => {
+      // layoutSubscription.unsubscribe()
+    }
+  },
+  validator: (params: LegendPluginParams) => {
+    const result = validateObject(params, {
+      styles: {
+        toBeTypes: ['object'],
+      },
+      datasetIndex: {
+        toBeTypes: ['number']
+      }
+    })
+    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/Legend/contextObservables.ts

@@ -0,0 +1,55 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  debounceTime,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable
+} from 'rxjs'
+import type {
+  ModelDataSeries,
+} from '@orbcharts/core'
+import type { LegendPluginParams } from './types'
+import type { ComputedDatumSeries } from '../../types/ComputedData'
+
+export const seriesComputedDataObservable = ({ selectedSeriesData$, pluginParams$ }: {
+  selectedSeriesData$: Observable<ModelDataSeries>
+  pluginParams$: Observable<LegendPluginParams>
+}): 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
+          }, [])
+      })
+  )
+}

package/src/plugins/Legend/defaults.ts

@@ -0,0 +1,37 @@
+import type { LegendParams, LegendPluginParams } from './types'
+
+export const DEFAULT_SERIES_LEGEND_PLUGIN_PARAMS: LegendPluginParams = {
+  styles: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 60,
+      left: 60
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum) => true,
+  sort: null,
+  datasetIndex: 0
+}
+DEFAULT_SERIES_LEGEND_PLUGIN_PARAMS.visibleFilter.toString = () => '(datum) => true'
+
+export const DEFAULT_SERIES_LEGEND_PARAMS: LegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'bottom',
+  padding: 5,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+  textColorType: 'primary'
+}

package/src/plugins/Legend/index.ts

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