@orbcharts/core 3.0.0-alpha.21

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

@@ -0,0 +1,20 @@
+import { DatumValue } from '../types/Data';
+import { DataSeries } from '../types/DataSeries';
+import { DataGrid, DataGridDatum } from '../types/DataGrid';
+import { DataMultiGrid } from '../types/DataMultiGrid';
+import { DataMultiValue } from '../types/DataMultiValue';
+import { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid';
+import * as d3 from 'd3';
+export declare function formatValueToLabel(value: any, valueFormatter: string | ((text: d3.NumberValue) => string)): string;
+export declare function createDefaultDatumId(type: string, levelOneIndex: number, levelTwoIndex: number): string;
+export declare function createDefaultSeriesLabel(type: string, seriesIndex: number): string;
+export declare function createDefaultGroupLabel(type: string, groupIndex: number): string;
+export declare function createGridSeriesLabels(transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid): string[];
+export declare function createGridGroupLabels(transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid): string[];
+export declare function getMinAndMax(data: number[]): [number, number];
+export declare function getMinAndMaxValue(data: DatumValue[]): [number, number];
+export declare function getMinAndMaxSeries(data: DataSeries): [number, number];
+export declare function getMinAndMaxGrid(data: DataGrid): [number, number];
+export declare function getMinAndMaxMultiGrid(data: DataMultiGrid): [number, number];
+export declare function getMinAndMaxMultiValue(data: DataMultiValue, valueIndex?: number): [number, number];
+export declare function transposeData<T>(seriesType: SeriesType, data: T[][]): T[][];

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig & Promise<import('vite').UserConfig> & (import('vite').UserConfigFnObject & import('vite').UserConfigExport);
+export default _default;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@orbcharts/core",
+  "version": "3.0.0-alpha.21",
+  "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
+  "author": "Blue Planet Inc.",
+  "license": "Apache-2.0",
+  "keywords": [
+    "d3",
+    "rxjs",
+    "svg",
+    "visualization",
+    "infographic",
+    "graph",
+    "chart"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "*"
+  ],
+  "module": "./dist/orbcharts-core.es.js",
+  "types": "./dist/src/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build --mode release"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "vite-plugin-dts": "^3.7.3"
+  },
+  "dependencies": {
+    "d3": "^7.8.5",
+    "rxjs": "^7.8.1"
+  }
+}

package/src/AbstractChart.ts

@@ -0,0 +1,48 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import type {
+  ComputedDataFn,
+  ChartEntity,
+  ChartType,
+  ChartParamsPartial,
+  ContextObserverFn,
+  ChartOptionsPartial,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterPartialTypeMap,
+  EventTypeMap,
+  PluginEntity } from './types'
+import { createBaseChart } from './base/createBaseChart'
+
+export abstract class AbstractChart<T extends ChartType> implements ChartEntity<T> {
+  selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
+  destroy: () => void
+  data$: Subject<DataTypeMap<T>> = new Subject()
+  dataFormatter$: Subject<DataFormatterPartialTypeMap<T>> = new Subject()
+  plugins$: Subject<PluginEntity<T, any, any>[]> = new Subject()
+  chartParams$: Subject<ChartParamsPartial> = new Subject()
+  event$: Subject<EventTypeMap<T>> = new Subject()
+
+  constructor (
+    { defaultDataFormatter, computedDataFn, contextObserverFn }: {
+      defaultDataFormatter: DataFormatterTypeMap<T>
+      computedDataFn: ComputedDataFn<T>
+      contextObserverFn: ContextObserverFn<T>
+    },
+    element: HTMLElement | Element,
+    options?: ChartOptionsPartial<T>
+  ) {
+    const baseChart = createBaseChart({ defaultDataFormatter, computedDataFn, contextObserverFn })
+    const chartEntity = baseChart(element, options)
+
+    this.selection = chartEntity.selection
+    this.destroy = chartEntity.destroy
+    this.data$ = chartEntity.data$
+    this.dataFormatter$ = chartEntity.dataFormatter$
+    this.plugins$ = chartEntity.plugins$
+    this.chartParams$ = chartEntity.chartParams$
+    this.event$ = chartEntity.event$
+  }
+  
+}

