@orbcharts/plugins-basic 3.0.0-beta.1 → 3.0.0-beta.11

package/src/grid/gridObservables.ts

@@ -19,20 +19,20 @@ import type {
   ComputedDataGrid,
   ComputedDatumGrid,
   TransformData,
-  GridContainerPosition,
+  ContainerPositionScaled,
   Layout } from '../../lib/core-types'
-import { createAxisQuantizeScale } from '../../lib/core'
+import { createAxisToLabelIndexScale } from '../../lib/core'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 import { d3EventObservable } from '../utils/observables'
 
-// grid選取器
+// 建立 grid 主要的 selection 
 export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, seriesLabels$, gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
   selection: d3.Selection<any, unknown, any, unknown>
   pluginName: string
   clipPathID: string
   // computedData$: Observable<ComputedDataGrid>
   seriesLabels$: Observable<string[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
 }) => {
@@ -40,11 +40,15 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
   const axesClassName = getClassName(pluginName, 'axes')
   const graphicClassName = getClassName(pluginName, 'graphic')
 
+  // <g> series selection（container排放位置）
+  //   <g> axes selection（旋轉圖軸方向）
+  //     <defs> clipPath selection
+  //     <g> graphic selection（圖形 scale 範圍的變形）
   const seriesSelection$ = seriesLabels$.pipe(
-    map((existSeriesLabels, i) => {
+    map((seriesLabels, i) => {
       return selection
         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
-        .data(existSeriesLabels, d => d)
+        .data(seriesLabels, d => d)
         .join(
           enter => {
             return enter
@@ -85,6 +89,7 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
     shareReplay(1)
   )
 
+  // <g> series selection
   combineLatest({
     seriesSelection: seriesSelection$,
     gridContainerPosition: gridContainerPosition$                                                                                                                                                                                       
@@ -101,6 +106,7 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
       })
   })
 
+  // <g> axes selection
   const axesSelection$ = combineLatest({
     seriesSelection: seriesSelection$,
     gridAxesTransform: gridAxesTransform$
@@ -113,12 +119,16 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
     }),
     shareReplay(1)
   )
+
+  // <defs> clipPath selection
   const defsSelection$ = axesSelection$.pipe(
     map(axesSelection => {
       return axesSelection.select<SVGDefsElement>('defs')
     }),
     shareReplay(1)
   )
+
+  // <g> graphic selection
   const graphicGSelection$ = combineLatest({
     axesSelection: axesSelection$,
     gridGraphicTransform: gridGraphicTransform$
@@ -145,7 +155,6 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
 }
 
 // 由事件取得group data的function
-// @Q@ 之後重構改用 gridGroupPosition
 export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
@@ -155,7 +164,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   computedData$: Observable<ComputedDataGrid>
   // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullChartParams$: Observable<ChartParams>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
 }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
   const destroy$ = new Subject()
@@ -171,18 +180,18 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   //   ).subscribe(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     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 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 groupingAmount = data.computedData[0]
   //     //   ? data.computedData[0].length
   //     //   : 0
 
-  //     let _labels = data.dataFormatter.grid.seriesDirection === 'row'
+  //     let _labels = data.dataFormatter.seriesDirection === 'row'
   //       ? (data.computedData[0] ?? []).map(d => d.groupLabel)
   //       : data.computedData.map(d => d[0].groupLabel)
 
@@ -209,13 +218,13 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // 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 groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+      // 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 groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     }),
@@ -228,7 +237,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return data.fullDataFormatter.grid.seriesDirection === 'row'
+      return data.fullDataFormatter.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
     })
@@ -284,28 +293,28 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       switchMap(async (d) => d),
     ).subscribe(data => {
       
-      const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
-        || data.dataFormatter.grid.valueAxis.position === 'bottom'
+      const reverse = data.dataFormatter.valueAxis.position === 'right'
+        || data.dataFormatter.valueAxis.position === 'bottom'
           ? true : false
 
       // 比例尺座標對應非連續資料索引
-      const xIndexScale = createAxisQuantizeScale({
+      const xIndexScale = createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.axisSize.width,
-        padding: data.dataFormatter.grid.groupAxis.scalePadding,
+        padding: data.dataFormatter.groupAxis.scalePadding,
         reverse
       })
 
       // 依比例尺位置計算座標
       const axisValuePredicate = (event: any) => {
-        return data.dataFormatter.grid.groupAxis.position === 'bottom'
-          || data.dataFormatter.grid.groupAxis.position === 'top'
+        return data.dataFormatter.groupAxis.position === 'bottom'
+          || data.dataFormatter.groupAxis.position === 'top'
             ? event.offsetX - data.fullChartParams.padding.left
             : event.offsetY - data.fullChartParams.padding.top
       }
 
       // 比例尺座標取得groupData的function
-      const createEventGroupData: (event: any) => { groupIndex: number; groupLabel: string } = (event: any) => {
+      const createEventGroupData: (event: MouseEvent) => { groupIndex: number; groupLabel: string } = (event: any) => {
         // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
         const eventData = {
           offsetX: event.offsetX * data.columnAmount % data.layout.rootWidth,
@@ -332,7 +341,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   })
 }
 
-export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
+export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   rootSelection: d3.Selection<any, unknown, any, unknown>
   fullDataFormatter$: Observable<DataFormatterGrid>
   gridAxesSize$: Observable<{
@@ -341,10 +350,10 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
   }>
   computedData$: Observable<ComputedDataGrid>
   fullChartParams$: Observable<ChartParams>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
 }) => {
-  const rootMousemove$: Observable<any> = d3EventObservable(rootSelection, 'mousemove')
+  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove')
 
   const groupScaleDomain$ = combineLatest({
     fullDataFormatter: fullDataFormatter$,
@@ -355,13 +364,13 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // 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 groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+      // 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 groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     }),
@@ -374,7 +383,7 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return data.fullDataFormatter.grid.seriesDirection === 'row'
+      return data.fullDataFormatter.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
     })
@@ -395,7 +404,7 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
 
   const reverse$ = fullDataFormatter$.pipe(
     map(d => {
-      return d.grid.valueAxis.position === 'right' || d.grid.valueAxis.position === 'bottom'
+      return d.valueAxis.position === 'right' || d.valueAxis.position === 'bottom'
           ? true
           : false
     })
@@ -410,10 +419,10 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return createAxisQuantizeScale({
+      return createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.gridAxesSize.width,
-        padding: data.fullDataFormatter.grid.groupAxis.scalePadding,
+        padding: data.fullDataFormatter.groupAxis.scalePadding,
         reverse: data.reverse
       })
     })
@@ -454,8 +463,8 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
         offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
         offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
       }
