@orbcharts/plugins-basic 3.0.0-alpha.66 → 3.0.0-alpha.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.66",
+  "version": "3.0.0-alpha.68",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.59",
+    "@orbcharts/core": "^3.0.0-alpha.61",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseBarStack.ts

@@ -485,10 +485,11 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
     map(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'
+      // 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 groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0]
+      const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
         ? groupMax // + data.dataFormatter.grid.groupAxis.scalePadding
         : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number // + data.dataFormatter.grid.groupAxis.scalePadding
 

package/src/base/BaseGroupAxis.ts

@@ -10,7 +10,6 @@ import {
   shareReplay,
   Observable,
   Subject } from 'rxjs'
-import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
 import type { ColorType, ComputedDataGrid, GridContainerPosition } from '@orbcharts/core'
 import type { BasePluginFn } from './types'
 import type {
@@ -216,11 +215,11 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
       // 先等transition結束再處理文字，否則會被原本的文字覆蓋
       xAxisEl
         .selectAll('.tick text')
-        .each((d, groupIndex, n) => {
+        .each((groupIndex: number, i, n) => {
           // -- 將原本單行文字改為多行文字 --
           const groupLabel = groupLabels[groupIndex] ?? '' // 非整數index不顯示
           const groupLabelTspans = groupLabel.split('\n')
-          const textSelection = d3.select(n[groupIndex])
+          const textSelection = d3.select(n[i])
             .text(null) // 先清空原本的 text
 
           const textX = Number(textSelection.attr('x'))
@@ -505,10 +504,11 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     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 groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+      // 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
 

package/src/base/BaseValueAxis.ts

@@ -419,10 +419,11 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     ).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'
+      // 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
         

package/src/grid/gridObservables.ts

@@ -209,10 +209,11 @@ 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 groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+      // 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
 
@@ -352,10 +353,11 @@ 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 groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+      // 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
 

package/src/grid/plugins/GroupAux.ts

@@ -194,7 +194,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       .attr('height', `${rectHeight}px`)
       .attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
       .attr('x', rectX)
-      .attr('y', rectY - 2) // 奇怪的偏移修正
+      .attr('y', rectY - 3) // 奇怪的偏移修正
       .attr('rx', 5)
       .attr('ry', 5)
       .style('cursor', 'pointer')
@@ -256,7 +256,18 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     selection,
     pluginName,
     clipPathID: 'test',
-    seriesLabels$: observer.seriesLabels$,
+    seriesLabels$: observer.isSeriesSeprate$.pipe(
+      switchMap(isSeriesSeprate => {
+        return iif(
+          () => isSeriesSeprate,
+          observer.seriesLabels$,
+          // 如果沒分開的話只取一筆
+          observer.seriesLabels$.pipe(
+            map(d => [d[0]])
+          )
+        )
+      })
+    ),
     gridContainerPosition$: observer.gridContainerPosition$,
     gridAxesTransform$: observer.gridAxesTransform$,
     gridGraphicTransform$: observer.gridGraphicTransform$
@@ -417,10 +428,11 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     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 groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
+      // 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
 
@@ -574,7 +586,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     takeUntil(destroy$),
   )
 
-
   // const mousemoveGroupLabel$ = combineLatest({
   //   rootMousemove: rootMousemove$,
   //   gridGroupPositionFn: gridGroupPositionFn$,
@@ -671,7 +682,10 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     textReverseTransformWithRotate: textReverseTransformWithRotate$,
     GroupDataMap: observer.GroupDataMap$,
     textSizePx: observer.textSizePx$
-  }).subscribe(data => {
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+  ).subscribe(data => {
     // // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
     // const eventData = {
     //   offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
@@ -953,7 +967,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     takeUntil(destroy$),
   )
 
-
   combineLatest({
     rootRectMouseout: rootRectMouseout$,
     axesSelection: axesSelection$,
@@ -961,7 +974,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     takeUntil(destroy$),
     switchMap(async d => d)
   ).subscribe(data => {
-
     setTimeout(() => {
       // @Q@ workaround - 不知為何和 label 會有衝突，當滑鼠移動到 label 上時，會觸發 mouseout 事件
       if (isLabelMouseover == true) {

package/src/grid/plugins/ScalingArea.ts

@@ -80,10 +80,11 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
   ).subscribe(data => {
     const groupMin = 0
     const groupMax = data.groupMaxIndex
-    const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'auto'
-      ? groupMin - data.initGroupAxis.scalePadding
-      : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
-    const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'auto'
+    // const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'min'
+    //   ? groupMin - data.initGroupAxis.scalePadding
+    //   : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
+    const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
+    const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
       ? groupMax + data.initGroupAxis.scalePadding
       : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding