@orbcharts/core 3.0.0-alpha.68 → 3.0.0-beta.10

package/src/utils/gridObservables.ts

@@ -26,14 +26,14 @@ import type {
   DataFormatterGroupAxis,
   ComputedLayoutDatumGrid,
   ComputedLayoutDataGrid,
-  GridContainerPosition,
+  ContainerPositionScaled,
   HighlightTarget,
   Layout,
   TransformData } from '../../lib/core-types'
-import { getMinAndMaxGrid } from './orbchartsUtils'
-import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from './d3Utils'
+import { getMinMaxGrid } from './orbchartsUtils'
+import { createValueToAxisScale, createLabelToAxisScale, createAxisToLabelIndexScale } from './d3Scale'
 import { calcGridContainerLayout } from './orbchartsUtils'
-import { getMinAndMaxValue } from './orbchartsUtils'
+import { getMinMaxValue } from './orbchartsUtils'
 
 export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
@@ -41,36 +41,42 @@ export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormat
   layout$: Observable<Layout>
 }): Observable<ComputedLayoutDatumGrid[][]> => {
 
-  // 未篩選group範圍前的group scale
+  // 未篩選group範圍前的group scale（ * 不受到dataFormatter設定影響）
   function createOriginGroupScale (computedData: ComputedDatumGrid[][], dataFormatter: DataFormatterGrid, layout: Layout) {
-    const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
+    const groupAxisWidth = (dataFormatter.groupAxis.position === 'top' || dataFormatter.groupAxis.position === 'bottom')
       ? layout.width
       : layout.height
     const groupEndIndex = computedData[0] ? computedData[0].length - 1 : 0
-    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    const groupScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
       maxValue: groupEndIndex,
       minValue: 0,
       axisWidth: groupAxisWidth,
       scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
       scaleRange: [0, 1] // 不使用dataFormatter設定
     })
+
     return groupScale
   }
 
-  // 未篩選group範圍及visible前的value scale
+  // 未篩選group範圍及visible前的value scale（ * 不受到dataFormatter設定影響）
   function createOriginValueScale (computedData: ComputedDatumGrid[][], dataFormatter: DataFormatterGrid, layout: Layout) {
-    const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+    const valueAxisWidth = (dataFormatter.valueAxis.position === 'left' || dataFormatter.valueAxis.position === 'right')
       ? layout.height
       : layout.width
   
     const listData = computedData.flat()
-    const [minValue, maxValue] = getMinAndMaxValue(listData)
+    let [minValue, maxValue] = getMinMaxValue(listData)
+    if (minValue === maxValue && maxValue === 0) {
+      // 避免最大及最小值相同造成無法計算scale
+      maxValue = 1
+    }
 
-    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
       maxValue,
       minValue,
       axisWidth: valueAxisWidth,
-      scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+      // scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+      scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
       scaleRange: [0, 1] // 不使用dataFormatter設定
     })
     
@@ -104,6 +110,261 @@ export const gridComputedLayoutDataObservable = ({ computedData$, fullDataFormat
   )
 }
 
+export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
+  fullDataFormatter$: Observable<DataFormatterGrid>
+  layout$: Observable<Layout>
+}): Observable<{
+  width: number;
+  height: number;
+}> => {
+  const destroy$ = new Subject()
+
+  function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
+    xAxisPosition: AxisPosition
+    yAxisPosition: AxisPosition
+    width: number
+    height: number
+  }) {
+    if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
+      return { width, height }
+    } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
+      return {
+        width: height,
+        height: width
+      }
+    } else {
+      // default
+      return { width, height }
+    }
+  }
+
+  return new Observable(subscriber => {
+    combineLatest({
+      fullDataFormatter: fullDataFormatter$,
+      layout: layout$
+    }).pipe(
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
+    ).subscribe(data => {
+      
+      const axisSize = calcAxesSize({
+        xAxisPosition: data.fullDataFormatter.groupAxis.position,
+        yAxisPosition: data.fullDataFormatter.valueAxis.position,
+        width: data.layout.width,
+        height: data.layout.height,
+      })
+
+      subscriber.next(axisSize)
+
+      return function unsubscribe () {
+        destroy$.next(undefined)
+      }
+    })
+  })
+}
+
+// export const gridHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
+//   computedData$: Observable<ComputedDataTypeMap<'grid'>>
+//   fullChartParams$: Observable<ChartParams>
+//   event$: Subject<any>
+// }): Observable<string[]> => {
+//   const datumList$ = computedData$.pipe(
+//     map(d => d.flat())
+//   )
+//   return highlightObservable ({ datumList$, fullChartParams$, event$ })
+// }
+
+export const gridSeriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data
+        .filter(series => series.length)
+        .map(series => {
+          return series[0].seriesLabel
+        })
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      const visibleComputedData = data
+        .map(d => {
+          return d.filter(_d => {
+            return _d.visible == true
+          })
+        })
+        .filter(d => d.length)
+      return visibleComputedData
+    })
+  )
+}
+
+export const gridVisibleComputedLayoutDataObservable = ({ computedLayoutData$ }: { computedLayoutData$: Observable<ComputedLayoutDataGrid> }) => {
+  return computedLayoutData$.pipe(
+    map(data => {
+      const visibleComputedData = data
+        .map(d => {
+          return d.filter(_d => {
+            return _d.visible == true
+          })
+        })
+        .filter(d => d.length)
+      return visibleComputedData
+    })
+  )
+}
+
+// 所有container位置（對應series）
+export const gridContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'grid'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+  layout$: Observable<Layout>
+}): Observable<ContainerPositionScaled[]> => {
+
+  const gridContainerPosition$ = combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      
+      if (data.fullDataFormatter.separateSeries) {
+        // -- 依slotIndexes計算 --
+        return calcGridContainerLayout(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 = calcGridContainerLayout(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,
+        //   }
+        // })
+      }
+    })
+  )
+
+  return gridContainerPosition$
+}
+
+// 將原本的value全部替換成加總後的value
+export const computedStackedDataObservables = ({ isSeriesSeprate$, computedData$ }: {
+  isSeriesSeprate$: Observable<boolean>
+  computedData$: Observable<ComputedDataGrid>
+}): Observable<ComputedDataGrid> => {
+  const stackedData$: Observable<ComputedDataGrid> = computedData$.pipe(
+    map(data => {
+      // 將同一group的value加總起來
+      const stackedValue = new Array(data[0] ? data[0].length : 0)
+        .fill(null)
+        .map((_, i) => {
+          return data.reduce((prev, current) => {
+            if (current && current[i]) {
+              const currentValue = current[i].value == null || current[i].visible == false
+                ? 0
+                : current[i].value!
+              return prev + currentValue
+            }
+            return prev
+          }, 0)
+        })
+      // 將原本的value全部替換成加總後的value
+      const computedData = data.map((series, seriesIndex) => {
+        return series.map((d, i) => {
+          return {
+            ...d,
+            value: stackedValue[i],
+          }
+        })
+      })
+      return computedData
+    }),
+  )
+
+  return isSeriesSeprate$.pipe(
+    switchMap(isSeriesSeprate => {
+      return iif(() => isSeriesSeprate, computedData$, stackedData$)
+    })
+  )
+}
+
+export const groupScaleDomainValueObservable = ({ computedData$, fullDataFormatter$ }: {
+  computedData$: Observable<ComputedDataGrid>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+}): Observable<[number, number]> => {
+  return combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      const groupAxis = data.fullDataFormatter.groupAxis
+      const groupMin = 0
+      const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
+      // const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'min'
+      //   ? groupMin - groupAxis.scalePadding
+      //   : groupAxis.scaleDomain[0] as number - groupAxis.scalePadding
+      const groupScaleDomainMin = groupAxis.scaleDomain[0] - groupAxis.scalePadding
+      const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + groupAxis.scalePadding
+        : groupAxis.scaleDomain[1] as number + groupAxis.scalePadding
+      
+      return [groupScaleDomainMin, groupScaleDomainMax]
+    })
+  )
+}
+
+export const filteredMinMaxValueObservable = ({ computedData$, groupScaleDomainValue$ }: {
+  computedData$: Observable<ComputedDataGrid>
+  // fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
+  groupScaleDomainValue$: Observable<[number, number]>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    // fullDataFormatter: fullDataFormatter$,
+    groupScaleDomainValue: groupScaleDomainValue$
+  }).pipe(
+    map(data => {
+      const filteredData = data.computedData.map((d, i) => {
+        return d.filter((_d, _i) => {
+          return _i >= data.groupScaleDomainValue[0] && _i <= data.groupScaleDomainValue[1] && _d.visible == true
+        })
+      })
+    
+      const filteredMinMax = getMinMaxGrid(filteredData)
+      // if (filteredMinMax[0] === filteredMinMax[1]) {
+      //   filteredMinMax[0] = filteredMinMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      // }
+      return filteredMinMax
+    }),
+  )
+}
+
 export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
   layout$: Observable<Layout>
