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

package/src/grid/gridObservables.ts

@@ -1,15 +1,164 @@
-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,
+  shareReplay,
+  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
+    }),
+    shareReplay(1)
+  )
+
+  // 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)
+    }),
+    shareReplay(1)
+  )
+  const defsSelection$ = axesSelection$.pipe(
+    map(axesSelection => {
+      return axesSelection.select<SVGDefsElement>('defs')
+    }),
+    shareReplay(1)
+  )
+  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
+    }),
+    shareReplay(1)
+  )
+
+  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 +167,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 +182,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 +224,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 +237,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$,
   })
 

package/src/grid/plugins/Dots.ts

@@ -15,14 +15,17 @@ export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_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$,
     event$: subject.event$,
   })
 

package/src/grid/plugins/{GroupArea.ts → GroupAux.ts}

@@ -24,7 +24,7 @@ import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { d3EventObservable } from '../../utils/observables'
 import { gridGroupPositionFnObservable } from '../gridObservables'
 import { createAxisPointScale } from '@orbcharts/core'
-import type { GroupAreaParams } from '../types'
+import type { GroupAuxParams } from '../types'
 
 interface LineDatum {
   id: string
@@ -41,14 +41,14 @@ interface LabelDatum {
   y: number
 }
 
-const pluginName = 'GroupArea'
+const pluginName = 'GroupAux'
 const labelClassName = getClassName(pluginName, 'label-box')
 
 function createLineData ({ groupLabel, axisX, axisHeight, fullParams }: {
   groupLabel: string
   axisX: number
   axisHeight: number
-  fullParams: GroupAreaParams
+  fullParams: GroupAuxParams
 }): LineDatum[] {
   return fullParams.showLine && groupLabel
     ? [{
@@ -65,7 +65,7 @@ function renderLine ({ selection, pluginName, lineData, fullParams, fullChartPar
   selection: d3.Selection<any, unknown, any, unknown>
   pluginName: string
   lineData: LineDatum[]
-  fullParams: GroupAreaParams
+  fullParams: GroupAuxParams
   fullChartParams: ChartParams
 }) {
   const gClassName = getClassName(pluginName, 'auxline')
@@ -114,7 +114,7 @@ function removeLine (selection: d3.Selection<any, unknown, any, unknown>) {
 function createLabelData ({ groupLabel, axisX, fullParams }: {
   groupLabel: string
   axisX: number
-  fullParams: GroupAreaParams
+  fullParams: GroupAuxParams
 }) {
   return fullParams.showLabel && groupLabel
     ? [{
@@ -126,12 +126,12 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
     : []
 }
 
-function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesOppositeTransformValue }: {
+function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
   selection: d3.Selection<any, unknown, any, unknown>
   labelData: LabelDatum[]
-  fullParams: GroupAreaParams
+  fullParams: GroupAuxParams
   fullChartParams: ChartParams
-  gridAxesOppositeTransformValue: string
+  gridAxesReverseTransformValue: string
 }) {
   const rectHeight = fullChartParams.styles.textSize + 4
 
@@ -176,7 +176,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
       // .style('pointer-events', 'none')
     const rect = rectUpdate.merge(rectEnter)
       .attr('width', d => `${rectWidth}px`)
-      .style('transform', gridAxesOppositeTransformValue)
+      .style('transform', gridAxesReverseTransformValue)
     rectUpdate.exit().remove()
 
     const textUpdate = d3.select(n[i])
@@ -190,7 +190,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
       // .style('pointer-events', 'none')
     const text = textUpdate.merge(textEnter)
       .text(d => d.text)
-      .style('transform', gridAxesOppositeTransformValue)
+      .style('transform', gridAxesReverseTransformValue)
       .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
       .attr('font-size', fullChartParams.styles.textSize)
       .attr('x', rectX + 6)
@@ -208,7 +208,7 @@ function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
   gUpdate.exit().remove()
 }
 
-export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
+export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
@@ -283,7 +283,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
   //     subscriber.next(transformData.value)
   //   })
   // })
-  // const oppositeTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
+  // const reverseTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
   //   takeUntil(destroy$),
   //   map(d => {
   //     const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
@@ -303,12 +303,12 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
   // )
   // const contentTransform$ = combineLatest({
   //   fullParams: observer.fullParams$,
-  //   oppositeTransform: oppositeTransform$
+  //   reverseTransform: reverseTransform$
   // }).pipe(
   //   takeUntil(destroy$),
   //   switchMap(async data => {
   //     const translate = [0, 0]
-  //     return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.oppositeTransform.rotate}deg) rotateX(${data.oppositeTransform.rotateX}deg) rotateY(${data.oppositeTransform.rotateY}deg)`
+  //     return `translate(${translate[0]}px, ${translate[1]}px) rotate(${data.reverseTransform.rotate}deg) rotateX(${data.reverseTransform.rotateX}deg) rotateY(${data.reverseTransform.rotateY}deg)`
   //   }),
   //   distinctUntilChanged()
   // )
@@ -324,18 +324,18 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
     ).subscribe(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
-        ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
-        : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
-        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
-        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
+        ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
+        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
       
       const groupingLength = data.computedData[0]
         ? data.computedData[0].length
         : 0
 
-      let _labels = data.fullDataFormatter.grid.seriesType === 'row'
+      let _labels = data.fullDataFormatter.grid.gridData.seriesDirection === 'row'
         // ? data.fullDataFormatter.grid.columnLabels
         // : data.fullDataFormatter.grid.rowLabels
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
@@ -352,7 +352,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
         })
 
       
-      const padding = data.fullDataFormatter.groupAxis.scalePadding
+      const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
       
       const groupScale = createAxisPointScale({
         axisLabels,
@@ -496,7 +496,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
     fullParams: observer.fullParams$,
     fullChartParams: observer.fullChartParams$,
     highlightTarget: highlightTarget$,
-    gridAxesOppositeTransform: observer.gridAxesOppositeTransform$,
+    gridAxesReverseTransform: observer.gridAxesReverseTransform$,
     GroupDataMap: observer.GroupDataMap$,
     gridGroupPositionFn: gridGroupPositionFn$,
   }).pipe(
@@ -535,7 +535,7 @@ export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)
       labelData,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams,
-      gridAxesOppositeTransformValue: data.gridAxesOppositeTransform.value
+      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
     })
 
     // label的事件