@orbcharts/plugins-basic 3.0.0-alpha.37 → 3.0.0-alpha.39

package/dist/src/index.d.ts

@@ -2,3 +2,4 @@ export * from './grid';
 export * from './multiGrid';
 export * from './noneData';
 export * from './series';
+export * from './tree';

package/dist/src/tree/defaults.d.ts

@@ -0,0 +1,4 @@
+import { TreeMapParams, TreeLegendParams } from './types';
+
+export declare const DEFAULT_TREE_MAP_PARAMS: TreeMapParams;
+export declare const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams;

package/dist/src/tree/index.d.ts

@@ -0,0 +1,4 @@
+export * from './defaults';
+export * from './types';
+export { TreeLegend } from './plugins/TreeLegend';
+export { TreeMap } from './plugins/TreeMap';

package/dist/src/tree/plugins/TreeLegend.d.ts

@@ -0,0 +1 @@
+export declare const TreeLegend: import('@orbcharts/core').PluginConstructor<"tree", string, import('..').TreeLegendParams>;

package/dist/src/tree/plugins/TreeMap.d.ts

@@ -0,0 +1,3 @@
+import { TreeMapParams } from '../types';
+
+export declare const TreeMap: import('@orbcharts/core').PluginConstructor<"tree", string, TreeMapParams>;

package/dist/src/tree/types.d.ts

@@ -0,0 +1,20 @@
+import { ColorType, ComputedDataTree } from '@orbcharts/core';
+
+export interface TreeMapParams {
+    paddingInner: number;
+    paddingOuter: number;
+    labelColorType: ColorType;
+    squarifyRatio: number;
+    sort: (a: ComputedDataTree, b: ComputedDataTree) => number;
+}
+export interface TreeLegendParams {
+    position: 'top' | 'bottom' | 'left' | 'right';
+    justify: 'start' | 'center' | 'end';
+    padding: number;
+    backgroundFill: ColorType;
+    backgroundStroke: ColorType;
+    gap: number;
+    listRectWidth: number;
+    listRectHeight: number;
+    listRectRadius: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.37",
+  "version": "3.0.0-alpha.39",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.36",
+    "@orbcharts/core": "^3.0.0-alpha.37",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/index.ts

@@ -6,4 +6,5 @@
 export * from './grid'
 export * from './multiGrid'
 export * from './noneData'
-export * from './series'
+export * from './series'
+export * from './tree'

package/src/tree/defaults.ts

@@ -0,0 +1,21 @@
+import type { TreeMapParams, TreeLegendParams } from './types'
+
+export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
+  paddingInner: 2,
+  paddingOuter: 2,
+  labelColorType: 'primary',
+  squarifyRatio: 1.618034, // 黃金比例
+  sort: (a, b) => b.value - a.value
+}
+
+export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+}

package/src/tree/index.ts

@@ -0,0 +1,4 @@
+export * from './defaults'
+export * from './types'
+export { TreeLegend } from './plugins/TreeLegend'
+export { TreeMap } from './plugins/TreeMap'

package/src/tree/plugins/TreeLegend.ts

@@ -0,0 +1,58 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineTreePlugin } from '@orbcharts/core'
+import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'TreeLegend'
+
+export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const seriesList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$: categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/tree/plugins/TreeMap.ts

