@orbcharts/plugins-basic 3.0.0-beta.3 → 3.0.0-beta.5

package/src/multiValue/plugins/XYZoom.ts

@@ -0,0 +1,300 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  combineLatest,
+  switchMap,
+  distinctUntilChanged,
+  first,
+  map, 
+  takeUntil,
+  debounceTime,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import type { DataFormatterMultiValue } from '../../../lib/core-types'
+import {
+  defineMultiValuePlugin, createValueToAxisScale } from '../../../lib/core'
+import { DEFAULT_X_Y_ZOOM_PARAMS } from '../defaults'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_ROOT } from '../../const'
+
+const pluginName = 'XYZoom'
+const rectClassName = getClassName(pluginName, 'rect')
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_Y_ZOOM_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_X_Y_ZOOM_PARAMS,
+  layerIndex: LAYER_INDEX_OF_ROOT,
+  validator: (params, { validateColumns }) => {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: ''
+    }
+  }
+}
+
+export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+
+  const destroy$ = new Subject()
+
+  // const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
+  //   .append('rect')
+  //   .classed(rectClassName, true)
+  //   .attr('opacity', 0)
+
+  // 紀錄zoom最後一次的transform
+  let lastTransform = {
+    k: 1,
+    x: 0,
+    y: 0
+  }
+  // let lastDomain: [number, number] = [0, 0]
+
+  // observer.layout$.pipe(
+  //   takeUntil(destroy$),
+  // ).subscribe(d => {
+  //   rootRectSelection
+  //     .attr('width', d.width)
+  //     .attr('height', d.height)
+  //     .attr('x', d.left)
+  //     .attr('y', d.top)
+  // })
+
+  // const groupMax$ = observer.computedData$.pipe(
+  //   map(d => d[0] ? d[0].length - 1 : 0),
+  //   distinctUntilChanged()
+  // )
+
+  // const fullDataFormatterEvent$: Subject<DataFormatterMultiValue> = new Subject()
+  // fullDataFormatterEvent$
+  //   .pipe(
+  //     takeUntil(destroy$),
+  //     debounceTime(50)
+  //   )
+  //   .subscribe(fullDataFormatter => {
+  //     store.fullDataFormatter$.next(fullDataFormatter)
+  //   })
+
+  const initXAxis$ = observer.fullDataFormatter$.pipe(
+    map(d => d.xAxis),
+    // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+    first()
+  )
+
+  const initYAxis$ = observer.fullDataFormatter$.pipe(
+    map(d => d.yAxis),
+    // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+    first()
+  )
+
+
+  // const groupScale$ = combineLatest({
+  //   initXAxis: initXAxis$,
+  //   fullDataFormatter: observer.fullDataFormatter$,
+  //   groupMax: groupMax$,
+  //   layout: observer.layout$,
+  //   // axisSize: observer.gridAxesSize$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(data => {
+  //     // const groupMin = 0
+  //     const groupScaleDomainMin = data.initXAxis.scaleDomain[0] - data.initXAxis.scalePadding
+  //     const groupScaleDomainMax = data.initXAxis.scaleDomain[1] === 'max'
+  //       ? data.groupMax + data.initXAxis.scalePadding
+  //       : data.initXAxis.scaleDomain[1] as number + data.initXAxis.scalePadding
+
+  //     const groupScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+  //       maxValue: data.groupMax,
+  //       minValue: 0,
+  //       axisWidth: data.layout.width,
+  //       scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
+  //       scaleRange: [0, 1]
+  //     })
+
+  //     return groupScale
+  //   })
+  // )
+  const initXScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
+    combineLatest({
+      initXAxis: initXAxis$,
+      layout: observer.layout$,
+      minMaxXY: observer.minMaxXY$
+    }).pipe(
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
+    ).subscribe(data => {
+    
+      const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+        maxValue: data.minMaxXY.maxX,
+        minValue: data.minMaxXY.minX,
+        axisWidth: data.layout.width,
+        scaleDomain: data.initXAxis.scaleDomain,
+        scaleRange: data.initXAxis.scaleRange,
+      })
+
+      subscriber.next(xScale)
+    })
+  })
+
+  const initYScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
+    combineLatest({
+      initYAxis: initYAxis$,
+      layout: observer.layout$,
+      minMaxXY: observer.minMaxXY$
+    }).pipe(
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
+    ).subscribe(data => {
+    
+      const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+        maxValue: data.minMaxXY.maxY,
+        minValue: data.minMaxXY.minY,
+        axisWidth: data.layout.height,
+        scaleDomain: data.initYAxis.scaleDomain,
+        scaleRange: data.initYAxis.scaleRange,
+        reverse: true
+      })
+
+      subscriber.next(yScale)
+    })
+  })
+
+  const minMaxScaleDomain$ = combineLatest({
+    initXAxis: initXAxis$,
+    initYAxis: initYAxis$,
+    minMaxXY: observer.minMaxXY$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      let minX = data.minMaxXY.minX
+      let maxX = data.minMaxXY.maxX
+      let minY = data.minMaxXY.minY
+      let maxY = data.minMaxXY.maxY
+
+      // 原始設定為auto時要額外判斷
+      if (data.initXAxis.scaleDomain[0] === 'auto' && minX > 0) {
+        minX = 0
+      }
+      if (data.initXAxis.scaleDomain[1] === 'auto' && maxX < 0) {
+        maxX = 0
+      }
+      if (data.initYAxis.scaleDomain[0] === 'auto' && minY > 0) {
+        minY = 0
+      }
+      if (data.initYAxis.scaleDomain[1] === 'auto' && maxY < 0) {
+        maxY = 0
+      }
+
+      return {
+        minX,
+        maxX,
+        minY,
+        maxY
+      }
+    }),
+  )
+
+  combineLatest({
+    initXScale: initXScale$,
+    // initXAxis: initXAxis$,
+    // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+    fullDataFormatter: observer.fullDataFormatter$,
+    // groupMax: groupMax$,
+    // minMaxXY: observer.minMaxXY$,
+    minMaxScaleDomain: minMaxScaleDomain$,
+    // layout: observer.layout$,
+    // axisSize: observer.gridAxesSize$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+    // const groupMin = 0
+
+    const shadowScale = data.initXScale.copy()
+
+    const zoom = d3.zoom()
+      // .scaleExtent([1, data.groupMaxIndex])
+      // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
+      .on("zoom", function zoomed(event) {
+        // debugger
+        // console.log('event', event)
+        const t = event.transform;
+
+        // if (event.sourceEvent.type === 'mousemove') {
+        //   // 當進行平移時，反向計算 x 軸
+        //   const dx = event.transform.x - currentTransform.x; // 本次平移增量
+        //   const reversedX = currentTransform.x - dx;         // 反向累積平移
+        //   // 更新變換狀態
+        //   currentTransform = d3.zoomIdentity
+        //     .translate(reversedX, event.transform.y)
+        //     .scale(event.transform.k);
+        // } else {
+        //   // 縮放操作：只更新縮放比例
+        //   currentTransform = d3.zoomIdentity
+        //     .translate(currentTransform.x, currentTransform.y)
+        //     .scale(event.transform.k);
+        // }
+        // console.log('currentTransform', currentTransform)
+
+        // console.log('t.x', t.x)
+        const mapGroupindex = (d: number) => {
+          const n = Math.round(d)
+          return Math.min(data.minMaxScaleDomain.maxX, Math.max(data.minMaxScaleDomain.minX, n));
+        }
+        
+        const zoomedDomain = t.rescaleX(shadowScale)
+          .domain()
+          .map(mapGroupindex)
+
+
+        // domain超過極限值
+        if (zoomedDomain[0] <= data.minMaxScaleDomain.minX && zoomedDomain[1] >= data.minMaxScaleDomain.maxX) {
+          // 繼續縮小
+          if (t.k < lastTransform.k) {
+            // 維持前一次的transform
+            t.k = lastTransform.k
+            t.x = lastTransform.x
+            t.y = lastTransform.y
+          }
+        // domain間距小於1
+        } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
+          // 繼續放大
+          if (t.k > lastTransform.k) {
+            // 維持前一次的transform
+            t.k = lastTransform.k
+            t.x = lastTransform.x
+            t.y = lastTransform.y
+          }
+        }
+
+        // 紀錄transform
+        lastTransform.k = t.k
+        lastTransform.x = t.x
+        lastTransform.y = t.y
+
+        // console.log(zoomedDomain)
+        const newDataFormatter: DataFormatterMultiValue = {
+          ...data.fullDataFormatter,
+          xAxis: {
+            ...data.fullDataFormatter.xAxis,
+            scaleDomain: zoomedDomain
+          }
+        }
+        subject.dataFormatter$.next(newDataFormatter)
+      })
+
+    // 傳入外層selection
+    // subject.selection.call(zoom as any)
+    rootSelection.call(zoom)
+
+  })
+  
+  return () => {
+    destroy$.next(undefined)
+    // rootRectSelection.remove()
+    
+    rootSelection.call(d3.zoom().on('zoom', null))
+  }
+})

