@orbcharts/plugins-basic 3.0.2 → 3.0.3

package/src/base/BaseXAxis.ts

@@ -1,427 +1,427 @@
-import * as d3 from 'd3'
-import {
-  Observable,
-  Subject,
-  combineLatest,
-  takeUntil,
-  map,
-  distinctUntilChanged,
-  switchMap,
-  shareReplay
-} from 'rxjs'
-import type {
-  ColorType,
-  ChartParams,
-  ContainerSize,
-  ComputedDatumMultiValue,
-  ComputedDataMultiValue,
-  ComputedXYDatumMultiValue,
-  ContainerPositionScaled,
-  DataFormatterMultiValue,
-  DefinePluginConfig,
-  TransformData,
-  Layout
-} from '../../lib/core-types'
-import {
-  defineMultiValuePlugin,
-  createValueToAxisScale,
-  getMinMax
-} from '../../lib/core'
-import type { BaseXAxisParams
-} from '../../lib/plugins-basic-types'
-import type { BasePluginFn } from './types'
-// import { DEFAULT_X_Y_AXES_PARAMS } from '../defaults'
-// import { LAYER_INDEX_OF_AXIS } from '../const'
-import { getColor, getDatumColor, getClassName, getUniID } from '../utils/orbchartsUtils'
-import { parseTickFormatValue } from '../utils/d3Utils'
-import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
-
-interface BaseXAxisContext {
-  selection: d3.Selection<any, unknown, any, unknown>
-  position$: Observable<'top' | 'bottom'>
-  transitionDuration$: Observable<number>
-  computedData$: Observable<ComputedDataMultiValue>
-  // filteredMinMaxValue$: Observable<[number, number]>
-  fullParams$: Observable<BaseXAxisParams>
-  fullDataFormatter$: Observable<DataFormatterMultiValue>
-  fullChartParams$: Observable<ChartParams>
-  isCategorySeprate$: Observable<boolean>
-  containerPosition$: Observable<ContainerPositionScaled[]>
-  // layout$: Observable<Layout>
-  containerSize$: Observable<ContainerSize>
-  xScale$: Observable<d3.ScaleLinear<number, number>>
-  // filteredXYMinMaxData$: Observable<{
-  //   datumList: ComputedXYDatumMultiValue[];
-  //   minXDatum: ComputedXYDatumMultiValue | null;
-  //   maxXDatum: ComputedXYDatumMultiValue | null;
-  //   minYDatum: ComputedXYDatumMultiValue | null;
-  //   maxYDatum: ComputedXYDatumMultiValue | null;
-  // }>
-  // xyMinMax$: Observable<{
-  //   minX: number;
-  //   maxX: number;
-  //   minY: number;
-  //   maxY: number;
-  // }>
-}
-
-// interface TextAlign {
-//   textAnchor: "start" | "middle" | "end"
-//   dominantBaseline: "middle" | "auto" | "hanging"
-// }
-
-const defaultTickSize = 6
-
-const xTickTextAnchor = 'middle'
-const xTickDominantBaseline = 'hanging'
-const xAxisLabelAnchor = 'start'
-const xAxisLabelDominantBaseline = 'hanging'
-
-function renderXAxisLabel ({ selection, position, xLabelClassName, fullParams, containerSize, fullDataFormatter, fullChartParams }: {
-  selection: d3.Selection<SVGGElement, any, any, any>,
-  position: 'top' | 'bottom'
-  xLabelClassName: string
-  fullParams: BaseXAxisParams
-  // axisLabelAlign: TextAlign
-  containerSize: ContainerSize
-  fullDataFormatter: DataFormatterMultiValue,
-  fullChartParams: ChartParams
-  // textReverseTransform: string,
-}) {
-  const offsetX = fullParams.tickPadding + fullParams.labelOffset[0]
-  // const offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
-  let labelX = offsetX
-  
-
-  let y: number // = position === 'top' ? 0 : layout.height
-  let offsetY
-  if (position === 'top') {
-    y = 0
-    offsetY = -fullParams.tickPadding - fullParams.labelOffset[1]
-  } else {
-    y = containerSize.height
-    offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
-  }
-
-  let labelY = offsetY
-
-  const axisLabelSelection = selection
-    .selectAll<SVGGElement, BaseXAxisParams>(`g.${xLabelClassName}`)
-    .data([fullParams])
-    .join('g')
-    .classed(xLabelClassName, true)
-    .each((d, i, g) => {
-      const text = d3.select(g[i])
-        .selectAll<SVGTextElement, BaseXAxisParams>(`text`)
-        .data([d])
-        .join(
-          enter => {
-            return enter
-              .append('text')
-              .style('font-weight', 'bold')
-          },
-          update => update,
-          exit => exit.remove()
-        )
-        .attr('text-anchor', xAxisLabelAnchor)
-        .attr('dominant-baseline', xAxisLabelDominantBaseline)
-        .attr('font-size', fullChartParams.styles.textSize)
-        .style('fill', getColor(fullParams.labelColorType, fullChartParams))
-        // .style('transform', textReverseTransform)
-        // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
-        .attr('x', labelX)
-        .attr('y', labelY)
-        .text(d => fullDataFormatter.xAxis.label)
-    })
-    .attr('transform', d => `translate(${containerSize.width}, ${y})`)
-}
-
-function renderXAxis ({ selection, position, xAxisClassName, fullParams, containerSize, fullChartParams, xScale, transitionDuration }: {
-  selection: d3.Selection<SVGGElement, any, any, any>,
-  position: 'top' | 'bottom'
-  xAxisClassName: string
-  fullParams: BaseXAxisParams
-  // tickTextAlign: TextAlign
-  containerSize: ContainerSize
-  // fullDataFormatter: DataFormatterMultiValue,
-  fullChartParams: ChartParams
-  xScale: d3.ScaleLinear<number, number>
-  // textReverseTransform: string,
-  // xyMinMax: {
-  //   minX: number;
-  //   maxX: number;
-  //   minY: number;
-  //   maxY: number;
-  // }
-  transitionDuration: number
-}) {
-
-  let y: number
-  let d3Axis: d3.Axis<d3.NumberValue>
-  if (position === 'top') {
-    y = 0
-    d3Axis = d3.axisTop(xScale)
-  } else {
-    y = containerSize.height
-    d3Axis = d3.axisBottom(xScale)
-  }
-
-  const xAxisSelection = selection
-    .selectAll<SVGGElement, BaseXAxisParams>(`g.${xAxisClassName}`)
-    .data([fullParams])
-    .join('g')
-    .classed(xAxisClassName, true)
-    .attr('transform', `translate(0, ${y})`)
-
-  // const _xScale = d3.scaleLinear()
-  //   .domain([0, 150])
-  //   .range([416.5, 791.349])
-
-  // 刻度文字偏移
-  let tickPadding = fullParams.tickPadding
-
-  // 設定Y軸刻度
-  const xAxis = d3Axis
-    .scale(xScale)
-    .ticks(fullParams.ticks) // 刻度分段數量
-    .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
-    .tickSize(fullParams.tickFullLine == true
-      ? -containerSize.height
-      : defaultTickSize)
-    .tickSizeOuter(-containerSize.height)
-    .tickPadding(tickPadding)
-  
-  const xAxisEl = xAxisSelection
-    .transition()
-    .duration(transitionDuration)
-    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
-    .call(xAxis)
-  
-  xAxisEl.selectAll('line')
-    .style('fill', 'none')
-    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
-    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
-    .attr('pointer-events', 'none')
-  
-  xAxisEl.selectAll('path')
-    .style('fill', 'none')
-    // .style('stroke', this.fullParams.axisLineColor!)
-    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
-    .style('shape-rendering', 'crispEdges')
-  
-  // const xText = xAxisEl.selectAll('text')
-  const xText = xAxisSelection.selectAll('text')
-    // .style('font-family', 'sans-serif')
-    .attr('font-size', fullChartParams.styles.textSize)
-    .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
-    .attr('text-anchor', xTickTextAnchor)
-    .attr('dominant-baseline', xTickDominantBaseline)
-    // .attr('dy', tickPadding)
-    // .attr('y', tickPadding)
-    // xText.style('transform', textReverseTransform)
-  
-  // // 抵消掉預設的偏移
-  // if (fullDataFormatter.grid.valueAxis.position === 'bottom' || fullDataFormatter.grid.valueAxis.position === 'top') {
-    xText.attr('dy', 0)
-  // }
-
-  return xAxisSelection
-}
-
-export const createBaseXAxis: BasePluginFn<BaseXAxisContext> = (pluginName: string, {
-  selection,
-  position$,
-  computedData$,
-  fullParams$,
-  fullDataFormatter$,
-  fullChartParams$,
-  isCategorySeprate$,
-  containerPosition$,
-  // layout$,
-  containerSize$,
-  xScale$,
-  // filteredXYMinMaxData$,
-  // xyMinMax$
-  transitionDuration$
-}) => {
-  
-  const destroy$ = new Subject()
-
-  // const containerClassName = getClassName(pluginName, 'container')
-  const xAxisGClassName = getClassName(pluginName, 'xAxisG')
-  const xAxisClassName = getClassName(pluginName, 'xAxis')
-  const xLabelClassName = getClassName(pluginName, 'xLabel')
-
-  const containerSelection$ = multiValueContainerSelectionsObservable({
-    selection,
-    pluginName,
-    clipPathID: null,
-    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)
-  //   })
-  // )
-
-  const axisSelection$ = containerSelection$.pipe(
-    takeUntil(destroy$),
-    map((containerSelection, i) => {
-      return containerSelection
-        .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${xAxisGClassName}`)
-        .data([xAxisGClassName])
-        .join('g')
-        .classed(xAxisGClassName, true)
-    })
-  )
-
-  // combineLatest({
-  //   containerSelection: containerSelection$,
-  //   gridContainerPosition: containerPosition$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   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)
-  // })
-
-  // const textReverseTransform$ = containerPosition$.pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async (d) => d),
-  //   map(containerPosition => {
-  //     // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
-  //     // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
-  //     const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
-  //     // 抵消最外層scale
-  //     return `${containerScaleReverseValue}`
-  //   }),
-  //   distinctUntilChanged()
-  // )
-
-  // const xScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
-  //   combineLatest({
-  //     fullDataFormatter: fullDataFormatter$,
-  //     layout: layout$,
-  //     // xyMinMax: xyMinMax$
-  //     filteredXYMinMaxData: filteredXYMinMaxData$
-  //   }).pipe(
-  //     takeUntil(destroy$),
-  //     switchMap(async (d) => d),
-  //   ).subscribe(data => {
-  //     const valueIndex = data.fullDataFormatter.xAxis.valueIndex
-  //     if (!data.filteredXYMinMaxData.minXDatum || !data.filteredXYMinMaxData.maxXDatum
-  //       || data.filteredXYMinMaxData.minXDatum.value[valueIndex] == null || data.filteredXYMinMaxData.maxXDatum.value[valueIndex] == null
-  //     ) {
-  //       return
-  //     }
-  //     let maxValue = data.filteredXYMinMaxData.maxXDatum.value[valueIndex]
-  //     let minValue = data.filteredXYMinMaxData.minXDatum.value[valueIndex]
-  //     if (maxValue === minValue && maxValue === 0) {
-  //       // 避免最大及最小值同等於 0 造成無法計算scale
-  //       maxValue = 1
-  //     }
-
-  //     const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-  //       maxValue,
-  //       minValue,
-  //       axisWidth: data.layout.width,
-  //       scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
-  //       scaleRange: data.fullDataFormatter.xAxis.scaleRange,
-  //     })
-
-  //     subscriber.next(xScale)
-  //   })
-  // })
-
-  combineLatest({
-    axisSelection: axisSelection$,
-    position: position$,
-    fullParams: fullParams$,
-    // tickTextAlign: tickTextAlign$,
-    // axisLabelAlign: axisLabelAlign$,
-    computedData: computedData$,
-    // layout: layout$,
-    containerSize: containerSize$,
-    fullDataFormatter: fullDataFormatter$,
-    fullChartParams: fullChartParams$,
-    xScale: xScale$,
-    // textReverseTransform: textReverseTransform$,
-    // xyMinMax: xyMinMax$
-    transitionDuration: transitionDuration$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-  ).subscribe(data => {
-    // console.log('data.layout', data.layout)
-    // console.log('data.containerSize', data.containerSize)
-
-    renderXAxis({
-      selection: data.axisSelection,
-      position: data.position,
-      xAxisClassName,
-      fullParams: data.fullParams,
-      // tickTextAlign: data.tickTextAlign,
-      containerSize: data.containerSize,
-      // fullDataFormatter: data.fullDataFormatter,
-      fullChartParams: data.fullChartParams,
-      xScale: data.xScale,
-      // textReverseTransform: data.textReverseTransform,
-      // xyMinMax: data.xyMinMax
-      transitionDuration: data.transitionDuration
-    })
-
-    renderXAxisLabel({
-      selection: data.axisSelection,
-      position: data.position,
-      xLabelClassName,
-      fullParams: data.fullParams,
-      // axisLabelAlign: data.axisLabelAlign,
-      containerSize: data.containerSize,
-      fullDataFormatter: data.fullDataFormatter,
-      fullChartParams: data.fullChartParams,
-      // textReverseTransform: data.textReverseTransform,
-    })
-
-  })
-
-
-  return () => {
-    destroy$.next(undefined)
-  }
-}
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  ColorType,
+  ChartParams,
+  ContainerSize,
+  ComputedDatumMultiValue,
+  ComputedDataMultiValue,
+  ComputedXYDatumMultiValue,
+  ContainerPositionScaled,
+  DataFormatterMultiValue,
+  DefinePluginConfig,
+  TransformData,
+  Layout
+} from '../../lib/core-types'
+import {
+  defineMultiValuePlugin,
+  createValueToAxisScale,
+  getMinMax
+} from '../../lib/core'
+import type { BaseXAxisParams
+} from '../../lib/plugins-basic-types'
+import type { BasePluginFn } from './types'
+// import { DEFAULT_X_Y_AXES_PARAMS } from '../defaults'
+// import { LAYER_INDEX_OF_AXIS } from '../const'
+import { getColor, getDatumColor, getClassName, getUniID } from '../utils/orbchartsUtils'
+import { parseTickFormatValue } from '../utils/d3Utils'
+import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
+
+interface BaseXAxisContext {
+  selection: d3.Selection<any, unknown, any, unknown>
+  position$: Observable<'top' | 'bottom'>
+  transitionDuration$: Observable<number>
+  computedData$: Observable<ComputedDataMultiValue>
+  // filteredMinMaxValue$: Observable<[number, number]>
+  fullParams$: Observable<BaseXAxisParams>
+  fullDataFormatter$: Observable<DataFormatterMultiValue>
+  fullChartParams$: Observable<ChartParams>
+  isCategorySeprate$: Observable<boolean>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  // layout$: Observable<Layout>
+  containerSize$: Observable<ContainerSize>
+  xScale$: Observable<d3.ScaleLinear<number, number>>
+  // filteredXYMinMaxData$: Observable<{
+  //   datumList: ComputedXYDatumMultiValue[];
+  //   minXDatum: ComputedXYDatumMultiValue | null;
+  //   maxXDatum: ComputedXYDatumMultiValue | null;
+  //   minYDatum: ComputedXYDatumMultiValue | null;
+  //   maxYDatum: ComputedXYDatumMultiValue | null;
+  // }>
+  // xyMinMax$: Observable<{
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }>
+}
+
+// interface TextAlign {
+//   textAnchor: "start" | "middle" | "end"
+//   dominantBaseline: "middle" | "auto" | "hanging"
+// }
+
+const defaultTickSize = 6
+
+const xTickTextAnchor = 'middle'
+const xTickDominantBaseline = 'hanging'
+const xAxisLabelAnchor = 'start'
+const xAxisLabelDominantBaseline = 'hanging'
+
+function renderXAxisLabel ({ selection, position, xLabelClassName, fullParams, containerSize, fullDataFormatter, fullChartParams }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  position: 'top' | 'bottom'
+  xLabelClassName: string
+  fullParams: BaseXAxisParams
+  // axisLabelAlign: TextAlign
+  containerSize: ContainerSize
+  fullDataFormatter: DataFormatterMultiValue,
+  fullChartParams: ChartParams
+  // textReverseTransform: string,
+}) {
+  const offsetX = fullParams.tickPadding + fullParams.labelOffset[0]
+  // const offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
+  let labelX = offsetX
+  
+
+  let y: number // = position === 'top' ? 0 : layout.height
+  let offsetY
+  if (position === 'top') {
+    y = 0
+    offsetY = -fullParams.tickPadding - fullParams.labelOffset[1]
+  } else {
+    y = containerSize.height
+    offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
+  }
+
+  let labelY = offsetY
+
+  const axisLabelSelection = selection
+    .selectAll<SVGGElement, BaseXAxisParams>(`g.${xLabelClassName}`)
+    .data([fullParams])
+    .join('g')
+    .classed(xLabelClassName, true)
+    .each((d, i, g) => {
+      const text = d3.select(g[i])
+        .selectAll<SVGTextElement, BaseXAxisParams>(`text`)
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('text')
+              .style('font-weight', 'bold')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('text-anchor', xAxisLabelAnchor)
+        .attr('dominant-baseline', xAxisLabelDominantBaseline)
+        .attr('font-size', fullChartParams.styles.textSize)
+        .style('fill', getColor(fullParams.labelColorType, fullChartParams))
+        // .style('transform', textReverseTransform)
+        // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
+        .attr('x', labelX)
+        .attr('y', labelY)
+        .text(d => fullDataFormatter.xAxis.label)
+    })
+    .attr('transform', d => `translate(${containerSize.width}, ${y})`)
+}
+
+function renderXAxis ({ selection, position, xAxisClassName, fullParams, containerSize, fullChartParams, xScale, transitionDuration }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  position: 'top' | 'bottom'
+  xAxisClassName: string
+  fullParams: BaseXAxisParams
+  // tickTextAlign: TextAlign
+  containerSize: ContainerSize
+  // fullDataFormatter: DataFormatterMultiValue,
+  fullChartParams: ChartParams
+  xScale: d3.ScaleLinear<number, number>
+  // textReverseTransform: string,
+  // xyMinMax: {
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }
+  transitionDuration: number
+}) {
+
+  let y: number
+  let d3Axis: d3.Axis<d3.NumberValue>
+  if (position === 'top') {
+    y = 0
+    d3Axis = d3.axisTop(xScale)
+  } else {
+    y = containerSize.height
+    d3Axis = d3.axisBottom(xScale)
+  }
+
+  const xAxisSelection = selection
+    .selectAll<SVGGElement, BaseXAxisParams>(`g.${xAxisClassName}`)
+    .data([fullParams])
+    .join('g')
+    .classed(xAxisClassName, true)
+    .attr('transform', `translate(0, ${y})`)
+
+  // const _xScale = d3.scaleLinear()
+  //   .domain([0, 150])
+  //   .range([416.5, 791.349])
+
+  // 刻度文字偏移
+  let tickPadding = fullParams.tickPadding
+
+  // 設定Y軸刻度
+  const xAxis = d3Axis
+    .scale(xScale)
+    .ticks(fullParams.ticks) // 刻度分段數量
+    .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
+    .tickSize(fullParams.tickFullLine == true
+      ? -containerSize.height
+      : defaultTickSize)
+    .tickSizeOuter(-containerSize.height)
+    .tickPadding(tickPadding)
+  
+  const xAxisEl = xAxisSelection
+    .transition()
+    .duration(transitionDuration)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
+    .call(xAxis)
+  
+  xAxisEl.selectAll('line')
+    .style('fill', 'none')
+    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
+    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
+    .attr('pointer-events', 'none')
+  
+  xAxisEl.selectAll('path')
+    .style('fill', 'none')
+    // .style('stroke', this.fullParams.axisLineColor!)
+    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
+    .style('shape-rendering', 'crispEdges')
+  
+  // const xText = xAxisEl.selectAll('text')
+  const xText = xAxisSelection.selectAll('text')
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', fullChartParams.styles.textSize)
+    .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
+    .attr('text-anchor', xTickTextAnchor)
+    .attr('dominant-baseline', xTickDominantBaseline)
+    // .attr('dy', tickPadding)
+    // .attr('y', tickPadding)
+    // xText.style('transform', textReverseTransform)
+  
+  // // 抵消掉預設的偏移
+  // if (fullDataFormatter.grid.valueAxis.position === 'bottom' || fullDataFormatter.grid.valueAxis.position === 'top') {
+    xText.attr('dy', 0)
+  // }
+
+  return xAxisSelection
+}
+
+export const createBaseXAxis: BasePluginFn<BaseXAxisContext> = (pluginName: string, {
+  selection,
+  position$,
+  computedData$,
+  fullParams$,
+  fullDataFormatter$,
+  fullChartParams$,
+  isCategorySeprate$,
+  containerPosition$,
+  // layout$,
+  containerSize$,
+  xScale$,
+  // filteredXYMinMaxData$,
+  // xyMinMax$
+  transitionDuration$
+}) => {
+  
+  const destroy$ = new Subject()
+
+  // const containerClassName = getClassName(pluginName, 'container')
+  const xAxisGClassName = getClassName(pluginName, 'xAxisG')
+  const xAxisClassName = getClassName(pluginName, 'xAxis')
+  const xLabelClassName = getClassName(pluginName, 'xLabel')
+
+  const containerSelection$ = multiValueContainerSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID: null,
+    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)
+  //   })
+  // )
+
+  const axisSelection$ = containerSelection$.pipe(
+    takeUntil(destroy$),
+    map((containerSelection, i) => {
+      return containerSelection
+        .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${xAxisGClassName}`)
+        .data([xAxisGClassName])
+        .join('g')
+        .classed(xAxisGClassName, true)
+    })
+  )
+
+  // combineLatest({
+  //   containerSelection: containerSelection$,
+  //   gridContainerPosition: containerPosition$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   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)
+  // })
+
+  // const textReverseTransform$ = containerPosition$.pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(containerPosition => {
+  //     // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
+  //     // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
+  //     const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
+  //     // 抵消最外層scale
+  //     return `${containerScaleReverseValue}`
+  //   }),
+  //   distinctUntilChanged()
+  // )
+
+  // const xScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
+  //   combineLatest({
+  //     fullDataFormatter: fullDataFormatter$,
+  //     layout: layout$,
+  //     // xyMinMax: xyMinMax$
+  //     filteredXYMinMaxData: filteredXYMinMaxData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const valueIndex = data.fullDataFormatter.xAxis.valueIndex
+  //     if (!data.filteredXYMinMaxData.minXDatum || !data.filteredXYMinMaxData.maxXDatum
+  //       || data.filteredXYMinMaxData.minXDatum.value[valueIndex] == null || data.filteredXYMinMaxData.maxXDatum.value[valueIndex] == null
+  //     ) {
+  //       return
+  //     }
+  //     let maxValue = data.filteredXYMinMaxData.maxXDatum.value[valueIndex]
+  //     let minValue = data.filteredXYMinMaxData.minXDatum.value[valueIndex]
+  //     if (maxValue === minValue && maxValue === 0) {
+  //       // 避免最大及最小值同等於 0 造成無法計算scale
+  //       maxValue = 1
+  //     }
+
+  //     const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+  //       maxValue,
+  //       minValue,
+  //       axisWidth: data.layout.width,
+  //       scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.xAxis.scaleRange,
+  //     })
+
+  //     subscriber.next(xScale)
+  //   })
+  // })
+
+  combineLatest({
+    axisSelection: axisSelection$,
+    position: position$,
+    fullParams: fullParams$,
+    // tickTextAlign: tickTextAlign$,
+    // axisLabelAlign: axisLabelAlign$,
+    computedData: computedData$,
+    // layout: layout$,
+    containerSize: containerSize$,
+    fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
+    xScale: xScale$,
+    // textReverseTransform: textReverseTransform$,
+    // xyMinMax: xyMinMax$
+    transitionDuration: transitionDuration$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+    // console.log('data.layout', data.layout)
+    // console.log('data.containerSize', data.containerSize)
+
+    renderXAxis({
+      selection: data.axisSelection,
+      position: data.position,
+      xAxisClassName,
+      fullParams: data.fullParams,
+      // tickTextAlign: data.tickTextAlign,
+      containerSize: data.containerSize,
+      // fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      xScale: data.xScale,
+      // textReverseTransform: data.textReverseTransform,
+      // xyMinMax: data.xyMinMax
+      transitionDuration: data.transitionDuration
+    })
+
+    renderXAxisLabel({
+      selection: data.axisSelection,
+      position: data.position,
+      xLabelClassName,
+      fullParams: data.fullParams,
+      // axisLabelAlign: data.axisLabelAlign,
+      containerSize: data.containerSize,
+      fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      // textReverseTransform: data.textReverseTransform,
+    })
+
+  })
+
+
+  return () => {
+    destroy$.next(undefined)
+  }
+}