@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

package/src/grid/gridObservables.ts

@@ -1,15 +1,148 @@
-import { Observable, Subject, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
+import * as d3 from 'd3'
+import { Observable, Subject, of, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
 import type {
   ChartParams,
   HighlightTarget,
   DataFormatterGrid,
   ComputedDataGrid,
   ComputedDatumGrid,
+  TransformData,
+  ContainerPosition,
   Layout } from '@orbcharts/core'
 import { createAxisQuantizeScale } from '@orbcharts/core'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existedSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  clipPathID: string
+  // computedData$: Observable<ComputedDataGrid>
+  existedSeriesLabels$: Observable<string[]>
+  gridContainer$: Observable<ContainerPosition[]>
+  gridAxesTransform$: Observable<TransformData>
+  gridGraphicTransform$: Observable<TransformData>
+}) => {
+  const seriesClassName = getClassName(pluginName, 'series')
+  const axesClassName = getClassName(pluginName, 'axes')
+  const graphicClassName = getClassName(pluginName, 'graphic')
+
+  const seriesSelection$ = existedSeriesLabels$.pipe(
+    map((existedSeriesLabels, i) => {
+      return selection
+        .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+        .data(existedSeriesLabels, d => d)
+        .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()
+        )
+    }),
+    switchMap(selection => combineLatest({
+      seriesSelection: of(selection),
+      gridContainer: gridContainer$                                                                                                                                                                                       
+    })),
+    map(data => {
+      data.seriesSelection
+        .transition()
+        .attr('transform', (d, i) => {
+          const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
+          const translate = gridContainer.translate
+          const scale = gridContainer.scale
+          return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+        })
+      return data.seriesSelection
+    })
+  )
+
+  // combineLatest({
+  //   seriesSelection: seriesSelection$,
+  //   gridContainer: gridContainer$                                                                                                                                                                                       
+  // }).pipe(
+  //   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(
+    switchMap(async d => d),
+    map(data => {
+      return data.seriesSelection
+        .select<SVGGElement>(`g.${axesClassName}`)
+        .style('transform', data.gridAxesTransform.value)
+    })
+  )
+  const defsSelection$ = axesSelection$.pipe(
+    map(axesSelection => {
+      return axesSelection.select<SVGDefsElement>('defs')
+    })
+  )
+  const graphicGSelection$ = combineLatest({
+    axesSelection: axesSelection$,
+    gridGraphicTransform: gridGraphicTransform$
+  }).pipe(
+    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
+    })
+  )
+
+  return {
+    seriesSelection$,
+    axesSelection$,
+    defsSelection$,
+    graphicGSelection$
+  }
+}
 
 // 由事件取得group data的function
-export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
+export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
     width: number;
@@ -18,7 +151,7 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
   computedData$: Observable<ComputedDataGrid>
   // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullChartParams$: Observable<ChartParams>
-}): Observable<(event: any) => { groupIndex: number; groupLabel: string }> {
+}): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
   const destroy$ = new Subject()
 
   // 顯示範圍內的group labels
@@ -33,18 +166,18 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
     ).subscribe(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      const groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0] === 'auto'
-        ? groupMin - data.dataFormatter.groupAxis.scalePadding
-        : data.dataFormatter.groupAxis.scaleDomain[0] as number - data.dataFormatter.groupAxis.scalePadding
-      const groupScaleDomainMax = data.dataFormatter.groupAxis.scaleDomain[1] === 'auto'
-        ? groupMax + data.dataFormatter.groupAxis.scalePadding
-        : data.dataFormatter.groupAxis.scaleDomain[1] as number + data.dataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
+        ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
+        : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
+      const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+        ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
+        : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
       
       // const groupingAmount = data.computedData[0]
       //   ? data.computedData[0].length
       //   : 0
 
-      let _labels = data.dataFormatter.grid.seriesType === 'row'
+      let _labels = data.dataFormatter.grid.gridData.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
 
@@ -75,8 +208,8 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
       switchMap(async (d) => d),
     ).subscribe(data => {
       
-      const reverse = data.dataFormatter.valueAxis.position === 'right'
-        || data.dataFormatter.valueAxis.position === 'bottom'
+      const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
+        || data.dataFormatter.grid.valueAxis.position === 'bottom'
           ? true : false
 
       // 比例尺座標對應非連續資料索引
@@ -88,8 +221,8 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
 
       // 依比例尺位置計算座標
       const axisValuePredicate = (event: any) => {
-        return data.dataFormatter.groupAxis.position === 'bottom'
-          || data.dataFormatter.groupAxis.position === 'top'
+        return data.dataFormatter.grid.groupAxis.position === 'bottom'
+          || data.dataFormatter.grid.groupAxis.position === 'top'
             ? event.offsetX - data.fullChartParams.padding.left
             : event.offsetY - data.fullChartParams.padding.top
       }

package/src/grid/index.ts

@@ -10,4 +10,4 @@ export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
 export { ValueStackAxis } from './plugins/ValueStackAxis'
 export { ScalingArea } from './plugins/ScalingArea'
-export { GroupArea } from './plugins/GroupArea'
+export { GroupAux } from './plugins/GroupAux'

package/src/grid/plugins/BarStack.ts

@@ -15,6 +15,7 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
+    existedSeriesLabels$: observer.existedSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -22,8 +23,11 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
     fullChartParams$: observer.fullChartParams$,
     gridAxesTransform$: observer.gridAxesTransform$,
     gridGraphicTransform$: observer.gridGraphicTransform$,
+    gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
+    gridContainer$: observer.gridContainer$,
+    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/Bars.ts

@@ -15,14 +15,18 @@ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selecti
     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$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/BarsTriangle.ts

@@ -13,6 +13,8 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
   const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {
     selection,
     computedData$: observer.computedData$,
+    visibleComputedData$: observer.visibleComputedData$,
+    existedSeriesLabels$: observer.existedSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,
@@ -21,6 +23,8 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
     gridGraphicTransform$: observer.gridGraphicTransform$,
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
+    gridContainer$: observer.gridContainer$,
+    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
     event$: subject.event$,
   })