@orbcharts/plugins-basic 3.0.0-alpha.56 → 3.0.0-alpha.58

package/src/grid/plugins/GroupAux.ts

@@ -24,7 +24,7 @@ import { parseTickFormatValue } from '../../utils/d3Utils'
 import { measureTextWidth } from '../../utils/commonUtils'
 import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { d3EventObservable } from '../../utils/observables'
-import { gridGroupPositionFnObservable } from '../gridObservables'
+import { gridGroupPosition } from '../gridObservables'
 import { createAxisPointScale } from '@orbcharts/core'
 import type { GroupAuxParams } from '../types'
 import { gridSelectionsObservable } from '../gridObservables'
@@ -65,7 +65,7 @@ function createLineData ({ groupLabel, axisX, axisHeight, fullParams }: {
 }
 
 function renderLine ({ selection, pluginName, lineData, fullParams, fullChartParams }: {
-  selection: d3.Selection<any, unknown, any, unknown>
+  selection: d3.Selection<any, string, any, unknown>
   pluginName: string
   lineData: LineDatum[]
   fullParams: GroupAuxParams
@@ -106,7 +106,7 @@ function renderLine ({ selection, pluginName, lineData, fullParams, fullChartPar
   return auxLineSelection
 }
 
-function removeLine (selection: d3.Selection<any, unknown, any, unknown>) {
+function removeLine (selection: d3.Selection<any, string, any, unknown>) {
   const update = selection
     .selectAll<SVGLineElement, LineDatum>('line')
     .data([])
@@ -130,7 +130,7 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
 }
 
 function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, fullChartParams, labelTransform, textSizePx }: {
-  selection: d3.Selection<any, unknown, any, unknown>
+  selection: d3.Selection<any, string, any, unknown>
   labelData: LabelDatum[]
   fullParams: GroupAuxParams
   fullDataFormatter: DataFormatterGrid
@@ -168,7 +168,9 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
     let rectX = - rectWidth / 2
     let rectY = -2
     if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
-      rectX = - rectWidth / 2
+      rectX = fullParams.labelRotate
+        ? - rectWidth
+        : - rectWidth / 2
       rectY = 2
     } else if (fullDataFormatter.grid.groupAxis.position === 'left') {
       rectX = - rectWidth + 2
@@ -177,7 +179,9 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       rectX = - 2
       rectY = - rectHeight / 2
     } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
-      rectX = - rectWidth / 2
+      rectX = fullParams.labelRotate
+        ? - rectWidth
+        : - rectWidth / 2
       rectY = - rectHeight + 2
     }
 
@@ -222,7 +226,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
   return axisLabelSelection
 }
 
-function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
+function removeLabel (selection: d3.Selection<any, string, any, unknown>) {
   const gUpdate = selection
     .selectAll<SVGGElement, LabelDatum>(`g.${labelClassName}`)
     .data([])
@@ -352,15 +356,65 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
   //   distinctUntilChanged()
   // )
 
-  const groupScale$: Observable<d3.ScalePoint<string>> = new Observable(subscriber => {
-    combineLatest({
-      fullDataFormatter: observer.fullDataFormatter$,
-      gridAxesSize: observer.gridAxesSize$,
-      computedData: observer.computedData$
-    }).pipe(
-      takeUntil(destroy$),
-      switchMap(async (d) => d),
-    ).subscribe(data => {
+  // const groupScale$: Observable<d3.ScalePoint<string>> = new Observable(subscriber => {
+  //   combineLatest({
+  //     fullDataFormatter: observer.fullDataFormatter$,
+  //     gridAxesSize: observer.gridAxesSize$,
+  //     computedData: observer.computedData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(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 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.seriesDirection === 'row'
+  //       // ? data.fullDataFormatter.grid.columnLabels
+  //       // : data.fullDataFormatter.grid.rowLabels
+  //       ? (data.computedData[0] ?? []).map(d => d.groupLabel)
+  //       : data.computedData.map(d => d[0].groupLabel)
+
+  //     const axisLabels = new Array(groupingLength).fill(0)
+  //       .map((d, i) => {
+  //         return _labels[i] != null
+  //           ? _labels[i]
+  //           : String(i) // 沒有label則用序列號填充
+  //       })
+  //       .filter((d, i) => {
+  //         return i >= groupScaleDomainMin && i <= groupScaleDomainMax
+  //       })
+
+      
+  //     const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
+      
+  //     const groupScale = createAxisPointScale({
+  //       axisLabels,
+  //       axisWidth: data.gridAxesSize.width,
+  //       padding
+  //     })
+
+  //     subscriber.next(groupScale)
+  //   })
+  // })
+
+  const groupScaleDomain$ = combineLatest({
+    fullDataFormatter: observer.fullDataFormatter$,
+    gridAxesSize: observer.gridAxesSize$,
+    computedData: observer.computedData$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    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'
@@ -369,47 +423,33 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
       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.seriesDirection === 'row'
-        // ? data.fullDataFormatter.grid.columnLabels
-        // : data.fullDataFormatter.grid.rowLabels
-        ? (data.computedData[0] ?? []).map(d => d.groupLabel)
-        : data.computedData.map(d => d[0].groupLabel)
-
-      const axisLabels = new Array(groupingLength).fill(0)
-        .map((d, i) => {
-          return _labels[i] != null
-            ? _labels[i]
-            : String(i) // 沒有label則用序列號填充
-        })
-        .filter((d, i) => {
-          return i >= groupScaleDomainMin && i <= groupScaleDomainMax
-        })
 
-      
-      const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
-      
-      const groupScale = createAxisPointScale({
-        axisLabels,
-        axisWidth: data.gridAxesSize.width,
-        padding
-      })
+      return [groupScaleDomainMin, groupScaleDomainMax]
+    }),
+    shareReplay(1)
+  )
 
-      subscriber.next(groupScale)
+  const groupScale$ = combineLatest({
+    groupScaleDomain: groupScaleDomain$,
+    gridAxesSize: observer.gridAxesSize$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      const groupScale: d3.ScaleLinear<number, number> = d3.scaleLinear()
+        .domain(data.groupScaleDomain)
+        .range([0, data.gridAxesSize.width])
+      return groupScale
     })
-  })
+  )
 
-  // 取得事件座標的group資料
-  const gridGroupPositionFn$ = gridGroupPositionFnObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    gridAxesSize$: observer.gridAxesSize$,
-    computedData$: observer.computedData$,
-    fullChartParams$: observer.fullChartParams$,
-  })
+  // // 取得事件座標的group資料
+  // const gridGroupPositionFn$ = gridGroupPositionFnObservable({
+  //   fullDataFormatter$: observer.fullDataFormatter$,
+  //   gridAxesSize$: observer.gridAxesSize$,
+  //   computedData$: observer.computedData$,
+  //   fullChartParams$: observer.fullChartParams$,
+  // })
 
   const highlightTarget$ = observer.fullChartParams$.pipe(
     takeUntil(destroy$),
@@ -562,10 +602,10 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
       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 // 修正文字倒轉
-          // : data.fullParams.tickTextRotate
-          ? 180 // 修正文字倒轉
-          : 0
+          ? data.fullParams.labelRotate + 180 // 修正文字倒轉
+          : data.fullParams.labelRotate
+          // ? 180 // 修正文字倒轉
+          // : 0
       
       const textRotateValue = `rotate(${tickTextRotateDeg}deg)`
       
@@ -597,13 +637,26 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     distinctUntilChanged()
   )
 
+  const gridGroupPosition$ = gridGroupPosition({
+    rootSelection,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    gridAxesSize$: observer.gridAxesSize$,
+    computedData$: observer.computedData$,
+    fullChartParams$: observer.fullChartParams$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    layout$: observer.layout$
+  }).pipe(
+    takeUntil(destroy$)
+  )
+
   combineLatest({
     axesSelection: axesSelection$,
     columnAmount: columnAmount$,
     rowAmount: rowAmount$,
     layout: observer.layout$,
     rootMousemove: rootMousemove$,
-    gridGroupPositionFn: gridGroupPositionFn$,
+    // gridGroupPositionFn: gridGroupPositionFn$,
+    gridGroupPosition: gridGroupPosition$,
     computedData: observer.computedData$,
     groupScale: groupScale$,
     gridAxesSize: observer.gridAxesSize$,
@@ -616,22 +669,23 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     GroupDataMap: observer.GroupDataMap$,
     textSizePx: observer.textSizePx$
   }).subscribe(data => {
-    // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
-    const eventData = {
-      offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
-      offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
-    }
+    // // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+    // const eventData = {
+    //   offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
+    //   offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
+    // }
     // 依event的座標取得group資料
-    const { groupIndex, groupLabel } = data.gridGroupPositionFn(eventData)
-
-    const axisX = data.groupScale(groupLabel) ?? 0
-    
+    const { groupIndex, groupLabel } = data.gridGroupPosition
+    // console.log('gridGroupPosition', groupIndex, groupLabel)
+    const axisX = data.groupScale(groupIndex) ?? 0
+    // console.log('axisX', axisX)
     const lineData = createLineData({
       groupLabel: groupLabel,
       axisX,
       axisHeight: data.gridAxesSize.height,
       fullParams: data.fullParams,
     })
+    // console.log('lineData', lineData)
     renderLine({
       // selection: axisSelection,
       selection: data.axesSelection,
@@ -703,29 +757,29 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           data: data.computedData
         })
       })
-      .on('mouseout', (event, datum) => {
-        event.stopPropagation()
-        // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
-
-        isLabelMouseover = false
-
-        subject.event$.next({
-          type: 'grid',
-          pluginName: name,
-          eventName: 'mouseout',
-          highlightTarget: data.highlightTarget,
-          datum: null,
-          gridIndex: 0, // @Q@ 暫不處理
-          series: [],
-          seriesIndex: -1,
-          seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
-          groupIndex,
-          groupLabel,
-          event,
-          data: data.computedData
-        })
-      })
+      // .on('mouseout', (event, datum) => {
+      //   event.stopPropagation()
+      //   // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)
+
+      //   isLabelMouseover = false
+
+      //   subject.event$.next({
+      //     type: 'grid',
+      //     pluginName: name,
+      //     eventName: 'mouseout',
+      //     highlightTarget: data.highlightTarget,
+      //     datum: null,
+      //     gridIndex: 0, // @Q@ 暫不處理
+      //     series: [],
+      //     seriesIndex: -1,
+      //     seriesLabel: '',
+      //     groups: data.GroupDataMap.get(groupLabel) ?? [],
+      //     groupIndex,
+      //     groupLabel,
+      //     event,
+      //     data: data.computedData
+      //   })
+      // })
       .on('click', (event, datum) => {
         event.stopPropagation()
         // const { groupIndex, groupLabel } = data.gridGroupPositionFn(event)

package/src/grid/plugins/LineAreas.ts

@@ -28,6 +28,7 @@ export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
     gridContainerPosition$: observer.gridContainerPosition$,
+    allContainerPosition$: observer.gridContainerPosition$,
     layout$: observer.layout$,
     event$: subject.event$,
   })

package/src/grid/plugins/Lines.ts

@@ -7,7 +7,7 @@ import { createBaseLines } from '../../base/BaseLines'
 
 const pluginName = 'Lines'
 
-export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, name, observer, subject }) => {
+export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 
@@ -28,6 +28,8 @@ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selec
     gridAxesSize$: observer.gridAxesSize$,
     gridHighlight$: observer.gridHighlight$,
     gridContainerPosition$: observer.gridContainerPosition$,
+    allContainerPosition$: observer.gridContainerPosition$,
+    layout$: observer.layout$,
     event$: subject.event$,
   })
 

