@orbcharts/core 3.0.0-alpha.35 → 3.0.0-alpha.37

package/src/types/ComputedDataRelationship.ts

@@ -1,11 +1,11 @@
-import type { ComputedDatumBase } from './ComputedData'
+import type { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData'
 
 export type ComputedDataRelationship = {
   nodes: ComputedNode[]
   edges: ComputedEdge[]
 }
 
-export interface ComputedNode extends ComputedDatumBase {
+export interface ComputedNode extends ComputedDatumBase, ComputedDatumCategoryValue {
   startNodes: ComputedNode[]
   startNodeIds: string[]
   endNodes: ComputedNode[]

package/src/types/ComputedDataTree.ts

@@ -1,4 +1,4 @@
-import type { ComputedDatumBase } from './ComputedData'
+import type { ComputedDatumBase, ComputedDatumCategoryValue } from './ComputedData'
 
 // export type ComputedDataTree = ComputedDataTreeDatum[]
 
@@ -13,7 +13,7 @@ import type { ComputedDatumBase } from './ComputedData'
 // }
 
 // 樹狀結構
-export interface ComputedDataTree extends ComputedDatumBase {
+export interface ComputedDataTree extends ComputedDatumBase, ComputedDatumCategoryValue {
   level: number
   seq: number
   children?: ComputedDataTree[]

package/src/types/ContextObserverTree.ts

@@ -1,5 +1,10 @@
+import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
+import type { ComputedDataTree } from './ComputedDataTree'
 
 export interface ContextObserverTree<PluginParams> extends ContextObserverBase<'tree', PluginParams> {
-
+  treeHighlight$: Observable<string[]>
+  existCategoryLabels$: Observable<string[]>
+  CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>
+  visibleComputedData$: Observable<ComputedDataTree>
 }

package/src/types/DataFormatterMultiGrid.ts

@@ -9,13 +9,13 @@ import type {
 import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-  visibleFilter: VisibleFilter<'multiGrid'>
+  // visibleFilter: VisibleFilter<'multiGrid'>
   gridList: Array<DataFormatterGridGrid>
   container: DataFormatterMultiGridContainer
 }
 
 export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
-  visibleFilter?: VisibleFilter<'multiGrid'>
+  // visibleFilter?: VisibleFilter<'multiGrid'>
   gridList?: Array<DataFormatterGridGridPartial>
   container?: Partial<DataFormatterMultiGridContainer>
 }

package/src/types/DataFormatterMultiValue.ts

@@ -17,5 +17,5 @@ export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial
 
 // multiValue欄位
 export interface DataFormatterMultiValueMultiValue {
-  unitLabel: string
+  // unitLabel: string
 }

package/src/types/DataFormatterSeries.ts

@@ -5,7 +5,7 @@ import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './Da
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
   visibleFilter: VisibleFilter<'series'>
   // series: DataFormatterSeriesSeries
-  unitLabel: string
+  // unitLabel: string
   seriesLabels: string[]
   // labelFormat: (datum: DataSeriesDatum) => string
   // mapSeries: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
@@ -16,7 +16,7 @@ export interface DataFormatterSeries extends DataFormatterBase<'series'> {
 
 export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
   // series: Partial<DataFormatterSeriesSeries>
-  unitLabel?: string
+  // unitLabel?: string
   seriesLabels?: string[]
   // colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
   sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null

package/src/types/DataFormatterTree.ts

@@ -6,6 +6,7 @@ export interface DataFormatterTree
     visibleFilter: VisibleFilter<'tree'>
   // labelFormat: (datum: unknown) => string
   // descriptionFormat: (datum: unknown) => string
+    categoryLabels: string[]
 }
 
 export type DataFormatterTreePartial = Partial<DataFormatterTree>

package/src/types/DataMultiValue.ts

@@ -6,6 +6,7 @@ export type DataMultiValue = (DataMultiValueDatum | DataMultiValueValue)[][]
 export type DataMultiValueValue = number
 
 export interface DataMultiValueDatum extends DatumBase, DatumValue {
+  categoryLabel?: string
 }
 
 

package/src/types/DataRelationship.ts

@@ -18,6 +18,7 @@ export type DataRelationshipList = [
 export interface Node extends DatumBase {
   id: string
   value?: number
+  categoryLabel?: string
 }
 
 export interface Edge extends DatumBase {

package/src/types/DataTree.ts

@@ -7,6 +7,7 @@ export interface DataTreeObj extends DatumBase {
   id: string
   value?: number
   children?: DataTreeObj[]
+  categoryLabel?: string
 }
 
 // 陣列資料
@@ -14,5 +15,6 @@ export interface DataTreeDatum extends DatumBase {
   id: string
   value?: number
   parent?: string
+  categoryLabel?: string
 }
 

package/src/types/Event.ts

@@ -5,7 +5,7 @@ import type { ComputedDataSeries, ComputedDatumSeries } from './ComputedDataSeri
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { ComputedDataMultiGrid } from './ComputedDataMultiGrid'
 import type { ComputedDataMultiValue, ComputedDatumMultiValue } from './ComputedDataMultiValue'
-import type { ComputedNode } from './ComputedDataRelationship'
+import type { ComputedDataRelationship, ComputedNode } from './ComputedDataRelationship'
 import type { ComputedDataTree } from './ComputedDataTree'
 import type { HighlightTarget } from './ChartParams'
 
@@ -104,11 +104,19 @@ export interface EventMultiValue extends EventBase {
 
 export interface EventRelationship extends EventBase {
   type: 'relationship'
+  data: ComputedDataRelationship
+  category: ComputedNode[]
+  categoryIndex: number
+  categoryLabel: string
   datum: ComputedNode | null
 }
 
 export interface EventTree extends EventBase {
   type: 'tree'
+  data: ComputedDataTree
+  category: ComputedDataTree[]
+  categoryIndex: number
+  categoryLabel: string
   datum: ComputedDataTree | null
 }
 

package/src/utils/d3Utils.ts

@@ -16,24 +16,20 @@ export const createAxisLinearScale = ({
   scaleRange: [number, number] // 0-1
 }) => {
 
+  // -- 無值補上預設值 --
   const domainMin: number | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[0]
   const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS.scaleDomain[1]
   const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS.scaleRange[0]
   const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS.scaleRange[1]
 
-  // const _minValue = domainMin === 'auto' ? minValue : domainMin
-  // const domainMinValue: number = maxValue - (maxValue - _minValue) / (1 - rangeMin)
-  // const _maxValue = domainMax === 'auto' ? maxValue : domainMax
-  // const domainMaxValue: number = _maxValue / rangeMax
-
-  // return d3.scaleLinear()
-  //   .domain([domainMinValue, domainMaxValue])
-  //   .range([0, axisWidth])
-
+  // -- 'auto'提換成實際值 --
   const domainMinValue = domainMin === 'auto' ? minValue : domainMin
   const domainMaxValue = domainMax === 'auto' ? maxValue : domainMax
-  let rangeMinValue = axisWidth * rangeMin
-  let rangeMaxValue = axisWidth * rangeMax
+  
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
   // if (padding > 0) {
   //   const stepAmount = maxValue - minValue + (padding * 2)
   //   const eachStepWidth = axisWidth / stepAmount
@@ -41,10 +37,17 @@ export const createAxisLinearScale = ({
   //   rangeMinValue += paddingWidth
   //   rangeMaxValue -= paddingWidth
   // }
+
+  // -- 依場景大小換算 --
+  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
+  const axisDomainMaxValue = domainMaxValue / rangeMax
   
+  // return d3.scaleLinear()
+  //   .domain([domainMinValue, domainMaxValue])
+  //   .range([rangeMinValue, rangeMaxValue])
   return d3.scaleLinear()
-    .domain([domainMinValue, domainMaxValue])
-    .range([rangeMinValue, rangeMaxValue])
+    .domain([axisDomainMinValue, axisDomainMaxValue])
+    .range([0, axisWidth])
 }
 
 // scalePoint - 非連續資料對應到比例尺座標上

package/src/utils/observables.ts

@@ -27,8 +27,9 @@ import type {
 //   groupLabel?: string // 要符合每一種computedData所以不一定會有groupLabel
 // }
 
+// 通用 highlight Observable
 export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
-  datumList$: Observable<ComputedDatumTypeMap<'series' | 'grid'>[]>
+  datumList$: Observable<ComputedDatumTypeMap<'series' | 'grid' | 'multiValue' | 'relationship' | 'tree'>[]>
   fullChartParams$: Observable<ChartParams>
   event$: Subject<any>
 }): Observable<string[]> => {
@@ -42,6 +43,7 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
         id: null,
         seriesLabel: null,
         groupLabel: null,
+        categoryLabel: null,
         highlightDefault: d.highlightDefault
       }
     }),
@@ -59,12 +61,14 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
           id: (d.datum as any).id,
           seriesLabel: (d.datum as any).seriesLabel,
           groupLabel: (d.datum as any).groupLabel,
+          categoryLabel: (d.datum as any).categoryLabel,
           highlightDefault: null
         }
         : {
           id: null,
           seriesLabel: null,
           groupLabel: null,
+          categoryLabel: null,
           highlightDefault: null
         }
     })
@@ -79,68 +83,28 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
     switchMap(d => highlightDefault$)
   )
 
-  const getHighlightIds =  ({ data, id, seriesLabel, groupLabel, highlightDefault, target }: {
-    data: ComputedDatumTypeMap<'series' | 'grid'>[]
-    id: string | null
-    seriesLabel: string | null
-    groupLabel: string | null
-    highlightDefault: string | null
-    target: HighlightTarget
-  }) => {
-    let ids: string[] = []
-    // if (id) {
-    //   ids.push(id)
-    // }
-    // if (label) {
-    //   if (target === 'group') {
-    //     const _ids = data.flat()
-    //       .filter(d => {
-    //         return d.groupLabel === label
-    //           || d.label === label
-    //       })
-    //       .map(d => d.id)
-    //     ids = ids.concat(_ids)
-    //   } else if (target === 'series') {
-    //     const _ids = data.flat()
-    //       .filter(d => {
-    //         return d.seriesLabel === label
-    //           || d.label === label
-    //       })
-    //       .map(d => d.id)
-    //     ids = ids.concat(_ids)
-    //   }
-    // }
-    // 依highlightDefault找到id/seriesLabel/groupLabel
-    if (highlightDefault != null && highlightDefault != '') {
-      if (target === 'datum') {
-        id = highlightDefault
-      } else if (target === 'series') {
-        const datum = data.flat().find(d => d.id === highlightDefault || d.seriesLabel === highlightDefault)
-        seriesLabel = (datum && datum.seriesLabel) ? datum.seriesLabel : null
-      } else if (target === 'group') {
-        const datum = data.flat().find(d => d.id === highlightDefault || (d as ComputedDatumTypeMap<"grid">).groupLabel === highlightDefault)
-        groupLabel = (datum && (datum as ComputedDatumTypeMap<"grid">).groupLabel) ? (datum as ComputedDatumTypeMap<"grid">).groupLabel : null
-      }
-    }
-    if (target === 'datum' && id != null && id != '') {
-      ids.push(id)
-    } else if (target === 'series' && seriesLabel != null && seriesLabel != '') {
-      const _ids = data.flat()
-        .filter(d => {
-          return d.seriesLabel === seriesLabel
-        })
-        .map(d => d.id)
-      ids = ids.concat(_ids)
-    } else if (target === 'group' && groupLabel != null && groupLabel != '') {
-      const _ids = data.flat()
-        .filter(d => {
-          return (d as ComputedDatumTypeMap<"grid">).groupLabel === groupLabel
-        })
-        .map(d => d.id)
-      ids = ids.concat(_ids)
-    }
+  function getDatumIds (datumList: ComputedDatumTypeMap<'series' | 'grid' | 'multiValue' | 'relationship' | 'tree'>[], id: string | null) {
+    return id == null
+      ? []
+      : datumList.find(d => d.id === id) ? [id] : []
+  }
 
-    return ids
+  function getSeriesIds (datumList: ComputedDatumTypeMap<'series' | 'grid'>[], seriesLabel: string | null) {
+    return seriesLabel == null
+      ? datumList.filter(d => d.seriesLabel === seriesLabel).map(d => d.id)
+      : []
+  }
+
+  function getGroupIds (datumList: ComputedDatumTypeMap<'grid'>[], groupLabel: string | null) {
+    return groupLabel == null
+      ? datumList.filter(d => (d as ComputedDatumTypeMap<"grid">).groupLabel === groupLabel).map(d => d.id)
+      : []
+  }
+
+  function getCategoryIds (datumList: ComputedDatumTypeMap<'multiValue' | 'relationship' | 'tree'>[], categoryLabel: string | null) {
+    return categoryLabel == null
+      ? []
+      : datumList.filter(d => (d as ComputedDatumTypeMap<"multiValue" | "relationship" | "tree">).categoryLabel === categoryLabel).map(d => d.id)
   }
 
   return new Observable<string[]>(subscriber => {
@@ -149,16 +113,19 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
       datumList: datumList$,
       fullChartParams: fullChartParams$,
     }).pipe(
-      takeUntil(destroy$)
+      takeUntil(destroy$),
+      switchMap(async d => d)
     ).subscribe(data => {
-      const ids = getHighlightIds({
-        data: data.datumList,
-        id: data.target.id,
-        seriesLabel: data.target.seriesLabel,
-        groupLabel: data.target.groupLabel,
-        highlightDefault: data.target.highlightDefault,
-        target: data.fullChartParams.highlightTarget,
-      })
+      let ids: string[] = []
+      if (data.fullChartParams.highlightTarget === 'datum') {
+        ids = getDatumIds(data.datumList, data.target.id)
+      } else if (data.fullChartParams.highlightTarget === 'series') {
+        ids = getSeriesIds(data.datumList as ComputedDatumTypeMap<'series' | 'grid'>[], data.target.seriesLabel)
+      } else if (data.fullChartParams.highlightTarget === 'group') {
+        ids = getGroupIds(data.datumList as ComputedDatumTypeMap<'grid'>[], data.target.groupLabel)
+      } else if (data.fullChartParams.highlightTarget === 'category') {
+        ids = getCategoryIds(data.datumList as ComputedDatumTypeMap<'multiValue' | 'relationship' | 'tree'>[], data.target.categoryLabel)
+      }
       subscriber.next(ids)
     })
 
@@ -168,31 +135,47 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
   })
 }
 
