@orbcharts/plugins-basic 3.0.4 → 3.0.6

package/src/base/BaseRacingBars.ts

@@ -1,583 +1,583 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  distinctUntilChanged,
-  shareReplay,
-  Observable,
-  Subject } from 'rxjs'
-import type { BasePluginFn } from './types'
-import type {
-  ComputedDatumMultiValue,
-  ComputedDataMultiValue,
-  // ComputedLayoutDataGrid,
-  DataFormatterMultiValue,
-  ContainerPositionScaled,
-  ContainerSize,
-  EventMultiValue,
-  ChartParams, 
-  Layout,
-  TransformData } from '../../lib/core-types'
-import type { BaseRacingBarsParams } from '../../lib/plugins-basic-types'
-import { getD3TransitionEase } from '../utils/d3Utils'
-import { getClassName, getUniID } from '../utils/orbchartsUtils'
-import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
-
-// export interface BaseBarsParams {
-//   // barType: BarType
-//   barWidth: number
-//   barPadding: number
-//   barGroupPadding: number // 群組和群組間的間隔
-//   barRadius: number | boolean
-// }
-
-interface BaseRacingBarsContext {
-  selection: d3.Selection<any, unknown, any, unknown>
-  computedData$: Observable<ComputedDataMultiValue>
-  visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
-  CategoryDataMap$: Observable<Map<string, ComputedDatumMultiValue[]>>
-  fullParams$: Observable<BaseRacingBarsParams>
-  fullChartParams$: Observable<ChartParams>
-  fullDataFormatter$: Observable<DataFormatterMultiValue>
-  // xyValueIndex$: Observable<[number, number]>
-  highlight$: Observable<ComputedDatumMultiValue[]>
-  rankingItemHeight$: Observable<number>
-  rankingScaleList$: Observable<d3.ScalePoint<string>[]>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  containerSize$: Observable<ContainerSize>
-  xScale$: Observable<(n: number) => number>
-  isCategorySeprate$: Observable<boolean>
-  event$: Subject<EventMultiValue>
-}
-
-interface RenderGraphicGParams {
-  containerSelection: d3.Selection<SVGGElement, ComputedDatumMultiValue[], any, any>
-  visibleComputedRankingData: ComputedDatumMultiValue[][]
-  rankingScaleList: d3.ScalePoint<string>[]
-  transitionDuration: number
-}
-
-interface RenderBarParams {
-  graphicGSelection: d3.Selection<SVGGElement, ComputedDatumMultiValue, any, any>
-  rectClassName: string
-  // xyValueIndex: [number, number]
-  xScale: (n: number) => number
-  fullParams: BaseRacingBarsParams
-  barWidth: number
-  transitionDuration: number
-}
-
-type ClipPathDatum = {
-  id: string;
-  // x: number;
-  // y: number;
-  width: number;
-  height: number;
-}
-
-
-function renderGraphicG ({ containerSelection, visibleComputedRankingData, rankingScaleList, transitionDuration }: RenderGraphicGParams) {
-  containerSelection
-    .each((_, categoryIndex, g) => {
-      const container = d3.select(g[categoryIndex])
-      const graphicG = container.selectAll<SVGGElement, ComputedDatumMultiValue>(`g`)
-        .data(visibleComputedRankingData[categoryIndex] ?? [], d => d.id)
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .attr('cursor', 'pointer')
-              .attr('transform', d => {
-                return `translate(0, ${rankingScaleList[categoryIndex] && rankingScaleList[categoryIndex](d.label)})`
-              })
-          },
-          update => {
-            return update
-              .transition()
-              .duration(transitionDuration)
-              .ease(d3.easeLinear)
-              .attr('transform', d => {
-                return `translate(0, ${rankingScaleList[categoryIndex] && rankingScaleList[categoryIndex](d.label)})`
-              })
-          },
-          exit => exit.remove()
-        )
-    })
-
-  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumMultiValue, SVGGElement, unknown> = containerSelection.selectAll(`g`)
-
-  return graphicBarSelection
-}
-
-function renderRectBars ({ graphicGSelection, rectClassName, xScale, fullParams, barWidth, transitionDuration }: RenderBarParams) {
-
-  graphicGSelection
-    .each((datum, i, g) => {
-      // const containerIndex = isCategorySeprate ? datum.categoryIndex : 0
-      // const barWidth = barWidthList[containerIndex]
-      const barHalfWidth = barWidth / 2
-      const radius = fullParams.bar.barRadius === true ? barHalfWidth
-        : fullParams.bar.barRadius === false ? 0
-        : typeof fullParams.bar.barRadius == 'number' ? fullParams.bar.barRadius
-        : 0
-      
-      const gSelection = d3.select(g[i])
-      gSelection.selectAll<SVGRectElement, ComputedDatumMultiValue>(`rect.${rectClassName}`)
-        .data([datum], d => d.id)
-        .join(
-          enter => {
-            return enter
-              .append('rect')
-              .classed(rectClassName, true)
-              .attr('cursor', 'pointer')
-              // .attr('width', d => 1)
-              .attr('width', d => xScale(d.value[d.xValueIndex]) ?? 1)
-              .attr('height', barWidth)
-          },
-          update => {
-            return update
-              .transition()
-              .duration(transitionDuration)
-              .ease(d3.easeLinear)
-              .attr('width', d => xScale(d.value[d.xValueIndex]) ?? 1)
-              .attr('height', barWidth)
-          },
-          exit => exit.remove()
-        )
-        .attr('transform', `translate(0, ${-barHalfWidth})`)
-        .attr('fill', d => d.color)
-        .attr('rx', radius)
-        .attr('ry', radius)
-    })
-
-  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumMultiValue, SVGGElement, unknown> = graphicGSelection.selectAll(`rect.${rectClassName}`)
-
-  return graphicBarSelection
-}
-
-function renderClipPath ({ defsSelection, clipPathData }: {
-  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
-  clipPathData: ClipPathDatum[]
-}) {
-  const clipPath = defsSelection
-    .selectAll<SVGClipPathElement, Layout>('clipPath')
-    .data(clipPathData)
-    .join(
-      enter => {
-        return enter
-          .append('clipPath')
-      },
-      update => update,
-      exit => exit.remove()
-    )
-    .attr('id', d => d.id)
-    .each((d, i, g) => {
-      const rect = d3.select(g[i])
-        .selectAll<SVGRectElement, typeof d>('rect')
-        .data([d])
-        .join(
-          enter => {
-            return enter
-              .append('rect')
-          },
-          update => update,
-          exit => exit.remove()
-        )
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', _d => _d.width)
-        .attr('height', _d => _d.height)
-    })
-}
-
-function highlight ({ selection, ids, fullChartParams }: {
-  selection: d3.Selection<any, ComputedDatumMultiValue, any, any>
-  ids: string[]
-  fullChartParams: ChartParams
-}) {
-  selection.interrupt('highlight')
-
-  if (!ids.length) {
-    // remove highlight
-    selection
-      .transition('highlight')
-      .duration(200)
-      .style('opacity', 1)
-    return
-  }
-  
-  selection
-    .each((d, i, n) => {
-      if (ids.includes(d.id)) {
-        d3.select(n[i])
-          .style('opacity', 1)
-      } else {
-        d3.select(n[i])
-          .style('opacity', fullChartParams.styles.unhighlightedOpacity)
-      }
-    })
-}
-
-
-export const createBaseRacingBars: BasePluginFn<BaseRacingBarsContext> = (pluginName: string, {
-  selection,
-  computedData$,
-  visibleComputedRankingData$,
-  // xyValueIndex$,
-  // categoryLabels$,
-  CategoryDataMap$,
-  fullParams$,
-  fullDataFormatter$,
-  fullChartParams$,
-  // layout$,
-  // graphicTransform$,
-  // graphicReverseScale$,
-  highlight$,
-  // computedRankingAmountList$,
-  rankingItemHeight$,
-  rankingScaleList$,
-  containerPosition$,
-  containerSize$,
-  // layout$,
-  xScale$,
-  isCategorySeprate$,
-  event$
-}) => {
-
-  const destroy$ = new Subject()
-
-  const clipPathID = getUniID(pluginName, 'clipPath-box')
-  const rectClassName = getClassName(pluginName, 'rect')
-  // const containerClassName = getClassName(pluginName, 'container')
-  
-  // const {
-  //   categorySelection$,
-  //   axesSelection$,
-  //   defsSelection$,
-  //   graphicGSelection$
-  // } = multiValueSelectionsObservable({
-  //   selection,
-  //   pluginName,
-  //   clipPathID,
-  //   categoryLabels$: categoryLabels$,
-  //   containerPosition$: containerPosition$,
-  //   graphicTransform$: graphicTransform$
-  // })
-
-  // const clipPathSubscription = combineLatest({
-  //   defsSelection: defsSelection$,
-  //   layout: layout$,
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async (d) => d),
-  // ).subscribe(data => {
-  //   // 外層的遮罩
-  //   const clipPathData = [{
-  //     id: clipPathID,
-  //     width: data.layout.width,
-  //     height: data.layout.height
-  //   }]
-  //   renderClipPath({
-  //     defsSelection: data.defsSelection,
-  //     clipPathData,
-  //   })
-  // })
-
-  const containerSelection$ = multiValueContainerSelectionsObservable({
-    selection,
-    pluginName,
-    clipPathID,
-    computedData$,
-    containerPosition$,
-    isCategorySeprate$,
-  }).pipe(
-    takeUntil(destroy$),
-  )
-
-  // const containerSelection$ = combineLatest({
-  //   computedData: computedData$.pipe(
-  //     distinctUntilChanged((a, b) => {
-  //       // 只有當series的數量改變時，才重新計算
-  //       return a.length === b.length
-  //     }),
-  //   ),
-  //   isCategorySeprate: isCategorySeprate$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   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[0] ? d[0].categoryIndex : i)
-  //       .join('g')
-  //       .classed(containerClassName, true)
-  //       .attr('clip-path', `url(#${clipPathID})`)
-  //   })
-  // )
-
-  containerSize$.subscribe(data => {
-    const defsSelection = selection.selectAll<SVGDefsElement, any>('defs')
-      .data([clipPathID])
-      .join('defs')
-    const clipPathData = [{
-      id: clipPathID,
-      width: data.width,
-      height: data.height
-    }]
-    renderClipPath({
-      defsSelection: defsSelection,
-      clipPathData,
-      // textReverseTransform: data.textReverseTransform
-    })
-  })
-
-  // combineLatest({
-  //   containerSelection: containerSelection$,
-  //   containerPosition: containerPosition$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   data.containerSelection
-  //     .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]})`
-  //       return `translate(${translate[0]}, ${translate[1]})`
-  //     })
-  //     // .attr('opacity', 0)
-  //     // .transition()
-  //     // .attr('opacity', 1)
-  // })
-
-  const barWidth$ = combineLatest({
-    fullParams: fullParams$,
-    rankingItemHeight: rankingItemHeight$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      if (data.fullParams.bar.barWidth) {
-        return data.fullParams.bar.barWidth
-      } else {
-        return data.rankingItemHeight - data.fullParams.bar.barPadding
-      }
-    }),
-    distinctUntilChanged()
-  )
-
-  const transitionDuration$ = fullChartParams$.pipe(
-    takeUntil(destroy$),
-    map(d => d.transitionDuration),
-    distinctUntilChanged()
-  )
-
-  const graphicGSelection$ = combineLatest({
-    containerSelection: containerSelection$,
-    visibleComputedRankingData: visibleComputedRankingData$,
-    rankingScaleList: rankingScaleList$,
-    transitionDuration: transitionDuration$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      
-      return renderGraphicG({
-        containerSelection: data.containerSelection,
-        visibleComputedRankingData: data.visibleComputedRankingData,
-        rankingScaleList: data.rankingScaleList,
-        transitionDuration: data.transitionDuration
-      })
-    })
-  )
-
-  const graphicSelection$ = combineLatest({
-    graphicGSelection: graphicGSelection$,
-    // xyValueIndex: xyValueIndex$,
-    xScale: xScale$,
-    barWidth: barWidth$,
-    transitionDuration: transitionDuration$,
-    fullParams: fullParams$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      
-      return renderRectBars({
-        graphicGSelection: data.graphicGSelection,
-        rectClassName,
-        // xyValueIndex: data.xyValueIndex,
-        xScale: data.xScale,
-        fullParams: data.fullParams,
-        barWidth: data.barWidth,
-        transitionDuration: data.transitionDuration,
-      })
-    }),
-    shareReplay(1)
-  )
-
-  const highlightTarget$ = fullChartParams$.pipe(
-    takeUntil(destroy$),
-    map(d => d.highlightTarget),
-    distinctUntilChanged()
-  )
-
-  combineLatest({
-    graphicSelection: graphicSelection$,
-    computedData: computedData$,
-    CategoryDataMap: CategoryDataMap$,
-    highlightTarget: highlightTarget$,
-    fullDataFormatter: fullDataFormatter$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-  ).subscribe(data => {
-
-    data.graphicSelection
-      .on('mouseover', (event, datum) => {
-        // event.stopPropagation()
-        // console.log({
-        //   type: 'multiValue',
-        //   eventName: 'mouseover',
-        //   pluginName,
-        //   highlightTarget: data.highlightTarget,
-        //   datum,
-        //   category: data.CategoryDataMap.get(datum.categoryLabel)!,
-        //   categoryIndex: datum.categoryIndex,
-        //   categoryLabel: datum.categoryLabel,
-        //   data: data.computedData,
-        //   event,
-        // })
-
-        // 只顯示目前的值
-        // datum._visibleValue = [datum.value[datum.xValueIndex]]
-
-        event$.next({
-          type: 'multiValue',
-          eventName: 'mouseover',
-          pluginName,
-          highlightTarget: data.highlightTarget,
-          valueDetail: [
-            {
-              value: datum.value[datum.xValueIndex],
-              valueIndex: datum.xValueIndex,
-              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
-            },
-          ],
-          datum,
-          category: data.CategoryDataMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          data: data.computedData,
-          event,
-        })
-      })
-      .on('mousemove', (event, datum) => {
-        // event.stopPropagation()
-
-        // 只顯示目前的值
-        // datum._visibleValue = [datum.value[datum.xValueIndex]]
-        
-        event$.next({
-          type: 'multiValue',
-          eventName: 'mousemove',
-          pluginName,
-          highlightTarget: data.highlightTarget,
-          valueDetail: [
-            {
-              value: datum.value[datum.xValueIndex],
-              valueIndex: datum.xValueIndex,
-              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
-            },
-          ],
-          datum,
-          category: data.CategoryDataMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          data: data.computedData,
-          event,
-        })
-      })
-      .on('mouseout', (event, datum) => {
-        // event.stopPropagation()
-
-        event$.next({
-          type: 'multiValue',
-          eventName: 'mouseout',
-          pluginName,
-          highlightTarget: data.highlightTarget,
-          valueDetail: [
-            {
-              value: datum.value[datum.xValueIndex],
-              valueIndex: datum.xValueIndex,
-              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
-            },
-          ],
-          datum,
-          category: data.CategoryDataMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          data: data.computedData,
-          event,
-        })
-      })
-      .on('click', (event, datum) => {
-        // event.stopPropagation()
-
-        // 只顯示目前的值
-        // datum._visibleValue = [datum.value[datum.xValueIndex]]
-
-        event$.next({
-          type: 'multiValue',
-          eventName: 'click',
-          pluginName,
-          highlightTarget: data.highlightTarget,
-          valueDetail: [
-            {
-              value: datum.value[datum.xValueIndex],
-              valueIndex: datum.xValueIndex,
-              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
-            },
-          ],
-          datum,
-          category: data.CategoryDataMap.get(datum.categoryLabel)!,
-          categoryIndex: datum.categoryIndex,
-          categoryLabel: datum.categoryLabel,
-          data: data.computedData,
-          event,
-        })
-      })
-
-  })
-
-  combineLatest({
-    graphicSelection: graphicSelection$,
-    highlight: highlight$.pipe(
-      map(data => data.map(d => d.id))
-    ),
-    fullChartParams: fullChartParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d)
-  ).subscribe(data => {
-    highlight({
-      selection: data.graphicSelection,
-      ids: data.highlight,
-      fullChartParams: data.fullChartParams
-    })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-  }
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  distinctUntilChanged,
+  shareReplay,
+  Observable,
+  Subject } from 'rxjs'
+import type { BasePluginFn } from './types'
+import type {
+  ComputedDatumMultiValue,
+  ComputedDataMultiValue,
+  // ComputedLayoutDataGrid,
+  DataFormatterMultiValue,
+  ContainerPositionScaled,
+  ContainerSize,
+  EventMultiValue,
+  ChartParams, 
+  Layout,
+  TransformData } from '../../lib/core-types'
+import type { BaseRacingBarsParams } from '../../lib/plugins-basic-types'
+import { getD3TransitionEase } from '../utils/d3Utils'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
+
+// export interface BaseBarsParams {
+//   // barType: BarType
+//   barWidth: number
+//   barPadding: number
+//   barGroupPadding: number // 群組和群組間的間隔
+//   barRadius: number | boolean
+// }
+
+interface BaseRacingBarsContext {
+  selection: d3.Selection<any, unknown, any, unknown>
+  computedData$: Observable<ComputedDataMultiValue>
+  visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+  CategoryDataMap$: Observable<Map<string, ComputedDatumMultiValue[]>>
+  fullParams$: Observable<BaseRacingBarsParams>
+  fullChartParams$: Observable<ChartParams>
+  fullDataFormatter$: Observable<DataFormatterMultiValue>
+  // xyValueIndex$: Observable<[number, number]>
+  highlight$: Observable<ComputedDatumMultiValue[]>
+  rankingItemHeight$: Observable<number>
+  rankingScaleList$: Observable<d3.ScalePoint<string>[]>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  xScale$: Observable<(n: number) => number>
+  isCategorySeprate$: Observable<boolean>
+  event$: Subject<EventMultiValue>
+}
+
+interface RenderGraphicGParams {
+  containerSelection: d3.Selection<SVGGElement, ComputedDatumMultiValue[], any, any>
+  visibleComputedRankingData: ComputedDatumMultiValue[][]
+  rankingScaleList: d3.ScalePoint<string>[]
+  transitionDuration: number
+}
+
+interface RenderBarParams {
+  graphicGSelection: d3.Selection<SVGGElement, ComputedDatumMultiValue, any, any>
+  rectClassName: string
+  // xyValueIndex: [number, number]
+  xScale: (n: number) => number
+  fullParams: BaseRacingBarsParams
+  barWidth: number
+  transitionDuration: number
+}
+
+type ClipPathDatum = {
+  id: string;
+  // x: number;
+  // y: number;
+  width: number;
+  height: number;
+}
+
+
+function renderGraphicG ({ containerSelection, visibleComputedRankingData, rankingScaleList, transitionDuration }: RenderGraphicGParams) {
+  containerSelection
+    .each((_, categoryIndex, g) => {
+      const container = d3.select(g[categoryIndex])
+      const graphicG = container.selectAll<SVGGElement, ComputedDatumMultiValue>(`g`)
+        .data(visibleComputedRankingData[categoryIndex] ?? [], d => d.id)
+        .join(
+          enter => {
+            return enter
+              .append('g')
+              .attr('cursor', 'pointer')
+              .attr('transform', d => {
+                return `translate(0, ${rankingScaleList[categoryIndex] && rankingScaleList[categoryIndex](d.label)})`
+              })
+          },
+          update => {
+            return update
+              .transition()
+              .duration(transitionDuration)
+              .ease(d3.easeLinear)
+              .attr('transform', d => {
+                return `translate(0, ${rankingScaleList[categoryIndex] && rankingScaleList[categoryIndex](d.label)})`
+              })
+          },
+          exit => exit.remove()
+        )
+    })
+
+  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumMultiValue, SVGGElement, unknown> = containerSelection.selectAll(`g`)
+
+  return graphicBarSelection
+}
+
+function renderRectBars ({ graphicGSelection, rectClassName, xScale, fullParams, barWidth, transitionDuration }: RenderBarParams) {
+
+  graphicGSelection
+    .each((datum, i, g) => {
+      // const containerIndex = isCategorySeprate ? datum.categoryIndex : 0
+      // const barWidth = barWidthList[containerIndex]
+      const barHalfWidth = barWidth / 2
+      const radius = fullParams.bar.barRadius === true ? barHalfWidth
+        : fullParams.bar.barRadius === false ? 0
+        : typeof fullParams.bar.barRadius == 'number' ? fullParams.bar.barRadius
+        : 0
+      
+      const gSelection = d3.select(g[i])
+      gSelection.selectAll<SVGRectElement, ComputedDatumMultiValue>(`rect.${rectClassName}`)
+        .data([datum], d => d.id)
+        .join(
+          enter => {
+            return enter
+              .append('rect')
+              .classed(rectClassName, true)
+              .attr('cursor', 'pointer')
+              // .attr('width', d => 1)
+              .attr('width', d => xScale(d.value[d.xValueIndex]) ?? 1)
+              .attr('height', barWidth)
+          },
+          update => {
+            return update
+              .transition()
+              .duration(transitionDuration)
+              .ease(d3.easeLinear)
+              .attr('width', d => xScale(d.value[d.xValueIndex]) ?? 1)
+              .attr('height', barWidth)
+          },
+          exit => exit.remove()
+        )
+        .attr('transform', `translate(0, ${-barHalfWidth})`)
+        .attr('fill', d => d.color)
+        .attr('rx', radius)
+        .attr('ry', radius)
+    })
+
+  const graphicBarSelection: d3.Selection<SVGRectElement, ComputedDatumMultiValue, SVGGElement, unknown> = graphicGSelection.selectAll(`rect.${rectClassName}`)
+
+  return graphicBarSelection
+}
+
+function renderClipPath ({ defsSelection, clipPathData }: {
+  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
+  clipPathData: ClipPathDatum[]
+}) {
+  const clipPath = defsSelection
+    .selectAll<SVGClipPathElement, Layout>('clipPath')
+    .data(clipPathData)
+    .join(
+      enter => {
+        return enter
+          .append('clipPath')
+      },
+      update => update,
+      exit => exit.remove()
+    )
+    .attr('id', d => d.id)
+    .each((d, i, g) => {
+      const rect = d3.select(g[i])
+        .selectAll<SVGRectElement, typeof d>('rect')
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('rect')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', _d => _d.width)
+        .attr('height', _d => _d.height)
+    })
+}
+
+function highlight ({ selection, ids, fullChartParams }: {
+  selection: d3.Selection<any, ComputedDatumMultiValue, any, any>
+  ids: string[]
+  fullChartParams: ChartParams
+}) {
+  selection.interrupt('highlight')
+
+  if (!ids.length) {
+    // remove highlight
+    selection
+      .transition('highlight')
+      .duration(200)
+      .style('opacity', 1)
+    return
+  }
+  
+  selection
+    .each((d, i, n) => {
+      if (ids.includes(d.id)) {
+        d3.select(n[i])
+          .style('opacity', 1)
+      } else {
+        d3.select(n[i])
+          .style('opacity', fullChartParams.styles.unhighlightedOpacity)
+      }
+    })
+}
+
+
+export const createBaseRacingBars: BasePluginFn<BaseRacingBarsContext> = (pluginName: string, {
+  selection,
+  computedData$,
+  visibleComputedRankingData$,
+  // xyValueIndex$,
+  // categoryLabels$,
+  CategoryDataMap$,
+  fullParams$,
+  fullDataFormatter$,
+  fullChartParams$,
+  // layout$,
+  // graphicTransform$,
+  // graphicReverseScale$,
+  highlight$,
+  // computedRankingAmountList$,
+  rankingItemHeight$,
+  rankingScaleList$,
+  containerPosition$,
+  containerSize$,
+  // layout$,
+  xScale$,
+  isCategorySeprate$,
+  event$
+}) => {
+
+  const destroy$ = new Subject()
+
+  const clipPathID = getUniID(pluginName, 'clipPath-box')
+  const rectClassName = getClassName(pluginName, 'rect')
+  // const containerClassName = getClassName(pluginName, 'container')
+  
+  // const {
+  //   categorySelection$,
+  //   axesSelection$,
+  //   defsSelection$,
+  //   graphicGSelection$
+  // } = multiValueSelectionsObservable({
+  //   selection,
+  //   pluginName,
+  //   clipPathID,
+  //   categoryLabels$: categoryLabels$,
+  //   containerPosition$: containerPosition$,
+  //   graphicTransform$: graphicTransform$
+  // })
+
+  // const clipPathSubscription = combineLatest({
+  //   defsSelection: defsSelection$,
+  //   layout: layout$,
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  // ).subscribe(data => {
+  //   // 外層的遮罩
+  //   const clipPathData = [{
+  //     id: clipPathID,
+  //     width: data.layout.width,
+  //     height: data.layout.height
+  //   }]
+  //   renderClipPath({
+  //     defsSelection: data.defsSelection,
+  //     clipPathData,
+  //   })
+  // })
+
+  const containerSelection$ = multiValueContainerSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID,
+    computedData$,
+    containerPosition$,
+    isCategorySeprate$,
+  }).pipe(
+    takeUntil(destroy$),
+  )
+
+  // const containerSelection$ = combineLatest({
+  //   computedData: computedData$.pipe(
+  //     distinctUntilChanged((a, b) => {
+  //       // 只有當series的數量改變時，才重新計算
+  //       return a.length === b.length
+  //     }),
+  //   ),
+  //   isCategorySeprate: isCategorySeprate$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   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[0] ? d[0].categoryIndex : i)
+  //       .join('g')
+  //       .classed(containerClassName, true)
+  //       .attr('clip-path', `url(#${clipPathID})`)
+  //   })
+  // )
+
+  containerSize$.subscribe(data => {
+    const defsSelection = selection.selectAll<SVGDefsElement, any>('defs')
+      .data([clipPathID])
+      .join('defs')
+    const clipPathData = [{
+      id: clipPathID,
+      width: data.width,
+      height: data.height
+    }]
+    renderClipPath({
+      defsSelection: defsSelection,
+      clipPathData,
+      // textReverseTransform: data.textReverseTransform
+    })
+  })
+
+  // combineLatest({
+  //   containerSelection: containerSelection$,
+  //   containerPosition: containerPosition$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+  //   data.containerSelection
+  //     .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]})`
+  //       return `translate(${translate[0]}, ${translate[1]})`
+  //     })
+  //     // .attr('opacity', 0)
+  //     // .transition()
+  //     // .attr('opacity', 1)
+  // })
+
+  const barWidth$ = combineLatest({
+    fullParams: fullParams$,
+    rankingItemHeight: rankingItemHeight$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      if (data.fullParams.bar.barWidth) {
+        return data.fullParams.bar.barWidth
+      } else {
+        return data.rankingItemHeight - data.fullParams.bar.barPadding
+      }
+    }),
+    distinctUntilChanged()
+  )
+
+  const transitionDuration$ = fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => d.transitionDuration),
+    distinctUntilChanged()
+  )
+
+  const graphicGSelection$ = combineLatest({
+    containerSelection: containerSelection$,
+    visibleComputedRankingData: visibleComputedRankingData$,
+    rankingScaleList: rankingScaleList$,
+    transitionDuration: transitionDuration$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      
+      return renderGraphicG({
+        containerSelection: data.containerSelection,
+        visibleComputedRankingData: data.visibleComputedRankingData,
+        rankingScaleList: data.rankingScaleList,
+        transitionDuration: data.transitionDuration
+      })
+    })
+  )
+
+  const graphicSelection$ = combineLatest({
+    graphicGSelection: graphicGSelection$,
+    // xyValueIndex: xyValueIndex$,
+    xScale: xScale$,
+    barWidth: barWidth$,
+    transitionDuration: transitionDuration$,
+    fullParams: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      
+      return renderRectBars({
+        graphicGSelection: data.graphicGSelection,
+        rectClassName,
+        // xyValueIndex: data.xyValueIndex,
+        xScale: data.xScale,
+        fullParams: data.fullParams,
+        barWidth: data.barWidth,
+        transitionDuration: data.transitionDuration,
+      })
+    }),
+    shareReplay(1)
+  )
+
+  const highlightTarget$ = fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => d.highlightTarget),
+    distinctUntilChanged()
+  )
+
+  combineLatest({
+    graphicSelection: graphicSelection$,
+    computedData: computedData$,
+    CategoryDataMap: CategoryDataMap$,
+    highlightTarget: highlightTarget$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    data.graphicSelection
+      .on('mouseover', (event, datum) => {
+        // event.stopPropagation()
+        // console.log({
+        //   type: 'multiValue',
+        //   eventName: 'mouseover',
+        //   pluginName,
+        //   highlightTarget: data.highlightTarget,
+        //   datum,
+        //   category: data.CategoryDataMap.get(datum.categoryLabel)!,
+        //   categoryIndex: datum.categoryIndex,
+        //   categoryLabel: datum.categoryLabel,
+        //   data: data.computedData,
+        //   event,
+        // })
+
+        // 只顯示目前的值
+        // datum._visibleValue = [datum.value[datum.xValueIndex]]
+
+        event$.next({
+          type: 'multiValue',
+          eventName: 'mouseover',
+          pluginName,
+          highlightTarget: data.highlightTarget,
+          valueDetail: [
+            {
+              value: datum.value[datum.xValueIndex],
+              valueIndex: datum.xValueIndex,
+              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
+            },
+          ],
+          datum,
+          category: data.CategoryDataMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          data: data.computedData,
+          event,
+        })
+      })
+      .on('mousemove', (event, datum) => {
+        // event.stopPropagation()
+
+        // 只顯示目前的值
+        // datum._visibleValue = [datum.value[datum.xValueIndex]]
+        
+        event$.next({
+          type: 'multiValue',
+          eventName: 'mousemove',
+          pluginName,
+          highlightTarget: data.highlightTarget,
+          valueDetail: [
+            {
+              value: datum.value[datum.xValueIndex],
+              valueIndex: datum.xValueIndex,
+              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
+            },
+          ],
+          datum,
+          category: data.CategoryDataMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          data: data.computedData,
+          event,
+        })
+      })
+      .on('mouseout', (event, datum) => {
+        // event.stopPropagation()
+
+        event$.next({
+          type: 'multiValue',
+          eventName: 'mouseout',
+          pluginName,
+          highlightTarget: data.highlightTarget,
+          valueDetail: [
+            {
+              value: datum.value[datum.xValueIndex],
+              valueIndex: datum.xValueIndex,
+              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
+            },
+          ],
+          datum,
+          category: data.CategoryDataMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          data: data.computedData,
+          event,
+        })
+      })
+      .on('click', (event, datum) => {
+        // event.stopPropagation()
+
+        // 只顯示目前的值
+        // datum._visibleValue = [datum.value[datum.xValueIndex]]
+
+        event$.next({
+          type: 'multiValue',
+          eventName: 'click',
+          pluginName,
+          highlightTarget: data.highlightTarget,
+          valueDetail: [
+            {
+              value: datum.value[datum.xValueIndex],
+              valueIndex: datum.xValueIndex,
+              valueLabel: data.fullDataFormatter.valueLabels[datum.xValueIndex] ?? String(datum.xValueIndex)
+            },
+          ],
+          datum,
+          category: data.CategoryDataMap.get(datum.categoryLabel)!,
+          categoryIndex: datum.categoryIndex,
+          categoryLabel: datum.categoryLabel,
+          data: data.computedData,
+          event,
+        })
+      })
+
+  })
+
+  combineLatest({
+    graphicSelection: graphicSelection$,
+    highlight: highlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
+    fullChartParams: fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    highlight({
+      selection: data.graphicSelection,
+      ids: data.highlight,
+      fullChartParams: data.fullChartParams
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
 }