@orbcharts/core 3.0.0-alpha.28 → 3.0.0-alpha.30

package/src/tree/computeTreeData.ts

@@ -10,8 +10,9 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
     id: '',
     index: 0,
     label: '',
+    description: '',
     visible: true,
-    tooltipContent: '',
+    // tooltipContent: '',
     data: {},
     value: 0,
     level: 0,
@@ -53,7 +54,7 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
           id: root.id,
           label: root.label,
           data: root.data,
-          tooltipContent: root.tooltipContent,
+          // tooltipContent: root.tooltipContent,
           value: root.value,
           children: (ChildrenMap.get(root.id) ?? []).map(d => {
             // 遞迴
@@ -83,8 +84,9 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
         level,
         seq,
         label: branchRoot.label ?? '',
+        description: branchRoot.description ?? '',
         data: branchRoot.data ?? {},
-        tooltipContent: branchRoot.tooltipContent ? branchRoot.tooltipContent : dataFormatter.tooltipContentFormat(branchRoot, level, seq, context),
+        // tooltipContent: branchRoot.tooltipContent ? branchRoot.tooltipContent : dataFormatter.tooltipContentFormat(branchRoot, level, seq, context),
         value: branchRoot.value,
         visible,
         children: (branchRoot.children ?? []).map((d, i) => {

package/src/types/ComputedData.ts

@@ -18,7 +18,7 @@ export interface ComputedDatumBase {
   label: string
   value: number | null
   visible: boolean
-  tooltipContent: string
+  description: string
   data: any // 使用者注入的資料
 }
 

package/src/types/ComputedDataGrid.ts

@@ -2,6 +2,8 @@ import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData'
 
 export interface ComputedDatumGrid
   extends ComputedDatumBase, ComputedDatumSeriesValue {
+  accSeriesIndex: number // 每一個grid累加的seriesIndex
+  gridIndex: number
   groupIndex: number
   groupLabel: string
   axisX: number

package/src/types/Data.ts

@@ -10,7 +10,7 @@ import { DataRelationship, Node, Edge } from './DataRelationship'
 export interface DatumBase {
   id?: string
   label?: string
-  tooltipContent?: string
+  description?: string
   data?: any // 使用者注入的資料
 }
 

package/src/types/DataFormatter.ts

@@ -53,11 +53,7 @@ export type DataFormatterPartialTypeMap<T extends ChartType> = T extends 'series
 
 // 基本介面
 export interface DataFormatterBase<T extends ChartType> {
-  // colors: Colors
-  // padding: Padding
   type: T
-  visibleFilter: VisibleFilter<T>
-  tooltipContentFormat: TooltipContentFormat<T>
 }
 
 export type DataFormatterBasePartial<T extends ChartType> = Partial<DataFormatterBase<T>>

package/src/types/DataFormatterGrid.ts

@@ -1,22 +1,23 @@
 import type { DataGridDatum, DataGridValue } from './DataGrid'
-import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter'
+import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, VisibleFilter } from './DataFormatter'
 // import type { AxisPosition } from './Axis'
 
 export type SeriesType = 'row' | 'column' // default: 'row'
 
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
+  visibleFilter: VisibleFilter<'grid'>
   grid: DataFormatterGridGrid
   valueAxis: DataFormatterValueAxis
   groupAxis: DataFormatterGroupAxis
   // visibleGroupRange: [number, number] | null
-  colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+  // colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
 }
 
 export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
   grid?: Partial<DataFormatterGridGrid>
   valueAxis?: Partial<DataFormatterValueAxis>
   groupAxis?: Partial<DataFormatterGroupAxis>
-  colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+  // colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
 }
 
 // grid欄位

package/src/types/DataFormatterMultiGrid.ts

@@ -1,14 +1,15 @@
-import { DataGridDatum, DataGridValue } from './DataGrid'
-import { DataFormatterGrid, DataFormatterGridGrid } from './DataFormatterGrid'
-import {
+import type { VisibleFilter } from './DataFormatter'
+import type { DataFormatterGrid } from './DataFormatterGrid'
+import type {
   DataFormatterBase,
   DataFormatterBasePartial,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
   DataFormatterContext } from './DataFormatter'
-import { AxisPosition } from './Axis'
+import type { AxisPosition } from './Axis'
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
+  visibleFilter: VisibleFilter<'multiGrid'>
   multiGrid: Array<DataFormatterGrid>
   // visibleGroupRange: [number, number] | null
 }
@@ -17,7 +18,7 @@ export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<
   multiGrid?: Array<Partial<DataFormatterGrid>>
 }
 
-// // multiGrid欄位
+// multiGrid欄位
 // export interface DataFormatterMultiGridMultiGrid {
 //   grid: DataFormatterGridGrid
 //   valueAxis: DataFormatterValueAxis // default: 'left'

package/src/types/DataFormatterMultiValue.ts

@@ -1,7 +1,8 @@
 import { DataMultiValueDatum, DataMultiValue } from './DataMultiValue'
-import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, VisibleFilter } from './DataFormatter'
 
 export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> {
+  visibleFilter: VisibleFilter<'multiValue'>
   // labelFormat: (datum: unknown) => string
   multiValue: Array<DataFormatterMultiValueMultiValue>
   xAxis: DataFormatterValueAxis

package/src/types/DataFormatterRelationship.ts

@@ -1,7 +1,8 @@
 import { Node, Edge, DataRelationship } from './DataRelationship'
-import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter'
 
 export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> {
+  visibleFilter: VisibleFilter<'relationship'>
   // node: DataFormatterRelationshipNode
   // edge: DataFormatterRelationshipEdge
 }

package/src/types/DataFormatterSeries.ts

@@ -1,14 +1,15 @@
 import { DataSeriesDatum, DataSeriesValue, DataSeries } from './DataSeries'
-import { DataFormatterBase, DataFormatterBasePartial, DataFormatterContext } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial, VisibleFilter } from './DataFormatter'
 // import { ComputedDatumSeries } from './ComputedDataSeries'
 
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
+  visibleFilter: VisibleFilter<'series'>
   // series: DataFormatterSeriesSeries
   unitLabel: string
   seriesLabels: string[]
   // labelFormat: (datum: DataSeriesDatum) => string
   // mapSeries: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
