@orbcharts/core 3.0.0-alpha.55 → 3.0.0-alpha.57

package/src/types/Plugin.ts

@@ -1,60 +1,60 @@
-import * as d3 from 'd3'
-import { Subject } from 'rxjs'
-import type { ChartType } from './Chart'
-import type { ContextSubject } from './ContextSubject'
-import type { ContextObserverTypeMap } from './ContextObserver'
-
-// // 透過類型選擇Plugin
-// export type PluginParamsMap<T extends ChartType, PluginParams> = T extends 'series' ? Plugin<DataSeries, DataFormatterSeries, ComputedDataSeries, PluginParams>
-//   : T extends 'grid' ? Plugin<DataGrid, DataFormatterGrid, ComputedDataGrid, PluginParams>
-//   : T extends 'multiGrid' ? Plugin<DataMultiGrid, DataFormatterMultiGrid, ComputedDataMultiGrid, PluginParams>
-//   : T extends 'multiValue' ? Plugin<DataMultiValue, DataFormatterMultiValue, ComputedDataMultiValue, PluginParams>
-//   : T extends 'relationship' ? Plugin<DataRelationship, DataFormatterRelationship, ComputedDataRelationship, PluginParams>
-//   : T extends 'tree' ? Plugin<DataTree, DataFormatterTree, ComputedDataTree, PluginParams>
-//   : Plugin<unknown, unknown, unknown, unknown>
-
-export interface CreateBasePlugin {
-  <T extends ChartType>(): DefinePlugin<T>
-}
-
-export interface DefinePlugin<T extends ChartType> {
-  <PluginName, PluginParams>(name: PluginName , defaultParams: PluginParams): DefinePluginInitFn<T, PluginName, PluginParams>
-}
-
-export interface DefinePluginInitFn<T extends ChartType, PluginName, PluginParams> {
-  (initFn: PluginInitFn<T, PluginName, PluginParams>): PluginConstructor<T, PluginName, PluginParams>
-}
-
-// export interface CreatePlugin<T extends ChartType, PluginName, PluginParams> {
-//   (): PluginEntity<T, PluginName, PluginParams>
-// }
-
-export interface PluginConstructor<T extends ChartType, PluginName, PluginParams> {
-  new (): PluginEntity<T, PluginName, PluginParams>
-}
-
-export interface PluginEntity<T extends ChartType, PluginName, PluginParams> {
-  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
-}
-
-export interface PluginInitFn<T extends ChartType, PluginName, PluginParams> {
-  (pluginContext: PluginContext<T, PluginName, PluginParams>): () => void
-}
-
-export interface PluginContext<T extends ChartType, PluginName, PluginParams> {
-  selection: d3.Selection<any, unknown, any, unknown>
-  rootSelection: d3.Selection<any, unknown, any, unknown>
-  name: PluginName
-  chartType: ChartType, // 這邊的ChartType是由 createChart 時依 chart類別決定的，所以不能使用 pluginContext 本身的類別 T
-  // 原本的store
-  // selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
-  subject: ContextSubject<T>
-  observer: ContextObserverTypeMap<T, PluginParams>
-}
+import * as d3 from 'd3'
+import { Subject } from 'rxjs'
+import type { ChartType } from './Chart'
+import type { ContextSubject } from './ContextSubject'
+import type { ContextObserverTypeMap } from './ContextObserver'
+
+// // 透過類型選擇Plugin
+// export type PluginParamsMap<T extends ChartType, PluginParams> = T extends 'series' ? Plugin<DataSeries, DataFormatterSeries, ComputedDataSeries, PluginParams>
+//   : T extends 'grid' ? Plugin<DataGrid, DataFormatterGrid, ComputedDataGrid, PluginParams>
+//   : T extends 'multiGrid' ? Plugin<DataMultiGrid, DataFormatterMultiGrid, ComputedDataMultiGrid, PluginParams>
+//   : T extends 'multiValue' ? Plugin<DataMultiValue, DataFormatterMultiValue, ComputedDataMultiValue, PluginParams>
+//   : T extends 'relationship' ? Plugin<DataRelationship, DataFormatterRelationship, ComputedDataRelationship, PluginParams>
+//   : T extends 'tree' ? Plugin<DataTree, DataFormatterTree, ComputedDataTree, PluginParams>
+//   : Plugin<unknown, unknown, unknown, unknown>
+
+export interface CreateBasePlugin {
+  <T extends ChartType>(): DefinePlugin<T>
+}
+
+export interface DefinePlugin<T extends ChartType> {
+  <PluginName, PluginParams>(name: PluginName , defaultParams: PluginParams): DefinePluginInitFn<T, PluginName, PluginParams>
+}
+
+export interface DefinePluginInitFn<T extends ChartType, PluginName, PluginParams> {
+  (initFn: PluginInitFn<T, PluginName, PluginParams>): PluginConstructor<T, PluginName, PluginParams>
+}
+
+// export interface CreatePlugin<T extends ChartType, PluginName, PluginParams> {
+//   (): PluginEntity<T, PluginName, PluginParams>
+// }
+
+export interface PluginConstructor<T extends ChartType, PluginName, PluginParams> {
+  new (): PluginEntity<T, PluginName, PluginParams>
+}
+
+export interface PluginEntity<T extends ChartType, PluginName, PluginParams> {
+  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
+}
+
+export interface PluginInitFn<T extends ChartType, PluginName, PluginParams> {
+  (pluginContext: PluginContext<T, PluginName, PluginParams>): () => void
+}
+
+export interface PluginContext<T extends ChartType, PluginName, PluginParams> {
+  selection: d3.Selection<any, unknown, any, unknown>
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  name: PluginName
+  chartType: ChartType, // 這邊的ChartType是由 createChart 時依 chart類別決定的，所以不能使用 pluginContext 本身的類別 T
+  // 原本的store
+  // selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
+  subject: ContextSubject<T>
+  observer: ContextObserverTypeMap<T, PluginParams>
+}

