@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.45

package/src/base/BaseLineAreas.ts

@@ -12,13 +12,14 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ComputedLayoutDatumGrid,
+  ComputedLayoutDataGrid,
   DataFormatterGrid,
   EventGrid,
-  ContainerPosition,
+  GridContainerPosition,
   ChartParams, 
   Layout,
   TransformData } from '@orbcharts/core'
-import { DATA_FORMATTER_VALUE_AXIS } from '@orbcharts/core/src/defaults'
 import { createAxisLinearScale } from '@orbcharts/core'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID, getMinAndMaxValue } from '../utils/orbchartsUtils'
@@ -34,7 +35,10 @@ export interface BaseLineAreasParams {
 interface BaseLineAreasContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  existSeriesLabels$: Observable<string[]>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedData$: Observable<ComputedDatumGrid[][]>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullDataFormatter$: Observable<DataFormatterGrid>
@@ -47,7 +51,7 @@ interface BaseLineAreasContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }
@@ -64,8 +68,8 @@ type ClipPathDatum = {
 // const pathClassName = getClassName(pluginName, 'path')
 
 
-function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: number): d3.Line<ComputedDatumGrid> {
-  return d3.area<ComputedDatumGrid>()
+function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: number): d3.Line<ComputedLayoutDatumGrid> {
+  return d3.area<ComputedLayoutDatumGrid>()
     .x((d) => d.axisX)
     .y0(d => valueAxisStart)
     .y1((d) => d.axisY)
@@ -74,8 +78,8 @@ function createAreaPath (lineCurve: string = 'curveLinear', valueAxisStart: numb
 }
 
 // 依無值的資料分段
-function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
-  let segmentData: ComputedDatumGrid[][] = [[]]
+function makeSegmentData (data: ComputedLayoutDatumGrid[]): ComputedLayoutDatumGrid[][] {
+  let segmentData: ComputedLayoutDatumGrid[][] = [[]]
 
   let currentIndex = 0
   for (let i in data) {
@@ -97,17 +101,17 @@ function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
 function renderLineAreas ({ selection, pathClassName, segmentData, areaPath, linearGradientIds, params }: {
   selection: d3.Selection<SVGGElement, unknown, any, unknown>
   pathClassName: string
-  segmentData: ComputedDatumGrid[][]
-  areaPath: d3.Line<ComputedDatumGrid>
+  segmentData: ComputedLayoutDatumGrid[][]
+  areaPath: d3.Line<ComputedLayoutDatumGrid>
   linearGradientIds: string[]
   params: BaseLineAreasParams
-}): d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> {
+}): d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any> {
   // if (!data[0]) {
   //   return undefined
   // }
 
   const lineAreas = selection
-    .selectAll<SVGPathElement, ComputedDatumGrid[]>('path')
+    .selectAll<SVGPathElement, ComputedLayoutDatumGrid[]>('path')
     .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
     .join(
       enter => {
@@ -256,7 +260,10 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginName: string, {
   selection,
   computedData$,
-  existSeriesLabels$,
+  computedLayoutData$,
+  visibleComputedData$,
+  visibleComputedLayoutData$,
+  seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -266,7 +273,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
   gridGraphicTransform$,
   gridAxesSize$,
   gridHighlight$,
-  gridContainer$,
+  gridContainerPosition$,
   layout$,
   event$
 }) => {
@@ -285,8 +292,8 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     selection,
     pluginName,
     clipPathID,
-    existSeriesLabels$,
-    gridContainer$,
+    seriesLabels$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
@@ -300,7 +307,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     })
   )
 
-  const areaPath$: Observable<d3.Line<ComputedDatumGrid>> = new Observable(subscriber => {
+  const areaPath$: Observable<d3.Line<ComputedLayoutDatumGrid>> = new Observable(subscriber => {
     const paramsSubscription = combineLatest({
       fullParams: fullParams$,
       valueAxisStart: valueAxisStart$
@@ -316,19 +323,18 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     }
   })
 
-  // 顯示範圍內的series labels
-  const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
-    computedData$.pipe(
-      takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-      const labels = data[0] && data[0][0]
-        ? data.map(d => d[0].seriesLabel)
-        : []
-      subscriber.next(labels)
-    })
-  })
+  // // 顯示範圍內的series labels
+  // const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
+  //   computedData$.pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const labels = data[0] && data[0][0]
+  //       ? data.map(d => d[0].seriesLabel)
+  //       : []
+  //     subscriber.next(labels)
+  //   })
+  // })
 
   // const axisSize$ = gridAxisSizeObservable({
   //   fullDataFormatter$,
@@ -355,7 +361,6 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     transitionEase: transitionEase$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     // 外層的遮罩
@@ -419,54 +424,65 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     }))
   )
   