package/src/grid/types.ts

@@ -38,6 +38,7 @@ export interface GroupAuxParams {
   labelTextColorType: ColorType
   labelTextFormat: string | ((text: any) => string)
   labelPadding: number
+  labelRotate: number
 }
 
 export interface BarsParams {

package/src/multiGrid/plugins/MultiLineAreas.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3'
 import {
+  map,
   takeUntil,
   Subject } from 'rxjs'
 import {
@@ -19,6 +20,14 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
   
   const unsubscribeFnArr: (() => void)[] = []
 
+  // 攤平所有grid的containerPosition
+  const allContainerPosition$ = observer.multiGridContainerPosition$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data.flat()
+    })
+  )
+
   const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
   multiGridPluginDetail$
@@ -54,6 +63,7 @@ export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LI
             gridAxesSize$: d.gridAxesSize$,
             gridHighlight$: d.gridHighlight$,
             gridContainerPosition$: d.gridContainerPosition$,
+            allContainerPosition$: allContainerPosition$,
             layout$: observer.layout$,
             event$: subject.event$ as Subject<any>,
           })

package/src/multiGrid/plugins/MultiLines.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3'
 import {
+  map,
   takeUntil,
   Subject } from 'rxjs'
 import {
@@ -14,11 +15,19 @@ const pluginName = 'MultiLines'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_PARAMS)(({ selection, name, subject, observer }) => {
+export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
   const destroy$ = new Subject()
   
   const unsubscribeFnArr: (() => void)[] = []
 
+  // 攤平所有grid的containerPosition
+  const allContainerPosition$ = observer.multiGridContainerPosition$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data.flat()
+    })
+  )
+
   const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
 
   multiGridPluginDetail$