package/src/GridChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_GRID_DEFAULT } from './defaults'
+import { computeGridData } from './grid/computeGridData'
+import { createGridContextObserver } from './grid/createGridContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class GridChart extends AbstractChart<'grid'> implements ChartEntity<'grid'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'grid'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_GRID_DEFAULT,
+        computedDataFn: computeGridData,
+        contextObserverFn: createGridContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/MultiGridChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from './defaults'
+import { computeMultiGridData } from './multiGrid/computeMultiGridData'
+import { createMultiGridContextObserver } from './multiGrid/createMultiGridContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class MultiGridChart extends AbstractChart<'multiGrid'> implements ChartEntity<'multiGrid'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiGrid'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_MULTI_GRID_DEFAULT,
+        computedDataFn: computeMultiGridData,
+        contextObserverFn: createMultiGridContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/MultiValueChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_MULTI_VALUE_DEFAULT } from './defaults'
+import { computeMultiValueData } from './multiValue/computeMultiValueData'
+import { createMultiValueContextObserver } from './multiValue/createMultiValueContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class MultiValueChart extends AbstractChart<'multiValue'> implements ChartEntity<'multiValue'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiValue'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_MULTI_VALUE_DEFAULT,
+        computedDataFn: computeMultiValueData,
+        contextObserverFn: createMultiValueContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/RelationshipChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_RELATIONAL_DEFAULT} from './defaults'
+import { computeRelationshipData } from './relationship/computeRelationshipData'
+import { createRelationshipContextObserver } from './relationship/createRelationshipContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class RelationshipChart extends AbstractChart<'relationship'> implements ChartEntity<'relationship'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'relationship'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_RELATIONAL_DEFAULT,
+        computedDataFn: computeRelationshipData,
+        contextObserverFn: createRelationshipContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/SeriesChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_SERIES_DEFAULT } from './defaults'
+import { computeSeriesData } from './series/computeSeriesData'
+import { createSeriesContextObserver } from './series/createSeriesContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class SeriesChart extends AbstractChart<'series'> implements ChartEntity<'series'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'series'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_SERIES_DEFAULT,
+        computedDataFn: computeSeriesData,
+        contextObserverFn: createSeriesContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/TreeChart.ts

@@ -0,0 +1,21 @@
+import type {
+  ChartEntity,
+  ChartOptionsPartial } from './types'
+import { DATA_FORMATTER_TREE_DEFAULT } from './defaults'
+import { computeTreeData } from './tree/computeTreeData'
+import { createTreeContextObserver } from './tree/createTreeContextObserver'
+import { AbstractChart } from './AbstractChart'
+
+export class TreeChart extends AbstractChart<'tree'> implements ChartEntity<'tree'> {
+  constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'tree'>) {
+    super(
+      {
+        defaultDataFormatter: DATA_FORMATTER_TREE_DEFAULT,
+        computedDataFn: computeTreeData,
+        contextObserverFn: createTreeContextObserver
+      },
+      element,
+      options
+    )
+  }
+}

package/src/base/createBaseChart.ts

