@orbcharts/core 3.0.0-alpha.31 → 3.0.0-alpha.33

package/dist/src/grid/gridObservables.d.ts

@@ -1,18 +1,23 @@
 import { Observable } from 'rxjs';
-import { ComputedDataTypeMap, DataFormatterTypeMap, DataFormatterGrid, Layout, TransformData } from '../types';
+import { ChartParams, ComputedDataTypeMap, DataFormatterTypeMap, DataFormatterGrid, ContainerPosition, Layout, TransformData } from '../types';
 
 export declare const gridAxesTransformObservable: ({ fullDataFormatter$, layout$ }: {
     fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
     layout$: Observable<Layout>;
 }) => Observable<TransformData>;
+export declare const gridAxesReverseTransformObservable: ({ gridAxesTransform$ }: {
+    gridAxesTransform$: Observable<TransformData>;
+}) => Observable<TransformData>;
 export declare const gridGraphicTransformObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
     layout$: Observable<Layout>;
 }) => Observable<TransformData>;
-export declare const gridAxesOppositeTransformObservable: ({ gridAxesTransform$ }: {
+export declare const gridGraphicReverseScaleObservable: ({ gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+    gridContainer$: Observable<ContainerPosition[]>;
     gridAxesTransform$: Observable<TransformData>;
-}) => Observable<TransformData>;
+    gridGraphicTransform$: Observable<TransformData>;
+}) => Observable<[number, number][]>;
 export declare const gridAxesSizeObservable: ({ fullDataFormatter$, layout$ }: {
     fullDataFormatter$: Observable<DataFormatterGrid>;
     layout$: Observable<Layout>;
@@ -20,6 +25,25 @@ export declare const gridAxesSizeObservable: ({ fullDataFormatter$, layout$ }: {
     width: number;
     height: number;
 }>;
+export declare const existedSeriesLabelsObservable: ({ computedData$ }: {
+    computedData$: Observable<ComputedDataTypeMap<"grid">>;
+}) => Observable<string[]>;
 export declare const gridVisibleComputedDataObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;
 }) => Observable<import('../types').ComputedDatumGrid[][]>;
+export declare const isSeriesPositionSeprateObservable: ({ computedData$, fullDataFormatter$ }: {
+    computedData$: Observable<ComputedDataTypeMap<"grid">>;
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
+}) => Observable<boolean>;
+export declare const gridContainerObservable: ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+    computedData$: Observable<ComputedDataTypeMap<"grid">>;
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
+    fullChartParams$: Observable<ChartParams>;
+    layout$: Observable<Layout>;
+}) => Observable<{
+    slotIndex: number;
+    rowIndex: number;
+    columnIndex: number;
+    translate: [number, number];
+    scale: [number, number];
+}[]>;

package/dist/src/multiGrid/multiGridObservables.d.ts

@@ -1,5 +1,5 @@
 import { Subject, Observable } from 'rxjs';
-import { ChartParams, ComputedDataTypeMap, DataFormatterTypeMap, EventMultiGrid, Layout, TransformData } from '../types';
+import { ChartParams, ComputedDataTypeMap, DataFormatterTypeMap, EventMultiGrid, Layout, ContextObserverGridDetail } from '../types';
 
 export declare const multiGridEachDetailObservable: ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiGrid">>;