@@ -54,6 +63,8 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
             gridAxesSize$: d.gridAxesSize$,
             gridHighlight$: d.gridHighlight$,
             gridContainerPosition$: d.gridContainerPosition$,
+            allContainerPosition$,
+            layout$: observer.layout$,
             event$: subject.event$ as Subject<any>,
           })
         })

package/{tsconfig.json → tsconfig.base.json}

@@ -3,7 +3,7 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "esnext",
     "target": "es5",
     "jsx": "react",
     "allowJs": true,

package/tsconfig.json.bak.vite-plugin-tsconfig

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "paths":{
+      "@orbcharts/core": ["./../orbcharts-core/src"]
+    }
+  }
+}

package/tsconfig.prod.json

@@ -1,14 +1,3 @@
 {
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports" : true,
-    "esModuleInterop" : true
-  }
+  "extends": "./tsconfig.base.json"
 }

package/vite.config.mjs

@@ -0,0 +1,41 @@
+import path from "path"
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfig from 'vite-plugin-tsconfig'
+
+export default defineConfig(({ command, mode }) => {
+  const alias = mode === 'production'
+    ? {}
+    : {
+      "@orbcharts/core": path.resolve(__dirname, "./../orbcharts-core")
+    }
+
+  const tsconfigPath = mode === 'production'
+    ? 'tsconfig.prod.json'
+    : 'tsconfig.json'
+
+  return {
+    plugins: [
+      tsconfig({
+        filename: tsconfigPath
+      }),
+      dts({
+        insertTypesEntry: true
+      })
+    ],
+    resolve: {
+      alias
+    },
+    compilerOptions: {
+      composite: true
+    },
+    build: {
+      lib: {
+        entry: "src/index.ts",
+        name: 'orbcharts-plugins-basic',
+        formats: ["es", "umd"],
+        fileName: format => `orbcharts-plugins-basic.${format}.js`
+      },
+    }
+  }
+})