-  const graphSubscription = combineLatest({
+  const pathSelectionArr$ = combineLatest({
     graphicGSelection: graphicGSelection$,
     defsSelection: defsSelection$,
-    seriesLabels: seriesLabels$,
-    computedData: computedData$,
+    visibleComputedLayoutData: visibleComputedLayoutData$,
     linearGradientIds: linearGradientIds$,
-    SeriesDataMap: SeriesDataMap$,
-    GroupDataMap: GroupDataMap$,
     areaPath: areaPath$,
     params: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      // const updateGraphic = data.graphicGSelection
+      //   .selectAll<SVGGElement, number>('g')
+      //   .data(data.seriesLabels, (d, i) => d)
+      // const enterGraphic = updateGraphic.enter()
+      //   .append('g')
+      //   .classed(graphicClassName, true)
+      // updateGraphic.exit().remove()
+      // const graphicSelection = updateGraphic.merge(enterGraphic)
+      //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
+      let pathSelectionArr: d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any>[] = []
+
+      // 繪圖
+      data.graphicGSelection.each((d, i, all) => {
+        // 將資料分段
+        const segmentData = makeSegmentData(data.visibleComputedLayoutData[i] ?? [])
+
+        pathSelectionArr[i] = renderLineAreas({
+          selection: d3.select(all[i]),
+          pathClassName,
+          areaPath: data.areaPath,
+          segmentData: segmentData,
+          linearGradientIds: data.linearGradientIds,
+          params: data.params
+        })
+        renderLinearGradient({
+          defsSelection: data.defsSelection,
+          computedData: data.visibleComputedLayoutData,
+          linearGradientIds: data.linearGradientIds,
+          params: data.params
+        })
+      })
+
+      return pathSelectionArr
+    })
+  )
+
+  combineLatest({
+    pathSelectionArr: pathSelectionArr$,
+    computedData: computedData$,
+    SeriesDataMap: SeriesDataMap$,
+    GroupDataMap: GroupDataMap$,
     highlightTarget: highlightTarget$,
     gridGroupPositionFn: gridGroupPositionFn$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
-
-    // const updateGraphic = data.graphicGSelection
-    //   .selectAll<SVGGElement, number>('g')
-    //   .data(data.seriesLabels, (d, i) => d)
-    // const enterGraphic = updateGraphic.enter()
-    //   .append('g')
-    //   .classed(graphicClassName, true)
-    // updateGraphic.exit().remove()
-    // const graphicSelection = updateGraphic.merge(enterGraphic)
-    //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
-
-    // 繪圖
-    data.graphicGSelection.each((d, i, all) => {
-      // 將資料分段
-      const segmentData = makeSegmentData(data.computedData[i] ?? [])
-
-      const pathSelection = renderLineAreas({
-        selection: d3.select(all[i]),
-        pathClassName,
-        areaPath: data.areaPath,
-        segmentData: segmentData,
-        linearGradientIds: data.linearGradientIds,
-        params: data.params
-      })
-      renderLinearGradient({
-        defsSelection: data.defsSelection,
-        computedData: data.computedData,
-        linearGradientIds: data.linearGradientIds,
-        params: data.params
-      })
-
+    data.pathSelectionArr.forEach(pathSelection => {
       pathSelection
         .on('mouseover', (event, datum) => {
           event.stopPropagation()
@@ -570,21 +586,9 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             groupLabel: _datum.groupLabel,
             event,
             data: data.computedData
-          })
         })
-
+      })
     })
-
-    
-
-    // graphicSelection$.next(graphicSelection)
-
-
-    // pathSelection = renderLineAreas({
-    //   selection: graphicSelection,
-    //   areaPath: d.areaPath,
-    //   data: d.computedData
-    // })
   })
 
   // const datumList$ = computedData$.pipe(