@@ -7,29 +7,16 @@ export declare const multiGridEachDetailObservable: ({ fullDataFormatter$, compu
     layout$: Observable<Layout>;
     fullChartParams$: Observable<ChartParams>;
     event$: Subject<EventMultiGrid>;
+}) => Observable<ContextObserverGridDetail[]>;
+export declare const multiGridContainerObservable: ({ computedData$, fullDataFormatter$, fullChartParams$, layout$ }: {
+    computedData$: Observable<ComputedDataTypeMap<"multiGrid">>;
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"multiGrid">>;
+    fullChartParams$: Observable<ChartParams>;
+    layout$: Observable<Layout>;
 }) => Observable<{
-    gridAxesTransform$: Observable<TransformData>;
-    gridGraphicTransform$: Observable<TransformData>;
-    gridAxesOppositeTransform$: Observable<TransformData>;
-    gridAxesSize$: Observable<{
-        width: number;
-        height: number;
-    }>;
-    gridHighlight$: Observable<string[]>;
-    SeriesDataMap$: Observable<Map<string, import('../types').ComputedDatumGrid[]>>;
-    GroupDataMap$: Observable<Map<string, import('../types').ComputedDatumGrid[]>>;
-    visibleComputedData$: Observable<import('../types').ComputedDatumGrid[][]>;
-}[]>;
-interface GridContainerBox {
     slotIndex: number;
     rowIndex: number;
     columnIndex: number;
     translate: [number, number];
     scale: [number, number];
-}
-export declare const multiGridContainerObservable: ({ fullDataFormatter$, layout$, fullChartParams$ }: {
-    fullDataFormatter$: Observable<DataFormatterTypeMap<"multiGrid">>;
-    layout$: Observable<Layout>;
-    fullChartParams$: Observable<ChartParams>;
-}) => Observable<GridContainerBox[]>;
-export {};
+}[][]>;

package/dist/src/types/ContextObserverGrid.d.ts

@@ -3,16 +3,29 @@ import { ContextObserverBase } from './ContextObserver';
 import { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid';
 import { TransformData } from './TransformData';
 
-export interface ContextObserverGrid<PluginParams> extends ContextObserverBase<'grid', PluginParams> {
+export interface ContextObserverGrid<PluginParams> extends ContextObserverBase<'grid', PluginParams>, ContextObserverGridDetail {
+}
+export interface ContextObserverGridDetail {
+    gridContainer$: Observable<ContainerPosition[]>;
     gridAxesTransform$: Observable<TransformData>;
+    gridAxesReverseTransform$: Observable<TransformData>;
     gridGraphicTransform$: Observable<TransformData>;
-    gridAxesOppositeTransform$: Observable<TransformData>;
+    gridGraphicReverseScale$: Observable<[number, number][]>;
     gridAxesSize$: Observable<{
         width: number;
         height: number;
     }>;
     gridHighlight$: Observable<string[]>;
+    existedSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     visibleComputedData$: Observable<ComputedDataGrid>;
+    isSeriesPositionSeprate$: Observable<boolean>;
+}
+export interface ContainerPosition {
+    slotIndex: number;
+    rowIndex: number;
+    columnIndex: number;
+    translate: [number, number];
+    scale: [number, number];
 }

package/dist/src/types/ContextObserverMultiGrid.d.ts

@@ -1,21 +1,8 @@
 import { Observable } from 'rxjs';
 import { ContextObserverBase } from './ContextObserver';
-import { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid';
-import { TransformData } from './TransformData';
+import { ContainerPosition, ContextObserverGridDetail } from './ContextObserverGrid';
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
-    multiGridEachDetail$: Observable<MultiGridObservableAll[]>;
-}
-export interface MultiGridObservableAll {
-    gridAxesTransform$: Observable<TransformData>;
-    gridGraphicTransform$: Observable<TransformData>;
-    gridAxesOppositeTransform$: Observable<TransformData>;
-    gridAxesSize$: Observable<{
-        width: number;
-        height: number;
-    }>;
-    gridHighlight$: Observable<string[]>;
-    SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
-    GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
-    visibleComputedData$: Observable<ComputedDataGrid>;
+    multiGridEachDetail$: Observable<ContextObserverGridDetail[]>;
+    multiGridContainer$: Observable<ContainerPosition[][]>;
 }

package/dist/src/types/DataFormatterGrid.d.ts

@@ -1,19 +1,37 @@
 import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter';
 
-export type SeriesType = 'row' | 'column';
+export type SeriesDirection = 'row' | 'column';
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
-    visibleFilter: VisibleFilter<'grid'>;
     grid: DataFormatterGridGrid;
+    container: DataFormatterGridContainer;
+}
+export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
+    grid?: DataFormatterGridGridPartial;
+    container?: Partial<DataFormatterGridContainer>;
+}
+export interface DataFormatterGridGrid {
+    visibleFilter: VisibleFilter<'grid'>;
+    gridData: DataFormatterGridGridData;
     valueAxis: DataFormatterValueAxis;
     groupAxis: DataFormatterGroupAxis;
+    slotIndex: number | null;
+    seriesSlotIndexes: number[] | null;
 }
-export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
-    grid?: Partial<DataFormatterGridGrid>;
+export interface DataFormatterGridGridPartial {
+    visibleFilter?: VisibleFilter<'grid'>;
+    gridData?: Partial<DataFormatterGridGridData>;
     valueAxis?: Partial<DataFormatterValueAxis>;
     groupAxis?: Partial<DataFormatterGroupAxis>;
+    slotIndex?: number | null;
+    seriesSlotIndexes?: number[] | null;
 }
-export interface DataFormatterGridGrid {
+export interface DataFormatterGridContainer {
+    gap: number;
+    rowAmount: number;
+    columnAmount: number;
+}
+export interface DataFormatterGridGridData {
+    seriesDirection: SeriesDirection;
     rowLabels: string[];
     columnLabels: string[];
-    seriesType: SeriesType;
 }

package/dist/src/types/DataFormatterMultiGrid.d.ts

@@ -1,19 +1,19 @@
 import { VisibleFilter, DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
-import { DataFormatterGrid } from './DataFormatterGrid';
+import { DataFormatterGridGrid, DataFormatterGridGridPartial, DataFormatterGridContainer } from './DataFormatterGrid';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
     visibleFilter: VisibleFilter<'multiGrid'>;
-    multiGrid: Array<DataFormatterMultiGridMultiGrid>;
+    gridList: Array<DataFormatterGridGrid>;
     container: DataFormatterMultiGridContainer;
 }
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-    multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>;
+    visibleFilter?: VisibleFilter<'multiGrid'>;
+    gridList?: Array<DataFormatterGridGridPartial>;
+    container?: Partial<DataFormatterMultiGridContainer>;
 }
-export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
-    slotIndex: number;
+export interface DataFormatterMultiGridGrid extends DataFormatterGridGrid {
 }
-export interface DataFormatterMultiGridContainer {
-    gap: number;
-    rowAmount: number;
-    columnAmount: number;
+export interface DataFormatterMultiGridGridPartial extends DataFormatterGridGridPartial {
+}
+export interface DataFormatterMultiGridContainer extends DataFormatterGridContainer {
 }

package/dist/src/utils/orbchartsUtils.d.ts

@@ -5,7 +5,8 @@ import { DataSeries } from '../types/DataSeries';
 import { DataGrid, DataGridDatum } from '../types/DataGrid';
 import { DataMultiGrid } from '../types/DataMultiGrid';
 import { DataMultiValue } from '../types/DataMultiValue';
-import { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid';
+import { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid';
+import { Layout } from '../types/Layout';
 import * as d3 from 'd3';
 export declare function formatValueToLabel(value: any, valueFormatter: string | ((text: d3.NumberValue) => string)): string;
 export declare function createDefaultDatumId(chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number): string;
@@ -29,5 +30,9 @@ export declare function getMinAndMaxSeries(data: DataSeries): [number, number];
 export declare function getMinAndMaxGrid(data: DataGrid): [number, number];
 export declare function getMinAndMaxMultiGrid(data: DataMultiGrid): [number, number];
 export declare function getMinAndMaxMultiValue(data: DataMultiValue, valueIndex?: number): [number, number];
-export declare function transposeData<T>(seriesType: SeriesType, data: T[][]): T[][];
+export declare function transposeData<T>(seriesDirection: SeriesDirection, data: T[][]): T[][];
 export declare function seriesColorPredicate(seriesIndex: number, chartParams: ChartParams): string;
+export declare function calcGridContainerPosition(layout: Layout, container: DataFormatterGridContainer, rowIndex: number, columnIndex: number): {
+    translate: [number, number];
+    scale: [number, number];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.33",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/base/createBaseChart.ts

@@ -140,8 +140,6 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
         description: preset.description ?? ''
       }
     })(options)
-    
-    
 
     const sharedData$ = chartSubject.data$.pipe(shareReplay(1))
     const shareAndMergedDataFormatter$ = chartSubject.dataFormatter$
@@ -151,10 +149,10 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
         map((dataFormatter) => {
           const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
 
-          if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).multiGrid != null) {
+          if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList != null) {
             // multiGrid欄位為陣列，需要各別來merge預設值
-            (mergedData as DataFormatterTypeMap<'multiGrid'>).multiGrid = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).multiGrid.map(d => {
-              return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).multiGrid[0])
+            (mergedData as DataFormatterTypeMap<'multiGrid'>).gridList = (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).gridList.map(d => {
+              return mergeOptionsWithDefault(d, (mergedPresetWithDefault.dataFormatter as DataFormatterTypeMap<'multiGrid'>).gridList[0])
             })
           }
           return mergedData