package/src/series/plugins/Bubbles.ts

@@ -17,7 +17,7 @@ import type {
   EventName,
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition } from '../../../lib/core-types'
+  ContainerPosition } from '../../../lib/core-types'
 import {
   defineSeriesPlugin } from '../../../lib/core'
 import type { BubblesParams, ArcScaleType } from '../../../lib/plugins-basic-types'
@@ -147,12 +147,12 @@ function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, grap
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
-  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
+  SeriesContainerPositionMap: Map<string, ContainerPosition>
   scaleType: ArcScaleType
   // highlightIds: string[]
 }): BubblesDatum[] {
   // 虛擬大圓（所有小圓聚合起來的大圓）的半徑
-  const totalR = Math.min(...[graphicWidth, graphicHeight]) / 2
+  const totalR = Math.min(...[, graphicHeight]) / 2
 
   const data = visibleComputedLayoutData.flat()
 
@@ -330,7 +330,7 @@ function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
   fullParams: BubblesParams
   // graphicWidth: number
   // graphicHeight: number
-  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
+  SeriesContainerPositionMap: Map<string, ContainerPosition>
 }) {
   // console.log('groupBubbles')
   force!

package/src/series/plugins/Pie.ts

@@ -12,7 +12,7 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   ChartParams,
   EventSeries,
   Layout } from '../../../lib/core-types'
