@orbcharts/plugins-basic 3.0.6 → 3.0.7

package/src/multiValue/multiValueObservables.ts

@@ -1,782 +1,782 @@
-import * as d3 from 'd3'
-import {
-  Observable,
-  Subject,
-  debounceTime,
-  iif,
-  of,
-  takeUntil,
-  filter,
-  map,
-  switchMap,
-  combineLatest,
-  merge,
-  shareReplay,
-  distinctUntilChanged
-} from 'rxjs'
-import type {
-  ChartParams,
-  HighlightTarget,
-  DataFormatterMultiValue,
-  ComputedDataMultiValue,
-  ComputedDatumMultiValue,
-  ComputedXYDatumMultiValue,
-  ComputedXYDataMultiValue,
-  TransformData,
-  ContainerSize,
-  ContainerPositionScaled,
-  Layout,
-} from '../../lib/core-types'
-import {
-  createAxisToLabelIndexScale,
-  createAxisToValueScale,
-  createLabelToAxisScale,
-  createValueToAxisScale,
-} from '../../lib/core'
-import { getClassName, getUniID } from '../utils/orbchartsUtils'
-import { d3EventObservable } from '../utils/observables'
-
-// 建立 multiValue 主要的 selection 
-export const multiValueSelectionsObservable = ({ selection, pluginName, clipPathID, categoryLabels$, containerPosition$, graphicTransform$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  clipPathID: string
-  // computedData$: Observable<ComputedDataMultiValue>
-  categoryLabels$: Observable<string[]>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  // multiValueAxesTransform$: Observable<TransformData>
-  graphicTransform$: Observable<TransformData>
-}) => {
-  const categoryClassName = getClassName(pluginName, 'category')
-  const axesClassName = getClassName(pluginName, 'axes')
-  const graphicClassName = getClassName(pluginName, 'graphic')
-
-  // <g> category selection（container排放位置）
-  //   <g> axes selection（圖軸）
-  //     <defs> clipPath selection
-  //     <g> graphic selection（圖形 scale 範圍的變形）
-  const categorySelection$ = categoryLabels$.pipe(
-    map((categoryLabels, i) => {
-      return selection
-        .selectAll<SVGGElement, string>(`g.${categoryClassName}`)
-        .data(categoryLabels, d => d)
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .classed(categoryClassName, true)
-              .each((d, i, g) => {
-                const axesSelection = d3.select(g[i])
-                  .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${axesClassName}`)
-                  .data([i])
-                  .join(
-                    enter => {
-                      return enter
-                        .append('g')
-                        .classed(axesClassName, true)
-                        .attr('clip-path', `url(#${clipPathID})`)
-                        .each((d, i, g) => {
-                          const defsSelection = d3.select(g[i])
-                            .selectAll<SVGDefsElement, any>('defs')
-                            .data([i])
-                            .join('defs')
-            
-                          const graphicGSelection = d3.select(g[i])
-                            .selectAll<SVGGElement, any>('g')
-                            .data([i])
-                            .join('g')
-                            .classed(graphicClassName, true)
-                        })
-                    },
-                    update => update,
-                    exit => exit.remove()
-                  )
-              })
-          },
-          update => update,
-          exit => exit.remove()
-        )
-    }),
-    shareReplay(1)
-  )
-
-  // <g> category selection
-  combineLatest({
-    categorySelection: categorySelection$,
-    containerPosition: containerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d)
-  ).subscribe(data => {
-    data.categorySelection
-      .transition()
-      .attr('transform', (d, i) => {
-        const containerPosition = data.containerPosition[i] ?? data.containerPosition[0]
-        const translate = containerPosition.translate
-        const scale = containerPosition.scale
-        return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-      })
-  })
-
-  // <g> axes selection
-  const axesSelection$ = categorySelection$.pipe(
-    map(categorySelection => {
-      return categorySelection
-        .select<SVGGElement>(`g.${axesClassName}`)
-    }),
-    shareReplay(1)
-  )
-
-  // <defs> clipPath selection
-  const defsSelection$ = axesSelection$.pipe(
-    map(axesSelection => {
-      return axesSelection.select<SVGDefsElement>('defs')
-    }),
-    shareReplay(1)
-  )
-
-  // <g> graphic selection
-  const graphicGSelection$ = combineLatest({
-    axesSelection: axesSelection$,
-    graphicTransform: graphicTransform$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      const graphicGSelection = data.axesSelection
-        .select<SVGGElement>(`g.${graphicClassName}`)
-      graphicGSelection
-        .transition()
-        .duration(50)
-        .style('transform', data.graphicTransform.value)
-      return graphicGSelection
-    }),
-    shareReplay(1)
-  )
-
-  return {
-    categorySelection$,
-    axesSelection$,
-    defsSelection$,
-    graphicGSelection$
-  }
-}
-
-// 建立 multiValue 主要的 selection - 只取無scale的container selection
-export const multiValueContainerSelectionsObservable = ({ selection, pluginName, clipPathID, computedData$, containerPosition$, isCategorySeprate$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  clipPathID: string | null
-  computedData$: Observable<ComputedDataMultiValue>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  isCategorySeprate$: Observable<boolean>
-}) => {
-  const containerClassName = getClassName(pluginName, 'container')
-
-  const containerSelection$ = combineLatest({
-    computedData: computedData$.pipe(
-      distinctUntilChanged((a, b) => {
-        // 只有當series的數量改變時，才重新計算
-        return a.length === b.length
-      }),
-    ),
-    isCategorySeprate: isCategorySeprate$
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      return data.isCategorySeprate
-        // category分開的時候顯示各別axis
-        ? data.computedData
-        // category合併的時候只顯示第一個axis
-        : [data.computedData[0]]
-    }),
-    map((computedData, i) => {
-      return selection
-        .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${containerClassName}`)
-        .data(computedData, d => (d && d[0]) ? d[0].categoryIndex : i)
-        .join('g')
-        .classed(containerClassName, true)
-        .attr('clip-path', _ => clipPathID ? `url(#${clipPathID})` : 'none')
-    }),
-    shareReplay(1)
-  )
-
-  combineLatest({
-    containerSelection: containerSelection$,
-    gridContainerPosition: containerPosition$
-  }).pipe(
-    switchMap(async d => d)
-  ).subscribe(data => {
-    data.containerSelection
-      .attr('transform', (d, i) => {
-        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
-        const translate = gridContainerPosition.translate
-        const scale = gridContainerPosition.scale
-        // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-        return `translate(${translate[0]}, ${translate[1]})`
-      })
-      // .attr('opacity', 0)
-      // .transition()
-      // .attr('opacity', 1)
-  })
-
-  return containerSelection$
-}
-
-
-export const multiValueXYPositionObservable = ({ rootSelection, fullDataFormatter$, filteredXYMinMaxData$, containerPosition$, containerSize$, layout$ }: {
-  rootSelection: d3.Selection<any, unknown, any, unknown>
-  fullDataFormatter$: Observable<DataFormatterMultiValue>
-  // computedData$: Observable<ComputedDataMultiValue>
-  // xyMinMax$: Observable<{ minX: number, maxX: number, minY: number, maxY: number }>
-  filteredXYMinMaxData$: Observable<{
-    minXDatum: ComputedXYDatumMultiValue
-    maxXDatum: ComputedXYDatumMultiValue
-    minYDatum: ComputedXYDatumMultiValue
-    maxYDatum: ComputedXYDatumMultiValue
-  }>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  containerSize$: Observable<ContainerSize>
-  layout$: Observable<Layout>
-}) => {
-  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove').pipe(
-    debounceTime(2) // 避免過度頻繁觸發，實測時沒加電腦容易卡頓
-  )
-
-  // const columnAmount$ = containerPosition$.pipe(
-  //   map(containerPosition => {
-  //     const maxColumnIndex = containerPosition.reduce((acc, current) => {
-  //       return current.columnIndex > acc ? current.columnIndex : acc
-  //     }, 0)
-  //     return maxColumnIndex + 1
-  //   }),
-  //   distinctUntilChanged(),
-  //   shareReplay(1)
-  // )
-
-  // const rowAmount$ = containerPosition$.pipe(
-  //   map(containerPosition => {
-  //     const maxRowIndex = containerPosition.reduce((acc, current) => {
-  //       return current.rowIndex > acc ? current.rowIndex : acc
-  //     }, 0)
-  //     return maxRowIndex + 1
-  //   }),
-  //   distinctUntilChanged(),
-  //   shareReplay(1)
-  // )
-
-  // const xyScale$ = combineLatest({
-  //   layout: layout$,
-  //   filteredXYMinMaxData: filteredXYMinMaxData$,
-  //   fullDataFormatter: fullDataFormatter$,
-  //   columnAmount: columnAmount$,
-  //   rowAmount: rowAmount$
-  // }).pipe(
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     const xScale = createAxisToValueScale({
-  //       maxValue: data.filteredXYMinMaxData.maxXDatum.value[0],
-  //       minValue: data.filteredXYMinMaxData.minXDatum.value[0],
-  //       axisWidth: data.layout.width,
-  //       scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
-  //       scaleRange: data.fullDataFormatter.xAxis.scaleRange,
-  //     })
-  //     const yScale = createAxisToValueScale({
-  //       maxValue: data.filteredXYMinMaxData.maxYDatum.value[1],
-  //       minValue: data.filteredXYMinMaxData.minYDatum.value[1],
-  //       axisWidth: data.layout.height,
-  //       scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
-  //       scaleRange: data.fullDataFormatter.yAxis.scaleRange,
-  //       reverse: true
-  //     })
-  //     return { xScale, yScale }
-  //   })
-  // )
-
-  const xyScale$: Observable<{
-    xScale: d3.ScaleLinear<number, number, never>;
-    yScale: d3.ScaleLinear<number, number, never>;
-  }> = new Observable(subscriber => {
-    combineLatest({
-      // layout: layout$,
-      containerSize: containerSize$,
-      filteredXYMinMaxData: filteredXYMinMaxData$,
-      fullDataFormatter: fullDataFormatter$,
-      // columnAmount: columnAmount$,
-      // rowAmount: rowAmount$
-    }).pipe(
-      switchMap(async d => d),
-    ).subscribe(data => {
-      const xValueIndex = data.fullDataFormatter.xAxis.valueIndex
-      const yValueIndex = data.fullDataFormatter.yAxis.valueIndex
-      if (!data.filteredXYMinMaxData.minXDatum || !data.filteredXYMinMaxData.maxXDatum
-        || data.filteredXYMinMaxData.minXDatum.value[xValueIndex] == null || data.filteredXYMinMaxData.maxXDatum.value[xValueIndex] == null
-        || !data.filteredXYMinMaxData.minYDatum || !data.filteredXYMinMaxData.maxYDatum
-        || data.filteredXYMinMaxData.minYDatum.value[yValueIndex] == null || data.filteredXYMinMaxData.maxYDatum.value[yValueIndex] == null
-      ) {
-        return
-      }
-      const xScale = createAxisToValueScale({
-        maxValue: data.filteredXYMinMaxData.maxXDatum.value[xValueIndex],
-        minValue: data.filteredXYMinMaxData.minXDatum.value[xValueIndex],
-        axisWidth: data.containerSize.width,
-        scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
-        scaleRange: data.fullDataFormatter.xAxis.scaleRange,
-      })
-      const yScale = createAxisToValueScale({
-        maxValue: data.filteredXYMinMaxData.maxYDatum.value[yValueIndex],
-        minValue: data.filteredXYMinMaxData.minYDatum.value[yValueIndex],
-        axisWidth: data.containerSize.height,
-        scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
-        scaleRange: data.fullDataFormatter.yAxis.scaleRange,
-        reverse: true
-      })
-      subscriber.next({ xScale, yScale })
-    })
-  })
-
-  const axisValue$ = combineLatest({
-    rootMousemove: rootMousemove$,
-    // columnAmount: columnAmount$,
-    // rowAmount: rowAmount$,
-    layout: layout$,
-    containerPosition: containerPosition$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
-      // return {
-      //   x: ((data.rootMousemove.offsetX - data.layout.left) / data.containerPosition[0].scale[0])
-      //     % (data.layout.rootWidth / data.columnAmount / data.containerPosition[0].scale[0]),
-      //   y: ((data.rootMousemove.offsetY - data.layout.top) / data.containerPosition[0].scale[1])
-      //     % (data.layout.rootHeight / data.rowAmount / data.containerPosition[0].scale[1])
-      // }
-      const x = (() => {
-        let x = data.rootMousemove.offsetX
-        const rangeArr = data.containerPosition
-          .map((d, i) => [d.translate[0], data.containerPosition[i + 1]?.translate[0] ?? data.layout.rootWidth])
-          .filter(d => d[0] < d[1])
-        const range = rangeArr.find(d => x >= d[0] && x <= d[1])
-        if (range) {
-          x = x - range[0]
-        }
-        return x - data.layout.left
-      })()
-      
-      const y = (() => {
-        let y = data.rootMousemove.offsetY
-        const rangeArr = data.containerPosition
-          .map((d, i) => [d.translate[1], data.containerPosition[i + 1]?.translate[1] ?? data.layout.rootHeight])
-          .filter(d => d[0] < d[1])
-        const range = rangeArr.find(d => y >= d[0] && y <= d[1])
-        if (range) {
-          y = y - range[0]
-        }
-        return y - data.layout.top
-      })()
-
-      return { x, y }
-    })
-  )
-
-  return combineLatest({
-    xyScale: xyScale$,
-    axisValue: axisValue$,
-    containerPosition: containerPosition$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      return {
-        x: data.axisValue.x / data.containerPosition[0].scale[0],
-        y: data.axisValue.y / data.containerPosition[0].scale[1],
-        xValue: data.xyScale.xScale(data.axisValue.x),
-        yValue: data.xyScale.yScale(data.axisValue.y)
-      }
-    })
-  )
-}
-
-export const ordinalPositionObservable = ({ rootSelection, ordinalScaleDomain$, ordinalScale$, ordinalPadding$, containerSize$, containerPosition$, layout$ }: {
-  rootSelection: d3.Selection<any, unknown, any, unknown>
-  ordinalScaleDomain$: Observable<[number, number]>
-  ordinalScale$: Observable<d3.ScaleLinear<number, number>>
-  ordinalPadding$: Observable<number>
-  containerSize$: Observable<ContainerSize>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  layout$: Observable<Layout>
-}) => {
-  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove').pipe(
-    debounceTime(2) // 避免過度頻繁觸發，實測時沒加電腦容易卡頓
-  )
-
-  // const columnAmount$ = containerPosition$.pipe(
-  //   map(containerPosition => {
-  //     const maxColumnIndex = containerPosition.reduce((acc, current) => {
-  //       return current.columnIndex > acc ? current.columnIndex : acc
-  //     }, 0)
-  //     return maxColumnIndex + 1
-  //   }),
-  //   distinctUntilChanged(),
-  //   shareReplay(1)
-  // )
-
-  const axisX$ = combineLatest({
-    rootMousemove: rootMousemove$,
-    // columnAmount: columnAmount$,
-    layout: layout$,
-    // containerSize: containerSize$,
-    containerPosition: containerPosition$,
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
-      // return ((data.rootMousemove.offsetX - data.layout.left) / data.containerPosition[0].scale[0])
-      //   % (data.layout.rootWidth / data.columnAmount / data.containerPosition[0].scale[0])
-
-      let x = data.rootMousemove.offsetX
-      const rangeArr = data.containerPosition
-        .map((d, i) => [d.translate[0], data.containerPosition[i + 1]?.translate[0] ?? data.layout.rootWidth])
-        .filter(d => d[0] < d[1])
-      const range = rangeArr.find(d => x >= d[0] && x <= d[1])
-      if (range) {
-        x = x - range[0]
-      }
-      return x - data.layout.left
-    })
-  )
-
-  const scaleRangeLabels$ = ordinalScaleDomain$.pipe(
-    map(data => {
-      const range = data[1] - data[0] + 1
-      return new Array(range).fill(0).map((d, i) => String(i + data[0]))
-    })
-  )
-
-  return combineLatest({
-    scaleRangeLabels: scaleRangeLabels$,
-    // layout: layout$,
-    containerSize: containerSize$,
-    axisX: axisX$,
-    ordinalScale: ordinalScale$,
-    ordinalPadding: ordinalPadding$,
-    ordinalScaleDomain: ordinalScaleDomain$,
-    containerPosition: containerPosition$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      // 比例尺座標對應非連續資料索引
-      const xIndexScale = createAxisToLabelIndexScale({
-        axisLabels: data.scaleRangeLabels,
-        axisWidth: data.containerSize.width,
-        padding: 0.5,
-        reverse: false
-      })
-
-      const seq = xIndexScale(data.axisX)
-      const xIndex = seq + data.ordinalScaleDomain[0]
-      const x = (data.ordinalScale(xIndex) + data.ordinalPadding) / data.containerPosition[0].scale[0]
-
-      return {
-        x: x,
-        xValue: xIndex,
-      }
-    })
-  )
-}
-
-// 排名數量
-export const computedRankingAmountObservable = ({ containerSize$, visibleComputedData$, textSizePx$, rankingAmount$ }: {
-  containerSize$: Observable<ContainerSize>
-  visibleComputedData$: Observable<ComputedDatumMultiValue[][]>
-  textSizePx$: Observable<number>
-  rankingAmount$: Observable<'auto' | number>
-}) => {
-  const minLineHeightObservable = ({ textSizePx$ }: {
-    textSizePx$: Observable<number>
-  }) => {
-    return textSizePx$.pipe(
-      map(textSizePx => textSizePx * 2), // 2倍行高
-      shareReplay(1)
-    )
-  }
-
-  const containerHeightObservable = ({ minLineHeight$, containerSize$ }: {
-    minLineHeight$: Observable<number>
-    containerSize$: Observable<ContainerSize>
-  }) => {
-    return combineLatest({
-      minLineHeight: minLineHeight$,
-      containerSize: containerSize$
-    }).pipe(
-      switchMap(async (d) => d),
-      map(data => {
-        // 避免過小造成計算 scale 錯誤
-        return data.containerSize.height > data.minLineHeight
-          ? data.containerSize.height
-          : data.minLineHeight
-      }),
-      distinctUntilChanged(),
-      shareReplay(1)
-    )
-  }
-
-  const rankingAmountLimitObservable = ({ minLineHeight$, containerHeight$ }: {
-    containerHeight$: Observable<number>
-    minLineHeight$: Observable<number>
-  }) => {
-
-    return combineLatest({
-      minLineHeight: minLineHeight$,
-      containerHeight: containerHeight$
-    }).pipe(
-      switchMap(async (d) => d),
-      map(data => {
-        const labelAmountLimit = Math.floor(data.containerHeight / data.minLineHeight)
-        return labelAmountLimit
-      }),
-      distinctUntilChanged(),
-      shareReplay(1)
-    )
-  }
-
-  const minLineHeight$ = minLineHeightObservable({ textSizePx$ })
-
-  const containerHeight$ = containerHeightObservable({
-    minLineHeight$,
-    containerSize$
-  })
-
-  const rankingAmountLimit$ = rankingAmountLimitObservable({
-    containerHeight$,
-    minLineHeight$
-  })
-
-  // 計算要排名的數量
-  return rankingAmount$.pipe(
-    switchMap(rankingAmount => {
-      return iif(
-        () => rankingAmount === 'auto',
-        // 'auto': 不超過限制
-        combineLatest({
-          visibleComputedData: visibleComputedData$,
-          rankingAmountLimit: rankingAmountLimit$,
-        }).pipe(
-          switchMap(async d => d),
-          map(data => {
-            const rankingAmountArr = data.visibleComputedData.map(categoryData => {
-              return Math.min(data.rankingAmountLimit, categoryData.length)
-            })
-            return Math.max(...rankingAmountArr) // 取所有 container 計算出來的最大值
-          })
-        ),
-        // number: 指定數量
-        rankingAmount$ as Observable<number>,
-      )
-    })
-  )
-}
-
-export const rankingItemHeightObservable = ({ containerSize$, textSizePx$, computedRankingAmount$ }: {
-  containerSize$: Observable<ContainerSize>
-  // visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
-  textSizePx$: Observable<number>
-  // rankingAmount$: Observable<'auto' | number>
-  computedRankingAmount$: Observable<number>
-}) => {
-  const minLineHeightObservable = ({ textSizePx$ }: {
-    textSizePx$: Observable<number>
-  }) => {
-    return textSizePx$.pipe(
-      map(textSizePx => textSizePx * 2), // 2倍行高
-      shareReplay(1)
-    )
-  }
-
-  const containerHeightObservable = ({ minLineHeight$, containerSize$ }: {
-    minLineHeight$: Observable<number>
-    containerSize$: Observable<ContainerSize>
-  }) => {
-    return combineLatest({
-      minLineHeight: minLineHeight$,
-      containerSize: containerSize$
-    }).pipe(
-      switchMap(async (d) => d),
-      map(data => {
-        // 避免過小造成計算 scale 錯誤
-        return data.containerSize.height > data.minLineHeight
-          ? data.containerSize.height
-          : data.minLineHeight
-      }),
-      distinctUntilChanged(),
-      shareReplay(1)
-    )
-  }
-
-  const minLineHeight$ = minLineHeightObservable({ textSizePx$ })
-
-  const containerHeight$ = containerHeightObservable({
-    minLineHeight$,
-    containerSize$
-  })
-
-  return combineLatest({
-    containerHeight: containerHeight$,
-    computedRankingAmount: computedRankingAmount$
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      // // 依每個 category 計算 scale
-      // return data.visibleComputedRankingData.map((categoryData, i) => {
-      //   const rankingAmount = data.computedRankingAmountList[i]
-      //   const rankingItemHeight = data.containerHeight / rankingAmount
-      //   return rankingItemHeight
-      // })
-      const rankingItemHeight = data.containerHeight / data.computedRankingAmount
-      return rankingItemHeight
-    })
-  )
-}
-
-export const rankingScaleListObservable = ({ visibleComputedRankingData$, rankingItemHeight$ }: {
-  visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
-  rankingItemHeight$: Observable<number>
-}) => {
-
-  return combineLatest({
-    visibleComputedRankingData: visibleComputedRankingData$,
-    rankingItemHeight: rankingItemHeight$,
-  }).pipe(
-    switchMap(async (d) => d),
-    map(data => {
-      // 依每個 category 計算 scale
-      return data.visibleComputedRankingData.map((categoryData, i) => {
-        const allLabelAmount = categoryData.length
-        // const rankingItemHeight = data.rankingItemHeightList[i]
-        const totalHeight = data.rankingItemHeight * allLabelAmount // 有可能超出圖軸高度
-        
-        return createLabelToAxisScale({
-          axisLabels: categoryData.map(d => d.label),
-          axisWidth: totalHeight,
-          padding: 0.5
-        })
-      })
-    })
-  )
-}
-
-
-// // Ranking資料 - 有 XY 資料 @Q@ 若沒用到要棄用
-// export const computedRankingWithXYDataObservable = ({ visibleComputedRankingData$, computedRankingAmountList$, xyValueIndex$, layout$ }: {
-//   visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
-//   computedRankingAmountList$: Observable<number[]>
-//   xyValueIndex$: Observable<[number, number]>
-//   layout$: Observable<Layout>
-// }): Observable<ComputedXYDataMultiValue> => {
-
-//   // // 未篩選範圍前的 scale
-//   // function createOriginXScale (xMinMax: { minX: number, maxX: number }, layout: Layout) {
-//   //   let maxValue = xMinMax.maxX
-//   //   let minValue = xMinMax.minX
-//   //   if (minValue === maxValue && maxValue === 0) {
-//   //     // 避免最大及最小值相同造成無法計算scale
-//   //     maxValue = 1
-//   //   }
-//   //   const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-//   //     maxValue,
-//   //     minValue,
-//   //     axisWidth: layout.width,
-//   //     scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
-//   //     scaleRange: [0, 1] // 不使用dataFormatter設定
-//   //   })
-    
-//   //   return valueScale
-//   // }
-
-//   // 未篩選範圍及visible前的 scale
-//   function createOriginYScale (yMinMax: { minY: number, maxY: number }, layout: Layout) {
-//     let maxValue = yMinMax.maxY
-//     let minValue = yMinMax.minY
-//     if (minValue === maxValue && maxValue === 0) {
-//       // 避免最大及最小值相同造成無法計算scale
-//       maxValue = 1
-//     }
-//     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-//       maxValue,
-//       minValue,
-//       axisWidth: layout.height,
-//       scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
-//       scaleRange: [0, 1], // 不使用dataFormatter設定
-//       // reverse: true
-//     })
-    
-//     return valueScale
-//   }
-
-//   return combineLatest({
-//     visibleComputedRankingData: visibleComputedRankingData$,
-//     computedRankingAmountList: computedRankingAmountList$,
-//     xyValueIndex: xyValueIndex$,
-//     layout: layout$
-//   }).pipe(
-//     switchMap(async d => d),
-//     map(data => {
-      
-//       // const maxX = data.visibleComputedRankingData
-//       //   .flat()
-//       //   .reduce((acc, current) => {
-//       //     const maxXIndex = current.value.length - 1
-//       //     return maxXIndex > acc ? maxXIndex : acc
-//       //   }, 0)
-//       // const xMinMax = {
-//       //   minX: 0,
-//       //   maxX
-//       // }
-//       // const xScale = createOriginXScale(xMinMax, data.layout)
-//       // console.log('data.visibleComputedRankingData', data.visibleComputedRankingData)
-//       return data.visibleComputedRankingData
-//         .map((categoryData, categoryIndex) => {
-//           const yMinMax = {
-//             minY: 0,
-//             maxY: data.computedRankingAmountList[categoryIndex]
-//           }
-//           const yScale = createOriginYScale(yMinMax, data.layout)
-
-//           return categoryData.map((datum, datumIndex) => {
-//             return {
-//               ...datum,
-//               // axisX: xScale(datum.value[data.xyValueIndex[0]] ?? 0),
-//               axisX: 0,
-//               // axisY: yScale(datum.value[data.xyValueIndex[1]] ?? 0), // y軸的繪圖座標是從上到下，所以反轉
-//               axisY: yScale(datumIndex),
-//             }
-//           })
-//         })
-//     })
-//   )
-// }
-
-// // Ranking資料 - 有 XY 資料 @Q@ 若沒用到要棄用
-// export const computedRankingWithXYDataObservable = ({ visibleComputedRankingData$, rankingScaleList$ }: {
-//   visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
-//   rankingScaleList$: Observable<d3.ScalePoint<string>[]>
-// }): Observable<ComputedXYDataMultiValue> => {
-
-//   return combineLatest({
-//     visibleComputedRankingData: visibleComputedRankingData$,
-//     rankingScaleList: rankingScaleList$
-//   }).pipe(
-//     switchMap(async d => d),
-//     map(data => {
-//       return data.visibleComputedRankingData
-//         .map((categoryData, categoryIndex) => {
-//           const yScale = data.rankingScaleList[categoryIndex]
-
-//           return categoryData.map((datum, datumIndex) => {
-//             return {
-//               ...datum,
-//               axisX: 0,
-//               axisY: yScale(datum.label),
-//             }
-//           })
-//         })
-//     })
-//   )
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  debounceTime,
+  iif,
+  of,
+  takeUntil,
+  filter,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ChartParams,
+  HighlightTarget,
+  DataFormatterMultiValue,
+  ComputedDataMultiValue,
+  ComputedDatumMultiValue,
+  ComputedXYDatumMultiValue,
+  ComputedXYDataMultiValue,
+  TransformData,
+  ContainerSize,
+  ContainerPositionScaled,
+  Layout,
+} from '../../lib/core-types'
+import {
+  createAxisToLabelIndexScale,
+  createAxisToValueScale,
+  createLabelToAxisScale,
+  createValueToAxisScale,
+} from '../../lib/core'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+import { d3EventObservable } from '../utils/observables'
+
+// 建立 multiValue 主要的 selection 
+export const multiValueSelectionsObservable = ({ selection, pluginName, clipPathID, categoryLabels$, containerPosition$, graphicTransform$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  clipPathID: string
+  // computedData$: Observable<ComputedDataMultiValue>
+  categoryLabels$: Observable<string[]>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  // multiValueAxesTransform$: Observable<TransformData>
+  graphicTransform$: Observable<TransformData>
+}) => {
+  const categoryClassName = getClassName(pluginName, 'category')
+  const axesClassName = getClassName(pluginName, 'axes')
+  const graphicClassName = getClassName(pluginName, 'graphic')
+
+  // <g> category selection（container排放位置）
+  //   <g> axes selection（圖軸）
+  //     <defs> clipPath selection
+  //     <g> graphic selection（圖形 scale 範圍的變形）
+  const categorySelection$ = categoryLabels$.pipe(
+    map((categoryLabels, i) => {
+      return selection
+        .selectAll<SVGGElement, string>(`g.${categoryClassName}`)
+        .data(categoryLabels, d => d)
+        .join(
+          enter => {
+            return enter
+              .append('g')
+              .classed(categoryClassName, true)
+              .each((d, i, g) => {
+                const axesSelection = d3.select(g[i])
+                  .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${axesClassName}`)
+                  .data([i])
+                  .join(
+                    enter => {
+                      return enter
+                        .append('g')
+                        .classed(axesClassName, true)
+                        .attr('clip-path', `url(#${clipPathID})`)
+                        .each((d, i, g) => {
+                          const defsSelection = d3.select(g[i])
+                            .selectAll<SVGDefsElement, any>('defs')
+                            .data([i])
+                            .join('defs')
+            
+                          const graphicGSelection = d3.select(g[i])
+                            .selectAll<SVGGElement, any>('g')
+                            .data([i])
+                            .join('g')
+                            .classed(graphicClassName, true)
+                        })
+                    },
+                    update => update,
+                    exit => exit.remove()
+                  )
+              })
+          },
+          update => update,
+          exit => exit.remove()
+        )
+    }),
+    shareReplay(1)
+  )
+
+  // <g> category selection
+  combineLatest({
+    categorySelection: categorySelection$,
+    containerPosition: containerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.categorySelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const containerPosition = data.containerPosition[i] ?? data.containerPosition[0]
+        const translate = containerPosition.translate
+        const scale = containerPosition.scale
+        return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+      })
+  })
+
+  // <g> axes selection
+  const axesSelection$ = categorySelection$.pipe(
+    map(categorySelection => {
+      return categorySelection
+        .select<SVGGElement>(`g.${axesClassName}`)
+    }),
+    shareReplay(1)
+  )
+
+  // <defs> clipPath selection
+  const defsSelection$ = axesSelection$.pipe(
+    map(axesSelection => {
+      return axesSelection.select<SVGDefsElement>('defs')
+    }),
+    shareReplay(1)
+  )
+
+  // <g> graphic selection
+  const graphicGSelection$ = combineLatest({
+    axesSelection: axesSelection$,
+    graphicTransform: graphicTransform$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      const graphicGSelection = data.axesSelection
+        .select<SVGGElement>(`g.${graphicClassName}`)
+      graphicGSelection
+        .transition()
+        .duration(50)
+        .style('transform', data.graphicTransform.value)
+      return graphicGSelection
+    }),
+    shareReplay(1)
+  )
+
+  return {
+    categorySelection$,
+    axesSelection$,
+    defsSelection$,
+    graphicGSelection$
+  }
+}
+
+// 建立 multiValue 主要的 selection - 只取無scale的container selection
+export const multiValueContainerSelectionsObservable = ({ selection, pluginName, clipPathID, computedData$, containerPosition$, isCategorySeprate$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  clipPathID: string | null
+  computedData$: Observable<ComputedDataMultiValue>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  isCategorySeprate$: Observable<boolean>
+}) => {
+  const containerClassName = getClassName(pluginName, 'container')
+
+  const containerSelection$ = combineLatest({
+    computedData: computedData$.pipe(
+      distinctUntilChanged((a, b) => {
+        // 只有當series的數量改變時，才重新計算
+        return a.length === b.length
+      }),
+    ),
+    isCategorySeprate: isCategorySeprate$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      return data.isCategorySeprate
+        // category分開的時候顯示各別axis
+        ? data.computedData
+        // category合併的時候只顯示第一個axis
+        : [data.computedData[0]]
+    }),
+    map((computedData, i) => {
+      return selection
+        .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${containerClassName}`)
+        .data(computedData, d => (d && d[0]) ? d[0].categoryIndex : i)
+        .join('g')
+        .classed(containerClassName, true)
+        .attr('clip-path', _ => clipPathID ? `url(#${clipPathID})` : 'none')
+    }),
+    shareReplay(1)
+  )
+
+  combineLatest({
+    containerSelection: containerSelection$,
+    gridContainerPosition: containerPosition$
+  }).pipe(
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.containerSelection
+      .attr('transform', (d, i) => {
+        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+        const translate = gridContainerPosition.translate
+        const scale = gridContainerPosition.scale
+        // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+        return `translate(${translate[0]}, ${translate[1]})`
+      })
+      // .attr('opacity', 0)
+      // .transition()
+      // .attr('opacity', 1)
+  })
+
+  return containerSelection$
+}
+
+
+export const multiValueXYPositionObservable = ({ rootSelection, fullDataFormatter$, filteredXYMinMaxData$, containerPosition$, containerSize$, layout$ }: {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  fullDataFormatter$: Observable<DataFormatterMultiValue>
+  // computedData$: Observable<ComputedDataMultiValue>
+  // xyMinMax$: Observable<{ minX: number, maxX: number, minY: number, maxY: number }>
+  filteredXYMinMaxData$: Observable<{
+    minXDatum: ComputedXYDatumMultiValue
+    maxXDatum: ComputedXYDatumMultiValue
+    minYDatum: ComputedXYDatumMultiValue
+    maxYDatum: ComputedXYDatumMultiValue
+  }>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  layout$: Observable<Layout>
+}) => {
+  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove').pipe(
+    debounceTime(2) // 避免過度頻繁觸發，實測時沒加電腦容易卡頓
+  )
+
+  // const columnAmount$ = containerPosition$.pipe(
+  //   map(containerPosition => {
+  //     const maxColumnIndex = containerPosition.reduce((acc, current) => {
+  //       return current.columnIndex > acc ? current.columnIndex : acc
+  //     }, 0)
+  //     return maxColumnIndex + 1
+  //   }),
+  //   distinctUntilChanged(),
+  //   shareReplay(1)
+  // )
+
+  // const rowAmount$ = containerPosition$.pipe(
+  //   map(containerPosition => {
+  //     const maxRowIndex = containerPosition.reduce((acc, current) => {
+  //       return current.rowIndex > acc ? current.rowIndex : acc
+  //     }, 0)
+  //     return maxRowIndex + 1
+  //   }),
+  //   distinctUntilChanged(),
+  //   shareReplay(1)
+  // )
+
+  // const xyScale$ = combineLatest({
+  //   layout: layout$,
+  //   filteredXYMinMaxData: filteredXYMinMaxData$,
+  //   fullDataFormatter: fullDataFormatter$,
+  //   columnAmount: columnAmount$,
+  //   rowAmount: rowAmount$
+  // }).pipe(
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     const xScale = createAxisToValueScale({
+  //       maxValue: data.filteredXYMinMaxData.maxXDatum.value[0],
+  //       minValue: data.filteredXYMinMaxData.minXDatum.value[0],
+  //       axisWidth: data.layout.width,
+  //       scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.xAxis.scaleRange,
+  //     })
+  //     const yScale = createAxisToValueScale({
+  //       maxValue: data.filteredXYMinMaxData.maxYDatum.value[1],
+  //       minValue: data.filteredXYMinMaxData.minYDatum.value[1],
+  //       axisWidth: data.layout.height,
+  //       scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+  //       reverse: true
+  //     })
+  //     return { xScale, yScale }
+  //   })
+  // )
+
+  const xyScale$: Observable<{
+    xScale: d3.ScaleLinear<number, number, never>;
+    yScale: d3.ScaleLinear<number, number, never>;
+  }> = new Observable(subscriber => {
+    combineLatest({
+      // layout: layout$,
+      containerSize: containerSize$,
+      filteredXYMinMaxData: filteredXYMinMaxData$,
+      fullDataFormatter: fullDataFormatter$,
+      // columnAmount: columnAmount$,
+      // rowAmount: rowAmount$
+    }).pipe(
+      switchMap(async d => d),
+    ).subscribe(data => {
+      const xValueIndex = data.fullDataFormatter.xAxis.valueIndex
+      const yValueIndex = data.fullDataFormatter.yAxis.valueIndex
+      if (!data.filteredXYMinMaxData.minXDatum || !data.filteredXYMinMaxData.maxXDatum
+        || data.filteredXYMinMaxData.minXDatum.value[xValueIndex] == null || data.filteredXYMinMaxData.maxXDatum.value[xValueIndex] == null
+        || !data.filteredXYMinMaxData.minYDatum || !data.filteredXYMinMaxData.maxYDatum
+        || data.filteredXYMinMaxData.minYDatum.value[yValueIndex] == null || data.filteredXYMinMaxData.maxYDatum.value[yValueIndex] == null
+      ) {
+        return
+      }
+      const xScale = createAxisToValueScale({
+        maxValue: data.filteredXYMinMaxData.maxXDatum.value[xValueIndex],
+        minValue: data.filteredXYMinMaxData.minXDatum.value[xValueIndex],
+        axisWidth: data.containerSize.width,
+        scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
+        scaleRange: data.fullDataFormatter.xAxis.scaleRange,
+      })
+      const yScale = createAxisToValueScale({
+        maxValue: data.filteredXYMinMaxData.maxYDatum.value[yValueIndex],
+        minValue: data.filteredXYMinMaxData.minYDatum.value[yValueIndex],
+        axisWidth: data.containerSize.height,
+        scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+        scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+        reverse: true
+      })
+      subscriber.next({ xScale, yScale })
+    })
+  })
+
+  const axisValue$ = combineLatest({
+    rootMousemove: rootMousemove$,
+    // columnAmount: columnAmount$,
+    // rowAmount: rowAmount$,
+    layout: layout$,
+    containerPosition: containerPosition$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+      // return {
+      //   x: ((data.rootMousemove.offsetX - data.layout.left) / data.containerPosition[0].scale[0])
+      //     % (data.layout.rootWidth / data.columnAmount / data.containerPosition[0].scale[0]),
+      //   y: ((data.rootMousemove.offsetY - data.layout.top) / data.containerPosition[0].scale[1])
+      //     % (data.layout.rootHeight / data.rowAmount / data.containerPosition[0].scale[1])
+      // }
+      const x = (() => {
+        let x = data.rootMousemove.offsetX
+        const rangeArr = data.containerPosition
+          .map((d, i) => [d.translate[0], data.containerPosition[i + 1]?.translate[0] ?? data.layout.rootWidth])
+          .filter(d => d[0] < d[1])
+        const range = rangeArr.find(d => x >= d[0] && x <= d[1])
+        if (range) {
+          x = x - range[0]
+        }
+        return x - data.layout.left
+      })()
+      
+      const y = (() => {
+        let y = data.rootMousemove.offsetY
+        const rangeArr = data.containerPosition
+          .map((d, i) => [d.translate[1], data.containerPosition[i + 1]?.translate[1] ?? data.layout.rootHeight])
+          .filter(d => d[0] < d[1])
+        const range = rangeArr.find(d => y >= d[0] && y <= d[1])
+        if (range) {
+          y = y - range[0]
+        }
+        return y - data.layout.top
+      })()
+
+      return { x, y }
+    })
+  )
+
+  return combineLatest({
+    xyScale: xyScale$,
+    axisValue: axisValue$,
+    containerPosition: containerPosition$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return {
+        x: data.axisValue.x / data.containerPosition[0].scale[0],
+        y: data.axisValue.y / data.containerPosition[0].scale[1],
+        xValue: data.xyScale.xScale(data.axisValue.x),
+        yValue: data.xyScale.yScale(data.axisValue.y)
+      }
+    })
+  )
+}
+
+export const ordinalPositionObservable = ({ rootSelection, ordinalScaleDomain$, ordinalScale$, ordinalPadding$, containerSize$, containerPosition$, layout$ }: {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  ordinalScaleDomain$: Observable<[number, number]>
+  ordinalScale$: Observable<d3.ScaleLinear<number, number>>
+  ordinalPadding$: Observable<number>
+  containerSize$: Observable<ContainerSize>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  layout$: Observable<Layout>
+}) => {
+  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove').pipe(
+    debounceTime(2) // 避免過度頻繁觸發，實測時沒加電腦容易卡頓
+  )
+
+  // const columnAmount$ = containerPosition$.pipe(
+  //   map(containerPosition => {
+  //     const maxColumnIndex = containerPosition.reduce((acc, current) => {
+  //       return current.columnIndex > acc ? current.columnIndex : acc
+  //     }, 0)
+  //     return maxColumnIndex + 1
+  //   }),
+  //   distinctUntilChanged(),
+  //   shareReplay(1)
+  // )
+
+  const axisX$ = combineLatest({
+    rootMousemove: rootMousemove$,
+    // columnAmount: columnAmount$,
+    layout: layout$,
+    // containerSize: containerSize$,
+    containerPosition: containerPosition$,
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+      // return ((data.rootMousemove.offsetX - data.layout.left) / data.containerPosition[0].scale[0])
+      //   % (data.layout.rootWidth / data.columnAmount / data.containerPosition[0].scale[0])
+
+      let x = data.rootMousemove.offsetX
+      const rangeArr = data.containerPosition
+        .map((d, i) => [d.translate[0], data.containerPosition[i + 1]?.translate[0] ?? data.layout.rootWidth])
+        .filter(d => d[0] < d[1])
+      const range = rangeArr.find(d => x >= d[0] && x <= d[1])
+      if (range) {
+        x = x - range[0]
+      }
+      return x - data.layout.left
+    })
+  )
+
+  const scaleRangeLabels$ = ordinalScaleDomain$.pipe(
+    map(data => {
+      const range = data[1] - data[0] + 1
+      return new Array(range).fill(0).map((d, i) => String(i + data[0]))
+    })
+  )
+
+  return combineLatest({
+    scaleRangeLabels: scaleRangeLabels$,
+    // layout: layout$,
+    containerSize: containerSize$,
+    axisX: axisX$,
+    ordinalScale: ordinalScale$,
+    ordinalPadding: ordinalPadding$,
+    ordinalScaleDomain: ordinalScaleDomain$,
+    containerPosition: containerPosition$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      // 比例尺座標對應非連續資料索引
+      const xIndexScale = createAxisToLabelIndexScale({
+        axisLabels: data.scaleRangeLabels,
+        axisWidth: data.containerSize.width,
+        padding: 0.5,
+        reverse: false
+      })
+
+      const seq = xIndexScale(data.axisX)
+      const xIndex = seq + data.ordinalScaleDomain[0]
+      const x = (data.ordinalScale(xIndex) + data.ordinalPadding) / data.containerPosition[0].scale[0]
+
+      return {
+        x: x,
+        xValue: xIndex,
+      }
+    })
+  )
+}
+
+// 排名數量
+export const computedRankingAmountObservable = ({ containerSize$, visibleComputedData$, textSizePx$, rankingAmount$ }: {
+  containerSize$: Observable<ContainerSize>
+  visibleComputedData$: Observable<ComputedDatumMultiValue[][]>
+  textSizePx$: Observable<number>
+  rankingAmount$: Observable<'auto' | number>
+}) => {
+  const minLineHeightObservable = ({ textSizePx$ }: {
+    textSizePx$: Observable<number>
+  }) => {
+    return textSizePx$.pipe(
+      map(textSizePx => textSizePx * 2), // 2倍行高
+      shareReplay(1)
+    )
+  }
+
+  const containerHeightObservable = ({ minLineHeight$, containerSize$ }: {
+    minLineHeight$: Observable<number>
+    containerSize$: Observable<ContainerSize>
+  }) => {
+    return combineLatest({
+      minLineHeight: minLineHeight$,
+      containerSize: containerSize$
+    }).pipe(
+      switchMap(async (d) => d),
+      map(data => {
+        // 避免過小造成計算 scale 錯誤
+        return data.containerSize.height > data.minLineHeight
+          ? data.containerSize.height
+          : data.minLineHeight
+      }),
+      distinctUntilChanged(),
+      shareReplay(1)
+    )
+  }
+
+  const rankingAmountLimitObservable = ({ minLineHeight$, containerHeight$ }: {
+    containerHeight$: Observable<number>
+    minLineHeight$: Observable<number>
+  }) => {
+
+    return combineLatest({
+      minLineHeight: minLineHeight$,
+      containerHeight: containerHeight$
+    }).pipe(
+      switchMap(async (d) => d),
+      map(data => {
+        const labelAmountLimit = Math.floor(data.containerHeight / data.minLineHeight)
+        return labelAmountLimit
+      }),
+      distinctUntilChanged(),
+      shareReplay(1)
+    )
+  }
+
+  const minLineHeight$ = minLineHeightObservable({ textSizePx$ })
+
+  const containerHeight$ = containerHeightObservable({
+    minLineHeight$,
+    containerSize$
+  })
+
+  const rankingAmountLimit$ = rankingAmountLimitObservable({
+    containerHeight$,
+    minLineHeight$
+  })
+
+  // 計算要排名的數量
+  return rankingAmount$.pipe(
+    switchMap(rankingAmount => {
+      return iif(
+        () => rankingAmount === 'auto',
+        // 'auto': 不超過限制
+        combineLatest({
+          visibleComputedData: visibleComputedData$,
+          rankingAmountLimit: rankingAmountLimit$,
+        }).pipe(
+          switchMap(async d => d),
+          map(data => {
+            const rankingAmountArr = data.visibleComputedData.map(categoryData => {
+              return Math.min(data.rankingAmountLimit, categoryData.length)
+            })
+            return Math.max(...rankingAmountArr) // 取所有 container 計算出來的最大值
+          })
+        ),
+        // number: 指定數量
+        rankingAmount$ as Observable<number>,
+      )
+    })
+  )
+}
+
+export const rankingItemHeightObservable = ({ containerSize$, textSizePx$, computedRankingAmount$ }: {
+  containerSize$: Observable<ContainerSize>
+  // visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+  textSizePx$: Observable<number>
+  // rankingAmount$: Observable<'auto' | number>
+  computedRankingAmount$: Observable<number>
+}) => {
+  const minLineHeightObservable = ({ textSizePx$ }: {
+    textSizePx$: Observable<number>
+  }) => {
+    return textSizePx$.pipe(
+      map(textSizePx => textSizePx * 2), // 2倍行高
+      shareReplay(1)
+    )
+  }
+
+  const containerHeightObservable = ({ minLineHeight$, containerSize$ }: {
+    minLineHeight$: Observable<number>
+    containerSize$: Observable<ContainerSize>
+  }) => {
+    return combineLatest({
+      minLineHeight: minLineHeight$,
+      containerSize: containerSize$
+    }).pipe(
+      switchMap(async (d) => d),
+      map(data => {
+        // 避免過小造成計算 scale 錯誤
+        return data.containerSize.height > data.minLineHeight
+          ? data.containerSize.height
+          : data.minLineHeight
+      }),
+      distinctUntilChanged(),
+      shareReplay(1)
+    )
+  }
+
+  const minLineHeight$ = minLineHeightObservable({ textSizePx$ })
+
+  const containerHeight$ = containerHeightObservable({
+    minLineHeight$,
+    containerSize$
+  })
+
+  return combineLatest({
+    containerHeight: containerHeight$,
+    computedRankingAmount: computedRankingAmount$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      // // 依每個 category 計算 scale
+      // return data.visibleComputedRankingData.map((categoryData, i) => {
+      //   const rankingAmount = data.computedRankingAmountList[i]
+      //   const rankingItemHeight = data.containerHeight / rankingAmount
+      //   return rankingItemHeight
+      // })
+      const rankingItemHeight = data.containerHeight / data.computedRankingAmount
+      return rankingItemHeight
+    })
+  )
+}
+
+export const rankingScaleListObservable = ({ visibleComputedRankingData$, rankingItemHeight$ }: {
+  visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+  rankingItemHeight$: Observable<number>
+}) => {
+
+  return combineLatest({
+    visibleComputedRankingData: visibleComputedRankingData$,
+    rankingItemHeight: rankingItemHeight$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      // 依每個 category 計算 scale
+      return data.visibleComputedRankingData.map((categoryData, i) => {
+        const allLabelAmount = categoryData.length
+        // const rankingItemHeight = data.rankingItemHeightList[i]
+        const totalHeight = data.rankingItemHeight * allLabelAmount // 有可能超出圖軸高度
+        
+        return createLabelToAxisScale({
+          axisLabels: categoryData.map(d => d.label),
+          axisWidth: totalHeight,
+          padding: 0.5
+        })
+      })
+    })
+  )
+}
+
+
+// // Ranking資料 - 有 XY 資料 @Q@ 若沒用到要棄用
+// export const computedRankingWithXYDataObservable = ({ visibleComputedRankingData$, computedRankingAmountList$, xyValueIndex$, layout$ }: {
+//   visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+//   computedRankingAmountList$: Observable<number[]>
+//   xyValueIndex$: Observable<[number, number]>
+//   layout$: Observable<Layout>
+// }): Observable<ComputedXYDataMultiValue> => {
+
+//   // // 未篩選範圍前的 scale
+//   // function createOriginXScale (xMinMax: { minX: number, maxX: number }, layout: Layout) {
+//   //   let maxValue = xMinMax.maxX
+//   //   let minValue = xMinMax.minX
+//   //   if (minValue === maxValue && maxValue === 0) {
+//   //     // 避免最大及最小值相同造成無法計算scale
+//   //     maxValue = 1
+//   //   }
+//   //   const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+//   //     maxValue,
+//   //     minValue,
+//   //     axisWidth: layout.width,
+//   //     scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
+//   //     scaleRange: [0, 1] // 不使用dataFormatter設定
+//   //   })
+    
+//   //   return valueScale
+//   // }
+
+//   // 未篩選範圍及visible前的 scale
+//   function createOriginYScale (yMinMax: { minY: number, maxY: number }, layout: Layout) {
+//     let maxValue = yMinMax.maxY
+//     let minValue = yMinMax.minY
+//     if (minValue === maxValue && maxValue === 0) {
+//       // 避免最大及最小值相同造成無法計算scale
+//       maxValue = 1
+//     }
+//     const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+//       maxValue,
+//       minValue,
+//       axisWidth: layout.height,
+//       scaleDomain: ['auto', 'auto'], // 不使用dataFormatter設定 --> 以0為基準到最大或最小值為範圍（ * 如果是使用[minValue, maxValue]的話，在兩者很接近的情況下有可能造成scale倍率過高而svg變型時失真的情況）
+//       scaleRange: [0, 1], // 不使用dataFormatter設定
+//       // reverse: true
+//     })
+    
+//     return valueScale
+//   }
+
+//   return combineLatest({
+//     visibleComputedRankingData: visibleComputedRankingData$,
+//     computedRankingAmountList: computedRankingAmountList$,
+//     xyValueIndex: xyValueIndex$,
+//     layout: layout$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+      
+//       // const maxX = data.visibleComputedRankingData
+//       //   .flat()
+//       //   .reduce((acc, current) => {
+//       //     const maxXIndex = current.value.length - 1
+//       //     return maxXIndex > acc ? maxXIndex : acc
+//       //   }, 0)
+//       // const xMinMax = {
+//       //   minX: 0,
+//       //   maxX
+//       // }
+//       // const xScale = createOriginXScale(xMinMax, data.layout)
+//       // console.log('data.visibleComputedRankingData', data.visibleComputedRankingData)
+//       return data.visibleComputedRankingData
+//         .map((categoryData, categoryIndex) => {
+//           const yMinMax = {
+//             minY: 0,
+//             maxY: data.computedRankingAmountList[categoryIndex]
+//           }
+//           const yScale = createOriginYScale(yMinMax, data.layout)
+
+//           return categoryData.map((datum, datumIndex) => {
+//             return {
+//               ...datum,
+//               // axisX: xScale(datum.value[data.xyValueIndex[0]] ?? 0),
+//               axisX: 0,
+//               // axisY: yScale(datum.value[data.xyValueIndex[1]] ?? 0), // y軸的繪圖座標是從上到下，所以反轉
+//               axisY: yScale(datumIndex),
+//             }
+//           })
+//         })
+//     })
+//   )
+// }
+
+// // Ranking資料 - 有 XY 資料 @Q@ 若沒用到要棄用
+// export const computedRankingWithXYDataObservable = ({ visibleComputedRankingData$, rankingScaleList$ }: {
+//   visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+//   rankingScaleList$: Observable<d3.ScalePoint<string>[]>
+// }): Observable<ComputedXYDataMultiValue> => {
+
+//   return combineLatest({
+//     visibleComputedRankingData: visibleComputedRankingData$,
+//     rankingScaleList: rankingScaleList$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+//       return data.visibleComputedRankingData
+//         .map((categoryData, categoryIndex) => {
+//           const yScale = data.rankingScaleList[categoryIndex]
+
+//           return categoryData.map((datum, datumIndex) => {
+//             return {
+//               ...datum,
+//               axisX: 0,
+//               axisY: yScale(datum.label),
+//             }
+//           })
+//         })
+//     })
+//   )
 // }