@orbcharts/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/utils/observables.ts

@@ -15,6 +15,7 @@ import type {
   ComputedDatumBase,
   ComputedDataTypeMap,
   ComputedDatumTypeMap,
+  ContainerPositionScaled,
   DataFormatterTypeMap,
   EventTypeMap,
   HighlightTarget,
@@ -73,7 +74,7 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
         groupLabel: null,
         categoryLabel: null,
         highlightDefault: d.highlightDefault
-      }
+      } as HighlightTargetValue
     }),
     distinctUntilChanged()
   )
@@ -94,7 +95,7 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
           groupLabel: d.datum.groupLabel,
           categoryLabel: d.datum.categoryLabel,
           highlightDefault: null
-        }
+        } as HighlightTargetValue
         : {
           id: null,
           label: null,
@@ -102,7 +103,7 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
           groupLabel: null,
           categoryLabel: null,
           highlightDefault: null
-        }
+        } as HighlightTargetValue
     })
   )
   const highlightMouseout$ = event$.pipe(
@@ -235,4 +236,47 @@ export const textSizePxObservable = (chartParams$: Observable<ChartParams>) => {
       return value ? value : 14 // default
     })
   )
+}
+
+export const containerSizeObservable = ({ layout$, containerPosition$ }: {
+  layout$: Observable<Layout>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+}) => {
+  const rowAmount$ = containerPosition$.pipe(
+    map(containerPosition => {
+      const maxRowIndex = containerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged(),
+  )
+
+  const columnAmount$ = containerPosition$.pipe(
+    map(containerPosition => {
+      const maxColumnIndex = containerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged()
+  )
+
+  return combineLatest({
+    layout: layout$,
+    rowAmount: rowAmount$,
+    columnAmount: columnAmount$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      const width = (data.layout.rootWidth / data.columnAmount) - (data.layout.left + data.layout.right)
+      const height = (data.layout.rootHeight / data.rowAmount) - (data.layout.top + data.layout.bottom)
+      return {
+        width,
+        height
+      }
+    }),
+    distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height),
+    // shareReplay(1)
+  )
 }

package/src/utils/orbchartsUtils.ts

@@ -13,7 +13,7 @@ import type {
   DataMultiValue,
   DataMultiValueDatum,
   DataMultiValueValue,
-  ComputedLayoutDatumMultiValue,
+  ComputedXYDatumMultiValue,
   DataFormatterContainer,
   SeriesDirection,
   DataFormatterGridGrid,
@@ -192,17 +192,17 @@ export function getMinMaxMultiValue (data: DataMultiValue, valueIndex: number):
 }
 
 export function getMinMaxMultiValueXY ({ data, minX, maxX, minY, maxY }: {
-  data: ComputedLayoutDatumMultiValue[][]
+  data: ComputedXYDatumMultiValue[][]
   minX: number
   maxX: number
   minY: number
   maxY: number
 }) {
-  let filteredData: ComputedLayoutDatumMultiValue[][] = []
-  let minXDatum: ComputedLayoutDatumMultiValue | null = null
-  let maxXDatum: ComputedLayoutDatumMultiValue | null = null
-  let minYDatum: ComputedLayoutDatumMultiValue | null = null
-  let maxYDatum: ComputedLayoutDatumMultiValue | null = null
+  let filteredData: ComputedXYDatumMultiValue[][] = []
+  let minXDatum: ComputedXYDatumMultiValue | null = null
+  let maxXDatum: ComputedXYDatumMultiValue | null = null
+  let minYDatum: ComputedXYDatumMultiValue | null = null
+  let maxYDatum: ComputedXYDatumMultiValue | null = null
   
   for (let categoryData of data) {
     for (let datum of categoryData) {
@@ -291,7 +291,7 @@ function calcGridDimensions (amount: number): { rowAmount: number; columnAmount:
   return { rowAmount, columnAmount }
 }
 
-export function calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[] {
+export function calcContainerPosition (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
@@ -324,7 +324,7 @@ export function calcSeriesContainerLayout (layout: Layout, container: DataFormat
   })
 }
 
-export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[] {
+export function calcContainerPositionScaled (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定

package/src/utils/seriesObservables.ts

@@ -16,7 +16,7 @@ import type {
   DataFormatterTypeMap,
   ContainerPosition,
   Layout } from '../../lib/core-types'
-import { calcSeriesContainerLayout } from './orbchartsUtils'
+import { calcContainerPosition } from './orbchartsUtils'
 
 export const separateSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
   return fullDataFormatter$.pipe(
@@ -50,7 +50,7 @@ export const seriesVisibleComputedDataObservable = ({ computedData$ }: { compute
   )
 }
 
-export const seriesComputedLayoutDataObservable = ({ computedData$, fullDataFormatter$ }: {
+export const seriesComputedSortedDataObservable = ({ computedData$, fullDataFormatter$ }: {
   computedData$: Observable<ComputedDataTypeMap<'series'>>,
   fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
 }) => {
@@ -109,7 +109,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
       
       if (data.fullDataFormatter.separateSeries) {
         // -- 依slotIndexes計算 --
-        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
+        return calcContainerPosition(data.layout, data.fullDataFormatter.container, data.computedData.length)
         // return data.computedData.map((seriesData, seriesIndex) => {
         //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
         //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
@@ -128,7 +128,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
         // })
       } else {
         // -- 無拆分 --
-        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, 1)
+        return calcContainerPosition(data.layout, data.fullDataFormatter.container, 1)
         // const columnIndex = 0
         // const rowIndex = 0
         // return data.computedData.map((seriesData, seriesIndex) => {