@orbcharts/plugins-basic 3.0.6 → 3.0.7

package/src/multiValue/plugins/OrdinalAxis.ts

@@ -1,525 +1,525 @@
-import * as d3 from 'd3'
-import {
-  Observable,
-  Subject,
-  combineLatest,
-  takeUntil,
-  of,
-  map,
-  distinctUntilChanged,
-  switchMap,
-  shareReplay
-} from 'rxjs'
-import type {
-  ContainerSize,
-  ChartParams,
-  ComputedDatumMultiValue,
-  DataFormatterMultiValue,
-  DefinePluginConfig,
-  Layout
-} from '../../../lib/core-types'
-import type { OrdinalAxisParams } from '../../../lib/plugins-basic-types'
-import {
-  defineMultiValuePlugin,
-  createDefaultValueLabel
-} from '../../../lib/core'
-import { DEFAULT_ORDINAL_AXIS_PARAMS } from '../defaults'
-import { LAYER_INDEX_OF_AXIS } from '../../const'
-// import { createBaseXAxis } from '../../base/BaseXAxis'
-import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { multiValueContainerSelectionsObservable } from '../multiValueObservables'
-import { renderTspansOnAxis } from '../../utils/d3Graphics'
-import { parseTickFormatValue } from '../../utils/d3Utils'
-
-type ClipPathDatum = {
-  id: string;
-  // x: number;
-  // y: number;
-  width: number;
-  height: number;
-}
-
-// interface TextAlign {
-//   textAnchor: "start" | "middle" | "end"
-//   dominantBaseline: "middle" | "auto" | "hanging"
-// }
-
-interface ValueLabelData {
-  text: string
-  textArr: string[]
-}
-
-const pluginName = 'OrdinalAxis'
-
-const defaultTickSize = 6
-const xAxisLabelAnchor = 'start'
-const xAxisLabelDominantBaseline = 'auto'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_ORDINAL_AXIS_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_ORDINAL_AXIS_PARAMS,
-  layerIndex: LAYER_INDEX_OF_AXIS,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      labelOffset: {
-        toBe: '[number, number]',
-        test: (value: any) => {
-          return Array.isArray(value)
-            && value.length === 2
-            && typeof value[0] === 'number'
-            && typeof value[1] === 'number'
-        }
-      },
-      labelColorType: {
-        toBeOption: 'ColorType',
-      },
-      axisLineVisible: {
-        toBeTypes: ['boolean']
-      },
-      axisLineColorType: {
-        toBeOption: 'ColorType',
-      },
-      ticks: {
-        toBeTypes: ['number', 'null']
-      },
-      tickFormat: {
-        toBeTypes: ['string', 'Function']
-      },
-      tickLineVisible: {
-        toBeTypes: ['boolean']
-      },
-      tickPadding: {
-        toBeTypes: ['number']
-      },
-      tickFullLine: {
-        toBeTypes: ['boolean']
-      },
-      tickFullLineDasharray: {
-        toBeTypes: ['string']
-      },
-      tickColorType: {
-        toBeOption: 'ColorType',
-      },
-      tickTextRotate: {
-        toBeTypes: ['number']
-      },
-      tickTextColorType: {
-        toBeOption: 'ColorType',
-      }
-    })
-    if (result.status === 'error') {
-      return result
-    }
-    return result
-  }
-}
-
-function createValueLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string  | d3.NumberValue)): ValueLabelData[] {
-  return groupLabels.map((_text, i) => {
-    const text = parseTickFormatValue(_text, tickFormat)
-    const textArr = typeof text === 'string' ? text.split('\n') : [text]
-    
-    return {
-      text,
-      textArr
-    }
-  })
-}
-
-function renderAxisLabel ({ selection, axisLabelClassName, fullParams, containerSize, fullDataFormatter, fullChartParams }: {
-  selection: d3.Selection<SVGGElement, any, any, any>,
-  axisLabelClassName: string
-  fullParams: OrdinalAxisParams
-  // 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, OrdinalAxisParams>(`g.${axisLabelClassName}`)
-      .data([fullParams])
-      .join('g')
-      .classed(axisLabelClassName, true)
-      .each((d, i, g) => {
-        const text = d3.select(g[i])
-          .selectAll<SVGTextElement, OrdinalAxisParams>(`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 renderAxis ({ selection, ordinalXAxisClassName, fullParams, containerSize, fullDataFormatter, fullChartParams, ordinalScale, ordinalScaleDomain, valueLabelData, textRotateTransform, textSizePx, ordinalPadding }: {
-  selection: d3.Selection<SVGGElement, any, any, any>,
-  ordinalXAxisClassName: string
-  fullParams: OrdinalAxisParams
-  // tickTextAlign: TextAlign
-  containerSize: ContainerSize
-  fullDataFormatter: DataFormatterMultiValue,
-  fullChartParams: ChartParams
-  ordinalScale: d3.ScaleLinear<number, number>
-  ordinalScaleDomain: number[]
-  // groupLabels: string[]
-  valueLabelData: ValueLabelData[]
-  // textReverseTransformWithRotate: string
-  textRotateTransform: string
-  textSizePx: number
-  ordinalPadding: number
-}) {
-
-  const textAnchor = fullParams.tickTextRotate
-    ? 'start'
-    : 'middle'
-  const dominantBaseline = 'auto'
-
-  const xAxisSelection = selection
-    .selectAll<SVGGElement, OrdinalAxisParams>(`g.${ordinalXAxisClassName}`)
-    .data([fullParams])
-    .join('g')
-    .classed(ordinalXAxisClassName, true)
-    .attr('transform', `translate(${ordinalPadding}, 0)`)
-
-  // 計算所有範圍內groupLabels數量（顯示所有刻度）
-  const allTicksAmount = Math.floor(ordinalScaleDomain[1]) - Math.ceil(ordinalScaleDomain[0]) + 1
-
-  // 刻度文字偏移
-  let tickPadding = 0
-  let textX = 0
-  // if (fullDataFormatter.groupAxis.position === 'left') {
-  //   tickPadding = 0
-  //   textX = - fullParams.tickPadding
-  // } else if (fullDataFormatter.groupAxis.position === 'right') {
-  //   tickPadding = 0
-  //   textX = fullParams.tickPadding
-  // } else if (fullDataFormatter.groupAxis.position === 'bottom') {
-  //   if (fullParams.tickFullLine == true) {
-  //     tickPadding = - fullParams.tickPadding
-  //   } else {
-  //     tickPadding = - fullParams.tickPadding - defaultTickSize
-  //   }
-  //   textX = 0
-  // } else if (fullDataFormatter.groupAxis.position === 'top') {
-    if (fullParams.tickFullLine == true) {
-      tickPadding = fullParams.tickPadding
-    } else {
-      tickPadding = fullParams.tickPadding - defaultTickSize
-    }
-    textX = - 0
-  // }
-
-  // 設定X軸刻度
-  const xAxis = d3.axisTop(ordinalScale)
-    .scale(ordinalScale)
-    .ticks(fullParams.ticks === 'all'
-      ? allTicksAmount
-      : fullParams.ticks > allTicksAmount
-        // 不顯示超過groupLabels數量的刻度
-        ? allTicksAmount - 1 // 不知為何設剛好一樣的數字會多一個刻度，所以 -1 強制避免這個狀況
-        : fullParams.ticks)
-    .tickSize(fullParams.tickFullLine == true
-      ? - containerSize.height
-      : defaultTickSize)
-    .tickSizeOuter(0)
-    .tickFormat((valueIndex: number, i) => {
-      // 用index對應到groupLabel
-      // const groupLabel = groupLabels[valueIndex ] ?? '' // 非整數index不顯示
-      // return parseTickFormatValue(groupLabel, fullParams.tickFormat)
-      return valueLabelData[valueIndex]?.text ?? ''
-    })
-    .tickPadding(tickPadding)
-
-  const xAxisEl = xAxisSelection
-    .transition()
-    .duration(100)
-    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
-    .call(xAxis)
-    
-    .on('end', (self, t) => {
-      // 先等transition結束再處理文字，否則會被原本的文字覆蓋
-      xAxisSelection
-        .selectAll('.tick text')
-        .each((valueIndex: number, i, n) => {
-          // const groupLabel = groupLabels[valueIndex ] ?? '' // 非整數index不顯示
-          // const groupLabelText = parseTickFormatValue(groupLabel, fullParams.tickFormat)
-          // console.log(valueIndex)
-          const textArr = valueLabelData[valueIndex]?.textArr ?? []
-          // 將原本單行文字改為多行文字
-          renderTspansOnAxis(d3.select(n[i]), {
-            textArr,
-            textSizePx,
-            groupAxisPosition: 'top',
-            isContainerRotated: true
-          })
-        })
-    })
-
-  xAxisEl.selectAll('line')
-    .style('fill', 'none')
-    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
-    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
-    .style('vector-effect', 'non-scaling-stroke') // 避免 scale 導致線條變形
-    .attr('pointer-events', 'none')
-
-  xAxisEl.selectAll('path')
-    .style('fill', 'none')
-    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
-    .style('shape-rendering', 'crispEdges')
-
-  const xText = xAxisSelection.selectAll<SVGTextElement, OrdinalAxisParams>('text')
-    // .style('font-family', 'sans-serif')
-    .attr('font-size', fullChartParams.styles.textSize)
-    // .style('font-weight', 'bold')
-    .attr('fill', getColor(fullParams.tickTextColorType, fullChartParams))
-    .attr('text-anchor', textAnchor)
-    .attr('dominant-baseline', dominantBaseline)
-    .attr('x', textX)
-    .style('transform', textRotateTransform)
-  
-  // 抵消掉預設的偏移
-  // if (fullDataFormatter.groupAxis.position === 'left' || fullDataFormatter.groupAxis.position === 'right') {
-    xText.attr('dy', 0)
-  // }
-    
-  return xAxisSelection
-}
-
-
-function renderClipPath ({ defsSelection, clipPathData }: {
-  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
-  clipPathData: ClipPathDatum[]
-  // textReverseTransform: string
-}) {
-  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)
-    // .attr('transform', textReverseTransform)
-    .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', _d => - _d.width)
-        .attr('y', 0)
-        .attr('width', _d => _d.width * 2)
-        .attr('height', _d => _d.height)
-    })
-}
-
-export const OrdinalAxis = defineMultiValuePlugin(pluginConfig)(({ selection, name, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const xAxisGClassName = getClassName(pluginName, 'xAxisG')
-  const ordinalXAxisClassName = getClassName(pluginName, 'axis')
-  const axisLabelClassName = getClassName(pluginName, 'axis-label')
-  const clipPathID = getUniID(pluginName, 'clipPath-box')
-
-  const containerSelection$ = multiValueContainerSelectionsObservable({
-    selection,
-    pluginName,
-    clipPathID: null,
-    computedData$: observer.computedData$,
-    containerPosition$: observer.containerPosition$,
-    isCategorySeprate$: observer.isCategorySeprate$,
-  }).pipe(
-    takeUntil(destroy$),
-  )
-
-  observer.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
-    })
-  })
-
-  const axisSelection$ = containerSelection$.pipe(
-      takeUntil(destroy$),
-      map((containerSelection, i) => {
-        return containerSelection
-          .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${xAxisGClassName}`)
-          .data([xAxisGClassName])
-          .join('g')
-          .classed(xAxisGClassName, true)
-      })
-    )
-
-  const valueLabelData$ = combineLatest({
-    valueLabels: observer.valueLabels$,
-    fullParams: observer.fullParams$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      return createValueLabelData(data.valueLabels, data.fullParams.tickFormat)
-    }),
-    shareReplay(1)
-  )
-
-  // const tickTextAlign$: Observable<TextAlign> = observer.fullParams$.pipe(
-  //   takeUntil(destroy$),
-  //   map(data => {
-  //     let textAnchor: 'start' | 'middle' | 'end' = 'middle'
-  //     let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
-
-  //     textAnchor = data.tickTextRotate
-  //       ? 'start'
-  //       : 'middle'
-  //     dominantBaseline = 'auto'
-
-  //     return {
-  //       textAnchor,
-  //       dominantBaseline
-  //     }
-  //   })
-  // )
-
-  const ordinalScaleDomain$ = combineLatest({
-    valueLabelData: valueLabelData$,
-    fullDataFormatter: observer.fullDataFormatter$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-    map(data => {
-      const groupMin = 0//- 0.5
-      const groupMax = data.valueLabelData.length - 1//0.5
-      // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
-      //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
-      //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
-      const groupScaleDomainMin = data.fullDataFormatter.xAxis.scaleDomain[0] === 'min' || data.fullDataFormatter.xAxis.scaleDomain[0] === 'auto'
-        ? groupMin
-        : data.fullDataFormatter.xAxis.scaleDomain[0] as number// - 0.5
-      const groupScaleDomainMax = data.fullDataFormatter.xAxis.scaleDomain[1] === 'max' || data.fullDataFormatter.xAxis.scaleDomain[1] === 'auto'
-        ? groupMax
-        : data.fullDataFormatter.xAxis.scaleDomain[1] as number// - 0.5
-
-      return [groupScaleDomainMin, groupScaleDomainMax]
-    }),
-    shareReplay(1)
-  )
-
-  const textRotateTransform$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return data.tickTextRotate
-        ? `rotate(${data.tickTextRotate})`
-        : ''
-    })
-  )
-
-  combineLatest({
-    axisSelection: axisSelection$,
-    fullParams: observer.fullParams$,
-    // tickTextAlign: tickTextAlign$,
-    // axisLabelAlign: axisLabelAlign$,
-    containerSize: observer.containerSize$,
-    fullDataFormatter: observer.fullDataFormatter$,
-    fullChartParams: observer.fullChartParams$,
-    ordinalScale: observer.ordinalScale$,
-    ordinalScaleDomain: ordinalScaleDomain$,
-    // groupLabels: groupLabels$,
-    valueLabelData: valueLabelData$,
-    // textReverseTransform: textReverseTransform$,
-    // textReverseTransformWithRotate: textReverseTransformWithRotate$,
-    textRotateTransform: textRotateTransform$,
-    textSizePx: observer.textSizePx$,
-    // tickTextFormatter: tickTextFormatter$
-    ordinalPadding: observer.ordinalPadding$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async (d) => d),
-  ).subscribe(data => {
-
-    renderAxis({
-      selection: data.axisSelection,
-      ordinalXAxisClassName,
-      fullParams: data.fullParams,
-      // tickTextAlign: data.tickTextAlign,
-      containerSize: data.containerSize,
-      fullDataFormatter: data.fullDataFormatter,
-      fullChartParams: data.fullChartParams,
-      ordinalScale: data.ordinalScale,
-      ordinalScaleDomain: data.ordinalScaleDomain,
-      // groupLabels: data.groupLabels,
-      valueLabelData: data.valueLabelData,
-      // textReverseTransformWithRotate: data.textReverseTransformWithRotate,
-      textRotateTransform: data.textRotateTransform,
-      textSizePx: data.textSizePx,
-      ordinalPadding: data.ordinalPadding
-    })
-
-    renderAxisLabel({
-      selection: data.axisSelection,
-      axisLabelClassName,
-      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,
+  of,
+  map,
+  distinctUntilChanged,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  ContainerSize,
+  ChartParams,
+  ComputedDatumMultiValue,
+  DataFormatterMultiValue,
+  DefinePluginConfig,
+  Layout
+} from '../../../lib/core-types'
+import type { OrdinalAxisParams } from '../../../lib/plugins-basic-types'
+import {
+  defineMultiValuePlugin,
+  createDefaultValueLabel
+} from '../../../lib/core'
+import { DEFAULT_ORDINAL_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
+// import { createBaseXAxis } from '../../base/BaseXAxis'
+import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { multiValueContainerSelectionsObservable } from '../multiValueObservables'
+import { renderTspansOnAxis } from '../../utils/d3Graphics'
+import { parseTickFormatValue } from '../../utils/d3Utils'
+
+type ClipPathDatum = {
+  id: string;
+  // x: number;
+  // y: number;
+  width: number;
+  height: number;
+}
+
+// interface TextAlign {
+//   textAnchor: "start" | "middle" | "end"
+//   dominantBaseline: "middle" | "auto" | "hanging"
+// }
+
+interface ValueLabelData {
+  text: string
+  textArr: string[]
+}
+
+const pluginName = 'OrdinalAxis'
+
+const defaultTickSize = 6
+const xAxisLabelAnchor = 'start'
+const xAxisLabelDominantBaseline = 'auto'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_ORDINAL_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_ORDINAL_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextRotate: {
+        toBeTypes: ['number']
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    if (result.status === 'error') {
+      return result
+    }
+    return result
+  }
+}
+
+function createValueLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string  | d3.NumberValue)): ValueLabelData[] {
+  return groupLabels.map((_text, i) => {
+    const text = parseTickFormatValue(_text, tickFormat)
+    const textArr = typeof text === 'string' ? text.split('\n') : [text]
+    
+    return {
+      text,
+      textArr
+    }
+  })
+}
+
+function renderAxisLabel ({ selection, axisLabelClassName, fullParams, containerSize, fullDataFormatter, fullChartParams }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  axisLabelClassName: string
+  fullParams: OrdinalAxisParams
+  // 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, OrdinalAxisParams>(`g.${axisLabelClassName}`)
+      .data([fullParams])
+      .join('g')
+      .classed(axisLabelClassName, true)
+      .each((d, i, g) => {
+        const text = d3.select(g[i])
+          .selectAll<SVGTextElement, OrdinalAxisParams>(`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 renderAxis ({ selection, ordinalXAxisClassName, fullParams, containerSize, fullDataFormatter, fullChartParams, ordinalScale, ordinalScaleDomain, valueLabelData, textRotateTransform, textSizePx, ordinalPadding }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  ordinalXAxisClassName: string
+  fullParams: OrdinalAxisParams
+  // tickTextAlign: TextAlign
+  containerSize: ContainerSize
+  fullDataFormatter: DataFormatterMultiValue,
+  fullChartParams: ChartParams
+  ordinalScale: d3.ScaleLinear<number, number>
+  ordinalScaleDomain: number[]
+  // groupLabels: string[]
+  valueLabelData: ValueLabelData[]
+  // textReverseTransformWithRotate: string
+  textRotateTransform: string
+  textSizePx: number
+  ordinalPadding: number
+}) {
+
+  const textAnchor = fullParams.tickTextRotate
+    ? 'start'
+    : 'middle'
+  const dominantBaseline = 'auto'
+
+  const xAxisSelection = selection
+    .selectAll<SVGGElement, OrdinalAxisParams>(`g.${ordinalXAxisClassName}`)
+    .data([fullParams])
+    .join('g')
+    .classed(ordinalXAxisClassName, true)
+    .attr('transform', `translate(${ordinalPadding}, 0)`)
+
+  // 計算所有範圍內groupLabels數量（顯示所有刻度）
+  const allTicksAmount = Math.floor(ordinalScaleDomain[1]) - Math.ceil(ordinalScaleDomain[0]) + 1
+
+  // 刻度文字偏移
+  let tickPadding = 0
+  let textX = 0
+  // if (fullDataFormatter.groupAxis.position === 'left') {
+  //   tickPadding = 0
+  //   textX = - fullParams.tickPadding
+  // } else if (fullDataFormatter.groupAxis.position === 'right') {
+  //   tickPadding = 0
+  //   textX = fullParams.tickPadding
+  // } else if (fullDataFormatter.groupAxis.position === 'bottom') {
+  //   if (fullParams.tickFullLine == true) {
+  //     tickPadding = - fullParams.tickPadding
+  //   } else {
+  //     tickPadding = - fullParams.tickPadding - defaultTickSize
+  //   }
+  //   textX = 0
+  // } else if (fullDataFormatter.groupAxis.position === 'top') {
+    if (fullParams.tickFullLine == true) {
+      tickPadding = fullParams.tickPadding
+    } else {
+      tickPadding = fullParams.tickPadding - defaultTickSize
+    }
+    textX = - 0
+  // }
+
+  // 設定X軸刻度
+  const xAxis = d3.axisTop(ordinalScale)
+    .scale(ordinalScale)
+    .ticks(fullParams.ticks === 'all'
+      ? allTicksAmount
+      : fullParams.ticks > allTicksAmount
+        // 不顯示超過groupLabels數量的刻度
+        ? allTicksAmount - 1 // 不知為何設剛好一樣的數字會多一個刻度，所以 -1 強制避免這個狀況
+        : fullParams.ticks)
+    .tickSize(fullParams.tickFullLine == true
+      ? - containerSize.height
+      : defaultTickSize)
+    .tickSizeOuter(0)
+    .tickFormat((valueIndex: number, i) => {
+      // 用index對應到groupLabel
+      // const groupLabel = groupLabels[valueIndex ] ?? '' // 非整數index不顯示
+      // return parseTickFormatValue(groupLabel, fullParams.tickFormat)
+      return valueLabelData[valueIndex]?.text ?? ''
+    })
+    .tickPadding(tickPadding)
+
+  const xAxisEl = xAxisSelection
+    .transition()
+    .duration(100)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
+    .call(xAxis)
+    
+    .on('end', (self, t) => {
+      // 先等transition結束再處理文字，否則會被原本的文字覆蓋
+      xAxisSelection
+        .selectAll('.tick text')
+        .each((valueIndex: number, i, n) => {
+          // const groupLabel = groupLabels[valueIndex ] ?? '' // 非整數index不顯示
+          // const groupLabelText = parseTickFormatValue(groupLabel, fullParams.tickFormat)
+          // console.log(valueIndex)
+          const textArr = valueLabelData[valueIndex]?.textArr ?? []
+          // 將原本單行文字改為多行文字
+          renderTspansOnAxis(d3.select(n[i]), {
+            textArr,
+            textSizePx,
+            groupAxisPosition: 'top',
+            isContainerRotated: true
+          })
+        })
+    })
+
+  xAxisEl.selectAll('line')
+    .style('fill', 'none')
+    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
+    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
+    .style('vector-effect', 'non-scaling-stroke') // 避免 scale 導致線條變形
+    .attr('pointer-events', 'none')
+
+  xAxisEl.selectAll('path')
+    .style('fill', 'none')
+    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
+    .style('shape-rendering', 'crispEdges')
+
+  const xText = xAxisSelection.selectAll<SVGTextElement, OrdinalAxisParams>('text')
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', fullChartParams.styles.textSize)
+    // .style('font-weight', 'bold')
+    .attr('fill', getColor(fullParams.tickTextColorType, fullChartParams))
+    .attr('text-anchor', textAnchor)
+    .attr('dominant-baseline', dominantBaseline)
+    .attr('x', textX)
+    .style('transform', textRotateTransform)
+  
+  // 抵消掉預設的偏移
+  // if (fullDataFormatter.groupAxis.position === 'left' || fullDataFormatter.groupAxis.position === 'right') {
+    xText.attr('dy', 0)
+  // }
+    
+  return xAxisSelection
+}
+
+
+function renderClipPath ({ defsSelection, clipPathData }: {
+  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
+  clipPathData: ClipPathDatum[]
+  // textReverseTransform: string
+}) {
+  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)
+    // .attr('transform', textReverseTransform)
+    .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', _d => - _d.width)
+        .attr('y', 0)
+        .attr('width', _d => _d.width * 2)
+        .attr('height', _d => _d.height)
+    })
+}
+
+export const OrdinalAxis = defineMultiValuePlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const xAxisGClassName = getClassName(pluginName, 'xAxisG')
+  const ordinalXAxisClassName = getClassName(pluginName, 'axis')
+  const axisLabelClassName = getClassName(pluginName, 'axis-label')
+  const clipPathID = getUniID(pluginName, 'clipPath-box')
+
+  const containerSelection$ = multiValueContainerSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID: null,
+    computedData$: observer.computedData$,
+    containerPosition$: observer.containerPosition$,
+    isCategorySeprate$: observer.isCategorySeprate$,
+  }).pipe(
+    takeUntil(destroy$),
+  )
+
+  observer.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
+    })
+  })
+
+  const axisSelection$ = containerSelection$.pipe(
+      takeUntil(destroy$),
+      map((containerSelection, i) => {
+        return containerSelection
+          .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${xAxisGClassName}`)
+          .data([xAxisGClassName])
+          .join('g')
+          .classed(xAxisGClassName, true)
+      })
+    )
+
+  const valueLabelData$ = combineLatest({
+    valueLabels: observer.valueLabels$,
+    fullParams: observer.fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      return createValueLabelData(data.valueLabels, data.fullParams.tickFormat)
+    }),
+    shareReplay(1)
+  )
+
+  // const tickTextAlign$: Observable<TextAlign> = observer.fullParams$.pipe(
+  //   takeUntil(destroy$),
+  //   map(data => {
+  //     let textAnchor: 'start' | 'middle' | 'end' = 'middle'
+  //     let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
+
+  //     textAnchor = data.tickTextRotate
+  //       ? 'start'
+  //       : 'middle'
+  //     dominantBaseline = 'auto'
+
+  //     return {
+  //       textAnchor,
+  //       dominantBaseline
+  //     }
+  //   })
+  // )
+
+  const ordinalScaleDomain$ = combineLatest({
+    valueLabelData: valueLabelData$,
+    fullDataFormatter: observer.fullDataFormatter$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      const groupMin = 0//- 0.5
+      const groupMax = data.valueLabelData.length - 1//0.5
+      // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+      //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+      //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.fullDataFormatter.xAxis.scaleDomain[0] === 'min' || data.fullDataFormatter.xAxis.scaleDomain[0] === 'auto'
+        ? groupMin
+        : data.fullDataFormatter.xAxis.scaleDomain[0] as number// - 0.5
+      const groupScaleDomainMax = data.fullDataFormatter.xAxis.scaleDomain[1] === 'max' || data.fullDataFormatter.xAxis.scaleDomain[1] === 'auto'
+        ? groupMax
+        : data.fullDataFormatter.xAxis.scaleDomain[1] as number// - 0.5
+
+      return [groupScaleDomainMin, groupScaleDomainMax]
+    }),
+    shareReplay(1)
+  )
+
+  const textRotateTransform$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data.tickTextRotate
+        ? `rotate(${data.tickTextRotate})`
+        : ''
+    })
+  )
+
+  combineLatest({
+    axisSelection: axisSelection$,
+    fullParams: observer.fullParams$,
+    // tickTextAlign: tickTextAlign$,
+    // axisLabelAlign: axisLabelAlign$,
+    containerSize: observer.containerSize$,
+    fullDataFormatter: observer.fullDataFormatter$,
+    fullChartParams: observer.fullChartParams$,
+    ordinalScale: observer.ordinalScale$,
+    ordinalScaleDomain: ordinalScaleDomain$,
+    // groupLabels: groupLabels$,
+    valueLabelData: valueLabelData$,
+    // textReverseTransform: textReverseTransform$,
+    // textReverseTransformWithRotate: textReverseTransformWithRotate$,
+    textRotateTransform: textRotateTransform$,
+    textSizePx: observer.textSizePx$,
+    // tickTextFormatter: tickTextFormatter$
+    ordinalPadding: observer.ordinalPadding$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    renderAxis({
+      selection: data.axisSelection,
+      ordinalXAxisClassName,
+      fullParams: data.fullParams,
+      // tickTextAlign: data.tickTextAlign,
+      containerSize: data.containerSize,
+      fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      ordinalScale: data.ordinalScale,
+      ordinalScaleDomain: data.ordinalScaleDomain,
+      // groupLabels: data.groupLabels,
+      valueLabelData: data.valueLabelData,
+      // textReverseTransformWithRotate: data.textReverseTransformWithRotate,
+      textRotateTransform: data.textRotateTransform,
+      textSizePx: data.textSizePx,
+      ordinalPadding: data.ordinalPadding
+    })
+
+    renderAxisLabel({
+      selection: data.axisSelection,
+      axisLabelClassName,
+      fullParams: data.fullParams,
+      // axisLabelAlign: data.axisLabelAlign,
+      containerSize: data.containerSize,
+      fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      // textReverseTransform: data.textReverseTransform,
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
 })