@orbcharts/core 3.0.0-alpha.21

package/src/defaults.ts

@@ -0,0 +1,229 @@
+// import type { ChartGlobalDefault } from './types/Chart'
+// import { ChartRenderOptions } from './types/Chart'
+import type { ChartType, ChartOptionsPartial } from './types/Chart'
+import type { DataSeries } from './types/DataSeries'
+import type { DataGrid } from './types/DataGrid'
+import type { DataMultiGrid } from './types/DataMultiGrid'
+import type { DataMultiValue } from './types/DataMultiValue'
+import type { DataTree } from './types/DataTree'
+import type { DataRelationship } from './types/DataRelationship'
+import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis } from './types/DataFormatter'
+import type { DataFormatterSeries } from './types/DataFormatterSeries'
+import type { DataFormatterGrid } from './types/DataFormatterGrid'
+import type { DataFormatterMultiGrid } from './types/DataFormatterMultiGrid'
+import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
+import type { DataFormatterTree } from './types/DataFormatterTree'
+import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
+import type { ChartParams } from './types/ChartParams'
+import type { Padding } from './types/Padding'
+
+export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
+  preset: {} // 預設為空
+}
+
+// export const GLOBAL_DEFAULT: ChartGlobalDefault = {
+//   colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+//   padding: {
+//     top: 50,
+//     right: 70,
+//     bottom: 50,
+//     left: 70
+//   },
+//   // chartWidth: '100%',
+//   // chartHeight: 500
+// }
+
+// export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
+// @Q@ 桃園儀表板
+// ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
+
+export const PADDING_DEFAULT: Padding = {
+  top: 60,
+  right: 60,
+  bottom: 60,
+  left: 60
+}
+
+// export const HIGHLIGHT_DEFAULT: HighlightDefault = {
+//   // trigger: 'datum',
+//   id: null,
+//   label: null
+// }
+
+export const CHART_PARAMS_DEFAULT: ChartParams = {
+  padding: PADDING_DEFAULT,
+  highlightTarget: 'datum',
+  // highlightDefault: HIGHLIGHT_DEFAULT,
+  highlightDefault: null,
+  colorScheme: 'light',
+  colors: {
+    light: {
+      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      primary: '#454545',
+      secondary: '#e1e1e1',
+      white: '#f0f0f0',
+      background: '#ffffff'
+    },
+    dark: {
+      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      primary: '#f0f0f0',
+      secondary: '#e1e1e1',
+      white: '#f0f0f0',
+      background: '#000000'
+    }
+  },
+  styles: {
+    textSize: 14,
+    unhighlightedOpacity: 0.3
+  },
+  transitionDuration: 800,
+  transitionEase: 'easeCubic'
+}
+
+export const CHART_WIDTH_DEFAULT = 800
+
+export const CHART_HEIGHT_DEFAULT = 500
+
+// -- Data --
+
+export const DATA_SERIES_DEFAULT: DataSeries = []
+
+export const DATA_GRID_DEFAULT: DataGrid = []
+
+export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
+
+export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
+
+export const DATA_TREE_DEFAULT: DataTree = []
+
+export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
+  nodes: [],
+  edges: []
+}
+
+// -- Data Formatter --
+
+// 基本欄位
+export const DATA_FORMATTER: DataFormatterBase<ChartType> = {
+  // ...GLOBAL_DEFAULT,
+  type: ('' as any), // 後面需複蓋掉否則會有問題
+  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
+  tooltipContentFormat: (datum, rowIndex, columnIndex, context) => {
+    if (typeof datum === 'object') {
+      if (datum.tooltipContent) {
+        return datum.tooltipContent
+      } else if (datum.value) {
+        return String(datum.value)
+      }
+    } else if (typeof datum === 'number') {
+      return String(datum)
+    } else {
+      return ''
+    }
+  }
+}
+// 有value
+// export const DATA_FORMATTER_WITH_VALUE: DataFormatterValue = {
+//   valueFormat: ',.0f'
+// }
+// 有axis
+// export const DATA_FORMATTER_WITH_AXIS: DataFormatterAxis = {
+//   // domainMinValue: 0,
+//   // domainMaxValue: undefined,
+//   // domainMinRange: undefined,
+//   // domainMaxRange: 0.9
+//   valueDomain: [0, 'auto'],
+//   valueRange: [0, 0.9]
+// }
+
+export const DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
+  position: 'left',
+  scaleDomain: [0, 'auto'],
+  scaleRange: [0, 0.9],
+  label: '',
+}
+
+export const DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
+  position: 'bottom',
+  scaleDomain: [0, 'auto'],
+  scalePadding: 0.5,
+  label: ''
+}
+
+export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
+  ...DATA_FORMATTER,
+  // ...DATA_FORMATTER_WITH_VALUE,
+  type: 'series',
+  unitLabel: '',
+  seriesLabels: [],
+  // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
+  //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
+  //     ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
+  //     : rowIndex
+  //   return dataFormatter.seriesLabels[seriesIndex]
+  // },
+  colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
+    return chartParams.colors[chartParams.colorScheme].series[rowIndex]
+  },
+  sort: null,
+}
+
+export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
+  ...DATA_FORMATTER,
+  // ...DATA_FORMATTER_WITH_VALUE,
+  type: 'grid',
+  grid: {
+    // rowUnitLabel: '',
+    rowLabels: [],
+    // rowLabelFormat: label => label,
+    // columnUnitLabel: '',
+    columnLabels: [],
+    // columnLabelFormat: label => label,
+    seriesType: 'row'
+  },
+  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS },
+  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS, },
+  // visibleGroupRange: null,
+  colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
+    const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+    return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
+  },
+}
+
+export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
+  ...DATA_FORMATTER,
+  type: 'multiGrid',
+  multiGrid: [], // 預設無資料，由各plugin定義預設值
+  // visibleGroupRange: null,
+}
+
+export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
+  ...DATA_FORMATTER,
+  type: 'multiValue',
+  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
+  multiValue: [], // 預設無資料，由各plugin定義預設值
+  xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
+  yAxis: { ...DATA_FORMATTER_VALUE_AXIS },
+}
+
+export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
+  ...DATA_FORMATTER,
+  type: 'tree',
+  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
+}
+
+export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
+  ...DATA_FORMATTER,
+  type: 'relationship',
+  // node: {
+  //   // labelFormat: (node: any) => (node && node.label) ?? '',
+  //   descriptionFormat: (node: any) => (node && node.label) ?? ''
+  // },
+  // edge: {
+  //   // labelFormat: (edge: any) => (edge && edge.label) ?? '',
+  //   descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
+  // },
+}
+
+// -- Render Data --
+

