@orbcharts/core 3.0.0-alpha.39 → 3.0.0-alpha.41

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

@@ -3,6 +3,7 @@ import { ContextObserverBase } from './ContextObserver';
 import { ContainerPosition, ContextObserverGridDetail } from './ContextObserverGrid';
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
+    textSizePx$: Observable<number>;
     multiGridEachDetail$: Observable<ContextObserverGridDetail[]>;
     multiGridContainer$: Observable<ContainerPosition[][]>;
 }

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

@@ -3,6 +3,7 @@ import { ContextObserverBase } from './ContextObserver';
 import { ComputedDatumSeries } from './ComputedDataSeries';
 
 export interface ContextObserverSeries<PluginParams> extends ContextObserverBase<'series', PluginParams> {
-    seriesHighlight$: Observable<string[]>;
+    textSizePx$: Observable<number>;
+    seriesHighlight$: Observable<ComputedDatumSeries[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>;
 }

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

@@ -3,7 +3,8 @@ import { ContextObserverBase } from './ContextObserver';
 import { ComputedDataTree } from './ComputedDataTree';
 
 export interface ContextObserverTree<PluginParams> extends ContextObserverBase<'tree', PluginParams> {
-    treeHighlight$: Observable<string[]>;
+    textSizePx$: Observable<number>;
+    treeHighlight$: Observable<ComputedDataTree[]>;
     existCategoryLabels$: Observable<string[]>;
     CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>;
     visibleComputedData$: Observable<ComputedDataTree>;

package/dist/src/utils/observables.d.ts

@@ -1,11 +1,11 @@
 import { Subject, Observable } from 'rxjs';
-import { ChartParams, ComputedDatumTypeMap } from '../types';
+import { ChartType, ChartParams, ComputedDatumTypeMap, EventTypeMap } from '../types';
 
-export declare const highlightObservable: ({ datumList$, fullChartParams$, event$ }: {
-    datumList$: Observable<ComputedDatumTypeMap<"series" | "grid" | "multiValue" | "relationship" | "tree">[]>;
+export declare const highlightObservable: <T extends ChartType, D>({ datumList$, fullChartParams$, event$ }: {
+    datumList$: Observable<D[]>;
     fullChartParams$: Observable<ChartParams>;
-    event$: Subject<any>;
-}) => Observable<string[]>;
+    event$: Subject<EventTypeMap<T>>;
+}) => Observable<D[]>;
 export declare const seriesDataMapObservable: <DatumType extends ComputedDatumTypeMap<"series" | "grid">>({ datumList$ }: {
     datumList$: Observable<DatumType[]>;
 }) => Observable<Map<string, DatumType[]>>;
@@ -15,3 +15,4 @@ export declare const groupDataMapObservable: <DatumType extends ComputedDatumTyp
 export declare const categoryDataMapObservable: <DatumType extends ComputedDatumTypeMap<"multiValue" | "relationship" | "tree">>({ datumList$ }: {
     datumList$: Observable<DatumType[]>;
 }) => Observable<Map<string, DatumType[]>>;
+export declare const textSizePxObservable: (chartParams$: Observable<ChartParams>) => Observable<number>;

package/package.json

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

@@ -73,7 +73,8 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
     }
   },
   styles: {
-    textSize: 14,
+    // textSize: 14,
+    textSize: '1rem',
     unhighlightedOpacity: 0.3
   },
   transitionDuration: 800,

package/src/grid/createGridContextObserver.ts

