@orbcharts/core 3.0.4 → 3.0.6

package/dist/src/series/seriesObservables.d.ts

@@ -1,26 +1,37 @@
 import { Observable } from 'rxjs';
 import { ComputedDatumSeries, ComputedDataTypeMap, DataFormatterTypeMap, ContainerPosition, Layout } from '../../lib/core-types';
 
+export declare const datumLabelsObservable: ({ computedData$ }: {
+    computedData$: Observable<ComputedDataTypeMap<"series">>;
+}) => Observable<string[]>;
 export declare const separateSeriesObservable: ({ fullDataFormatter$ }: {
     fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
 }) => Observable<boolean>;
+export declare const separateLabelObservable: ({ fullDataFormatter$ }: {
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
+}) => Observable<boolean>;
+export declare const sumSeriesObservable: ({ fullDataFormatter$ }: {
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
+}) => Observable<boolean>;
 export declare const seriesLabelsObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"series">>;
 }) => Observable<string[]>;
 export declare const seriesVisibleComputedDataObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"series">>;
 }) => Observable<ComputedDatumSeries[][]>;
-export declare const seriesComputedSortedDataObservable: ({ computedData$, fullDataFormatter$ }: {
+export declare const seriesComputedSortedDataObservable: ({ computedData$, separateSeries$, separateLabel$, sumSeries$, datumLabels$ }: {
     computedData$: Observable<ComputedDataTypeMap<"series">>;
-    fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
+    separateSeries$: Observable<boolean>;
+    separateLabel$: Observable<boolean>;
+    sumSeries$: Observable<boolean>;
+    datumLabels$: Observable<string[]>;
 }) => Observable<ComputedDatumSeries[][]>;
-export declare const seriesContainerPositionObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
-    computedData$: Observable<ComputedDataTypeMap<"series">>;
+export declare const seriesContainerPositionObservable: ({ computedSortedData$, fullDataFormatter$, layout$ }: {
+    computedSortedData$: Observable<ComputedDatumSeries[][]>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
     layout$: Observable<Layout>;
 }) => Observable<ContainerPosition[]>;
-export declare const seriesContainerPositionMapObservable: ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
+export declare const datumContainerPositionMapObservable: ({ seriesContainerPosition$, computedSortedData$ }: {
     seriesContainerPosition$: Observable<ContainerPosition[]>;
-    seriesLabels$: Observable<string[]>;
-    separateSeries$: Observable<boolean>;
+    computedSortedData$: Observable<ComputedDatumSeries[][]>;
 }) => Observable<Map<string, ContainerPosition>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Core codes for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -39,7 +39,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core-types": "^3.0.2",
+    "@orbcharts/core-types": "^3.0.4",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/createBaseChart.ts

@@ -306,24 +306,24 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
       width: options?.width ?? DEFAULT_CHART_OPTIONS.width,
       height: options?.height ?? DEFAULT_CHART_OPTIONS.height
     }).pipe(
-        switchMap(size => {
-          return iif(
-            () => size.width === 'auto' || size.height === 'auto',
-            // 有 'auto' 的話就監聽element的尺寸
-            resizeObservable(element).pipe(
-              map((d) => {
-                return {
-                  width: size.width === 'auto' ? d.width : size.width,
-                  height: size.height === 'auto' ? d.height : size.height
-                }
-              })
-            ),
-            of(size as { width: number; height: number })
-          )
-        }),
-        takeUntil(destroy$),
-        share()
-      )
+      switchMap(size => {
+        return iif(
+          () => size.width === 'auto' || size.height === 'auto',
+          // 有 'auto' 的話就監聽element的尺寸
+          resizeObservable(element).pipe(
+            map((d) => {
+              return {
+                width: size.width === 'auto' ? d.width : size.width,
+                height: size.height === 'auto' ? d.height : size.height
+              }
+            })
+          ),
+          of(size as { width: number; height: number })
+        )
+      }),
+      takeUntil(destroy$),
+      share()
+    )
     const rootSizeFiltered$ = of().pipe(
       mergeWith(
         rootSize$.pipe(

package/src/defaults.ts

@@ -173,6 +173,7 @@ export const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries = {
     ...DEFAULT_DATA_FORMATTER_CONTAINER
   },
   separateSeries: false,
+  separateLabel: false,
   sumSeries: false
   // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
   //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length

package/src/grid/contextObserverCallback.ts

@@ -139,6 +139,13 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     shareReplay(1)
   )
 
+  const filteredStackedMinMaxValue$ = filteredMinMaxValueObservable({
+    computedData$: computedStackedData$,
+    groupScaleDomainValue$: groupScaleDomainValue$,
+  }).pipe(
+    shareReplay(1)
+  )
+
   const gridAxesTransform$ = gridAxesTransformObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$
@@ -193,6 +200,7 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     computedStackedData$,
     groupScaleDomainValue$,
     filteredMinMaxValue$,
+    filteredStackedMinMaxValue$,
     gridAxesTransform$,
     gridAxesReverseTransform$,
     gridGraphicTransform$,

package/src/grid/gridObservables.ts

@@ -206,7 +206,7 @@ export const gridSeriesLabelsObservable = ({ computedData$ }: { computedData$: O
         })
     }),
     distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