@@ -165,7 +163,9 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       .pipe(
         takeUntil(destroy$),
         startWith({}),
-        map((d) => mergeOptionsWithDefault(d, mergedPresetWithDefault.chartParams)),
+        map((d) => {
+          return mergeOptionsWithDefault(d, mergedPresetWithDefault.chartParams)
+        }),
         shareReplay(1)
       )
 
@@ -175,7 +175,9 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       .pipe(
         takeUntil(destroy$),
         startWith({}),
-        map((d: any) => mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT))
+        map((d: any) => {
+          return mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT)
+        })
       )
     mergedPadding$
       .pipe(
@@ -262,13 +264,16 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
               } catch (e) {
                 console.error(e)
                 throw new Error(e)
-              }   
+              }
             }),
             catchError(() => EMPTY)
           )  
       }),
       shareReplay(1)
     )
+
+    // subscribe - computedData組合了所有的chart參數，所以訂閱computedData可以一次訂閱所有的資料流
+    computedData$.subscribe()
     
     // -- plugins --
     const pluginEntityMap: any = {}  // 用於destroy

package/src/defaults.ts

@@ -9,8 +9,8 @@ import type { DataTree } from './types/DataTree'
 import type { DataRelationship } from './types/DataRelationship'
 import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis } from './types/DataFormatter'
 import type { DataFormatterSeries } from './types/DataFormatterSeries'
-import type { DataFormatterGrid } from './types/DataFormatterGrid'
-import type { DataFormatterMultiGrid, DataFormatterMultiGridMultiGrid } from './types/DataFormatterMultiGrid'
+import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
+import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
 import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
 import type { DataFormatterTree } from './types/DataFormatterTree'
 import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
@@ -158,42 +158,55 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   sort: null,
 }
 
-export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
-  // ...DATA_FORMATTER_WITH_VALUE,
-  type: 'grid',
+export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  grid: {
-    // rowUnitLabel: '',
+  gridData: {
+    seriesDirection: 'row',
     rowLabels: [],
-    // rowLabelFormat: label => label,
-    // columnUnitLabel: '',
     columnLabels: [],
-    // columnLabelFormat: label => label,
-    seriesType: 'row'
   },
   valueAxis: { ...DATA_FORMATTER_VALUE_AXIS },
   groupAxis: { ...DATA_FORMATTER_GROUP_AXIS, },
+  slotIndex: 0,
+  seriesSlotIndexes: null
+}
+
+export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
+  // ...DATA_FORMATTER_WITH_VALUE,
+  type: 'grid',
+  grid: {
+    ...DATA_FORMATTER_GRID_GRID_DEFAULT
+  },
+  container: {
+    gap: 120,
+    rowAmount: 1,
+    columnAmount: 1
+  }
   // visibleGroupRange: null,
   // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
-  //   const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+  //   const seriesIndex = dataFormatter.grid.seriesDirection === 'row' ? rowIndex : columnIndex
   //   return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
   // },
 }
 
