@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.45

package/src/base/BaseDots.ts

@@ -11,9 +11,10 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ComputedLayoutDataGrid,
   EventGrid,
   ChartParams, 
-  ContainerPosition,
+  GridContainerPosition,
   Layout,
   TransformData,
   ColorType } from '@orbcharts/core'
@@ -31,8 +32,10 @@ export interface BaseDotsParams {
 interface BaseDotsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  existSeriesLabels$: Observable<string[]>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseDotsParams>
@@ -45,7 +48,7 @@ interface BaseDotsContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   event$: Subject<EventGrid>
 }
 
@@ -62,11 +65,11 @@ type ClipPathDatum = {
 // const circleGClassName = getClassName(pluginName, 'circleG')
 // const circleClassName = getClassName(pluginName, 'circle')
 
-function renderDots ({ graphicGSelection, circleGClassName, circleClassName, data, fullParams, fullChartParams, graphicReverseScale }: {
+function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedLayoutData, fullParams, fullChartParams, graphicReverseScale }: {
   graphicGSelection: d3.Selection<SVGGElement, any, any, any>
   circleGClassName: string
   circleClassName: string
-  data: ComputedDatumGrid[][]
+  visibleComputedLayoutData: ComputedLayoutDataGrid
   fullParams: BaseDotsParams
   fullChartParams: ChartParams
   graphicReverseScale: [number, number][]
@@ -83,7 +86,7 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, dat
     .each((seriesData, seriesIndex, g) => {
       d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>('g')
-        .data(data[seriesIndex], d => d.id)
+        .data(visibleComputedLayoutData[seriesIndex], d => d.id)
         .join(
           enter => {
             // enterDuration
@@ -256,8 +259,10 @@ function renderClipPath ({ defsSelection, clipPathData }: {
 export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string, {
   selection,
   computedData$,
+  computedLayoutData$,
   visibleComputedData$,
-  existSeriesLabels$,
+  visibleComputedLayoutData$,
+  seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -267,7 +272,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   gridGraphicReverseScale$,
   gridAxesSize$,
   gridHighlight$,
-  gridContainer$,
+  gridContainerPosition$,
   event$
 }) => {
 
@@ -282,130 +287,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   //   .attr('clip-path', `url(#${clipPathID})`)
   // const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
   // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
-  const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
-
-  // gridAxesTransform$
-  //   .pipe(
-  //     takeUntil(destroy$),
-  //     map(d => d.value),
-  //     distinctUntilChanged()
-  //   ).subscribe(d => {
-  //     axisSelection
-  //       .style('transform', d)
-  //   })
-
-  // gridGraphicTransform$
-  //   .pipe(
-  //     takeUntil(destroy$),
-  //     switchMap(async d => d.value),
-  //     distinctUntilChanged()
-  //   ).subscribe(d => {
-  //     dataAreaSelection
-  //       .transition()
-  //       .duration(50)
-  //       .style('transform', d)
-  //   })
-
-  // const seriesSelection$ = computedData$.pipe(
-  //   takeUntil(destroy$),
-  //   distinctUntilChanged((a, b) => {
-  //     // 只有當series的數量改變時，才重新計算
-  //     return a.length === b.length
-  //   }),
-  //   map((computedData, i) => {
-  //     return selection
-  //       .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
-  //       .data(computedData, d => d[0] ? d[0].seriesIndex : i)
-  //       .join(
-  //         enter => {
-  //           return enter
-  //             .append('g')
-  //             .classed(seriesClassName, true)
-  //             .each((d, i, g) => {
-  //               const axesSelection = d3.select(g[i])
-  //                 .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
-  //                 .data([i])
-  //                 .join(
-  //                   enter => {
-  //                     return enter
-  //                       .append('g')
-  //                       .classed(axesClassName, true)
-  //                       .attr('clip-path', `url(#${clipPathID})`)
-  //                       .each((d, i, g) => {
-  //                         const defsSelection = d3.select(g[i])
-  //                           .selectAll<SVGDefsElement, any>('defs')
-  //                           .data([i])
-  //                           .join('defs')
-            
-  //                         const graphicGSelection = d3.select(g[i])
-  //                           .selectAll<SVGGElement, any>('g')
-  //                           .data([i])
-  //                           .join('g')
-  //                           .classed(graphicClassName, true)
-  //                       })
-  //                   },
-  //                   update => update,
-  //                   exit => exit.remove()
-  //                 )
-  //             })
-  //         },
-  //         update => update,
-  //         exit => exit.remove()
-  //       )
-  //   })
-  // )
-
-  // combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridContainer: gridContainer$                                                                                                                                                                                       
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   data.seriesSelection
-  //     .transition()
-  //     .attr('transform', (d, i) => {
-  //       const translate = data.gridContainer[i].translate
-  //       const scale = data.gridContainer[i].scale
-  //       return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-  //     })
-  // })
-
-
-  // const axesSelection$ = combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridAxesTransform: gridAxesTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     return data.seriesSelection
-  //       .select<SVGGElement>(`g.${axesClassName}`)
-  //       .style('transform', data.gridAxesTransform.value)
-  //   })
-  // )
-  // const defsSelection$ = axesSelection$.pipe(
-  //   takeUntil(destroy$),
-  //   map(axesSelection => {
-  //     return axesSelection.select<SVGDefsElement>('defs')
-  //   })
-  // )
-  // const graphicGSelection$ = combineLatest({
-  //   axesSelection: axesSelection$,
-  //   gridGraphicTransform: gridGraphicTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     const graphicGSelection = data.axesSelection
-  //       .select<SVGGElement>(`g.${graphicClassName}`)
-  //     graphicGSelection
-  //       .transition()
-  //       .duration(50)
-  //       .style('transform', data.gridGraphicTransform.value)
-  //     return graphicGSelection
-  //   })
-  // )
+  // const graphicSelection$: Subject<d3.Selection<SVGGElement, ComputedDatumGrid, any, any>> = new Subject()
 
   const { 
     seriesSelection$,
@@ -416,15 +298,15 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     selection,
     pluginName,
     clipPathID,
-    existSeriesLabels$,
-    gridContainer$,
+    seriesLabels$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
 
   const graphicReverseScale$: Observable<[number, number][]> = combineLatest({
     // gridGraphicTransform: gridGraphicTransform$,
-    // gridContainer: gridContainer$,
+    // gridContainerPosition: gridContainerPosition$,
     // gridAxesTransform: gridAxesTransform$
     computedData: computedData$,
     gridGraphicReverseScale: gridGraphicReverseScale$
@@ -457,63 +339,46 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     })
   })
 
-  // const visibleComputedData$ = computedData$.pipe(
-  //   map(computedData => {
-  //     return computedData
-  //       .map(d => {
-  //         return d.filter(_d => _d.visible == true)      
-  //       })
-  //   })
-  // )
-
-  // const SeriesDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridSeriesDataMap(d))
-  // )
-
-  // const GroupDataMap$ = visibleComputedData$.pipe(
-  //   map(d => makeGridGroupDataMap(d))
-  // )
-
-  // const DataMap$ = computedData$.pipe(
-  //   map(d => {
-  //     const DataMap: Map<string, ComputedDatumGrid> = new Map()
-  //     d.flat().forEach(_d => DataMap.set(_d.id, _d))
-  //     return DataMap
-  //   })
-  // )
-
   const highlightTarget$ = fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => d.highlightTarget),
     distinctUntilChanged()
   )
   
-  combineLatest({
+  const graphicSelection$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    computedData: computedData$,
-    visibleComputedData: visibleComputedData$,
-    SeriesDataMap: SeriesDataMap$,
-    GroupDataMap: GroupDataMap$,
+    visibleComputedLayoutData: visibleComputedLayoutData$,
     graphicReverseScale: graphicReverseScale$,
     fullChartParams: fullChartParams$,
     fullParams: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return renderDots({
+        graphicGSelection: data.graphicGSelection,
+        circleGClassName,
+        circleClassName,
+        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams,
+        graphicReverseScale: data.graphicReverseScale
+      })
+    })
+  )
+
+  combineLatest({
+    graphicSelection: graphicSelection$,
+    computedData: computedData$,
+    SeriesDataMap: SeriesDataMap$,
+    GroupDataMap: GroupDataMap$,
     highlightTarget: highlightTarget$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    const graphicSelection = renderDots({
-      graphicGSelection: data.graphicGSelection,
-      circleGClassName,
-      circleClassName,
-      data: data.visibleComputedData,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams,
-      graphicReverseScale: data.graphicReverseScale
-    })
-
-    graphicSelection
+    data.graphicSelection
       .on('mouseover', (event, datum) => {
         event.stopPropagation()
   
@@ -595,8 +460,6 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         })
       })
 
-    graphicSelection$.next(graphicSelection)
-
   })
 
   // const datumList$ = computedData$.pipe(

package/src/base/BaseGroupAxis.ts

@@ -10,7 +10,7 @@ import {
   Observable,
   Subject } from 'rxjs'
 import { createAxisPointScale } from '@orbcharts/core'
-import type { ColorType, ComputedDataGrid, ContainerPosition } from '@orbcharts/core'
+import type { ColorType, ComputedDataGrid, GridContainerPosition } from '@orbcharts/core'
 import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
@@ -51,8 +51,8 @@ interface BaseGroupAxisContext {
     width: number;
     height: number;
   }>
-  gridContainer$: Observable<ContainerPosition[]>
-  isSeriesPositionSeprate$: Observable<boolean>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
+  isSeriesSeprate$: Observable<boolean>
 }
 
 interface TextAlign {
@@ -108,7 +108,7 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
         )
         .attr('text-anchor', axisLabelAlign.textAnchor)
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
-        .style('font-size', `${chartParams.styles.textSize}px`)
+        .attr('font-size', chartParams.styles.textSize)
         .style('fill', getColor(params.labelColorType, chartParams))
         .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.groupAxis.label)
@@ -161,8 +161,8 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
   //     .style('transform', textTransform)
   // })
   const xText = xAxisSelection.selectAll('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', `${chartParams.styles.textSize}px`)
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', chartParams.styles.textSize)
     // .style('font-weight', 'bold')
     .style('color', getColor(params.tickTextColorType, chartParams))
     .attr('text-anchor', tickTextAlign.textAnchor)
@@ -184,8 +184,8 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   gridAxesTransform$,
   gridAxesReverseTransform$,
   gridAxesSize$,
-  gridContainer$,
-  isSeriesPositionSeprate$,
+  gridContainerPosition$,
+  isSeriesSeprate$,
 }) => {
   
   const destroy$ = new Subject()
@@ -202,12 +202,12 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
         return a.length === b.length
       }),
     ),