+      return JSON.stringify(a) === JSON.stringify(b)
     }),
   )
 }
@@ -272,34 +272,10 @@ export const gridContainerPositionObservable = ({ computedData$, fullDataFormatt
       if (data.fullDataFormatter.separateSeries) {
         // -- 依slotIndexes計算 --
         return calcContainerPositionScaled(data.layout, data.fullDataFormatter.container, data.computedData.length)
-        // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
-        //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
-        //   const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-        //   return {
-        //     slotIndex: seriesIndex,
-        //     rowIndex,
-        //     columnIndex,
-        //     translate,
-        //     scale,
-        //   }
-        // })
       } else {
         // -- 無拆分 --
         const gridContainerPositionArr = calcContainerPositionScaled(data.layout, data.fullDataFormatter.container, 1)
         return data.computedData.map((d, i) => gridContainerPositionArr[0]) // 每個series相同位置
-        // const columnIndex = 0
-        // const rowIndex = 0
-        // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-        //   return {
-        //     slotIndex: 0,
-        //     rowIndex,
-        //     columnIndex,
-        //     translate,
-        //     scale,
-        //   }
-        // })
       }
     })
   )
@@ -610,9 +586,11 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
     // })
   
     // const filteredMinMax = getMinMaxGrid(filteredData)
