@orbcharts/core 3.0.0-beta.9 → 3.0.0

package/src/utils/observables.ts

@@ -15,6 +15,7 @@ import type {
   ComputedDatumBase,
   ComputedDataTypeMap,
   ComputedDatumTypeMap,
+  ContainerPositionScaled,
   DataFormatterTypeMap,
   EventTypeMap,
   HighlightTarget,
@@ -45,6 +46,15 @@ export function resizeObservable(elem: HTMLElement | Element): Observable<DOMRec
   })
 }
 
+interface HighlightTargetValue {
+  id: string | null
+  label: string | null
+  seriesLabel: string | null
+  groupLabel: string | null
+  categoryLabel: string | null
+  highlightDefault: string | null
+}
+
 // 通用 highlight Observable
 export const highlightObservable = <T extends ChartType, D>({ datumList$, fullChartParams$, event$ }: {
   datumList$: Observable<D[]>
@@ -54,42 +64,46 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
   const destroy$ = new Subject()
 
   // 預設的highlight
-  const highlightDefault$ = fullChartParams$.pipe(
+  const highlightDefault$: Observable<HighlightTargetValue> = fullChartParams$.pipe(
     takeUntil(destroy$),
     map(d => {
       return {
         id: null,
+        label: null,
         seriesLabel: null,
         groupLabel: null,
         categoryLabel: null,
         highlightDefault: d.highlightDefault
-      }
+      } as HighlightTargetValue
     }),
     distinctUntilChanged()
   )
 
   // 事件觸發的highlight
-  const highlightMouseover$ = event$.pipe(
+  const highlightMouseover$: Observable<HighlightTargetValue> = event$.pipe(
     takeUntil(destroy$),
     // filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
     filter(d => d.eventName === 'mouseover'),
     // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
-    map(d => {
-      return (d as any).datum
+    map(_d => {
+      const d = _d as any
+      return d.datum
         ? {
-          id: ((d as any).datum as any).id,
-          seriesLabel: ((d as any).datum as any).seriesLabel,
-          groupLabel: ((d as any).datum as any).groupLabel,
-          categoryLabel: ((d as any).datum as any).categoryLabel,
+          id: d.datum.id,
+          label: d.datum.label,
+          seriesLabel: d.datum.seriesLabel,
+          groupLabel: d.datum.groupLabel,
+          categoryLabel: d.datum.categoryLabel,
           highlightDefault: null
-        }
+        } as HighlightTargetValue
         : {
           id: null,
+          label: null,
           seriesLabel: null,
           groupLabel: null,
           categoryLabel: null,
           highlightDefault: null
-        }
+        } as HighlightTargetValue
     })
   )
   const highlightMouseout$ = event$.pipe(
@@ -102,9 +116,14 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
     switchMap(d => highlightDefault$)
   )
 
-  function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null) {
-    const datum = datumList.find(d => (d as ComputedDatumBase).id === id)
-    return datum ? [datum] : []
+  // function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null) {
+  //   const datum = datumList.find(d => (d as ComputedDatumBase).id === id)
+  //   return datum ? [datum] : []
+  // }
+  function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null, label: string | null) {
+    return id == null && label == null
+      ? []
+      : datumList.filter(d => (d as ComputedDatumBase).id === id || (d as ComputedDatumBase).label === label)
   }
 
   function getSeriesIds (datumList: ComputedDatumTypeMap<T>[], seriesLabel: string | null) {
@@ -136,7 +155,7 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
     ).subscribe(data => {
       let datumList: ComputedDatumTypeMap<T>[] = []
       if (data.fullChartParams.highlightTarget === 'datum') {
-        datumList = getDatumIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.id)
+        datumList = getDatumIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.id, data.target.label)
       } else if (data.fullChartParams.highlightTarget === 'series') {
         datumList = getSeriesIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.seriesLabel)
       } else if (data.fullChartParams.highlightTarget === 'group') {
@@ -217,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) => {

package/src/utils/validator.ts

@@ -46,7 +46,7 @@ function getInvalidColumn<T> (data: T, rules: Partial<ValidatorRule<T>>) {
         || value === 'label'
         || value === 'primary'
         || value === 'secondary'
-        || value === 'white'
+        || value === 'labelContrast'
         || value === 'background'
     },
   }