-    isSeriesPositionSeprate: isSeriesPositionSeprate$
+    isSeriesSeprate: isSeriesSeprate$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      return data.isSeriesPositionSeprate
+      return data.isSeriesSeprate
         // series分開的時候顯示各別axis
         ? data.computedData
         // series合併的時候只顯示第一個axis
@@ -235,16 +235,16 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
 
   combineLatest({
     containerSelection: containerSelection$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
   ).subscribe(data => {
     data.containerSelection
       .attr('transform', (d, i) => {
-        const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
-        const translate = gridContainer.translate
-        const scale = gridContainer.scale
+        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+        const translate = gridContainerPosition.translate
+        const scale = gridContainerPosition.scale
         return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
       })
       // .attr('opacity', 0)
@@ -326,14 +326,14 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     fullParams: fullParams$,
     fullDataFormatter: fullDataFormatter$,
     gridAxesReverseTransform: gridAxesReverseTransform$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
       const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
       const axisReverseRotateValue = `rotate(${data.gridAxesReverseTransform.rotate}deg) rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
-      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainer[0].scale[0]}, ${1 / data.gridContainer[0].scale[1]})`
+      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
       const tickTextRotateDeg = (data.fullDataFormatter.grid.groupAxis.position === 'left' && data.fullDataFormatter.grid.valueAxis.position === 'top')
         || (data.fullDataFormatter.grid.groupAxis.position === 'right' && data.fullDataFormatter.grid.valueAxis.position === 'bottom')
           ? data.fullParams.tickTextRotate + 180 // 修正文字倒轉

package/src/base/BaseLegend.ts

@@ -36,6 +36,7 @@ interface BaseLegendContext {
   fullParams$: Observable<BaseLegendParams>
   layout$: Observable<Layout>
   fullChartParams$: Observable<ChartParams>
+  textSizePx$: Observable<number>
 }
 
 // 第1層 - 定位的容器
@@ -107,7 +108,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
   seriesLabels$,
   fullParams$,
   layout$,
-  fullChartParams$
+  fullChartParams$,
+  textSizePx$
 }) => {
 
   const rootPositionClassName = getClassName(pluginName, 'root-position')
@@ -280,7 +282,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     lineDirection: lineDirection$,
     lineMaxSize: lineMaxSize$,
     defaultListStyle: defaultListStyle$,
-    SeriesLabelColorMap: SeriesLabelColorMap$
+    SeriesLabelColorMap: SeriesLabelColorMap$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -291,8 +294,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           return prev
         }
         
-        const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
-        const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
+        const textWidth = measureTextWidth(current, data.textSizePx)
+        const itemWidth = (data.textSizePx * 1.5) + textWidth
         // const color = getSeriesColor(currentIndex, data.fullChartParams)
         const color = data.SeriesLabelColorMap.get(current)
         const lastItem: LegendItem | null = prev[0] && prev[0][0]
@@ -307,10 +310,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
           if (_data.lineDirection === 'column') {
             let tempTranslateY = _lastItem
-              ? _lastItem.translateY + _data.fullChartParams.styles.textSize + _data.fullParams.gap
+              ? _lastItem.translateY + _data.textSizePx + _data.fullParams.gap
               : 0
             
-            if ((tempTranslateY + _data.fullChartParams.styles.textSize) > _data.lineMaxSize) {
+            if ((tempTranslateY + _data.textSizePx) > _data.lineMaxSize) {
               // 換行
               lineIndex = _lastItem.lineIndex + 1
               itemIndex = 0
@@ -340,7 +343,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
               itemIndex = _lastItem ? _lastItem.itemIndex + 1 : 0
               translateX = tempTranslateX
             }
-            translateY = (_data.fullChartParams.styles.textSize + _data.fullParams.gap) * lineIndex
+            translateY = (_data.textSizePx + _data.fullParams.gap) * lineIndex
           }
           
           return { translateX, translateY, lineIndex, itemIndex }
@@ -379,7 +382,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
     lineDirection: lineDirection$,
-    lengendItems: lengendItems$
+    lengendItems: lengendItems$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -404,10 +408,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
             return p + maxWidthInLine
           }, 0)
           width += _data.fullParams.gap * (_lengendItems.length - 1)
