@orbcharts/plugins-basic 3.0.7 → 3.0.8

package/dist/src/base/BaseStackedBars.d.ts

@@ -9,6 +9,8 @@ interface BaseStackedBarsContext {
     computedAxesData$: Observable<ComputedAxesDataGrid>;
     visibleComputedData$: Observable<ComputedDatumGrid[][]>;
     visibleComputedAxesData$: Observable<ComputedAxesDataGrid>;
+    filteredMinMaxValue$: Observable<[number, number]>;
+    filteredStackedMinMaxValue$: Observable<[number, number]>;
     seriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "Plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -39,8 +39,8 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.5",
-    "@orbcharts/core-types": "^3.0.3",
+    "@orbcharts/core": "^3.0.6",
+    "@orbcharts/core-types": "^3.0.4",
     "@orbcharts/plugins-basic-types": "^3.0.3",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"

package/src/base/BaseStackedBars.ts

@@ -38,6 +38,8 @@ interface BaseStackedBarsContext {
   computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
   visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
+  filteredMinMaxValue$: Observable<[number, number]>
+  filteredStackedMinMaxValue$: Observable<[number, number]>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
@@ -162,8 +164,9 @@ function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, gro
         .ease(getD3TransitionEase(chartParams.transitionEase))
         .delay((d, i) => d.groupIndex * delayGroup)
         .attr('y', d => d._barStartY)
-        .attr('height', d => Math.abs(d._barHeight) || 1) // 無值還是給一個 1 的高度
+        .attr('height', d => d._barHeight > 0 ? Math.abs(d._barHeight) : 1) // 無值還是給一個 1 的高度
     })
+  
 
   // const barGroup = graphicGSelection
   //   .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${gClassName}`)