-    if (filteredMinMaxValue[0] === filteredMinMaxValue[1] && filteredMinMaxValue[1] === 0) {
+    const filteredMin = filteredMinMaxValue[0]
+    let filteredMax = filteredMinMaxValue[1]
+    if (filteredMin === filteredMax && filteredMax === 0) {
       // filteredMinMaxValue[0] = filteredMinMaxValue[1] - 1 // 避免最大及最小值相同造成無法計算scale
-      filteredMinMaxValue[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
+      filteredMax = 1 // 避免最大及最小值同等於 0 造成無法計算scale
     }
   
     const valueAxisWidth = (valueAxis.position === 'left' || valueAxis.position === 'right')
@@ -620,8 +598,8 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
       : width
   
     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-      maxValue: filteredMinMaxValue[1],
-      minValue: filteredMinMaxValue[0],
+      maxValue: filteredMax,
+      minValue: filteredMin,
       axisWidth: valueAxisWidth,
       scaleDomain: valueAxis.scaleDomain,
       scaleRange: valueAxis.scaleRange
@@ -635,9 +613,11 @@ export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomain
   // })
     // -- translateY, scaleY --
     const minMax = getMinMaxGrid(data)
-    if (minMax[0] === minMax[1] && minMax[1] === 0) {
+    const min = minMax[0]
+    let max = minMax[1]
+    if (min === max && max === 0) {
       // minMax[0] = minMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
-      minMax[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
+      max = 1 // 避免最大及最小值同等於 0 造成無法計算scale
     }
     // const rangeMinY = valueScale(minMax[0])
     const rangeMinY = valueScale(minMax[0] > 0 ? 0 : minMax[0]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算

package/src/multiGrid/contextObserverCallback.ts

@@ -1,11 +1,15 @@
 import {
   map,
-  shareReplay } from 'rxjs'
+  switchMap,
+  merge,
+  forkJoin,
+  shareReplay,
+  Observable } from 'rxjs'
 import type { ContextObserverCallback, DataGridDatum } from '../../lib/core-types'
 import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
 import { textSizePxObservable, containerSizeObservable, highlightObservable } from '../utils/observables'
 // import { createMultiGridSeriesLabels } from '../utils/orbchartsUtils'
-import { combineLatest } from 'rxjs/internal/observable/combineLatest'
+import { filteredMinMaxValueObservable } from '../grid/gridObservables'
 
 export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({ subject, observer }) => {
 
@@ -59,6 +63,34 @@ export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({
   //   console.log('multiGridContainerPosition$', d)
   // })
 
+  const filteredMinMaxValue$: Observable<[number, number]> = multiGridEachDetail$.pipe(
+    switchMap(details => {
+      return forkJoin(details.map((detail, index) => {
+        return detail.filteredMinMaxValue$
+      }))
+    }),
+    map(filteredMinMaxValue => {
+      return [
+        Math.min(...filteredMinMaxValue.map(d => d[0])),
+        Math.max(...filteredMinMaxValue.map(d => d[1]))
+      ]
+    })
+  )
+
+  const filteredStackedMinMaxValue$: Observable<[number, number]> = multiGridEachDetail$.pipe(
+    switchMap(details => {
+      return forkJoin(details.map((detail, index) => {
+        return detail.filteredStackedMinMaxValue$
+      }))
+    }),
+    map(filteredMinMaxValue => {
+      return [
+        Math.min(...filteredMinMaxValue.map(d => d[0])),
+        Math.max(...filteredMinMaxValue.map(d => d[1]))
+      ]
+    })
+  )
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
@@ -69,6 +101,8 @@ export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({
     containerSize$,
     multiGridHighlight$,
     multiGridContainerPosition$,
+    filteredMinMaxValue$,
+    filteredStackedMinMaxValue$,
     multiGridEachDetail$,
     // multiGridContainer$
   }

package/src/multiGrid/multiGridObservables.ts

@@ -247,6 +247,14 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           shareReplay(1)
         )
 
+        const filteredStackedMinMaxValue$ = filteredMinMaxValueObservable({
+          computedData$: computedStackedData$,
+          groupScaleDomainValue$: groupScaleDomainValue$,
+        }).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+
         const gridAxesTransform$ = gridAxesTransformObservable({
           fullDataFormatter$: gridDataFormatter$,
           layout$: layout$
@@ -297,6 +305,7 @@ export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData
           computedStackedData$,
           groupScaleDomainValue$,
           filteredMinMaxValue$,
+          filteredStackedMinMaxValue$,
           gridAxesTransform$,
           gridAxesReverseTransform$,
           gridGraphicTransform$,
@@ -351,50 +360,6 @@ export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$
         }
         return seriesContainerArr
       })
-      // console.log('gridContainerPositionArr', gridContainerPositionArr)
-
-      // let accGridSlotIndex = 0
-
-      // const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
-      //   const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
-        
-      //   if (grid.separateSeries) {
-      //     // -- 依seriesSlotIndexes計算 --
-      //     const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
-      //       const currentSlotIndex = accGridSlotIndex + seriesIndex
-      //       const columnIndex = currentSlotIndex % data.fullDataFormatter.container.columnAmount
-      //       const rowIndex = Math.floor(currentSlotIndex / data.fullDataFormatter.container.columnAmount)
-      //       const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-      //       return {
-      //         slotIndex: currentSlotIndex,
-      //         rowIndex,
-      //         columnIndex,
-      //         translate,
-      //         scale,
-      //       }
-      //     })
-      //     accGridSlotIndex += seriesContainerArr.length
-      //     return seriesContainerArr
-      //   } else {
-      //     // -- 依grid的slotIndex計算 --
-      //     const columnIndex = accGridSlotIndex % data.fullDataFormatter.container.columnAmount
-      //     const rowIndex = Math.floor(accGridSlotIndex / data.fullDataFormatter.container.columnAmount)
-      //     const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
-      //       const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
-      //       return {
-      //         slotIndex: accGridSlotIndex,
-      //         rowIndex,
-      //         columnIndex,
-      //         translate,
-      //         scale,
-      //       }
-      //     })
-      //     if (data.fullDataFormatter.separateGrid) {
-      //       accGridSlotIndex += 1
-      //     }
-      //     return seriesContainerArr
-      //   }
-      // })
 
       return gridContainerPositionArr
     }),