package/src/base/BaseLines.ts

@@ -12,9 +12,11 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
+  ComputedLayoutDatumGrid,
+  ComputedLayoutDataGrid,
   DataFormatterGrid,
   EventGrid,
-  ContainerPosition,
+  GridContainerPosition,
   ChartParams, 
   Layout,
   TransformData } from '@orbcharts/core'
@@ -38,7 +40,10 @@ export interface BaseLinesParams {
 interface BaseLinesContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  existSeriesLabels$: Observable<string[]>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedData$: Observable<ComputedDatumGrid[][]>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullDataFormatter$: Observable<DataFormatterGrid>
@@ -51,7 +56,7 @@ interface BaseLinesContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   event$: Subject<EventGrid>
 }
 
@@ -68,16 +73,16 @@ type ClipPathDatum = {
 // const pathClassName = getClassName(pluginName, 'path')
 
 
-function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedDatumGrid> {
-  return d3.line<ComputedDatumGrid>()
+function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedLayoutDatumGrid> {
+  return d3.line<ComputedLayoutDatumGrid>()
     .x((d) => d.axisX)
     .y((d) => d.axisY)
     .curve((d3 as any)[lineCurve])
 }
 
 // 依無值的資料分段
-function  makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
-  let segmentData: ComputedDatumGrid[][] = [[]]
+function makeSegmentData (data: ComputedLayoutDatumGrid[]): ComputedLayoutDatumGrid[][] {
+  let segmentData: ComputedLayoutDatumGrid[][] = [[]]
 
   let currentIndex = 0
   for (let i in data) {
@@ -99,16 +104,16 @@ function  makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
 function renderLines ({ selection, pathClassName, segmentData, linePath, params }: {
   selection: d3.Selection<SVGGElement, unknown, any, unknown>
   pathClassName: string
-  segmentData: ComputedDatumGrid[][]
-  linePath: d3.Line<ComputedDatumGrid>
+  segmentData: ComputedLayoutDatumGrid[][]
+  linePath: d3.Line<ComputedLayoutDatumGrid>
   params: BaseLinesParams
-}): d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> {
+}): d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any> {
   // if (!data[0]) {
   //   return undefined
   // }
 
   const lines = selection
-    .selectAll<SVGPathElement, ComputedDatumGrid[]>('path')
+    .selectAll<SVGPathElement, ComputedLayoutDatumGrid[]>('path')
     .data(segmentData, (d, i) => d.length ? `${d[0].id}_${d[d.length - 1].id}` : i) // 以線段起迄id結合為線段id
     .join(
       enter => {
@@ -221,7 +226,10 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
   selection,
   computedData$,
-  existSeriesLabels$,
+  computedLayoutData$,
+  visibleComputedData$,
+  visibleComputedLayoutData$,
+  seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -231,7 +239,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
   gridGraphicTransform$,
   gridAxesSize$,
   gridHighlight$,
-  gridContainer$,
+  gridContainerPosition$,
   event$
 }) => {
 
@@ -322,7 +330,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
 
   // combineLatest({
   //   seriesSelection: seriesSelection$,
-  //   gridContainer: gridContainer$                                                                                                                                                                                       
+  //   gridContainerPosition: gridContainerPosition$                                                                                                                                                                                       
   // }).pipe(
   //   takeUntil(destroy$),
   //   switchMap(async d => d)
@@ -330,8 +338,8 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
   //   data.seriesSelection
   //     .transition()
   //     .attr('transform', (d, i) => {
-  //       const translate = data.gridContainer[i].translate
-  //       const scale = data.gridContainer[i].scale
+  //       const translate = data.gridContainerPosition[i].translate
+  //       const scale = data.gridContainerPosition[i].scale
   //       return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
   //     })
   // })
@@ -382,13 +390,13 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     selection,
     pluginName,
     clipPathID,
-    existSeriesLabels$,
-    gridContainer$,
+    seriesLabels$,
+    gridContainerPosition$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
 
-  const linePath$: Observable<d3.Line<ComputedDatumGrid>> = new Observable(subscriber => {
+  const linePath$: Observable<d3.Line<ComputedLayoutDatumGrid>> = new Observable(subscriber => {
     const paramsSubscription = fullParams$
       .pipe(
         takeUntil(destroy$)
@@ -403,19 +411,18 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     }
   })
 
-  // 顯示範圍內的series labels
-  const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
-    computedData$.pipe(
-      takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-      const labels = data[0] && data[0][0]
-        ? data.map(d => d[0].seriesLabel)
-        : []
-      subscriber.next(labels)
-    })
-  })
+  // // 顯示範圍內的series labels
+  // const seriesLabels$: Observable<string[]> = new Observable(subscriber => {
+  //   computedData$.pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const labels = data[0] && data[0][0]
+  //       ? data.map(d => d[0].seriesLabel)
+  //       : []
+  //     subscriber.next(labels)
+  //   })
+  // })
 
   // const axisSize$ = gridAxisSizeObservable({
   //   fullDataFormatter$,
@@ -442,7 +449,6 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     transitionEase: transitionEase$
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
     switchMap(async (d) => d),
   ).subscribe(data => {
     // 外層的遮罩
@@ -499,45 +505,58 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     distinctUntilChanged()
   )
   
-  const graphSubscription = combineLatest({
+  const pathSelectionArr$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    seriesLabels: seriesLabels$,
+    visibleComputedLayoutData: visibleComputedLayoutData$,
+    linePath: linePath$,
+    params: fullParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      // const updateGraphic = data.graphicGSelection
+      //   .selectAll<SVGGElement, number>('g')
+      //   .data(data.seriesLabels, (d, i) => d)
+      // const enterGraphic = updateGraphic.enter()
+      //   .append('g')
+      //   .classed(graphicClassName, true)
+      // updateGraphic.exit().remove()
+      // const graphicSelection = updateGraphic.merge(enterGraphic)
+      //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
+      let pathSelectionArr: d3.Selection<SVGPathElement, ComputedLayoutDatumGrid[], any, any>[] = []
+
+      // 繪圖
+      data.graphicGSelection.each((d, i, all) => {
+        // 將資料分段
+        const segmentData = makeSegmentData(data.visibleComputedLayoutData[i] ?? [])
+
+        pathSelectionArr[i] = renderLines({
+          selection: d3.select(all[i]),
+          pathClassName,
+          linePath: data.linePath,
+          segmentData: segmentData,
+          params: data.params
+        })
+      })
+
+      return pathSelectionArr
+    })
+
+
+  )
+
+  combineLatest({
+    pathSelectionArr: pathSelectionArr$,
     computedData: computedData$,
     SeriesDataMap: SeriesDataMap$,
     GroupDataMap: GroupDataMap$,
-    linePath: linePath$,
-    params: fullParams$,
     highlightTarget: highlightTarget$,
     gridGroupPositionFn: gridGroupPositionFn$,
   }).pipe(
     takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-    switchMap(async (d) => d),
+    switchMap(async (d) => d)
   ).subscribe(data => {
-
-    // const updateGraphic = data.graphicGSelection
-    //   .selectAll<SVGGElement, number>('g')
-    //   .data(data.seriesLabels, (d, i) => d)
-    // const enterGraphic = updateGraphic.enter()
-    //   .append('g')
-    //   .classed(graphicClassName, true)
-    // updateGraphic.exit().remove()
-    // const graphicSelection = updateGraphic.merge(enterGraphic)
-    //   .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
-
-    // 繪圖
-    data.graphicGSelection.each((d, i, all) => {
-      // 將資料分段
-      const segmentData = makeSegmentData(data.computedData[i] ?? [])
-
-      const pathSelection = renderLines({
-        selection: d3.select(all[i]),
-        pathClassName,
-        linePath: data.linePath,
-        segmentData: segmentData,
-        params: data.params
-      })
-
+    data.pathSelectionArr.forEach(pathSelection => {
       pathSelection
         .on('mouseover', (event, datum) => {
           event.stopPropagation()
@@ -643,19 +662,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
             data: data.computedData
           })
         })
-
     })
-
-    
-
-    // graphicSelection$.next(graphicSelection)
-
-
-    // pathSelection = renderLines({
-    //   selection: graphicSelection,
-    //   linePath: d.linePath,
-    //   data: d.computedData
-    // })
   })
 
   // const datumList$ = computedData$.pipe(

package/src/base/BaseValueAxis.ts

@@ -15,7 +15,7 @@ import type {
   DataFormatterGrid,
   ChartParams,
   ComputedDatumGrid,
-  ContainerPosition,
+  GridContainerPosition,
   TransformData,
   EventGrid,
   ColorType } from '@orbcharts/core'
@@ -50,8 +50,8 @@ interface BaseLinesContext {
     width: number;
     height: number;
   }>
-  gridContainer$: Observable<ContainerPosition[]>
-  isSeriesPositionSeprate$: Observable<boolean>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
+  isSeriesSeprate$: Observable<boolean>
 }
 
 interface TextAlign {
@@ -107,7 +107,7 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
         )
         .attr('text-anchor', axisLabelAlign.textAnchor)
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
-        .style('font-size', `${fullChartParams.styles.textSize}px`)
+        .attr('font-size', fullChartParams.styles.textSize)
         .style('fill', getColor(fullParams.labelColorType, fullChartParams))
         .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.valueAxis.label)
@@ -153,8 +153,8 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
   
   // const yText = yAxisEl.selectAll('text')
   const yText = yAxisSelection.selectAll('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', `${fullChartParams.styles.textSize}px`)
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', fullChartParams.styles.textSize)
     .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
     .attr('text-anchor', tickTextAlign.textAnchor)
     .attr('dominant-baseline', tickTextAlign.dominantBaseline)
@@ -175,8 +175,8 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
   gridAxesTransform$,
   gridAxesReverseTransform$,
   gridAxesSize$,
-  gridContainer$,
-  isSeriesPositionSeprate$,
+  gridContainerPosition$,
+  isSeriesSeprate$,
 }) => {
   
   const destroy$ = new Subject()
@@ -193,12 +193,12 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
         return a.length === b.length
       }),
     ),