-export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
-  ...DATA_FORMATTER_GRID_DEFAULT,
-  slotIndex: 0,
+// export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
+//   ...DATA_FORMATTER_GRID_DEFAULT,
+//   slotIndex: 0,
+//   seriesSlotIndexes: null
+// }
+
+export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
+  ...DATA_FORMATTER_GRID_GRID_DEFAULT
 }
 
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   type: 'multiGrid',
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  multiGrid: [
+  gridList: [
     {
-      ...DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT
+      ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
     },
   ],
-  // visibleGroupRange: null,
   container: {
     gap: 120,
     rowAmount: 1,

package/src/grid/computeGridData.ts

@@ -49,7 +49,7 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
       return d.map((_d, _i) => {
 
         // const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
-        const _visible = dataFormatter.visibleFilter(_d, i, _i, context)
+        const _visible = dataFormatter.grid.visibleFilter(_d, i, _i, context)
 
         const datum: DataGridDatumTemp = _d == null
           ? {
@@ -85,21 +85,26 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
       })
     })
 
-    // 依seriesType轉置資料矩陣
-    const transposedDataGrid = transposeData(dataFormatter.grid.seriesType, dataGrid)
+    // 依seriesDirection轉置資料矩陣
+    const transposedDataGrid = transposeData(dataFormatter.grid.gridData.seriesDirection, dataGrid)
 
     // -- groupScale --
-    const groupAxisWidth = (dataFormatter.groupAxis.position === 'top' || dataFormatter.groupAxis.position === 'bottom')
-      ? layout.width
-      : layout.height
-    const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
-    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-      maxValue: groupEndIndex,
-      minValue: 0,
-      axisWidth: groupAxisWidth,
-      scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
-      scaleRange: [0, 1] // 不使用dataFormatter設定
-    })
+    const { groupScale } = (() => {
+      const groupAxisWidth = (dataFormatter.grid.groupAxis.position === 'top' || dataFormatter.grid.groupAxis.position === 'bottom')
+        ? layout.width
+        : layout.height
+      const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
+      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+        maxValue: groupEndIndex,
+        minValue: 0,
+        axisWidth: groupAxisWidth,
+        scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
+        scaleRange: [0, 1] // 不使用dataFormatter設定
+      })
+      return { groupScale }
+    })()
+
+    
 
     // const seriesColors = chartParams.colors[chartParams.colorScheme].series
 
@@ -131,26 +136,76 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
     //   })
     // })
 
-    // -- valueScale --
-    const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
-    const [minValue, maxValue] = getMinAndMaxValue(visibleData)
-
-    const valueAxisWidth = (dataFormatter.valueAxis.position === 'left' || dataFormatter.valueAxis.position === 'right')
-      ? layout.height
-      : layout.width
-
     const seriesLabels = createGridSeriesLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
     const groupLabels = createGridGroupLabels({ transposedDataGrid, dataFormatter, chartType, gridIndex })
 
-    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-      maxValue,
-      minValue,
-      axisWidth: valueAxisWidth,
-      scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
-      scaleRange: [0, 1] // 不使用dataFormatter設定
-    })
+    // 每一個series的valueScale
+    const seriesValueScaleArr = (() => {
+      const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+        ? layout.height
+        : layout.width
+
+      // // 每一個series的 [minValue, maxValue]
+      // const minAndMaxValueArr = (() => {
+      //   // 有設定series定位，各別series計算各自的最大最小值
+      //   if (dataFormatter.grid.seriesSlotIndexes
+      //     && dataFormatter.grid.seriesSlotIndexes.length === transposedDataGrid.length
+      //   ) {
+      //     return transposedDataGrid
+      //       .map(series => {
+      //         const visibleData = series.filter(d => d._visible != false)
+      //         return getMinAndMaxValue(visibleData)
+      //       })
+      //   } else {
+      //     // 沒有設定series定位，全部資料一起計算最大值最小值
+      //     const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+      //     const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+      //     return transposedDataGrid
+      //       .map(series => {
+      //         return [minValue, maxValue]
+      //       })
+      //   }
+      // })()
 
-    const zeroY = valueScale(0)
+      const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+      const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+      
+      return transposedDataGrid.map((seriesData, seriesIndex) => {
+        // const minValue = minAndMaxValueArr[seriesIndex][0]
+        // const maxValue = minAndMaxValueArr[seriesIndex][1]
+        const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+          maxValue,
+          minValue,
+          axisWidth: valueAxisWidth,
+          scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+          scaleRange: [0, 1] // 不使用dataFormatter設定
+        })
+        return valueScale
+      })
+    })()
+
+    // const { valueScale } = (() => {
+      
+    //   const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+    //   const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+
+    //   const valueAxisWidth = (dataFormatter.grid.valueAxis.position === 'left' || dataFormatter.grid.valueAxis.position === 'right')
+    //     ? layout.height
+    //     : layout.width
+
+    //   const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+    //     maxValue,
+    //     minValue,
+    //     axisWidth: valueAxisWidth,
+    //     scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+    //     scaleRange: [0, 1] // 不使用dataFormatter設定
+    //   })
+    //   return { valueScale }
+    // })()
+    
+    const zeroYArr = transposedDataGrid.map((series, seriesIndex) => {
+      return seriesValueScaleArr[seriesIndex]!(0)
+    })
 
     let _index = 0
     computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