@@ -0,0 +1,329 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  iif,
+  of,
+  EMPTY,
+  Subject,
+  BehaviorSubject,
+  Observable,
+  first,
+  takeUntil,
+  catchError,
+  throwError } from 'rxjs'
+import {
+  map,
+  mergeWith,
+  concatMap,
+  switchMap,
+  switchAll,
+  throttleTime,
+  debounceTime,
+  distinctUntilChanged,
+  share,
+  shareReplay,
+  filter,
+  take,
+  startWith,
+  scan,
+} from 'rxjs/operators'
+import type {
+  CreateBaseChart,
+  CreateChart,
+  ComputedDataFn,
+  ChartEntity,
+  ChartType,
+  ChartParams,
+  ContextSubject,
+  ComputedDataTypeMap,
+  ContextObserverFn,
+  ChartOptions,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterBase,
+  DataFormatterContext,
+  Layout,
+  PluginEntity,
+  PluginContext,
+  Preset,
+  ContextObserverTypeMap } from '../types'
+// import type { EventTypeMap } from './types/Event'
+import { mergeOptionsWithDefault } from '../utils'
+import {
+  CHART_OPTIONS_DEFAULT,
+  PADDING_DEFAULT,
+  CHART_PARAMS_DEFAULT,
+  CHART_WIDTH_DEFAULT,
+  CHART_HEIGHT_DEFAULT } from '../defaults'
+
+// 判斷dataFormatter是否需要size參數
+const isAxesTypeMap: {[key in ChartType]: Boolean} = {
+  series: false,
+  grid: true,
+  multiGrid: true,
+  multiValue: true,
+  tree: false,
+  relationship: false
+}
+
+function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOnly> {
+  return new Observable(subscriber => {
+    const ro = new ResizeObserver(entries => {
+      const entry = entries[0]
+      if (entry && entry.contentRect) {
+        subscriber.next(entry.contentRect)
+      }
+    })
+
+    ro.observe(elem)
+    return function unsubscribe() {
+      ro.unobserve(elem)
+    }
+  })
+}
+
+export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
+  defaultDataFormatter: DataFormatterTypeMap<T>
+  computedDataFn: ComputedDataFn<T>
+  contextObserverFn: ContextObserverFn<T>
+}): CreateChart<T> => {
+  const destroy$ = new Subject()
+  
+  const chartType: ChartType = (defaultDataFormatter as unknown as DataFormatterBase<any>).type
+
+  // 建立chart實例
+  return function createChart (element: HTMLElement | Element, options?: Partial<ChartOptions<T>>): ChartEntity<T> {
+    
+    // -- selections --
+    // svg selection
+    d3.select(element).selectAll('svg').remove()
+    const svgSelection = d3.select(element).append('svg')
+    svgSelection
+      .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
+      .attr('xmls', 'http://www.w3.org/2000/svg')
+      .attr('version', '1.1')
+      .style('position', 'absolute')
+      .style('width', '100%')
+      .style('height', '100%')
+      .classed('orbcharts__root', true)
+    // 傳入操作的 selection
+    const selectionLayout = svgSelection.append('g')
+    selectionLayout.classed('orbcharts__layout', true)
+    const selectionPlugins = selectionLayout.append('g')
+    selectionPlugins.classed('orbcharts__plugins', true)
+
+    // chartSubject
+    const chartSubject: ContextSubject<T> = {
+      data$: new Subject(),
+      dataFormatter$: new Subject(),
+      plugins$: new Subject(),
+      chartParams$: new Subject(),
+      event$: new Subject()
+    }
+
+    // options
+    const mergedPresetWithDefault: Preset<T> = ((options) => {
+      const _options = options ? options : CHART_OPTIONS_DEFAULT
+      const preset = _options.preset ? _options.preset : {}
+      return {
+        chartParams: preset.chartParams
+          ? mergeOptionsWithDefault(preset.chartParams, CHART_PARAMS_DEFAULT)
+          : CHART_PARAMS_DEFAULT,
+        dataFormatter: preset.dataFormatter
+          ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
+          : defaultDataFormatter,
+        allPluginParams: preset.allPluginParams
+          ? preset.allPluginParams
+          : {}
+      }
+    })(options)
+    
+    
+    // console.log('mergedOptions', mergedOptions)
+
+    const sharedData$ = chartSubject.data$.pipe(shareReplay(1))
+    const shareAndMergedDataFormatter$ = chartSubject.dataFormatter$
+      .pipe(
+        takeUntil(destroy$),
+        startWith({}),
+        map((d) => mergeOptionsWithDefault(d, mergedPresetWithDefault.dataFormatter)),
+        shareReplay(1)
+      )
+    const shareAndMergedChartParams$ = chartSubject.chartParams$
+      .pipe(
+        takeUntil(destroy$),
+        startWith({}),
+        map((d) => mergeOptionsWithDefault(d, mergedPresetWithDefault.chartParams)),
+        shareReplay(1)
+      )
+
+    // -- size --
+    // padding
+    const mergedPadding$ = shareAndMergedChartParams$
+      .pipe(
+        takeUntil(destroy$),
+        startWith({}),
+        map((d: any) => mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT))
+      )
+    mergedPadding$
+      .pipe(
+        takeUntil(destroy$),
+        first()
+      )
+      .subscribe(d => {
+        selectionLayout
+          .attr('transform', `translate(${d.left}, ${d.top})`)
+      })
+    mergedPadding$.subscribe(size => {
+      selectionLayout
+        .transition()
+        .attr('transform', `translate(${size.left}, ${size.top})`)
+    })
+
+    // 監聽外層的element尺寸
+    const rootSize$ = resizeObservable(element)
+      .pipe(
+        takeUntil(destroy$),
+        share()
+      )
+    const rootSizeFiltered$ = of().pipe(
+      mergeWith(
+        rootSize$.pipe(
+          debounceTime(250)
+        ),
+        rootSize$.pipe(
+          throttleTime(250)
+        )
+      ),
+      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+      share()
+    )
+    const rootSizeSubscription = rootSizeFiltered$.subscribe()
+
+    // layout
+    const layout$: Observable<Layout> = combineLatest({
+      rootSize: rootSizeFiltered$,
+      mergedPadding: mergedPadding$
+    }).pipe(
+      takeUntil(destroy$),
+      switchMap(async (d) => {
+        const rootWidth = d.rootSize.width > 0
+          ? d.rootSize.width
+          : CHART_WIDTH_DEFAULT
+        const rootHeight = d.rootSize.height > 0
+          ? d.rootSize.height
+          : CHART_HEIGHT_DEFAULT
+        return {
+          width: rootWidth - d.mergedPadding.left - d.mergedPadding.right,
+          height: rootHeight - d.mergedPadding.top - d.mergedPadding.bottom,
+          top: d.mergedPadding.top,
+          right: d.mergedPadding.right,
+          bottom: d.mergedPadding.bottom,
+          left: d.mergedPadding.left,
+          rootWidth,
+          rootHeight
+        }
+      }),
+      shareReplay(1)
+    )
+
+    // -- computedData --
+    const computedData$: Observable<ComputedDataTypeMap<T>> = combineLatest({
+      data: sharedData$,
+      dataFormatter: shareAndMergedDataFormatter$,
+      chartParams: shareAndMergedChartParams$,
+      layout: iif(() => isAxesTypeMap[chartType] === true, layout$, of(undefined))
+    }).pipe(
+      takeUntil(destroy$),
+      switchMap(async d => d),
+      switchMap((d) => {
+        return of(d)
+          .pipe(
+            map(_d => {
+              try {
+                return computedDataFn({ data: _d.data, dataFormatter: _d.dataFormatter, chartParams: _d.chartParams, layout: _d.layout })
+              } catch (e) {
+                console.error(e)
+                throw new Error(e)
+              }   
+            }),
+            catchError(() => EMPTY)
+          )  
+      }),
+      shareReplay(1)
+    )
+    
+    // -- plugins --
+    const pluginEntityMap: any = {}  // 用於destroy
+    chartSubject.plugins$.subscribe(plugins => {
+      if (!plugins) {
+        return
+      }
+      // 建立<g>
+      const update = selectionPlugins
+        .selectAll<SVGGElement, PluginEntity<T, any, any>>('g.orbcharts__plugin')
+        .data(plugins, d => d.name as string)
+      const enter = update.enter()
+        .append('g')
+        .attr('class', plugin => {
+          return `orbcharts__plugin orbcharts__${plugin.name}`
+        })
+      const exit = update.exit()
+        .remove()
+      
+      // destroy entity
+      exit.each((plugin: PluginEntity<T, unknown, unknown>, i, n) => {
+        if (pluginEntityMap[plugin.name as string]) {
+          pluginEntityMap[plugin.name as string].destroy()
+        }
+      })
+
+      enter.each((plugin, i, n) => {
+        const _pluginObserverBase = {
+          fullParams$: new Observable(),
+          fullChartParams$: shareAndMergedChartParams$,
+          fullDataFormatter$: shareAndMergedDataFormatter$,
+          computedData$,
+          layout$
+        }
+        const pluginObserver: ContextObserverTypeMap<T, typeof plugin.defaultParams> = contextObserverFn({
+          observer: _pluginObserverBase,
+          subject: chartSubject
+        })
+
+        // -- createPlugin(plugin) --
+        const pluginSelection = d3.select(n[i])
+        const pluginContext: PluginContext<T, typeof plugin.name, typeof plugin.defaultParams> = {
+          selection: pluginSelection,
+          rootSelection: svgSelection,
+          name: plugin.name,
+          chartType,
+          subject: chartSubject,
+          observer: pluginObserver
+        }
+
+        plugin.setPresetParams(mergedPresetWithDefault.allPluginParams[plugin.name] ?? {})
+        // 傳入context
+        plugin.setContext(pluginContext)
+  
+        // 紀錄起來
+        pluginEntityMap[pluginContext.name as string] = plugin
+
+        // init plugin
+        plugin.init()
+
+      })
+
+    })
+
+    return {
+      ...chartSubject,
+      selection: svgSelection,
+      destroy () {
+        d3.select(element).selectAll('svg').remove()
+        destroy$.next(undefined)
+        rootSizeSubscription.unsubscribe()
+      }
+    }
+  }
+}