-export const seriesDataMapObservable = <DatumType extends ComputedDatumTypeMap<ChartType>>({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+export const seriesDataMapObservable = <DatumType extends ComputedDatumTypeMap<'series' | 'grid'>>({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
   return datumList$.pipe(
     map(data => {
       const SeriesDataMap: Map<string, DatumType[]> = new Map()
       data.forEach(d => {
-        const seriesData = SeriesDataMap.get((d as ComputedDatumTypeMap<'series' | 'grid'>).seriesLabel) ?? []
+        const seriesData = SeriesDataMap.get(d.seriesLabel) ?? []
         seriesData.push(d)
-        SeriesDataMap.set((d as ComputedDatumTypeMap<'series' | 'grid'>).seriesLabel, seriesData)
+        SeriesDataMap.set(d.seriesLabel, seriesData)
       })
       return SeriesDataMap
     })
   )
 }
 
-export const groupDataMapObservable = <DatumType extends ComputedDatumTypeMap<ChartType>> ({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+export const groupDataMapObservable = <DatumType extends ComputedDatumTypeMap<'grid'>> ({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
   return datumList$.pipe(
     map(data => {
       const GroupDataMap: Map<string, DatumType[]> = new Map()
       data.forEach(d => {
-        const groupData = GroupDataMap.get((d as ComputedDatumTypeMap<'grid'>).groupLabel) ?? []
+        const groupData = GroupDataMap.get(d.groupLabel) ?? []
         groupData.push(d)
-        GroupDataMap.set((d as ComputedDatumTypeMap<'grid'>).groupLabel, groupData)
+        GroupDataMap.set(d.groupLabel, groupData)
       })
       return GroupDataMap
     })
   )
 }
 
+export const categoryDataMapObservable = <DatumType extends ComputedDatumTypeMap<'multiValue' | 'relationship' | 'tree'>> ({ datumList$ }: { datumList$: Observable<DatumType[]> }) => {
+  return datumList$.pipe(
+    map(data => {
+      const GroupDataMap: Map<string, DatumType[]> = new Map()
+      data
+        .filter(d => d.categoryLabel != null)
+        .forEach(d => {
+          const groupData = GroupDataMap.get(d.categoryLabel) ?? []
+          groupData.push(d)
+          GroupDataMap.set(d.categoryLabel, groupData)
+        })
+      return GroupDataMap
+    })
+  )
+}
+