package/src/types/TransformData.ts

@@ -1,8 +1,8 @@
-export interface TransformData {
-  translate: [number, number]
-  scale: [number, number]
-  rotate: number
-  rotateX: number
-  rotateY: number
-  value: string
+export interface TransformData {
+  translate: [number, number]
+  scale: [number, number]
+  rotate: number
+  rotateX: number
+  rotateY: number
+  value: string
 }

package/src/types/index.ts

@@ -1,37 +1,37 @@
-export * from './Axis'
-export * from './Chart'
-export * from './ChartParams'
-export * from './ComputedData'
-export * from './ComputedDataGrid'
-export * from './ComputedDataMultiGrid'
-export * from './ComputedDataMultiValue'
-export * from './ComputedDataRelationship'
-export * from './ComputedDataSeries'
-export * from './ComputedDataTree'
-export * from './ContextObserver'
-export * from './ContextObserverGrid'
-export * from './ContextObserverMultiGrid'
-export * from './ContextObserverMultiValue'
-export * from './ContextObserverRelationship'
-export * from './ContextObserverSeries'
-export * from './ContextObserverTree'
-export * from './ContextSubject'
-export * from './Data'
-export * from './DataFormatter'
-export * from './DataFormatterGrid'
-export * from './DataFormatterMultiGrid'
-export * from './DataFormatterMultiValue'
-export * from './DataFormatterRelationship'
-export * from './DataFormatterSeries'
-export * from './DataFormatterTree'
-export * from './DataGrid'
-export * from './DataMultiGrid'
-export * from './DataMultiValue'
-export * from './DataRelationship'
-export * from './DataSeries'
-export * from './DataTree'
-export * from './Event'
-export * from './Layout'
-export * from './Padding'
-export * from './Plugin'
-export * from './TransformData'
+export * from './Axis'
+export * from './Chart'
+export * from './ChartParams'
+export * from './ComputedData'
+export * from './ComputedDataGrid'
+export * from './ComputedDataMultiGrid'
+export * from './ComputedDataMultiValue'
+export * from './ComputedDataRelationship'
+export * from './ComputedDataSeries'
+export * from './ComputedDataTree'
+export * from './ContextObserver'
+export * from './ContextObserverGrid'
+export * from './ContextObserverMultiGrid'
+export * from './ContextObserverMultiValue'
+export * from './ContextObserverRelationship'
+export * from './ContextObserverSeries'
+export * from './ContextObserverTree'
+export * from './ContextSubject'
+export * from './Data'
+export * from './DataFormatter'
+export * from './DataFormatterGrid'
+export * from './DataFormatterMultiGrid'
+export * from './DataFormatterMultiValue'
+export * from './DataFormatterRelationship'
+export * from './DataFormatterSeries'
+export * from './DataFormatterTree'
+export * from './DataGrid'
+export * from './DataMultiGrid'
+export * from './DataMultiValue'
+export * from './DataRelationship'
+export * from './DataSeries'
+export * from './DataTree'
+export * from './Event'
+export * from './Layout'
+export * from './Padding'
+export * from './Plugin'
+export * from './TransformData'

package/src/utils/commonUtils.ts

@@ -1,50 +1,50 @@
-// import * as d3 from 'd3'
-
-// 是否為原始物件
-export function isPlainObject(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 (isPlainObject(options) === false || isPlainObject(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
-      // 下一層的plain object
-      if (isPlainObject(_options[key]) && isPlainObject(_defaultOptions[key])) {
-        objValue = mergeObjColumns(_options[key], _defaultOptions[key])
-        obj[key as keyof Options] = objValue
-      }
-      // 不是plain 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)
-  }
-}
+// import * as d3 from 'd3'
+
+// 是否為原始物件
+export function isPlainObject(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 (isPlainObject(options) === false || isPlainObject(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
+      // 下一層的plain object
+      if (isPlainObject(_options[key]) && isPlainObject(_defaultOptions[key])) {
+        objValue = mergeObjColumns(_options[key], _defaultOptions[key])
+        obj[key as keyof Options] = objValue
+      }
+      // 不是plain 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

@@ -1,92 +1,92 @@
-import * as d3 from 'd3'
-import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
-
-// scaleLinear - 連續資料對應到比例尺座標上
-export const createAxisLinearScale = ({
-  maxValue = 1,
-  minValue = 0,
-  axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.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_DEFAULT.scaleDomain[0]
-  const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
-  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
-  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
-
-  // -- 'auto'提換成實際值 --
-  const domainMinValue = domainMin === 'auto' ? minValue : domainMin
-  const domainMaxValue = domainMax === 'auto' ? maxValue : domainMax
-  
-  // let rangeMinValue = axisWidth * rangeMin
-  // let rangeMaxValue = axisWidth * rangeMax
-
-  // -- 計算padding --
-  // if (padding > 0) {
-  //   const stepAmount = maxValue - minValue + (padding * 2)
-  //   const eachStepWidth = axisWidth / stepAmount
-  //   const paddingWidth = eachStepWidth * padding
-  //   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([axisDomainMinValue, axisDomainMaxValue])
-    .range([0, axisWidth])
-}
-
-// 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, reverse = false }:{
-  axisLabels: string[] | Date[],
-  axisWidth: number
-  padding?: number
-  reverse?: boolean
-}) => {
-
-  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)
-  // }
-  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
-  const stepWidth = axisWidth / step
-  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
-
-  // console.log('rangePadding', rangePadding)
-  return d3.scaleQuantize<number>()
-    .domain([rangePadding, axisWidth - rangePadding])
-    .range(range)
-}
+import * as d3 from 'd3'
+import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
+
+// scaleLinear - 連續資料對應到比例尺座標上
+export const createAxisLinearScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
+  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.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_DEFAULT.scaleDomain[0]
+  const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
+
+  // -- 'auto'提換成實際值 --
+  const domainMinValue = domainMin === 'auto' ? minValue : domainMin
+  const domainMaxValue = domainMax === 'auto' ? maxValue : domainMax
+  
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   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([axisDomainMinValue, axisDomainMaxValue])
+    .range([0, axisWidth])
+}
+
+// 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, reverse = false }:{
+  axisLabels: string[] | Date[],
+  axisWidth: number
+  padding?: number
+  reverse?: boolean
+}) => {
+
+  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)
+  // }
+  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
+  const stepWidth = axisWidth / step
+  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
+
+  // console.log('rangePadding', rangePadding)
+  return d3.scaleQuantize<number>()
+    .domain([rangePadding, axisWidth - rangePadding])
+    .range(range)
+}

package/src/utils/index.ts

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