@orbcharts/core 3.0.0-beta.9 → 3.0.0

package/src/grid/dataFormatterValidator.ts

@@ -11,32 +11,51 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
     // },
     container: {
       toBeTypes: ['object']
+    },
+    seriesDirection: {
+      toBe: '"row" | "column"',
+      test: (value) => value === 'row' || value === 'column'
+    },
+    rowLabels: {
+      toBeTypes: ['string[]']
+    },
+    columnLabels: {
+      toBeTypes: ['string[]']
+    },
+    valueAxis: {
+      toBeTypes: ['object']
+    },
+    groupAxis: {
+      toBeTypes: ['object']
+    },
+    separateSeries: {
+      toBeTypes: ['boolean']
     }
   })
   // if (dataFormatter.grid) {
-    const visibleFilterResult = validateColumns(dataFormatter, {
-      seriesDirection: {
-        toBe: '"row" | "column"',
-        test: (value) => value === 'row' || value === 'column'
-      },
-      rowLabels: {
-        toBeTypes: ['string[]']
-      },
-      columnLabels: {
-        toBeTypes: ['string[]']
-      },
-      valueAxis: {
-        toBeTypes: ['object']
-      },
-      groupAxis: {
-        toBeTypes: ['object']
-      },
-      separateSeries: {
-        toBeTypes: ['boolean']
-      }
-    })
-    if (visibleFilterResult.status === 'error') {
-      return visibleFilterResult
+    // const visibleFilterResult = validateColumns(dataFormatter, {
+    //   seriesDirection: {
+    //     toBe: '"row" | "column"',
+    //     test: (value) => value === 'row' || value === 'column'
+    //   },
+    //   rowLabels: {
+    //     toBeTypes: ['string[]']
+    //   },
+    //   columnLabels: {
+    //     toBeTypes: ['string[]']
+    //   },
+    //   valueAxis: {
+    //     toBeTypes: ['object']
+    //   },
+    //   groupAxis: {
+    //     toBeTypes: ['object']
+    //   },
+    //   separateSeries: {
+    //     toBeTypes: ['boolean']
+    //   }
+    // })
+    if (result.status === 'error') {
+      return result
     }
     if (dataFormatter.valueAxis) {
       const valueAxisResult = validateColumns(dataFormatter.valueAxis, {

package/src/multiGrid/contextObserverCallback.ts

@@ -1,9 +1,11 @@
 import {
   map,
   shareReplay } from 'rxjs'
-import type { ContextObserverCallback } from '../../lib/core-types'
+import type { ContextObserverCallback, DataGridDatum } from '../../lib/core-types'
 import { multiGridEachDetailObservable, multiGridContainerObservable } from '../utils/multiGridObservables'
-import { textSizePxObservable } from '../utils/observables'
+import { textSizePxObservable, containerSizeObservable, highlightObservable } from '../utils/observables'
+// import { createMultiGridSeriesLabels } from '../utils/orbchartsUtils'
+import { combineLatest } from 'rxjs/internal/observable/combineLatest'
 
 export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({ subject, observer }) => {
 
@@ -11,21 +13,48 @@ export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({
     shareReplay(1)
   )
 
-  const multiGridEachDetail$ = multiGridEachDetailObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
+  const multiGridContainerPosition$ = multiGridContainerObservable({
     computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const containerSize$ = containerSizeObservable({
+    layout$: observer.layout$,
+    containerPosition$: multiGridContainerPosition$.pipe(
+      map(d => d.flat())
+    )
+  }).pipe(
+    shareReplay(1)
+  )
+
+  // highlight全部grid
+  const multiGridHighlight$ = highlightObservable({
+    datumList$: observer.computedData$.pipe(
+      map(d => d.flat().flat()),
+      shareReplay(1)
+    ),
     fullChartParams$: observer.fullChartParams$,
     event$: subject.event$
   }).pipe(
     shareReplay(1)
   )
 
-  const multiGridContainerPosition$ = multiGridContainerObservable({
-    computedData$: observer.computedData$,
+  const multiGridEachDetail$ = multiGridEachDetailObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
     layout$: observer.layout$,
-  })
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$,
+    containerSize$
+  }).pipe(
+    shareReplay(1)
+  )
+  // multiGridContainerPosition$.subscribe(d => {
+  //   console.log('multiGridContainerPosition$', d)
+  // })
 
   return {
     fullParams$: observer.fullParams$,
@@ -34,6 +63,8 @@ export const contextObserverCallback: ContextObserverCallback<'multiGrid'> = ({
     computedData$: observer.computedData$,
     layout$: observer.layout$,
     textSizePx$,
+    containerSize$,
+    multiGridHighlight$,
     multiGridContainerPosition$,
     multiGridEachDetail$,
     // multiGridContainer$

package/src/multiValue/computedDataFn.ts

@@ -87,10 +87,13 @@ export const computedDataFn: ComputedDataFn<'multiValue'> = (context) => {
         value: d.value,
         categoryIndex,
         categoryLabel: d.categoryLabel,
+        xValueIndex: dataFormatter.xAxis.valueIndex,
+        yValueIndex: dataFormatter.yAxis.valueIndex,
         // valueLabel: formatValueToLabel(_d.value, dataFormatter.multiValue[_i].valueFormat),
         // axis: _i == 0 ? xScale(_d.value) : yScale(_d.value),
         visible: true, // 先給預設值
-        color
+        color,
+        _visibleValue: d.value // 預設和value相同
       }
 
       computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)

package/src/multiValue/contextObserverCallback.ts

@@ -1,22 +1,34 @@
 import { map, shareReplay, distinctUntilChanged } from 'rxjs'
+import type { Observable } from 'rxjs'
 import type { ContextObserverCallback, ContextObserverTypeMap } from '../../lib/core-types'
 import {
   highlightObservable,
   categoryDataMapObservable,
-  textSizePxObservable
+  textSizePxObservable,
+  containerSizeObservable
 } from '../utils/observables'
 import {
-  multiValueComputedLayoutDataObservable,
+  computedXYDataObservable,
   // multiValueAxesTransformObservable,
   // multiValueAxesReverseTransformObservable,
-  multiValueGraphicTransformObservable,
-  multiValueGraphicReverseScaleObservable,
-  multiValueCategoryLabelsObservable,
-  multiValueVisibleComputedDataObservable,
-  multiValueVisibleComputedLayoutDataObservable,
-  multiValueContainerPositionObservable,
-  minMaxXYObservable,
-  filteredMinMaxXYDataObservable
+  graphicTransformObservable,
+  graphicReverseScaleObservable,
+  categoryLabelsObservable,
+  visibleComputedDataObservable,
+  visibleComputedSumDataObservable,
+  visibleComputedRankingByIndexDataObservable,
+  visibleComputedRankingBySumDataObservable,
+  visibleComputedXYDataObservable,
+  containerPositionObservable,
+  // containerSizeObservable,
+  xyMinMaxObservable,
+  filteredXYMinMaxDataObservable,
+  // visibleComputedRankingDataObservable,
+  // rankingAmountLimitObservable,
+  // rankingScaleObservable
+  xScaleObservable,
+  xSumScaleObservable,
+  yScaleObservable
 } from '../utils/multiValueObservables'
 
 export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({ subject, observer }) => {
@@ -31,11 +43,20 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
     shareReplay(1)
   )
   
-  const multiValueContainerPosition$ = multiValueContainerPositionObservable({
+  const containerPosition$ = containerPositionObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$,
-  })
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const containerSize$ = containerSizeObservable({
+    layout$: observer.layout$,
+    containerPosition$
+  }).pipe(
+    shareReplay(1)
+  )
 
   // const multiValueAxesSize$ = multiValueAxesSizeObservable({
   //   fullDataFormatter$: observer.fullDataFormatter$,
@@ -44,13 +65,20 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
   //   shareReplay(1)
   // )
 
+  // [xValueIndex, yValueIndex]
+  const xyValueIndex$: Observable<[number, number]> = observer.fullDataFormatter$.pipe(
+    map(d => [d.xAxis.valueIndex, d.yAxis.valueIndex] as [number, number]),
+    distinctUntilChanged((a, b) => a[0] === b[0] && a[1] === b[1]),
+    shareReplay(1)
+  )
+
   const datumList$ = observer.computedData$.pipe(
     map(d => d.flat().flat())
   ).pipe(
     shareReplay(1)
   )
 
-  const multiValueHighlight$ = highlightObservable({
+  const highlight$ = highlightObservable({
     datumList$,
     fullChartParams$: observer.fullChartParams$,
     event$: subject.event$
@@ -58,10 +86,12 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
     shareReplay(1)
   )
 
-  const categoryLabels$ = multiValueCategoryLabelsObservable({
+  const categoryLabels$ = categoryLabelsObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
-  })
+  }).pipe(
+    shareReplay(1)
+  )
 
   const CategoryDataMap$ = categoryDataMapObservable({
     datumList$: datumList$
@@ -69,42 +99,91 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
     shareReplay(1)
   )
 
-  const minMaxXY$ = minMaxXYObservable({
-    computedData$: observer.computedData$
+  const xyMinMax$ = xyMinMaxObservable({
+    computedData$: observer.computedData$,
+    xyValueIndex$
   }).pipe(
     shareReplay(1)
   )
 
-
-  const computedLayoutData$ = multiValueComputedLayoutDataObservable({
+  const visibleComputedData$ = visibleComputedDataObservable({
     computedData$: observer.computedData$,
-    minMaxXY$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$,
   }).pipe(
     shareReplay(1)
   )
 
-  const visibleComputedData$ = multiValueVisibleComputedDataObservable({
+  const visibleComputedSumData$ = visibleComputedSumDataObservable({
+    visibleComputedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  // const valueIndex$ = observer.fullDataFormatter$.pipe(
+  //   map(d => d.yAxis.valueIndex),
+  //   distinctUntilChanged()
+  // )
+
+  const visibleComputedRankingByIndexData$ = visibleComputedRankingByIndexDataObservable({
+    xyValueIndex$, // * 依據 valueIndex 來取得 visibleComputedData
+    isCategorySeprate$,
+    visibleComputedData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedRankingBySumData$ = visibleComputedRankingBySumDataObservable({
+    isCategorySeprate$,
+    visibleComputedSumData$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const computedXYData$ = computedXYDataObservable({
     computedData$: observer.computedData$,
+    xyMinMax$,
+    xyValueIndex$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
   }).pipe(
     shareReplay(1)
   )
 
-  const visibleComputedLayoutData$ = multiValueVisibleComputedLayoutDataObservable({
-    computedLayoutData$: computedLayoutData$,
+  const visibleComputedXYData$ = visibleComputedXYDataObservable({
+    computedXYData$: computedXYData$,
   }).pipe(
     shareReplay(1)
   )
 
-  const filteredMinMaxXYData$ = filteredMinMaxXYDataObservable({
-    visibleComputedLayoutData$: visibleComputedLayoutData$,
-    minMaxXY$,
+  const filteredXYMinMaxData$ = filteredXYMinMaxDataObservable({
+    visibleComputedXYData$: visibleComputedXYData$,
+    xyMinMax$,
+    xyValueIndex$,
     fullDataFormatter$: observer.fullDataFormatter$,
   }).pipe(
     shareReplay(1)
   )
 
+  // const visibleComputedRankingData$ = visibleComputedRankingDataObservable({
+  //   visibleComputedData$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+
+  // const rankingAmountLimit$ = rankingAmountLimitObservable({
+  //   layout$: observer.layout$,
+  //   textSizePx$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+
+  // const rankingScale$ = rankingScaleObservable({
+  //   layout$: observer.layout$,
+  //   visibleComputedRankingData$,
+  //   rankingAmountLimit$
+  // }).pipe(
+  //   shareReplay(1)
+  // )
+
   // const multiValueAxesTransform$ = multiValueAxesTransformObservable({
   //   fullDataFormatter$: observer.fullDataFormatter$,
   //   layout$: observer.layout$
@@ -118,21 +197,48 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
   //   shareReplay(1)
   // )
   
-  const multiValueGraphicTransform$ = multiValueGraphicTransformObservable({
-    minMaxXY$,
-    filteredMinMaxXYData$,
+  const graphicTransform$ = graphicTransformObservable({
+    xyMinMax$,
+    xyValueIndex$,
+    filteredXYMinMaxData$,
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$
   }).pipe(
     shareReplay(1)
   )
 
-  const multiValueGraphicReverseScale$ = multiValueGraphicReverseScaleObservable({
-    multiValueContainerPosition$: multiValueContainerPosition$,
+  const graphicReverseScale$ = graphicReverseScaleObservable({
+    containerPosition$: containerPosition$,
     // multiValueAxesTransform$: multiValueAxesTransform$,
-    multiValueGraphicTransform$: multiValueGraphicTransform$,
-  })
+    graphicTransform$: graphicTransform$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const xScale$ = xScaleObservable({
+    visibleComputedSumData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    filteredXYMinMaxData$,
+    containerSize$: containerSize$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const xSumScale$ = xSumScaleObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    filteredXYMinMaxData$,
+    containerSize$: containerSize$,
+  }).pipe(
+    shareReplay(1)
+  )
 
+  const yScale$ = yScaleObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    filteredXYMinMaxData$,
+    containerSize$: containerSize$,
+  }).pipe(
+    shareReplay(1)
+  )
 
   return <ContextObserverTypeMap<'multiValue', any>>{
     fullParams$: observer.fullParams$,
@@ -142,19 +248,29 @@ export const contextObserverCallback: ContextObserverCallback<'multiValue'> = ({
     layout$: observer.layout$,
     textSizePx$,
     isCategorySeprate$,
-    multiValueContainerPosition$,
+    containerPosition$,
+    containerSize$,
     // multiValueAxesSize$,
-    multiValueHighlight$,
+    highlight$,
     categoryLabels$,
     CategoryDataMap$,
-    minMaxXY$,
-    computedLayoutData$,
+    xyMinMax$,
+    xyValueIndex$,
+    // computedXYData$,
     visibleComputedData$,
-    visibleComputedLayoutData$,
-    filteredMinMaxXYData$,
+    visibleComputedSumData$,
+    visibleComputedRankingByIndexData$,
+    visibleComputedRankingBySumData$,
+    visibleComputedXYData$,
+    filteredXYMinMaxData$,
+    // visibleComputedRankingData$,
+    // rankingScale$,
     // multiValueAxesTransform$,
     // multiValueAxesReverseTransform$,
-    multiValueGraphicTransform$,
-    multiValueGraphicReverseScale$,
+    graphicTransform$,
+    graphicReverseScale$,
+    xScale$,
+    xSumScale$,
+    yScale$
   }
 }

package/src/multiValue/dataFormatterValidator.ts

@@ -1,10 +1,90 @@
 import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
 
 export const dataFormatterValidator: DataFormatterValidator<'multiValue'> = (dataFormatter: DataFormatterTypeMap<'multiValue'>) => {
-  
-  return {
-    status: 'success',
-    columnName: '',
-    expectToBe: ''
+  const result = validateColumns(dataFormatter, {
+    visibleFilter: {
+      toBeTypes: ['Function']
+    },
+    container: {
+      toBeTypes: ['object']
+    },
+    categoryLabels: {
+      toBeTypes: ['string[]']
+    },
+    valueLabels: {
+      toBeTypes: ['string[]']
+    },
+    xAxis: {
+      toBeTypes: ['object']
+    },
+    yAxis: {
+      toBeTypes: ['object']
+    },
+    separateCategory: {
+      toBeTypes: ['boolean']
+    }
+  })
+  if (result.status === 'error') {
+    return result
   }
+  if (dataFormatter.yAxis) {
+    const valueAxisResult = validateColumns(dataFormatter.yAxis, {
+      scaleDomain: {
+        toBe: '[number | "min" | "auto", number | "max" | "auto"]',
+        test: (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] === 'number' || value[0] === 'min' || value[0] === 'auto') && (typeof value[1] === 'number' || value[1] === 'max' || value[1] === 'auto')
+      },
+      scaleRange: {
+        toBe: '[number, number]',
+        test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && typeof value[1] === 'number'
+      },
+      label: {
+        toBeTypes: ['string']
+      },
+      valueIndex: {
+        toBeTypes: ['number']
+      }
+    })
+    if (valueAxisResult.status === 'error') {
+      return valueAxisResult
+    }
+  }
+  if (dataFormatter.xAxis) {
+    const groupAxisResult = validateColumns(dataFormatter.xAxis, {
+      scaleDomain: {
+        toBe: '[number | "min" | "auto", number | "max" | "auto"]',
+        test: (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] === 'number' || value[0] === 'min' || value[0] === 'auto') && (typeof value[1] === 'number' || value[1] === 'max' || value[1] === 'auto')
+      },
+      scaleRange: {
+        toBe: '[number, number]',
+        test: (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === 'number' && typeof value[1] === 'number'
+      },
+      label: {
+        toBeTypes: ['string']
+      },
+      valueIndex: {
+        toBeTypes: ['number']
+      }
+    })
+    if (groupAxisResult.status === 'error') {
+      return groupAxisResult
+    }
+  }
+  if (dataFormatter.container) {
+    const containerResult = validateColumns(dataFormatter.container, {
+      gap: {
+        toBeTypes: ['number']
+      },
+      rowAmount: {
+        toBeTypes: ['number']
+      },
+      columnAmount: {
+        toBeTypes: ['number']
+      }
+    })
+    if (containerResult.status === 'error') {
+      return containerResult
+    }
+  }
+  return result
 }

package/src/multiValue/dataValidator.ts

@@ -1,10 +1,13 @@
 import type { DataValidator, DataTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
 
 export const dataValidator: DataValidator<'multiValue'> = (data: DataTypeMap<'multiValue'>) => {
-
-  return {
-    status: 'success',
-    columnName: '',
-    expectToBe: ''
-  }
+  const result = validateColumns({ data }, {
+    data: {
+      toBe: '(DataMultiValueDatum | DataMultiValueValue[])[]',
+      // 畢免資料量過大檢查不完，不深度檢查
+      test: (value) => Array.isArray(value)
+    }
+  })
+  return result
 }

package/src/relationship/computedDataFn.ts

@@ -106,30 +106,45 @@ export const computedDataFn: ComputedDataFn<'relationship'> = (context) => {
     // })()
 
     // -- edges --
-    computedEdges = edges.map((edge, i) => {
-      const categoryLabel = edge.categoryLabel ?? defaultCategoryLabel
-      const startNode = NodesMap.get(edge.start)
-      const endNode = NodesMap.get(edge.end)
+    computedEdges = edges
+      .map((edge, i) => {
+        const startNode = NodesMap.get(edge.start)
+        const endNode = NodesMap.get(edge.end)
+        return {
+          edge,
+          startNode,
+          endNode
+        }
+      })
+      .filter(({ edge }) => {
+        const startNode = NodesMap.get(edge.start)
+        const endNode = NodesMap.get(edge.end)
+        return startNode != null && endNode != null
+      })
+      .map(({ edge, startNode, endNode }, i) => {
+        const categoryLabel = edge.categoryLabel ?? defaultCategoryLabel
+        // const startNode = NodesMap.get(edge.start)
+        // const endNode = NodesMap.get(edge.end)
 
-      const computedEdge: ComputedEdge = {
-        id: edge.id,
-        index: i,
-        label: edge.label ?? '',
-        description: edge.description ?? '',
-        data: edge.data ?? {},
-        value: edge.value ?? 0,
-        categoryIndex: CategoryIndexMap.get(categoryLabel),
-        categoryLabel,
-        color: seriesColorPredicate(i, chartParams),
-        startNode,
-        // startNodeId: edge.start,
-        endNode,
-        // endNodeId: edge.end,
-        visible: startNode.visible && endNode.visible
-      }
+        const computedEdge: ComputedEdge = {
+          id: edge.id,
+          index: i,
+          label: edge.label ?? '',
+          description: edge.description ?? '',
+          data: edge.data ?? {},
+          value: edge.value ?? 0,
+          categoryIndex: CategoryIndexMap.get(categoryLabel),
+          categoryLabel,
+          color: seriesColorPredicate(i, chartParams),
+          startNode,
+          // startNodeId: edge.start,
+          endNode,
+          // endNodeId: edge.end,
+          visible: startNode.visible && endNode.visible
+        }
 
-      return computedEdge
-    })
+        return computedEdge
+      })
 
     
   } catch (e) {

package/src/relationship/dataFormatterValidator.ts

@@ -1,10 +1,14 @@
 import type { DataFormatterValidator, DataFormatterTypeMap } from '../../lib/core-types'
+import { validateColumns } from '../utils/validator'
 
 export const dataFormatterValidator: DataFormatterValidator<'relationship'> = (dataFormatter: DataFormatterTypeMap<'relationship'>) => {
-  
-  return {
-    status: 'success',
-    columnName: '',
-    expectToBe: ''
-  }
+  const result = validateColumns(dataFormatter, {
+    visibleFilter: {
+      toBeTypes: ['Function']
+    },
+    categoryLabels: {
+      toBeTypes: ['string[]']
+    }
+  })
+  return result
 }