package/dist/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vite').UserConfig & Promise<import('vite').UserConfig> & (import('vite').UserConfigFnObject & import('vite').UserConfigExport);
-export default _default;

package/tsconfig.dev.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports" : true,
-    "esModuleInterop" : true,
-    "paths":{
-      "@orbcharts/core": ["./../orbcharts-core/src"]
-    }
-  }
-}

package/vite.config.js

@@ -1,50 +0,0 @@
-// import { fileURLToPath, URL } from 'node:url'
-
-// import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-const releaseConfig = {
-  plugins: [
-    dts({
-      insertTypesEntry: true
-    })
-  ],
-  compilerOptions: {
-    composite: true
-  },
-  // resolve: {
-  //   alias: {
-  //     '@core': '@orbcharts/core'
-  //   }
-  // },
-  build: {
-    lib: {
-      entry: "src/index.ts",
-      name: 'orbcharts-plugins-basic',
-      formats: ["es", "umd"],
-      fileName: format => `orbcharts-plugins-basic.${format}.js`
-    },
-    // rollupOptions: {
-    //   input: {
-    //     main: resolve(__dirname, "src/index.ts")
-    //   },
-    //   external: ['vue'],
-    //   output: {
-    //     assetFileNames: 'my-library.css',
-    //     exports: "named",
-    //     globals: {
-    //       vue: 'Vue',
-    //     },
-    //   },
-    // },
-  }
-}
-
-export default defineConfig(({ command, mode }) => {
-  if (mode === 'release') {
-    return releaseConfig
-  } else {
-    return releaseConfig
-  }
-})