@@ -159,7 +214,9 @@ export const computeBaseGridData = (context: DataFormatterContext<'grid'>, chart
         const defaultId = createDefaultDatumId(chartType, gridIndex, seriesIndex, groupIndex)
         // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
         const groupLabel = groupLabels[groupIndex]
+        const valueScale = seriesValueScaleArr[seriesIndex]
         const axisY = valueScale(groupDatum.value ?? 0)
+        const zeroY = zeroYArr[seriesIndex]
 
         const computedDatum: ComputedDatumGrid = {
           id: groupDatum.id ? groupDatum.id : defaultId,

package/src/grid/createGridContextObserver.ts

@@ -6,13 +6,31 @@ import {
   groupDataMapObservable } from '../utils/observables'
 import {
   gridAxesTransformObservable,
+  gridAxesReverseTransformObservable,
   gridGraphicTransformObservable,
-  gridAxesOppositeTransformObservable,
+  gridGraphicReverseScaleObservable,
   gridAxesSizeObservable,
-  gridVisibleComputedDataObservable } from './gridObservables'
+  existedSeriesLabelsObservable,
+  gridVisibleComputedDataObservable,
+  isSeriesPositionSeprateObservable,
+  gridContainerObservable } from './gridObservables'
 
 export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
   
+  const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$
+  }).pipe(
+    shareReplay(1)
+  )
+  
+  const gridContainer$ = gridContainerObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+  })
+
   const gridAxesTransform$ = gridAxesTransformObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$
@@ -20,6 +38,12 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
+  const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+    gridAxesTransform$
+  }).pipe(
+    shareReplay(1)
+  )
+  
   const gridGraphicTransform$ = gridGraphicTransformObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
@@ -28,11 +52,11 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
-  const gridAxesOppositeTransform$ = gridAxesOppositeTransformObservable({
-    gridAxesTransform$
-  }).pipe(
-    shareReplay(1)
-  )
+  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+    gridContainer$: gridContainer$,
+    gridAxesTransform$: gridAxesTransform$,
+    gridGraphicTransform$: gridGraphicTransform$,
+  })
 
   const gridAxesSize$ = gridAxesSizeObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
@@ -55,6 +79,10 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
+  const existedSeriesLabels$ = existedSeriesLabelsObservable({
+    computedData$: observer.computedData$,
+  })
+
   const SeriesDataMap$ = seriesDataMapObservable({
     datumList$: datumList$
   }).pipe(
@@ -73,19 +101,24 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     shareReplay(1)
   )
 
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    isSeriesPositionSeprate$,
+    gridContainer$,
     gridAxesTransform$,
+    gridAxesReverseTransform$,
     gridGraphicTransform$,
-    gridAxesOppositeTransform$,
+    gridGraphicReverseScale$,
     gridAxesSize$,
     gridHighlight$,
+    existedSeriesLabels$,
     SeriesDataMap$,
     GroupDataMap$,
-    visibleComputedData$
+    visibleComputedData$,
   }
 }