@@ -210,7 +210,7 @@ function createEachPie (pluginName: string, context: {
   fullParams$: Observable<PieParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/PieEventTexts.ts

@@ -15,7 +15,7 @@ import {
 import type {
   ComputedDatumSeries,
   ChartParams,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventName,
   EventSeries } from '../../../lib/core-types'
 import type { PieEventTextsParams } from '../../../lib/plugins-basic-types'
@@ -110,7 +110,7 @@ function createEachPieEventTexts (pluginName: string, context: {
   fullParams$: Observable<PieEventTextsParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/PieLabels.ts

@@ -14,7 +14,7 @@ import {
   defineSeriesPlugin } from '../../../lib/core'
 import type {
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventSeries,
   ChartParams } from '../../../lib/core-types'
 import type { PieLabelsParams } from '../../../lib/plugins-basic-types'
@@ -453,7 +453,7 @@ function createEachPieLabel (pluginName: string, context: {
   fullChartParams$: Observable<ChartParams>
   textSizePx$: Observable<number>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/Rose.ts

@@ -14,7 +14,7 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   ChartParams,
   EventSeries,
   Layout } from '../../../lib/core-types'
@@ -219,7 +219,7 @@ function createEachRose (pluginName: string, context: {
   fullParams$: Observable<RoseParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/RoseLabels.ts

@@ -14,7 +14,7 @@ import {
   defineSeriesPlugin } from '../../../lib/core'
 import type {
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventSeries,
   ChartParams } from '../../../lib/core-types'
 import type { RoseLabelsParams } from '../../../lib/plugins-basic-types'
@@ -413,7 +413,7 @@ function createEachPieLabel (pluginName: string, context: {
   fullChartParams$: Observable<ChartParams>
   textSizePx$: Observable<number>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/SeriesLegend.ts

@@ -65,7 +65,7 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
   
   const destroy$ = new Subject()
 
-  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+  const legendLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
     takeUntil(destroy$),
     map(data => {
       return Array.from(data.keys())
@@ -76,7 +76,7 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
   const fullParams$ = observer.fullParams$.pipe(
     takeUntil(destroy$),
     map(d => {
-      const seriesList = [
+      const labelList = [
         {
           listRectWidth: d.listRectWidth,
           listRectHeight: d.listRectHeight,
@@ -85,14 +85,14 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
       ]
       return {
         ...d,
-        seriesList
+        labelList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$,
+    legendLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/series/seriesObservables.ts

@@ -14,7 +14,7 @@ import {
   distinctUntilChanged
 } from 'rxjs'
 import type {
-  SeriesContainerPosition } from '../../lib/core-types'
+  ContainerPosition } from '../../lib/core-types'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 
 function createSeriesSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
@@ -55,7 +55,7 @@ export const seriesStartSelectionObservable = ({ selection, pluginName, separate
   pluginName: string
   separateSeries$: Observable<boolean>
   seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
 }) => {
   
   const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })
@@ -102,7 +102,7 @@ export const seriesCenterSelectionObservable = ({ selection, pluginName, separat
   pluginName: string
   separateSeries$: Observable<boolean>
   seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
 }) => {
   
   const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })

package/src/tree/plugins/TreeLegend.ts

@@ -65,18 +65,11 @@ export const TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelec
   
   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 = [
+      const labelList = [
         {
           listRectWidth: d.listRectWidth,
           listRectHeight: d.listRectHeight,
@@ -85,14 +78,14 @@ export const TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelec
       ]
       return {
         ...d,
-        seriesList
+        labelList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$: categoryLabels$,
+    legendLabels$: observer.categoryLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/utils/d3Utils.ts

@@ -58,7 +58,8 @@ export function makeD3Arc ({ axisWidth, innerRadius, outerRadius, padAngle, corn
 
 export const parseTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) => string)) => {
   if (tickFormat! instanceof Function == true) {
-    return (tickFormat as ((text: d3.NumberValue) => string))(value)
+    const v = (tickFormat as ((text: d3.NumberValue) => string))(value)
+    return String(v ?? '')
   }
   return d3.format(tickFormat as string)!(value)
 }

package/src/utils/observables.ts

@@ -3,10 +3,10 @@ import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs'
 
 export function d3EventObservable(selection: d3.Selection<any, any, any, any>, event: any) {
   // Start with an observable that will never emit
-  let obs = new Observable(() => {});
+  let obs: Observable<MouseEvent> = new Observable(() => {});
   selection.each(function () {
       // Create observables from each of the elements
-      const events = fromEvent(this as any, event);
+      const events: Observable<MouseEvent> = fromEvent(this, event);
       // Merge the observables into one
       obs = merge(obs, events);
   });

package/src/utils/orbchartsUtils.ts

@@ -3,12 +3,13 @@ import type {
   ColorType,
   ChartParams,
   ComputedDatumBase,
-  ComputedDatumSeriesValue,
-  ComputedDatumCategoryValue } from '../../lib/core-types'
+  ComputedDatumBaseValue,
+  ComputedDatumBaseSeries,
+  ComputedDatumBaseCategory } from '../../lib/core-types'
 import { getMinAndMax } from './commonUtils'
 
 // 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number] {
+export function getMinAndMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValue)[]): [number, number] {
   const arr = data
     .filter(d => d.value != null && d.visible != false)
     .map(d => d.value as number)
@@ -37,7 +38,7 @@ export function getSeriesValueColor () {
 
 }
 
-export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
+export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBaseCategory, colorType: ColorType, fullChartParams: ChartParams }) {
 
 }
 
@@ -53,8 +54,8 @@ export function getCategoryValueColor ({ datum, colorType, fullChartParams }: {
 export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
   // 對應series資料中的顏色
   if (colorType === 'series') {
-    if ((datum as unknown as ComputedDatumSeriesValue).color) {
-      return (datum as unknown as ComputedDatumSeriesValue).color
+    if ((datum as unknown as ComputedDatumBaseSeries).color) {
+      return (datum as unknown as ComputedDatumBaseSeries).color
     } else {
       // 非series類型的資料則回傳陣列中第1個顏色
       return fullChartParams.colors[fullChartParams.colorScheme].series[0]