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

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

@@ -3,8 +3,17 @@ import { DataFormatterGrid } from './DataFormatterGrid';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
     visibleFilter: VisibleFilter<'multiGrid'>;
-    multiGrid: Array<DataFormatterGrid>;
+    multiGrid: Array<DataFormatterMultiGridMultiGrid>;
+    container: DataFormatterMultiGridContainer;
 }
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-    multiGrid?: Array<Partial<DataFormatterGrid>>;
+    multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>;
+}
+export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
+    slotIndex: number;
+}
+export interface DataFormatterMultiGridContainer {
+    gap: number;
+    rowAmount: number;
+    columnAmount: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.29",
+  "version": "3.0.0-alpha.31",
   "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

@@ -40,6 +40,7 @@ import type {
   ChartOptionsPartial,
   DataTypeMap,
   DataFormatterTypeMap,
+  DataFormatterPartialTypeMap,
   DataFormatterBase,
   DataFormatterContext,
   Layout,
@@ -141,14 +142,23 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
     })(options)
     
     
-    // console.log('mergedOptions', mergedOptions)
 
     const sharedData$ = chartSubject.data$.pipe(shareReplay(1))
     const shareAndMergedDataFormatter$ = chartSubject.dataFormatter$
       .pipe(
         takeUntil(destroy$),
         startWith({}),
-        map((d) => mergeOptionsWithDefault(d, mergedPresetWithDefault.dataFormatter)),
+        map((dataFormatter) => {
+          const mergedData = mergeOptionsWithDefault(dataFormatter, mergedPresetWithDefault.dataFormatter)
+
+          if (chartType === 'multiGrid' && (dataFormatter as DataFormatterPartialTypeMap<'multiGrid'>).multiGrid != 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])
+            })
+          }
+          return mergedData
+        }),
         shareReplay(1)
       )
     const shareAndMergedChartParams$ = chartSubject.chartParams$

package/src/defaults.ts

@@ -10,7 +10,7 @@ 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 } from './types/DataFormatterMultiGrid'
+import type { DataFormatterMultiGrid, DataFormatterMultiGridMultiGrid } from './types/DataFormatterMultiGrid'
 import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
 import type { DataFormatterTree } from './types/DataFormatterTree'
 import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
@@ -180,24 +180,25 @@ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
   // },
 }
 
+export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
+  ...DATA_FORMATTER_GRID_DEFAULT,
+  slotIndex: 0,
+}
+
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   type: 'multiGrid',
   visibleFilter: (datum, rowIndex, columnIndex, context) => true,
   multiGrid: [
     {
-      ...DATA_FORMATTER_GRID_DEFAULT
+      ...DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT
     },
-    // // @Q@ 暫時性的邏輯，之後colorsPredicate移除掉後，這邊也要移除（但colors使用的seriesIndex要接續前一組grid）
-    // {
-    //   ...DATA_FORMATTER_GRID_DEFAULT,
-    //   colorsPredicate: (datum, rowIndex, columnIndex, { data, chartParams, dataFormatter }) => {
-    //     const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
-    //     const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
-    //     return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
-    //   },
-    // }
   ],
   // visibleGroupRange: null,
+  container: {
+    gap: 120,
+    rowAmount: 1,
+    columnAmount: 1
+  }
 }
 
 export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -1,11 +1,11 @@
 import {
   shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
-import { multiGridObservable } from './multiGridObservables'
+import { multiGridEachDetailObservable } from './multiGridObservables'
 
 export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
 
-  const multiGrid$ = multiGridObservable({
+  const multiGridEachDetail$ = multiGridEachDetailObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
@@ -21,6 +21,6 @@ export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
-    multiGrid$
+    multiGridEachDetail$
   }
 }

package/src/multiGrid/multiGridObservables.ts

@@ -24,6 +24,7 @@ import type {
   DataFormatterContext,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
+  DataFormatterMultiGridContainer,
   EventMultiGrid,
   HighlightTarget,
   Layout,
@@ -41,7 +42,7 @@ import {
   gridAxesSizeObservable,
   gridVisibleComputedDataObservable } from '../grid/gridObservables'
 
-export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
   fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
   computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
   layout$: Observable<Layout>
@@ -151,4 +152,61 @@ export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$
       })
     })
   )
+}
+
+interface GridContainerBox {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  translate: [number, number]
+  scale: [number, number]
+}
+
+// 每一個grid的container位置
+export const multiGridContainerObservable = ({ fullDataFormatter$, layout$, fullChartParams$ }: {
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
+  layout$: Observable<Layout>
+  fullChartParams$: Observable<ChartParams>
+}) => {
+  function calcBox (layout: Layout, container: DataFormatterMultiGridContainer, rowIndex: number, columnIndex: number) {
+    const { gap, rowAmount, columnAmount } = container
+    const width = (layout.width / columnAmount) - (gap / 2)
+    const height = (layout.height / rowAmount) - (gap / 2)
+    const x = columnIndex * width + (columnIndex * gap)
+    const y = rowIndex * height + (columnIndex * gap)
+    const translate: [number, number] = [x, y]
+    const scale: [number, number] = [width / layout.width, height / layout.height]
+
+    return {
+      translate,
+      scale
+    }
+  }
+
+  const multiGridContainer$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    layout: layout$,
+    fullChartParams: fullChartParams$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      data.fullDataFormatter.container.rowAmount
+      const boxArr: GridContainerBox[] = data.fullDataFormatter.multiGrid.map((grid, gridIndex) => {
+        const columnIndex = grid.slotIndex % data.fullDataFormatter.container.columnAmount
+        const rowIndex = Math.floor(grid.slotIndex / data.fullDataFormatter.container.columnAmount)
+        const {  translate, scale } = calcBox(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+
+        return {
+          slotIndex: grid.slotIndex,
+          rowIndex,
+          columnIndex,
+          translate,
+          scale,
+        }
+      })
+      return boxArr
+    }),
+  )
+
+  return multiGridContainer$
 }

package/src/types/ContextObserverMultiGrid.ts

@@ -4,7 +4,7 @@ import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { TransformData } from './TransformData'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
-  multiGrid$: Observable<MultiGridObservableAll[]>
+  multiGridEachDetail$: Observable<MultiGridObservableAll[]>
 }
 
 export interface MultiGridObservableAll {

package/src/types/DataFormatterMultiGrid.ts

@@ -10,12 +10,25 @@ import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
   visibleFilter: VisibleFilter<'multiGrid'>
-  multiGrid: Array<DataFormatterGrid>
+  multiGrid: Array<DataFormatterMultiGridMultiGrid>
   // visibleGroupRange: [number, number] | null
+  container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  multiGrid?: Array<Partial<DataFormatterGrid>>
+  multiGrid?: Array<Partial<DataFormatterMultiGridMultiGrid>>
+}
+
+// 比grid還多出來的額外參數
+export interface DataFormatterMultiGridMultiGrid extends DataFormatterGrid {
+  slotIndex: number
+}
+
+// container
+export interface DataFormatterMultiGridContainer {
+  gap: number
+  rowAmount: number
+  columnAmount: number
 }
 
 // multiGrid欄位