package/src/defineGridPlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineGridPlugin = createBasePlugin<'grid'>()

package/src/defineMultiGridPlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineMultiGridPlugin = createBasePlugin<'multiGrid'>()

package/src/defineMultiValuePlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineMultiValuePlugin = createBasePlugin<'multiValue'>()

package/src/defineNoneDataPlugin.ts

@@ -0,0 +1,4 @@
+import { createBasePlugin } from './base/createBasePlugin'
+import { ChartType } from './types/Chart'
+
+export const defineNoneDataPlugin = createBasePlugin<any>() // noneDataPlugin 可以使用在任何的 chartType

package/src/defineRelationshipPlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineRelationshipPlugin = createBasePlugin<'relationship'>()

package/src/defineSeriesPlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineSeriesPlugin = createBasePlugin<'series'>()

package/src/defineTreePlugin.ts

@@ -0,0 +1,3 @@
+import { createBasePlugin } from './base/createBasePlugin'
+
+export const defineTreePlugin = createBasePlugin<'tree'>()

package/src/grid/computeGridData.ts

@@ -0,0 +1,192 @@
+import * as d3 from 'd3'
+import type { ComputedDataFn } from '../types/ComputedData'
+import type { DataGrid, DataGridDatum } from '../types/DataGrid'
+import type { DataFormatterContext } from '../types/DataFormatter'
+import type { DataFormatterGrid } from '../types/DataFormatterGrid'
+import type { ComputedDataGrid, ComputedDatumGrid } from '../types/ComputedDataGrid'
+import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
+import { createAxisLinearScale, createAxisPointScale } from '../utils/d3Utils'
+import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels } from '../utils/orbchartsUtils'
+
+interface DataGridDatumTemp extends DataGridDatum {
+  _color: string // 暫放的顏色資料
+  _visible: boolean // 暫放的visible
+}
+
+export const computeGridData: ComputedDataFn<'grid'> = (context) => {
+  const { data = [], dataFormatter, chartParams, layout } = context
+  if (!data.length) {
+    return []
+  }
+
+  let computedDataGrid: ComputedDatumGrid[][]
+
+  try {
+    // 最多的array length
+    const maxArrayLength = data.reduce((prev, current) => {
+      return current.length > prev ? current.length : prev
+    }, 0)
+
+    // 補齊短少資料
+    const fullData = data.map((d, i) => {
+      if (d.length === maxArrayLength) {
+        return d
+      }
+      const newD = Object.assign([], d)
+      for (let _i = newD.length; _i < maxArrayLength; _i++) {
+        newD[_i] = null
+      }
+      return newD
+    })
+
+    // 完整的資料格式
+    const dataGrid: DataGridDatumTemp[][] = fullData.map((d, i) => {
+      return d.map((_d, _i) => {
+
+        const _color = dataFormatter.colorsPredicate(_d, i, _i, context)
+        const _visible = dataFormatter.visibleFilter(_d, i, _i, context)
+
+        const datum: DataGridDatumTemp = _d == null
+          ? {
+            id: '',
+            label: '',
+            tooltipContent: '',
+            data: {},
+            value: null,
+            _color,
+            _visible
+          }
+          : typeof _d === 'number'
+            ? {
+              id: '',
+              label: '',
+              tooltipContent: '',
+              data: {},
+              value: _d,
+              _color,
+              _visible
+            }
+            : {
+              id: _d.id ?? '',
+              label: _d.label ?? '',
+              tooltipContent: _d.tooltipContent ?? '',
+              data: _d.data ?? {},
+              value: _d.value,
+              _color,
+              _visible
+            }
+        
+        return datum
+      })
+    })
+
+    // 依seriesType轉置資料矩陣
+    const transposedDataGrid = transposeData(dataFormatter.grid.seriesType, dataGrid)
+
+    // -- groupScale --
+    const groupAxisWidth = (dataFormatter.groupAxis.position === 'top' || dataFormatter.groupAxis.position === 'bottom')
+      ? layout.width
+      : layout.height
+    const groupEndIndex = transposedDataGrid[0] ? transposedDataGrid[0].length - 1 : 0
+    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue: groupEndIndex,
+      minValue: 0,
+      axisWidth: groupAxisWidth,
+      scaleDomain: [0, groupEndIndex], // 不使用dataFormatter設定
+      scaleRange: [0, 1] // 不使用dataFormatter設定
+    })
+
+    // const seriesColors = chartParams.colors[chartParams.colorScheme].series
+
+    const groupScaleDomain = [
+      dataFormatter.groupAxis.scaleDomain[0] === 'auto'
+        ? 0
+        : dataFormatter.groupAxis.scaleDomain[0],
+      dataFormatter.groupAxis.scaleDomain[1] === 'auto'
+        ? groupEndIndex
+        : dataFormatter.groupAxis.scaleDomain[1]
+    ]
+    
+
+    // -- 依groupScale算visible --
+    // 篩選顯示狀態
+    // const scaleDomainFilter = (columnIndex: number) => {
+    //   // 如果groupIndex不在scale的範圍內則為false，不再做visibleFilter的判斷
+    //   if (columnIndex < groupScaleDomain[0] || columnIndex > groupScaleDomain[1]) {
+    //     return false
+    //   }
+    //   return true
+    // }
+    // transposedDataGrid.forEach((seriesData, seriesIndex) => {
+    //   seriesData.forEach((groupDatum, groupIndex) => {
+    //     // in-place修改visible
+    //     groupDatum._visible = groupDatum._visible == true && scaleDomainFilter(groupIndex) == true
+    //       ? true
+    //       : false // 兩者有一個false即為false
+    //   })
+    // })
+
+    // -- valueScale --
+    const visibleData = transposedDataGrid.flat().filter(d => d._visible != false)
+    const [minValue, maxValue] = getMinAndMaxValue(visibleData)
+
+    const valueAxisWidth = (dataFormatter.valueAxis.position === 'left' || dataFormatter.valueAxis.position === 'right')
+      ? layout.height
+      : layout.width
+
+    const seriesLabels = createGridSeriesLabels(transposedDataGrid, dataFormatter)
+    const groupLabels = createGridGroupLabels(transposedDataGrid, dataFormatter)
+
+    const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+      maxValue,
+      minValue,
+      axisWidth: valueAxisWidth,
+      scaleDomain: [minValue, maxValue], // 不使用dataFormatter設定
+      scaleRange: [0, 1] // 不使用dataFormatter設定
+    })
+
+    const zeroY = valueScale(0)
+
+    let _index = 0
+    computedDataGrid = transposedDataGrid.map((seriesData, seriesIndex) => {
+      return seriesData.map((groupDatum, groupIndex) => {
+        
+        const defaultId = createDefaultDatumId(dataFormatter.type, seriesIndex, groupIndex)
+        // const visible = visibleFilter(groupDatum, seriesIndex, groupIndex, context)
+        const groupLabel = groupLabels[groupIndex]
+        const axisY = valueScale(groupDatum.value ?? 0)
+
+        const computedDatum: ComputedDatumGrid = {
+          id: groupDatum.id ? groupDatum.id : defaultId,
+          index: _index,
+          label: groupDatum.label ? groupDatum.label : defaultId,
+          tooltipContent: groupDatum.tooltipContent ? groupDatum.tooltipContent : dataFormatter.tooltipContentFormat(groupDatum, seriesIndex, groupIndex, context),
+          data: groupDatum.data,
+          value: groupDatum.value,
+          // valueLabel: formatValueToLabel(groupDatum.value, dataFormatter.valueFormat),
+          seriesIndex,
+          seriesLabel: seriesLabels[seriesIndex],
+          groupIndex,
+          groupLabel,
+          // color: seriesColors[seriesIndex],
+          color: groupDatum._color,
+          axisX: groupScale(groupIndex),
+          axisY,
+          axisYFromZero: axisY - zeroY,
+          // visible: groupDatum._visible == true && scaleDomainFilter(groupIndex) == true ? true : false // 兩者有一個false即為false
+          visible: groupDatum._visible
+        }
+
+        _index ++
+
+        return computedDatum
+      })
+    })
+
+  } catch (e) {
+    // console.error(e)
+    throw Error(e)
+  }
+
+  return computedDataGrid
+}