-      return data.fullDataFormatter.grid.groupAxis.position === 'bottom'
-          || data.fullDataFormatter.grid.groupAxis.position === 'top'
+      return data.fullDataFormatter.groupAxis.position === 'bottom'
+          || data.fullDataFormatter.groupAxis.position === 'top'
             ? eventData.offsetX - data.fullChartParams.padding.left
             : eventData.offsetY - data.fullChartParams.padding.top
     })
@@ -500,7 +509,7 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
 
 // const gridContainerEventData$ = ({ eventData$, gridContainerPosition$, layout$ }: {
 //   eventData$: Observable<any>
-//   gridContainerPosition$: Observable<GridContainerPosition[]>
+//   gridContainerPosition$: Observable<ContainerPositionScaled[]>
 //   layout$: Observable<Layout>
 // }): Observable<{
 //   offsetX: number;

package/src/grid/index.ts

@@ -4,13 +4,13 @@ export { Lines } from './plugins/Lines'
 export { LineAreas } from './plugins/LineAreas'
 export { Bars } from './plugins/Bars'
 export { BarsPN } from './plugins/BarsPN'
-export { BarStack } from './plugins/BarStack'
+export { StackedBar } from './plugins/StackedBar'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'
 export { GridLegend } from './plugins/GridLegend'
 export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
-export { ValueStackAxis } from './plugins/ValueStackAxis'
+export { StackedValueAxis } from './plugins/StackedValueAxis'
 export { GridTooltip } from './plugins/GridTooltip'
 export { GridZoom } from './plugins/GridZoom'
 export { GroupAux } from './plugins/GroupAux'

package/src/grid/plugins/GridLegend.ts