@@ -0,0 +1,298 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  of,
+  takeUntil,
+  map,
+  switchMap,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged } from 'rxjs'
+import {
+  defineTreePlugin } from '@orbcharts/core'
+import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '@orbcharts/core'
+import type { TreeMapParams } from '../types'
+import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
+import { getClassName, getColor } from '../../utils/orbchartsUtils'
+
+const pluginName = 'TreeMap'
+const treeClassName = getClassName(pluginName, 'tree')
+
+function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
+  selection: d3.Selection<any, any, any, any>
+  treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
+  fullParams: TreeMapParams
+  fullChartParams: ChartParams
+}) {
+  const padding = fullChartParams.styles.textSize / 2
+
+  const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`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<ComputedDataTree>>('rect')
+        .data([d], d => d.data.id)
+        .join('rect')
+        .attr("id", d => d.data.id)
+        .attr("class", "tile")
+        .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.label)
+        .attr('data-category', d => d.data.categoryLabel)
+        .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.label)
+            .attr('dominant-baseline', 'hanging')
+            .attr("x", padding)
+            .attr("y", padding)
+            .attr('font-size', fullChartParams.styles.textSize)
+            .each(function(d) {
+              // -- tspan（自動斷行） --
+              const textElement = d3.select(this);
+              const words = d.data.label.split(/\s+/).reverse() // 以空隔分割字串
+              let word;
+              let line: string[] = []
+              const lineHeight = fullChartParams.styles.textSize // 行高
+              const x = textElement.attr("x")
+              let y = textElement.attr("y")
+              let dy = 0
+              let tspan = textElement
+                .text(null)
+                .append("tspan")
+                .attr('cursor', 'default')
+                .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
+                .attr('font-size', fullChartParams.styles.textSize)
+                .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', 'default')
+                    .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
+                    .attr('font-size', fullChartParams.styles.textSize)
+                    .attr("x", x)
+                    .attr("y", y)
+                    .attr("dy", dy + "px")                    
+                    .text(word)
+                }
+              }
+            })
+          })
+
+  })
+
+  return cell
+}
+
+function highlight ({ selection, ids, fullChartParams }: {
+  selection: d3.Selection<any, d3.HierarchyRectangularNode<ComputedDataTree>, any, any>
+  ids: string[]
+  fullChartParams: ChartParams
+}) {
+  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', fullChartParams.styles.unhighlightedOpacity)
+      }
+    })
+}
+
+export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const treeData$ = combineLatest({
+    layout: observer.layout$,
+    visibleComputedData: observer.visibleComputedData$,
+    fullParams: observer.fullParams$,
+    fullDataFormatter: observer.fullDataFormatter$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      const treemap = d3.treemap()
+        .size([data.layout.width, data.layout.height])
+        .paddingInner(data.fullParams.paddingInner)
+        .paddingOuter(data.fullParams.paddingOuter)
+        .round(true)
+        .tile(d3.treemapSquarify.ratio(data.fullParams.squarifyRatio))
+
+      const root = d3.hierarchy(data.visibleComputedData)
+        .sum(d => d.value)
+        .sort(data.fullParams.sort as (a: any, b: any) => number)
+        
+      //call treemap
+      treemap(root)
+
+      const treeData: d3.HierarchyRectangularNode<ComputedDataTree>[] = root.leaves() as any
+
+      return treeData
+    })
+  )
+
+  const cellSelection$ = combineLatest({
+    selection: of(selection),
+    treeData: treeData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      return renderTree({
+        selection,
+        treeData: data.treeData,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams
+      })
+    })
+  )
+
+  const highlightTarget$ = observer.fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => d.highlightTarget),
+    distinctUntilChanged()
+  )
+
+  combineLatest({
+    cellSelection: cellSelection$,
+    computedData: observer.computedData$,
+    treeData: treeData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$,
+    highlightTarget: highlightTarget$,
+    CategoryDataMap: observer.CategoryDataMap$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.cellSelection
+      .on('mouseover', (event, datum) => {
+        event.stopPropagation()
+
+        subject.event$.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
+        })
+      })
+      .on('mousemove', (event, datum) => {
+        event.stopPropagation()
+
+        subject.event$.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
+        })
+      })
+      .on('mouseout', (event, datum) => {
+        event.stopPropagation()
+
+        subject.event$.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
+        })
+      })
+      .on('click', (event, datum) => {
+        event.stopPropagation()
+
+        subject.event$.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
+        })
+      })
+  })
+
+  combineLatest({
+    cellSelection: cellSelection$,
+    highlight: observer.treeHighlight$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    highlight({
+      selection: data.cellSelection,
+      ids: data.highlight,
+      fullChartParams: data.fullChartParams
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
+})

package/src/tree/types.ts

@@ -0,0 +1,22 @@
+import type { ColorType, ComputedDataTree } from '@orbcharts/core'
+
+export interface TreeMapParams {
+  paddingInner: number
+  paddingOuter: number
+  labelColorType: ColorType
+  squarifyRatio: number
+  sort: (a: ComputedDataTree, b: ComputedDataTree) => number
+}
+
+export interface TreeLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+}
+