@@ -211,8 +472,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
       switchMap(async (d) => d),
     ).subscribe(data => {
       const axesTransformData = calcAxesTransform({
-        xAxis: data.fullDataFormatter.grid.groupAxis,
-        yAxis: data.fullDataFormatter.grid.valueAxis,
+        xAxis: data.fullDataFormatter.groupAxis,
+        yAxis: data.fullDataFormatter.valueAxis,
         width: data.layout.width,
         height: data.layout.height
       })
@@ -250,17 +511,21 @@ export const gridAxesReverseTransformObservable = ({ gridAxesTransform$ }: {
   )
 }
 
-export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+export const gridGraphicTransformObservable = ({ computedData$, groupScaleDomainValue$, filteredMinMaxValue$, fullDataFormatter$, layout$ }: {
   computedData$: Observable<ComputedDataTypeMap<'grid'>>
+  groupScaleDomainValue$: Observable<[number, number]>
+  filteredMinMaxValue$: Observable<[number, number]>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
   layout$: Observable<Layout>
 }): Observable<TransformData> => {
   const destroy$ = new Subject()
 
-  function calcGridDataAreaTransform ({ data, groupAxis, valueAxis, width, height }: {
+  function calcGridDataAreaTransform ({ data, groupAxis, valueAxis, groupScaleDomainValue, filteredMinMaxValue, width, height }: {
     data: ComputedDataTypeMap<'grid'>
     groupAxis: DataFormatterGroupAxis
     valueAxis: DataFormatterValueAxis
+    groupScaleDomainValue: [number, number],
+    filteredMinMaxValue: [number, number],
     width: number
     height: number
   }): TransformData {
@@ -275,20 +540,17 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
       : height
     const groupMin = 0
     const groupMax = data[0] ? data[0].length - 1 : 0
-    // const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'min'
-    //   ? groupMin - groupAxis.scalePadding
-    //   : groupAxis.scaleDomain[0] as number - groupAxis.scalePadding
-    const groupScaleDomainMin = groupAxis.scaleDomain[0] - groupAxis.scalePadding
-    const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'max'
-      ? groupMax + groupAxis.scalePadding
-      : groupAxis.scaleDomain[1] as number + groupAxis.scalePadding
+    // const groupScaleDomainMin = groupAxis.scaleDomain[0] - groupAxis.scalePadding
+    // const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'max'
+    //   ? groupMax + groupAxis.scalePadding
+    //   : groupAxis.scaleDomain[1] as number + groupAxis.scalePadding
     
-    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    const groupScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
       maxValue: groupMax,
       minValue: groupMin,
       axisWidth: groupAxisWidth,
       // scaleDomain: groupAxis.scaleDomain,
-      scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
+      scaleDomain: groupScaleDomainValue,
       scaleRange: [0, 1]
     })
   
@@ -306,36 +568,45 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
     }
 
     // -- valueScale --
-    const filteredData = data.map((d, i) => {
-      return d.filter((_d, _i) => {
-        return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax && _d.visible == true
-      })
-    })
+    // const filteredData = data.map((d, i) => {
+    //   return d.filter((_d, _i) => {
+    //     return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax && _d.visible == true
+    //   })
+    // })
   
-    const filteredMinAndMax = getMinAndMaxGrid(filteredData)
-    if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-      filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+    // const filteredMinMax = getMinMaxGrid(filteredData)
+    if (filteredMinMaxValue[0] === filteredMinMaxValue[1] && filteredMinMaxValue[1] === 0) {
+      // filteredMinMaxValue[0] = filteredMinMaxValue[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      filteredMinMaxValue[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
     }
   
     const valueAxisWidth = (valueAxis.position === 'left' || valueAxis.position === 'right')
       ? height
       : width
   
-    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-      maxValue: filteredMinAndMax[1],
-      minValue: filteredMinAndMax[0],
+    const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+      maxValue: filteredMinMaxValue[1],
+      minValue: filteredMinMaxValue[0],
       axisWidth: valueAxisWidth,
       scaleDomain: valueAxis.scaleDomain,
       scaleRange: valueAxis.scaleRange
     })
-  
+  // console.log({
+  //   maxValue: filteredMinMaxValue[1],
+  //   minValue: filteredMinMaxValue[0],
+  //   axisWidth: valueAxisWidth,
+  //   scaleDomain: valueAxis.scaleDomain,
+  //   scaleRange: valueAxis.scaleRange
+  // })
     // -- translateY, scaleY --
-    const minAndMax = getMinAndMaxGrid(data)
-    if (minAndMax[0] === minAndMax[1]) {
-      minAndMax[0] = minAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+    const minMax = getMinMaxGrid(data)
+    if (minMax[0] === minMax[1] && minMax[1] === 0) {
+      // minMax[0] = minMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+      minMax[1] = 1 // 避免最大及最小值同等於 0 造成無法計算scale
     }
-    const rangeMinY = valueScale(minAndMax[0])
-    const rangeMaxY = valueScale(minAndMax[1])
+    // const rangeMinY = valueScale(minMax[0])
+    const rangeMinY = valueScale(minMax[0] > 0 ? 0 : minMax[0]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
+    const rangeMaxY = valueScale(minMax[1] < 0 ? 0 : minMax[1]) // * 因為原本的座標就是以 0 到最大值或最小值範範圍計算的，所以這邊也是用同樣的方式計算
     translateY = rangeMinY
     const gHeight = rangeMaxY - rangeMinY
     scaleY = gHeight / valueAxisWidth
@@ -353,6 +624,8 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
   return new Observable(subscriber => {
     combineLatest({
       computedData: computedData$,
+      groupScaleDomainValue: groupScaleDomainValue$,
+      filteredMinMaxValue: filteredMinMaxValue$,
       fullDataFormatter: fullDataFormatter$,
       layout: layout$
     }).pipe(
@@ -361,8 +634,10 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
     ).subscribe(data => {
       const dataAreaTransformData = calcGridDataAreaTransform ({
         data: data.computedData,
-        groupAxis: data.fullDataFormatter.grid.groupAxis,
-        valueAxis: data.fullDataFormatter.grid.valueAxis,
+        groupAxis: data.fullDataFormatter.groupAxis,
+        valueAxis: data.fullDataFormatter.valueAxis,
+        groupScaleDomainValue: data.groupScaleDomainValue,
+        filteredMinMaxValue: data.filteredMinMaxValue,
         width: data.layout.width,
         height: data.layout.height
       })
@@ -377,7 +652,7 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
 }
 
 export const gridGraphicReverseScaleObservable = ({ gridContainerPosition$, gridAxesTransform$, gridGraphicTransform$ }: {
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
 }): Observable<[number, number][]> => {
@@ -406,207 +681,4 @@ export const gridGraphicReverseScaleObservable = ({ gridContainerPosition$, grid
       }
     }),
   )
-}
-
-export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
-  fullDataFormatter$: Observable<DataFormatterGrid>
-  layout$: Observable<Layout>
-}): Observable<{
-  width: number;
-  height: number;
-}> => {
-  const destroy$ = new Subject()
-
-  function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
-    xAxisPosition: AxisPosition
-    yAxisPosition: AxisPosition
-    width: number
-    height: number
-  }) {
-    if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
-      return { width, height }
-    } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
-      return {
-        width: height,
-        height: width
-      }
-    } else {
-      // default
-      return { width, height }
-    }
-  }
-
-  return new Observable(subscriber => {
-    combineLatest({
-      fullDataFormatter: fullDataFormatter$,
-      layout: layout$
-    }).pipe(
-      takeUntil(destroy$),
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-      
-      const axisSize = calcAxesSize({
-        xAxisPosition: data.fullDataFormatter.grid.groupAxis.position,
-        yAxisPosition: data.fullDataFormatter.grid.valueAxis.position,
-        width: data.layout.width,
-        height: data.layout.height,
-      })
-
-      subscriber.next(axisSize)
-
-      return function unsubscribe () {
-        destroy$.next(undefined)
-      }
-    })
-  })
-}
-
-// export const gridHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
-//   computedData$: Observable<ComputedDataTypeMap<'grid'>>
-//   fullChartParams$: Observable<ChartParams>
-//   event$: Subject<any>
-// }): Observable<string[]> => {
-//   const datumList$ = computedData$.pipe(
-//     map(d => d.flat())
-//   )
-//   return highlightObservable ({ datumList$, fullChartParams$, event$ })
-// }
-
-export const gridSeriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
-  return computedData$.pipe(
-    map(data => {
-      return data
-        .filter(series => series.length)
-        .map(series => {
-          return series[0].seriesLabel
-        })
-    }),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
-}
-
-export const gridVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'grid'>> }) => {
-  return computedData$.pipe(
-    map(data => {
-      const visibleComputedData = data
-        .map(d => {
-          return d.filter(_d => {
-            return _d.visible == true
-          })
-        })
-        .filter(d => d.length)
-      return visibleComputedData
-    })
-  )
-}
-
-export const gridVisibleComputedLayoutDataObservable = ({ computedLayoutData$ }: { computedLayoutData$: Observable<ComputedLayoutDataGrid> }) => {
-  return computedLayoutData$.pipe(
-    map(data => {
-      const visibleComputedData = data
-        .map(d => {
-          return d.filter(_d => {
-            return _d.visible == true
-          })
-        })
-        .filter(d => d.length)
-      return visibleComputedData
-    })
-  )
-}
-
-// 所有container位置（對應series）
-export const gridContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
-  computedData$: Observable<ComputedDataTypeMap<'grid'>>
-  fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
-  layout$: Observable<Layout>
-}): Observable<GridContainerPosition[]> => {
-
-  const gridContainerPosition$ = combineLatest({
-    computedData: computedData$,
-    fullDataFormatter: fullDataFormatter$,
-    layout: layout$,
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      
-      if (data.fullDataFormatter.grid.separateSeries) {
-        // -- 依slotIndexes計算 --
-        return calcGridContainerLayout(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 = calcGridContainerLayout(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,
-        //   }
-        // })
-      }
-    })
-  )
-
-  return gridContainerPosition$
-}
-
-// 將原本的value全部替換成加總後的value
-export const computedStackedDataObservables = ({ isSeriesSeprate$, computedData$ }: {
-  isSeriesSeprate$: Observable<boolean>
-  computedData$: Observable<ComputedDataGrid>
-}): Observable<ComputedDataGrid> => {
-  const stackedData$: Observable<ComputedDataGrid> = computedData$.pipe(
-    map(data => {
-      // 將同一group的value加總起來
-      const stackedValue = new Array(data[0] ? data[0].length : 0)
-        .fill(null)
-        .map((_, i) => {
-          return data.reduce((prev, current) => {
-            if (current && current[i]) {
-              const currentValue = current[i].value == null || current[i].visible == false
-                ? 0
-                : current[i].value!
-              return prev + currentValue
-            }
-            return prev
-          }, 0)
-        })
-      // 將原本的value全部替換成加總後的value
-      const computedData = data.map((series, seriesIndex) => {
-        return series.map((d, i) => {
-          return {
-            ...d,
-            value: stackedValue[i],
-          }
-        })
-      })
-      return computedData
-    }),
-  )
-
-  return isSeriesSeprate$.pipe(
-    switchMap(isSeriesSeprate => {
-      return iif(() => isSeriesSeprate, computedData$, stackedData$)
-    })
-  )
 }