@@ -298,6 +301,8 @@ export const createBaseStackedBars: BasePluginFn<BaseStackedBarsContext> = (plug
   computedAxesData$,
   visibleComputedData$,
   visibleComputedAxesData$,
+  filteredMinMaxValue$,
+  filteredStackedMinMaxValue$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -502,37 +507,40 @@ export const createBaseStackedBars: BasePluginFn<BaseStackedBarsContext> = (plug
 
   // 堆疊後的高度對應圖軸的比例（最大值/最大值所在group的總和）
   const yRatio$ = combineLatest({
-    visibleComputedAxesData: visibleComputedAxesData$,
-    groupScaleDomain: groupScaleDomain$
+    // visibleComputedAxesData: visibleComputedAxesData$,
+    // groupScaleDomain: groupScaleDomain$
+    filteredMinMaxValue: filteredMinMaxValue$,
+    filteredStackedMinMaxValue: filteredStackedMinMaxValue$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
     map(data => {
-      const groupScaleDomainMin = data.groupScaleDomain[0]
-      const groupScaleDomainMax = data.groupScaleDomain[1]
-      // 只選取group篩選範圍內的資料
-      const filteredData = data.visibleComputedAxesData
-        .map(d => {
-          return d.filter((_d, i) => {
-            return _d.groupIndex >= groupScaleDomainMin && _d.groupIndex <= groupScaleDomainMax
-          })
-        })
+      // const groupScaleDomainMin = data.groupScaleDomain[0]
+      // const groupScaleDomainMax = data.groupScaleDomain[1]
+      // // 只選取group篩選範圍內的資料
+      // const filteredData = data.visibleComputedAxesData
+      //   .map(d => {
+      //     return d.filter((_d, i) => {
+      //       return _d.groupIndex >= groupScaleDomainMin && _d.groupIndex <= groupScaleDomainMax
+      //     })
+      //   })
       
-      const filteredDataList = filteredData.flat()
-      if (filteredDataList.length <= 1) {
-        return 1
-      }
+      // const filteredDataList = filteredData.flat()
+      // if (filteredDataList.length <= 1) {
+      //   return 1
+      // }
       
-      const maxValueDatum = filteredDataList.reduce((max, current) => {
-        return current.value > max.value ? current : max;
-      }, filteredDataList[0])
-      const maxValueGroupIndex = maxValueDatum.groupIndex
-      const maxValueGroupSum = filteredDataList
-        .filter(d => d.groupIndex === maxValueGroupIndex)
-        .reduce((sum, current) => {
-          return sum + current.value
-        }, 0)
-      return maxValueDatum.value / maxValueGroupSum
+      // const maxValueDatum = filteredDataList.reduce((max, current) => {
+      //   return current.value > max.value ? current : max;
+      // }, filteredDataList[0])
+      // const maxValueGroupIndex = maxValueDatum.groupIndex
+      // const maxValueGroupSum = filteredDataList
+      //   .filter(d => d.groupIndex === maxValueGroupIndex)
+      //   .reduce((sum, current) => {
+      //     return sum + current.value
+      //   }, 0)
+      // return maxValueDatum.value / maxValueGroupSum
+      return data.filteredMinMaxValue[1] / data.filteredStackedMinMaxValue[1]
     })
   )
 
@@ -548,6 +556,9 @@ export const createBaseStackedBars: BasePluginFn<BaseStackedBarsContext> = (plug
         : []
       return data.computedAxesData.map((series, seriesIndex) => {
         return series.map((datum, groupIndex) => {
+          if (!accYArr[groupIndex]) {
+            accYArr[groupIndex] = 0
+          }
           const _barStartY = accYArr[groupIndex] // 前一次的累加高度
           let _barHeight = 0
           if (datum.visible) {

package/src/grid/plugins/StackedBars.ts

@@ -42,6 +42,8 @@ export const StackedBars = defineGridPlugin(pluginConfig)(({ selection, name, su
     computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
     visibleComputedAxesData$: observer.visibleComputedAxesData$,
+    filteredMinMaxValue$: observer.filteredMinMaxValue$,
+    filteredStackedMinMaxValue$: observer.filteredStackedMinMaxValue$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/grid/plugins/StackedValueAxis.ts

@@ -1,4 +1,5 @@
 import {
+  of,
   takeUntil,
   map,
   distinctUntilChanged,
@@ -79,7 +80,7 @@ export const StackedValueAxis = defineGridPlugin(pluginConfig)(({ selection, nam
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
     computedData$: observer.computedStackedData$, // 計算疊加value的資料
-    filteredMinMaxValue$: observer.filteredMinMaxValue$,
+    filteredMinMaxValue$: observer.filteredStackedMinMaxValue$,
     fullParams$: observer.fullParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     fullChartParams$: observer.fullChartParams$,  

package/src/multiGrid/plugins/MultiStackedBars.ts

@@ -81,6 +81,9 @@ export const MultiStackedBars = defineMultiGridPlugin(pluginConfig)(({ selection
             visibleComputedData$: d.visibleComputedData$,
             computedAxesData$: d.computedAxesData$,
             visibleComputedAxesData$: d.visibleComputedAxesData$,
+            filteredMinMaxValue$: d.filteredMinMaxValue$, // 目前grid的資料
+            // filteredStackedMinMaxValue$: observer.filteredStackedMinMaxValue$, // 計算比例用的，使用全部資料當基底
+            filteredStackedMinMaxValue$: d.filteredStackedMinMaxValue$,
             seriesLabels$: d.seriesLabels$,
             SeriesDataMap$: d.SeriesDataMap$,
             GroupDataMap$: d.GroupDataMap$,

package/src/multiGrid/plugins/MultiStackedValueAxis.ts

@@ -114,7 +114,8 @@ export const MultiStackedValueAxis = defineMultiGridPlugin(pluginConfig)(({ sele
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedStackedData$, // 計算疊加value的資料
-            filteredMinMaxValue$: d.filteredMinMaxValue$,
+            // filteredMinMaxValue$: observer.filteredStackedMinMaxValue$, // 使用全部資料當比例尺
+            filteredMinMaxValue$: d.filteredStackedMinMaxValue$,
             fullParams$: observer.fullParams$,
             fullDataFormatter$: d.dataFormatter$,
             fullChartParams$: observer.fullChartParams$,