@@ -85,14 +85,14 @@ export const GridLegend = defineGridPlugin(pluginConfig)(({ selection, rootSelec
       ]
       return {
         ...d,
-        seriesList
+        labelList: seriesList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$,
+    legendLabels$: seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/grid/plugins/GridZoom.ts

@@ -12,7 +12,7 @@ import {
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterGrid } from '../../../lib/core-types'
 import {
-  defineGridPlugin, createAxisLinearScale } from '../../../lib/core'
+  defineGridPlugin, createValueToAxisScale } from '../../../lib/core'
 import { DEFAULT_GRID_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
@@ -60,7 +60,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //     .attr('y', d.top)
   // })
 
-  const groupMax$ = observer.computedData$.pipe(
+  const groupMaxIndex$ = observer.computedData$.pipe(
     map(d => d[0] ? d[0].length - 1 : 0),
     distinctUntilChanged()
   )
@@ -76,16 +76,16 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //   })
 
   const initGroupAxis$ = observer.fullDataFormatter$.pipe(
-    map(d => d.grid.groupAxis),
+    map(d => d.groupAxis),
     // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     first()
   )
 
 
-  const groupScale$ = combineLatest({
+  const initGroupScale$ = combineLatest({
     initGroupAxis: initGroupAxis$,
-    fullDataFormatter: observer.fullDataFormatter$,
-    groupMax: groupMax$,
+    // fullDataFormatter: observer.fullDataFormatter$,
+    groupMaxIndex: groupMaxIndex$,
     layout: observer.layout$,
     axisSize: observer.gridAxesSize$
   }).pipe(
@@ -95,11 +95,11 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
       // const groupMin = 0
       const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
       const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
-        ? data.groupMax + data.initGroupAxis.scalePadding
+        ? data.groupMaxIndex + data.initGroupAxis.scalePadding
         : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
 
-      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-        maxValue: data.groupMax,
+      const groupScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+        maxValue: data.groupMaxIndex,
         minValue: 0,
         axisWidth: data.axisSize.width,
         scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
@@ -111,20 +111,20 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   )
 
   combineLatest({
-    groupScale: groupScale$,
+    initGroupScale: initGroupScale$,
     // initGroupAxis: initGroupAxis$,
     // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     fullDataFormatter: observer.fullDataFormatter$,
-    groupMax: groupMax$,
+    groupMaxIndex: groupMaxIndex$,
     // layout: observer.layout$,
     // axisSize: observer.gridAxesSize$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
-    const groupMin = 0
+    const groupMinIndex = 0
 
-    const shadowScale = data.groupScale.copy()
+    const shadowScale = data.initGroupScale.copy()
 
     const zoom = d3.zoom()
       // .scaleExtent([1, data.groupMaxIndex])
@@ -153,10 +153,10 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
         // console.log('t.x', t.x)
         const mapGroupindex = (d: number) => {
           const n = Math.round(d)
-          return Math.min(data.groupMax, Math.max(groupMin, n));
+          return Math.min(data.groupMaxIndex, Math.max(groupMinIndex, n));
         }
         
-        const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
+        const zoomedDomain = data.fullDataFormatter.groupAxis.position === 'bottom' || data.fullDataFormatter.groupAxis.position === 'top'
           ? t.rescaleX(shadowScale)
             .domain()
             .map(mapGroupindex)
@@ -166,7 +166,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
 
 
         // domain超過極限值
-        if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= data.groupMax) {
+        if (zoomedDomain[0] <= groupMinIndex && zoomedDomain[1] >= data.groupMaxIndex) {
           // 繼續縮小
           if (t.k < lastTransform.k) {
             // 維持前一次的transform
@@ -193,13 +193,13 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
 
         const newDataFormatter: DataFormatterGrid = {
           ...data.fullDataFormatter,
-          grid: {
-            ...data.fullDataFormatter.grid,
+          // grid: {
+            // ...data.fullDataFormatter.grid,
             groupAxis: {
-              ...data.fullDataFormatter.grid.groupAxis,
+              ...data.fullDataFormatter.groupAxis,
               scaleDomain: zoomedDomain
             }
-          }
+          // }
         }
         subject.dataFormatter$.next(newDataFormatter)
       })