-    isSeriesPositionSeprate: isSeriesPositionSeprate$
+    isSeriesSeprate: isSeriesSeprate$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      return data.isSeriesPositionSeprate
+      return data.isSeriesSeprate
         // series分開的時候顯示各別axis
         ? data.computedData
         // series合併的時候只顯示第一個axis
@@ -226,16 +226,16 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
 
   combineLatest({
     containerSelection: containerSelection$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
   ).subscribe(data => {
     data.containerSelection
       .attr('transform', (d, i) => {
-        const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
-        const translate = gridContainer.translate
-        const scale = gridContainer.scale
+        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]})`
       })
       // .attr('opacity', 0)
@@ -308,14 +308,14 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     fullParams: fullParams$,
     fullDataFormatter: fullDataFormatter$,
     gridAxesReverseTransform: gridAxesReverseTransform$,
-    gridContainer: gridContainer$
+    gridContainerPosition: gridContainerPosition$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
       const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
       const axisReverseRotateValue = `rotate(${data.gridAxesReverseTransform.rotate}deg) rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
-      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainer[0].scale[0]}, ${1 / data.gridContainer[0].scale[1]})`
+      const containerScaleReverseScaleValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
       const tickTextRotateDeg = (data.fullDataFormatter.grid.groupAxis.position === 'left' && data.fullDataFormatter.grid.valueAxis.position === 'top')
         || (data.fullDataFormatter.grid.groupAxis.position === 'right' && data.fullDataFormatter.grid.valueAxis.position === 'bottom')
           ? data.fullParams.tickTextRotate + 180 // 修正文字倒轉
@@ -354,7 +354,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       })
     
       const filteredMinAndMax = getMinAndMaxValue(filteredData.flat())
-
+      
       subscriber.next(filteredMinAndMax)
     })
   })
@@ -366,7 +366,6 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       minAndMax: minAndMax$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {