@orbcharts/core 3.0.0-alpha.21

package/src/utils/commonUtils.ts

@@ -0,0 +1,50 @@
+// import * as d3 from 'd3'
+
+// 是否為物件
+export function isObject(variable: any) {
+  return Object.prototype.toString.call(variable) === "[object Object]";
+}
+
+// 是否為function
+export function isFunction(fn: any) {
+  return !!fn && !fn.nodename && fn.constructor != String && fn.constructor != RegExp && fn.constructor != Array && /function/i.test(fn + "");
+}
+
+// 將可選的參數和預設值合併
+export function mergeOptionsWithDefault<Options extends { [key: string]: any; }> (options: {[key: string]: any}, defaultOptions: Options): Options {
+  if (isObject(options) === false || isObject(defaultOptions) === false) {
+    return Object.assign({}, defaultOptions)
+  }
+  const mergeObjColumns = (_options: {[key: string]: any}, _defaultOptions: {[key: string]: any}) => {
+    const obj: Options = (Object.assign({}, _defaultOptions) as any)
+    for (let key of Object.keys(_options)) {
+      if ((key in _defaultOptions) == false) {
+        continue
+      }
+      let objValue: any = undefined
+      // 下一層的object
+      if (isObject(_options[key]) && isObject(_defaultOptions[key])) {
+        objValue = mergeObjColumns(_options[key], _defaultOptions[key])
+        obj[key as keyof Options] = objValue
+      }
+      // 不是object直接賦值
+      else {
+        obj[key as keyof Options] = _options[key]
+      }
+    }
+    return obj
+  }
+  
+  return mergeObjColumns(options, defaultOptions)
+}
+
+// 加上千分位 ,
+export function formatCommaNumber (num = 0): string {
+  try {
+    let parts = num.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  } catch (e: any) {
+    console.error(e)
+  }
+}

package/src/utils/d3Utils.ts

@@ -0,0 +1,87 @@
+import * as d3 from 'd3'
+import { DATA_FORMATTER_VALUE_AXIS } from '../defaults'
+
+// scaleLinear - 連續資料對應到比較尺座標上
+export const createAxisLinearScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DATA_FORMATTER_VALUE_AXIS.scaleDomain,
+  scaleRange = DATA_FORMATTER_VALUE_AXIS.scaleRange,
+}: {
+  maxValue: number
+  minValue: number
+  axisWidth: number
+  scaleDomain: [number | 'auto', number | 'auto']
+  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])
+
+  const domainMinValue = domainMin === 'auto' ? minValue : domainMin
+  const domainMaxValue = domainMax === 'auto' ? maxValue : domainMax
+  let rangeMinValue = axisWidth * rangeMin
+  let rangeMaxValue = axisWidth * rangeMax
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   rangeMinValue += paddingWidth
+  //   rangeMaxValue -= paddingWidth
+  // }
+  
+  return d3.scaleLinear()
+    .domain([domainMinValue, domainMaxValue])
+    .range([rangeMinValue, rangeMaxValue])
+}
+
+// scalePoint - 非連續資料對應到比例尺座標上
+export const createAxisPointScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
+  axisLabels: string[]
+  axisWidth: number
+  padding?: number
+  // reverse?: boolean  
+}) => {
+  let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
+
+  return d3.scalePoint()
+      .domain(axisLabels)
+      .range(range)
+      .padding(padding)
+}
+
+// scaleQuantize - 比例尺座標對應非連續資料索引
+export const createAxisQuantizeScale = ({ axisLabels, axisWidth, padding = 0.5, reverse = false }:{
+  axisLabels: string[] | Date[],
+  axisWidth: number
+  padding?: number
+  reverse?: boolean
+}) => {
+  const rangePadding = 0
+
+  let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
+  if (reverse) {
+    range.reverse()
+  }
+  // if (reverse) {
+  //   range = axisLabels.map((d: string | Date, i: number) => axisLabels.length - 1 - i)
+  // } else {
+  //   range = axisLabels.map((d: string | Date, i: number) => i)
+  // }
+
+  return d3.scaleQuantize<number>()
+    .domain([- rangePadding, axisWidth + rangePadding])
+    .range(range)
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './orbchartsUtils'
+export * from './observables'
+export * from './d3Utils'
+export * from './commonUtils'

package/src/utils/observables.ts

@@ -0,0 +1,198 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable } from 'rxjs'
+import type {
+  ChartType,
+  ChartParams,
+  ComputedDataTypeMap,
+  ComputedDatumTypeMap,
+  DataFormatterTypeMap,
+  HighlightTarget,
+  Layout,
+  TransformData } from '../types'
+
+// interface DatumUnknown {
+//   value: number | null
+//   id: string
+//   // label: string
+//   seriesLabel?: string // 要符合每一種computedData所以不一定會有seriesLabel
+//   groupLabel?: string // 要符合每一種computedData所以不一定會有groupLabel
+// }
+
+export const highlightObservable = ({ datumList$, fullChartParams$, event$ }: {
+  datumList$: Observable<ComputedDatumTypeMap<'series' | 'grid'>[]>
+  fullChartParams$: Observable<ChartParams>
+  event$: Subject<any>
+}): Observable<string[]> => {
+  const destroy$ = new Subject()
+
+  // 預設的highlight
+  const highlightDefault$ = fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      return {
+        id: null,
+        seriesLabel: null,
+        groupLabel: null,
+        highlightDefault: d.highlightDefault
+      }
+    }),
+    distinctUntilChanged()
+  )
+
+  // 事件觸發的highlight
+  const highlightMouseover$ = event$.pipe(
+    takeUntil(destroy$),
+    filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
+    // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+    map(d => {
+      return d.datum
+        ? {
+          id: (d.datum as any).id,
+          seriesLabel: (d.datum as any).seriesLabel,
+          groupLabel: (d.datum as any).groupLabel,
+          highlightDefault: null
+        }
+        : {
+          id: null,
+          seriesLabel: null,
+          groupLabel: null,
+          highlightDefault: null
+        }
+    })
+  )
+  const highlightMouseout$ = event$.pipe(
+    takeUntil(destroy$),
+    filter(d => d.eventName === 'mouseout'),
+    // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+    // map(d => {
+    //   return { id: '', label: '' }
+    // })
+    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)
+    }
+
+    return ids
+  }
+
+  return new Observable<string[]>(subscriber => {
+    combineLatest({
+      target: merge(highlightMouseover$, highlightMouseout$, highlightDefault$),
+      datumList: datumList$,
+      fullChartParams: fullChartParams$,
+    }).pipe(
+      takeUntil(destroy$)
+    ).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,
+      })
+      subscriber.next(ids)
+    })
+
+    return function unsubscribe () {
+      destroy$.next(undefined)
+    }
+  })
+}
+
+export const seriesDataMapObservable = <DatumType extends ComputedDatumTypeMap<ChartType>>({ 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) ?? []
+        seriesData.push(d)
+        SeriesDataMap.set((d as ComputedDatumTypeMap<'series' | 'grid'>).seriesLabel, seriesData)
+      })
+      return SeriesDataMap
+    })
+  )
+}
+
+export const groupDataMapObservable = <DatumType extends ComputedDatumTypeMap<ChartType>> ({ 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) ?? []
+        groupData.push(d)
+        GroupDataMap.set((d as ComputedDatumTypeMap<'grid'>).groupLabel, groupData)
+      })
+      return GroupDataMap
+    })
+  )
+}
+

package/src/utils/orbchartsUtils.ts