@@ -3,7 +3,8 @@ import type { ContextObserverFn } from '../types'
 import {
   highlightObservable,
   seriesDataMapObservable,
-  groupDataMapObservable } from '../utils/observables'
+  groupDataMapObservable,
+  textSizePxObservable } from '../utils/observables'
 import {
   gridAxesTransformObservable,
   gridAxesReverseTransformObservable,
@@ -17,6 +18,10 @@ import {
 
 export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
   
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
   const isSeriesPositionSeprate$ = isSeriesPositionSeprateObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$
@@ -108,6 +113,7 @@ export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
     isSeriesPositionSeprate$,
     gridContainer$,
     gridAxesTransform$,

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -2,9 +2,14 @@ import {
   shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
 import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
+import { textSizePxObservable } from '../utils/observables'
 
 export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
   const multiGridEachDetail$ = multiGridEachDetailObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
@@ -28,6 +33,7 @@ export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
     multiGridEachDetail$,
     multiGridContainer$
   }

package/src/series/createSeriesContextObserver.ts

@@ -3,10 +3,14 @@ import type { ContextObserverFn } from '../types'
 import {
   seriesDataMapObservable,
   groupDataMapObservable } from '../utils/observables'
-import { highlightObservable } from '../utils/observables'
+import { highlightObservable, textSizePxObservable } from '../utils/observables'
 
 export const createSeriesContextObserver: ContextObserverFn<'series'> = ({ subject, observer }) => {
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
   const seriesHighlight$ = highlightObservable({
     datumList$: observer.computedData$,
     fullChartParams$: observer.fullChartParams$,
@@ -27,6 +31,7 @@ export const createSeriesContextObserver: ContextObserverFn<'series'> = ({ subje
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
     seriesHighlight$,
     SeriesDataMap$
   }

package/src/tree/createTreeContextObserver.ts

@@ -1,6 +1,6 @@
 import { map, shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
-import { highlightObservable, categoryDataMapObservable } from '../utils/observables'
+import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
 import {
   nodeListObservable,
   existCategoryLabelsObservable,
@@ -9,6 +9,10 @@ import {
 
 export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
+    shareReplay(1)
+  )
+
   const nodeList$ = nodeListObservable({
     computedData$: observer.computedData$
   }).pipe(
@@ -48,6 +52,7 @@ export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    textSizePx$,
     treeHighlight$,
     existCategoryLabels$,
     CategoryDataMap$,

package/src/types/ChartParams.ts

@@ -36,7 +36,7 @@ function test (): ChartParamsPartial {
 export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
 
 export interface Styles {
-  textSize: number
+  textSize: string | number
   unhighlightedOpacity: number
 }
 

package/src/types/ContextObserverGrid.ts

@@ -7,7 +7,7 @@ export interface ContextObserverGrid<PluginParams>
   extends
     ContextObserverBase<'grid', PluginParams>,
     ContextObserverGridDetail {
-  
+      textSizePx$: Observable<number>
     }
 
 export interface ContextObserverGridDetail {
@@ -17,7 +17,7 @@ export interface ContextObserverGridDetail {
   gridGraphicTransform$: Observable<TransformData>
   gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{ width: number; height: number; }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>

package/src/types/ContextObserverMultiGrid.ts

@@ -6,6 +6,7 @@ import type { TransformData } from './TransformData'
 import type { ContextObserverGridDetail } from './ContextObserverGrid'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
+  textSizePx$: Observable<number>
   multiGridEachDetail$: Observable<ContextObserverGridDetail[]>
   multiGridContainer$: Observable<ContainerPosition[][]>
 }

package/src/types/ContextObserverSeries.ts

@@ -3,6 +3,7 @@ import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDatumSeries } from './ComputedDataSeries'
 
 export interface ContextObserverSeries<PluginParams> extends ContextObserverBase<'series', PluginParams> {
-  seriesHighlight$: Observable<string[]>
+  textSizePx$: Observable<number>
+  seriesHighlight$: Observable<ComputedDatumSeries[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
 }

package/src/types/ContextObserverTree.ts

@@ -3,7 +3,8 @@ import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataTree } from './ComputedDataTree'
 
 export interface ContextObserverTree<PluginParams> extends ContextObserverBase<'tree', PluginParams> {
-  treeHighlight$: Observable<string[]>
+  textSizePx$: Observable<number>
+  treeHighlight$: Observable<ComputedDataTree[]>
   existCategoryLabels$: Observable<string[]>
   CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>
   visibleComputedData$: Observable<ComputedDataTree>

package/src/utils/observables.ts

@@ -15,6 +15,7 @@ import type {
   ComputedDataTypeMap,
   ComputedDatumTypeMap,
   DataFormatterTypeMap,
+  EventTypeMap,
   HighlightTarget,
   Layout,
   TransformData } from '../types'
@@ -28,11 +29,11 @@ import type {
 // }
 
 // 通用 highlight Observable
-export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
-  datumList$: Observable<ComputedDatumTypeMap<'series' | 'grid' | 'multiValue' | 'relationship' | 'tree'>[]>
+export const highlightObservable = <T extends ChartType, D>({ datumList$, fullChartParams$, event$ }: {
+  datumList$: Observable<D[]>
   fullChartParams$: Observable<ChartParams>
-  event$: Subject<any>
-}): Observable<string[]> => {
+  event$: Subject<EventTypeMap<T>>
+}): Observable<D[]> => {
   const destroy$ = new Subject()
 
   // 預設的highlight
@@ -83,31 +84,30 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
     switchMap(d => highlightDefault$)
   )
 
-  function getDatumIds (datumList: ComputedDatumTypeMap<'series' | 'grid' | 'multiValue' | 'relationship' | 'tree'>[], id: string | null) {
-    return id == null
-      ? []
-      : datumList.find(d => d.id === id) ? [id] : []
+  function getDatumIds (datumList: ComputedDatumTypeMap<T>[], id: string | null) {
+    const datum = datumList.find(d => d.id === id)
+    return datum ? [datum] : []
   }
 
-  function getSeriesIds (datumList: ComputedDatumTypeMap<'series' | 'grid'>[], seriesLabel: string | null) {
+  function getSeriesIds (datumList: ComputedDatumTypeMap<T>[], seriesLabel: string | null) {
     return seriesLabel == null
       ? []
-      : datumList.filter(d => d.seriesLabel === seriesLabel).map(d => d.id)
+      : datumList.filter(d => (d as ComputedDatumTypeMap<"series">).seriesLabel === seriesLabel)
   }
 
-  function getGroupIds (datumList: ComputedDatumTypeMap<'grid'>[], groupLabel: string | null) {
+  function getGroupIds (datumList: ComputedDatumTypeMap<T>[], groupLabel: string | null) {
     return groupLabel == null
       ? []
-      : datumList.filter(d => (d as ComputedDatumTypeMap<"grid">).groupLabel === groupLabel).map(d => d.id)
+      : datumList.filter(d => (d as ComputedDatumTypeMap<"grid">).groupLabel === groupLabel)
   }
 
-  function getCategoryIds (datumList: ComputedDatumTypeMap<'multiValue' | 'relationship' | 'tree'>[], categoryLabel: string | null) {
+  function getCategoryIds (datumList: ComputedDatumTypeMap<T>[], categoryLabel: string | null) {
     return categoryLabel == null
       ? []
-      : datumList.filter(d => (d as ComputedDatumTypeMap<"multiValue" | "relationship" | "tree">).categoryLabel === categoryLabel).map(d => d.id)
+      : datumList.filter(d => (d as ComputedDatumTypeMap<"multiValue" | "relationship" | "tree">).categoryLabel === categoryLabel)
   }
 
-  return new Observable<string[]>(subscriber => {
+  return new Observable<D[]>(subscriber => {
     combineLatest({
       target: merge(highlightMouseover$, highlightMouseout$, highlightDefault$),
       datumList: datumList$,
@@ -116,19 +116,17 @@ export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
       takeUntil(destroy$),
       switchMap(async d => d)
     ).subscribe(data => {
-      console.log('data.fullChartParams.highlightTarget', data.fullChartParams.highlightTarget)
-      let ids: string[] = []
+      let datumList: ComputedDatumTypeMap<T>[] = []
       if (data.fullChartParams.highlightTarget === 'datum') {
-        ids = getDatumIds(data.datumList, data.target.id)
+        datumList = getDatumIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.id)
       } else if (data.fullChartParams.highlightTarget === 'series') {
-        ids = getSeriesIds(data.datumList as ComputedDatumTypeMap<'series' | 'grid'>[], data.target.seriesLabel)
+        datumList = getSeriesIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.seriesLabel)
       } else if (data.fullChartParams.highlightTarget === 'group') {
-        ids = getGroupIds(data.datumList as ComputedDatumTypeMap<'grid'>[], data.target.groupLabel)
+        datumList = getGroupIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.groupLabel)
       } else if (data.fullChartParams.highlightTarget === 'category') {
-        ids = getCategoryIds(data.datumList as ComputedDatumTypeMap<'multiValue' | 'relationship' | 'tree'>[], data.target.categoryLabel)
+        datumList = getCategoryIds(data.datumList as ComputedDatumTypeMap<T>[], data.target.categoryLabel)
       }
-      console.log('ids', ids)
-      subscriber.next(ids)
+      subscriber.next(datumList as D[])
     })
 
     return function unsubscribe () {
@@ -181,3 +179,24 @@ export const categoryDataMapObservable = <DatumType extends ComputedDatumTypeMap
   )
 }
 
+export const textSizePxObservable = (chartParams$: Observable<ChartParams>) => {
+  return chartParams$.pipe(
+    map(d => d.styles.textSize),
+    distinctUntilChanged(),
+    map(data => {
+      let value = NaN
+      if (typeof data === 'string') {
+        if (data.includes('rem')) {
+          const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize)
+          const num = parseFloat(data)
+          value = num * rootFontSizePx
+        } else if (data.includes('px')) {
+          value = parseFloat(data)
+        }
+      } else if (typeof data === 'number') {
+        return data
+      }
+      return value ? value : 14 // default
+    })
+  )
+}