package/src/grid/createGridContextObserver.ts

@@ -0,0 +1,91 @@
+import { map, shareReplay } from 'rxjs'
+import type { ContextObserverFn } from '../types'
+import {
+  highlightObservable,
+  seriesDataMapObservable,
+  groupDataMapObservable } from '../utils/observables'
+import {
+  gridAxesTransformObservable,
+  gridGraphicTransformObservable,
+  gridAxesOppositeTransformObservable,
+  gridAxesSizeObservable,
+  gridVisibleComputedDataObservable } from './gridObservables'
+
+export const createGridContextObserver: ContextObserverFn<'grid'> = ({ subject, observer }) => {
+  
+  const gridAxesTransform$ = gridAxesTransformObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridGraphicTransform$ = gridGraphicTransformObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesOppositeTransform$ = gridAxesOppositeTransformObservable({
+    gridAxesTransform$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesSize$ = gridAxesSizeObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const datumList$ = observer.computedData$.pipe(
+    map(d => d.flat())
+  ).pipe(
+    shareReplay(1)
+  )
+
+  const gridHighlight$ = highlightObservable({
+    datumList$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const SeriesDataMap$ = seriesDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const GroupDataMap$ = groupDataMapObservable({
+    datumList$: datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedData$ = gridVisibleComputedDataObservable({
+    computedData$: observer.computedData$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  return {
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    gridAxesTransform$,
+    gridGraphicTransform$,
+    gridAxesOppositeTransform$,
+    gridAxesSize$,
+    gridHighlight$,
+    SeriesDataMap$,
+    GroupDataMap$,
+    visibleComputedData$
+  }
+}