@@ -0,0 +1,150 @@
+import * as d3 from 'd3'
+import type { DatumBase, DatumValue } from '../types/Data'
+import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/DataSeries'
+import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
+import type { DataMultiGrid } from '../types/DataMultiGrid'
+import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
+import type { SeriesType, DataFormatterGrid } from '../types/DataFormatterGrid'
+import { isObject } from './commonUtils'
+
+export function formatValueToLabel (value: any, valueFormatter: string | ((text: d3.NumberValue) => string)) {
+  if (valueFormatter! instanceof Function == true) {
+    return (valueFormatter as ((text: d3.NumberValue) => string))(value)
+  }
+  return d3.format(valueFormatter as string)!(value)
+}
+
+export function createDefaultDatumId (type: string, levelOneIndex: number, levelTwoIndex: number) {
+  return `${type}_${levelOneIndex}_${levelTwoIndex}`
+}
+
+export function createDefaultSeriesLabel (type: string, seriesIndex: number) {
+  return `${type}_series${seriesIndex}`
+}
+
+export function createDefaultGroupLabel (type: string, groupIndex: number) {
+  return `${type}_group${groupIndex}`
+}
+
+export function createGridSeriesLabels (transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid) {
+  const labels = dataFormatter.grid.seriesType === 'row'
+    ? dataFormatter.grid.rowLabels
+    : dataFormatter.grid.columnLabels
+  return transposedDataGrid.map((_, rowIndex) => {
+    return labels[rowIndex] != null
+      ? labels[rowIndex]
+      : createDefaultSeriesLabel('grid', rowIndex)
+  })
+}
+
+export function createGridGroupLabels (transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid) {
+  if (transposedDataGrid[0] == null) {
+    return []
+  }
+  const labels = dataFormatter.grid.seriesType === 'row'
+    ? dataFormatter.grid.columnLabels
+    : dataFormatter.grid.rowLabels
+  return transposedDataGrid[0].map((_, columnLabels) => {
+    return labels[columnLabels] != null
+      ? labels[columnLabels]
+      : createDefaultGroupLabel('grid', columnLabels)
+  })
+}
+
+// 取得最小及最大值 - 數字陣列
+export function getMinAndMax (data: number[]): [number, number] {
+  const defaultMinAndMax: [number, number] = [0, 0] // default
+  if (!data.length) {
+    return defaultMinAndMax
+  }
+  const minAndMax: [number, number] = data.reduce((prev, current) => {
+    // [min, max]
+    return [
+      current < prev[0] ? current : prev[0],
+      current > prev[1] ? current : prev[1]
+    ]
+  }, [data[0], data[0]])
+  return minAndMax
+}
+
+// 取得最小及最大值 - datum格式陣列資料
+export function getMinAndMaxValue (data: DatumValue[]): [number, number] {
+  const arr = data
+    .filter(d => d != null && d.value != null)
+    .map(d => d.value )
+  return getMinAndMax(arr)
+}
+
+// 取得最小及最大值 - Series Data
+export function getMinAndMaxSeries (data: DataSeries): [number, number] {
+  const flatData: (DataSeriesValue | DataSeriesDatum)[] = data[0] && Array.isArray((data as (DataSeriesValue | DataSeriesDatum)[][])[0])
+    ? data.flat()
+    : data as (DataSeriesValue | DataSeriesDatum)[]
+  const arr = flatData
+    .filter(d => (d == null || (isObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
+    .map(d => typeof d === 'number' ? d : d.value )
+  return getMinAndMax(arr)
+}
+
+// 取得最小及最大值 - Grid Data
+export function getMinAndMaxGrid (data: DataGrid): [number, number] {
+  const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
+  const arr = flatData
+    .filter(d => (d == null || (isObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+    .map(d => typeof d === 'number' ? d : d.value )
+  return getMinAndMax(arr)
+}
+
+// 取得最小及最大值 - MultiGrid Data
+export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
+  const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
+  const arr = flatData
+    .filter(d => (d == null || (isObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
+    .map(d => typeof d === 'number' ? d : d.value )
+  return getMinAndMax(arr)
+}
+
+// 取得最小及最大值 - MultiValue Data
+export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
+  const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
+  const arr = flatData
+    .filter(d => (d == null || (isObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
+    .map(d => typeof d === 'number' ? d : d.value )
+  return getMinAndMax(arr)
+}
+
+// @Q@ 待處理
+// // 取得最小及最大值 - Relationship Data
+// export function getMinAndMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
+
+// }
+
+// @Q@ 待處理
+// // 取得最小及最大值 - Tree Data
+// export function getMinAndMaxTree (data: DataTree): [number, number] {
+
+// }
+
+// 轉置成seriesType為main的陣列格式
+export function transposeData<T> (seriesType: SeriesType, data: T[][]): T[][] {
+  if (seriesType === 'row') {
+    return Object.assign([], data)
+  }
+  // 取得原始陣列的維度
+  const rows = data.length;
+  const cols = data.reduce((prev, current) => {
+    return Math.max(prev, current.length)
+  }, 0)
+
+  // 初始化轉換後的陣列
+  const transposedArray = new Array(cols).fill(null).map(() => new Array(rows).fill(null))
+
+  // 遍歷原始陣列，進行轉換
+  for (let i = 0; i < rows; i++) {
+      for (let j = 0; j < cols; j++) {
+          transposedArray[j][i] = data[i][j]
+      }
+  }
+
+  return transposedArray
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true
+  }
+}

package/vite.config.js

@@ -0,0 +1,45 @@
+// import { fileURLToPath, URL } from 'node:url'
+
+// import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+const releaseConfig = {
+  plugins: [
+    dts({
+      insertTypesEntry: true
+    })
+  ],
+  compilerOptions: {
+    composite: true
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: 'orbcharts-core',
+      formats: ["es", "umd"],
+      fileName: format => `orbcharts-core.${format}.js`
+    },
+    // rollupOptions: {
+    //   input: {
+    //     main: resolve(__dirname, "src/index.ts")
+    //   },
+    //   external: ['vue'],
+    //   output: {
+    //     assetFileNames: 'my-library.css',
+    //     exports: "named",
+    //     globals: {
+    //       vue: 'Vue',
+    //     },
+    //   },
+    // },
+  }
+}
+
+export default defineConfig(({ command, mode }) => {
+  if (mode === 'release') {
+    return releaseConfig
+  } else {
+    return releaseConfig
+  }
+})