-          height = firstLineLastItem.translateY + _data.fullChartParams.styles.textSize
+          height = firstLineLastItem.translateY + _data.textSizePx
         } else {
           width = firstLineLastItem.translateX + firstLineLastItem.itemWidth
-          height = (_data.fullChartParams.styles.textSize * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
+          height = (_data.textSizePx * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
         }
 
         return { width, height }
@@ -565,7 +569,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     lengendListSelection: lengendListSelection$,
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
-    lengendItems: lengendItems$
+    lengendItems: lengendItems$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -589,7 +594,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           return `translate(${d.translateX}, ${d.translateY})`
         })
         .each((d, i, g) => {
-          const rectCenterX = data.fullChartParams.styles.textSize / 2
+          const rectCenterX = data.textSizePx / 2
           const transformRectWidth = - d.listRectWidth / 2
           const transformRectHeight = - d.listRectHeight / 2
           // 方塊
@@ -619,7 +624,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
               },
               exit => exit.remove()
             )
-            .attr('x', data.fullChartParams.styles.textSize * 1.5)
+            .attr('x', data.textSizePx * 1.5)
             .attr('font-size', data.fullChartParams.styles.textSize)
             .attr('fill', d => data.fullParams.textColorType === 'series'
               ? getSeriesColor(d.seriesIndex, data.fullChartParams)