package/src/base/createBasePlugin.ts

@@ -0,0 +1,89 @@
+import { takeUntil, map, shareReplay, startWith, Subject, Observable } from 'rxjs'
+import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
+import { mergeOptionsWithDefault } from '../utils'
+
+// 建立plugin實例
+function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
+  name: PluginName
+  defaultParams: PluginParams
+  initFn: PluginInitFn<T, PluginName, PluginParams>
+}) {
+        
+  const destroy$ = new Subject()
+  const params$: Subject<Partial<typeof defaultParams>> = new Subject()
+  const StoreMap = new WeakMap() // 避免memory leak
+  let pluginDestroyFn = () => {}
+  let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
+  let mergedDefaultParams: PluginParams = defaultParams
+
+  // 建立plugin實例
+  return {
+    params$,
+    name,
+    defaultParams,
+    init () {
+      if (!pluginContext) {
+        return
+      }
+      // 執行
+      pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
+      StoreMap.set(pluginContext.selection, pluginContext)
+    },
+    destroy () {
+      pluginDestroyFn()
+      if (pluginContext) {
+        pluginContext.selection.remove()
+        pluginContext = undefined
+      }
+      destroy$.next(undefined)
+    },
+    setPresetParams: (presetParams: Partial<PluginParams>) => {
+      mergedDefaultParams = mergeOptionsWithDefault(presetParams, defaultParams)
+    },
+    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
+      pluginContext = _pluginContext
+      pluginContext.observer.fullParams$ = params$
+        .pipe(
+          takeUntil(destroy$),
+          startWith({}),
+          map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
+          shareReplay(1),
+        )
+    }
+  }
+}
+
+// 建立plugin類別
+export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
+  
+  // 定義plugin
+  return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
+
+    // 定義plugin的初始化function
+    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
+
+      return class Plugin  {
+        params$: Subject<Partial<PluginParams>>
+        name: PluginName
+        defaultParams: PluginParams
+        // presetParams: Partial<PluginParams>
+        init: () => void
+        destroy: () => void
+        setPresetParams: (presetParams: Partial<PluginParams>) => void
+        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
+        constructor () {
+          const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
+          
+          this.params$ = pluginEntity.params$
+          this.name = pluginEntity.name
+          this.defaultParams = pluginEntity.defaultParams
+          // this.presetParams = pluginEntity.presetParams
+          this.init = pluginEntity.init
+          this.destroy = pluginEntity.destroy
+          this.setPresetParams = pluginEntity.setPresetParams
+          this.setContext = pluginEntity.setContext
+        }
+      }
+    }
+  }
+}