@orbcharts/plugins-basic 3.0.0-alpha.36 → 3.0.0-alpha.38

package/dist/src/index.d.ts

@@ -1,4 +1 @@
-export * from './grid';
-export * from './multiGrid';
-export * from './noneData';
-export * from './series';
+export * from '../orbcharts-plugins-basic/src/index'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.36",
+  "version": "3.0.0-alpha.38",
   "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.35",
+    "@orbcharts/core": "^3.0.0-alpha.37",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseValueAxis.ts

@@ -116,6 +116,10 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
 
   const valueLength = minAndMax[1] - minAndMax[0]
   
+  // const _valueScale = d3.scaleLinear()
+  //   .domain([0, 150])
+  //   .range([416.5, 791.349])
+
   // 設定Y軸刻度
   const yAxis = d3.axisLeft(valueScale)
     .scale(valueScale)
@@ -365,6 +369,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
+      console.log(data)
     
       const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
         maxValue: data.minAndMax[1],

package/src/grid/defaults.ts

@@ -43,6 +43,10 @@ export const DEFAULT_BARS_PARAMS: BarsParams = {
   barRadius: false,
 }
 
+export const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams = {
+  ...DEFAULT_BARS_PARAMS
+}
+
 export const DEFAULT_BAR_STACK_PARAMS: BarStackParams = {
   barWidth: 0,
   barGroupPadding: 10,

package/src/grid/index.ts

@@ -2,6 +2,7 @@ export * from './defaults'
 export * from './types'
 export { Lines } from './plugins/Lines'
 export { Bars } from './plugins/Bars'
+export { BarsDiverging } from './plugins/BarsDiverging'
 export { BarStack } from './plugins/BarStack'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'

package/src/grid/plugins/BarsDiverging.ts

@@ -0,0 +1,39 @@
+import {
+  of,
+  Subject,
+  Observable } from 'rxjs'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+
+const pluginName = 'BarsDiverging'
+
+export const BarsDiverging = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeBaseBars = createBaseBars(pluginName, {
+    selection,
+    computedData$: observer.computedData$,
+    visibleComputedData$: observer.visibleComputedData$,
+    existedSeriesLabels$: observer.existedSeriesLabels$,
+    SeriesDataMap$: observer.SeriesDataMap$,
+    GroupDataMap$: observer.GroupDataMap$,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridGraphicTransform$: observer.gridGraphicTransform$,
+    gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
+    gridAxesSize$: observer.gridAxesSize$,
+    gridHighlight$: observer.gridHighlight$,
+    gridContainer$: observer.gridContainer$,
+    // isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    isSeriesPositionSeprate$: of(true), // hack: 永遠為true，可以強制讓每組series的bars的x位置都是一樣的
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseBars()
+  }
+})

package/src/grid/types.ts

@@ -43,6 +43,8 @@ export interface BarsParams {
   barRadius: number | boolean
 }
 
+export interface BarsDivergingParams extends BarsParams {}
+
 export interface BarStackParams {
   barWidth: number
   barGroupPadding: number

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/src'
+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,23 @@
+import type { ColorType } from '@orbcharts/core'
+import type { ComputedDataTree } from '../../../orbcharts-core/src'
+
+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
+}
+