-  colorsPredicate: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
+  // colorsPredicate: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
   sort: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null
   // colors: Colors
 }
@@ -17,7 +18,7 @@ export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'se
   // series: Partial<DataFormatterSeriesSeries>
   unitLabel?: string
   seriesLabels?: string[]
-  colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
+  // colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
   sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null
 }
 

package/src/types/DataFormatterTree.ts

@@ -1,8 +1,9 @@
 import { DataTreeDatum, DataTree } from './DataTree'
-import { DataFormatterBase } from './DataFormatter'
+import { DataFormatterBase, VisibleFilter } from './DataFormatter'
 
 export interface DataFormatterTree
   extends DataFormatterBase<'tree'> {
+    visibleFilter: VisibleFilter<'tree'>
   // labelFormat: (datum: unknown) => string
   // descriptionFormat: (datum: unknown) => string
 }

package/src/utils/orbchartsUtils.ts

@@ -1,10 +1,17 @@
 import * as d3 from 'd3'
+import type { ChartType } from '../types/Chart'
+import type { ChartParams } from '../types/ChartParams'
 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 type { ComputedDatumSeriesValue } from '../types/ComputedData'
+import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
+import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
+import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
+// import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
 import { isObject } from './commonUtils'
 
 export function formatValueToLabel (value: any, valueFormatter: string | ((text: d3.NumberValue) => string)) {
@@ -14,30 +21,44 @@ export function formatValueToLabel (value: any, valueFormatter: string | ((text:
   return d3.format(valueFormatter as string)!(value)
 }
 
-export function createDefaultDatumId (type: string, levelOneIndex: number, levelTwoIndex: number) {
-  return `${type}_${levelOneIndex}_${levelTwoIndex}`
+export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number) {
+  let text = `${chartTypeOrPrefix}_${levelOneIndex}_${levelTwoIndex}`
+  if (levelThreeIndex != null) {
+    text += `_${levelThreeIndex}`
+  }
+  return text
 }
 
-export function createDefaultSeriesLabel (type: string, seriesIndex: number) {
-  return `${type}_series${seriesIndex}`
+export function createDefaultSeriesLabel (chartTypeOrPrefix: string, seriesIndex: number) {
+  return `${chartTypeOrPrefix}_series${seriesIndex}`
 }
 
-export function createDefaultGroupLabel (type: string, groupIndex: number) {
-  return `${type}_group${groupIndex}`
+export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex: number) {
+  return `${chartTypeOrPrefix}_group${groupIndex}`
 }
 
-export function createGridSeriesLabels (transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid) {
+export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid', gridIndex = 0 }: {
+  transposedDataGrid: DataGridDatum[][],
+  dataFormatter: DataFormatterGrid
+  chartType?: ChartType
+  gridIndex?: number
+}) {
   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)
+      : createDefaultSeriesLabel(`${chartType}_grid${gridIndex}`, rowIndex)
   })
 }
 
-export function createGridGroupLabels (transposedDataGrid: DataGridDatum[][], dataFormatter: DataFormatterGrid) {
+export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid', gridIndex = 0 }: {
+  transposedDataGrid: DataGridDatum[][],
+  dataFormatter: DataFormatterGrid
+  chartType?: ChartType
+  gridIndex?: number
+}) {
   if (transposedDataGrid[0] == null) {
     return []
   }
@@ -47,7 +68,7 @@ export function createGridGroupLabels (transposedDataGrid: DataGridDatum[][], da
   return transposedDataGrid[0].map((_, columnLabels) => {
     return labels[columnLabels] != null
       ? labels[columnLabels]
-      : createDefaultGroupLabel('grid', columnLabels)
+      : createDefaultGroupLabel(`${chartType}_grid${gridIndex}`, columnLabels)
   })
 }
 
@@ -147,4 +168,36 @@ export function transposeData<T> (seriesType: SeriesType, data: T[][]): T[][] {
   }
 
   return transposedArray
-}
+}
+
+
+export function seriesColorPredicate (seriesIndex: number, chartParams: ChartParams) {
+  return seriesIndex < chartParams.colors[chartParams.colorScheme].series.length
+    ? chartParams.colors[chartParams.colorScheme].series[seriesIndex]
+    : chartParams.colors[chartParams.colorScheme].series[
+      seriesIndex % chartParams.colors[chartParams.colorScheme].series.length
+    ]
+}
+
+// // multiGrid datum color
+// export function multiGridColorPredicate ({ seriesIndex, groupIndex, data, chartParams }: {
+//   seriesIndex: number
+//   groupIndex: number
+//   data: ComputedDataMultiGrid
+//   chartParams: ChartParams
+// }) {
+//   // 累加前面的grid的seriesIndex
+//   const accSeriesIndex = data.reduce((prev, current) => {
+//     if (current[0] && current[0][0] && groupIndex > current[0][0].gridIndex) {
+//       return prev + current[0].length
+//     } else if (current[0] && current[0][0] && groupIndex == current[0][0].gridIndex) {
+//       return prev + seriesIndex
+//     } else {
+//       return prev
+//     }
+//   }, 0)
+
+//   return seriesColorPredicate(accSeriesIndex, chartParams)
+// }
+
+