@orbcharts/core 3.0.0-alpha.68 → 3.0.0-beta.10

package/src/defaults.ts

@@ -8,6 +8,7 @@ import type {
   DataRelationship,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
+  DataFormatterAxis,
   DataFormatterContainer,
   DataFormatterSeries,
   DataFormatterGrid,
@@ -21,7 +22,7 @@ import type {
   Padding
 } from '../lib/core-types'
 
-export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
+export const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any> = {
   // preset: {} // 預設為空
   width: 'auto',
   height: 'auto'
@@ -42,32 +43,38 @@ export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
 // export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
 // ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
 
-export const PADDING_DEFAULT: Padding = {
+export const DEFAULT_PADDING: Padding = {
   top: 60,
   right: 60,
   bottom: 60,
   left: 60
 }
 
-export const CHART_PARAMS_DEFAULT: ChartParams = {
-  padding: PADDING_DEFAULT,
+export const DEFAULT_CHART_PARAMS: ChartParams = {
+  padding: DEFAULT_PADDING,
   highlightTarget: 'datum',
   highlightDefault: null,
   colorScheme: 'light',
   colors: {
     light: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      // label: ['#F3A356', '#7A60F0', '#38B1AF', '#60A2F0', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
+      // label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
       // primary: '#454545',
       primary: '#1b1e23',
       secondary: '#e1e1e1',
-      white: '#ffffff',
+      // white: '#ffffff',
+      labelContrast: ['#ffffff', '#1b1e23'],
       background: '#ffffff'
     },
     dark: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      // label: ['#67B7DC', '#6794DC', '#38B1AF', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      // label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
       primary: '#f0f0f0',
       secondary: '#e1e1e1',
-      white: '#ffffff',
+      // white: '#ffffff',
+      labelContrast: ['#ffffff', '#1b1e23'],
       background: '#000000'
     }
   },
@@ -80,56 +87,62 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
   transitionEase: 'easeCubic'
 }
 
-export const CHART_WIDTH_DEFAULT = 800
+export const DEFAULT_CHART_WIDTH = 800
 
-export const CHART_HEIGHT_DEFAULT = 500
+export const DEFAULT_CHART_HEIGHT = 500
 
 // -- Data --
 
-export const DATA_SERIES_DEFAULT: DataSeries = []
+export const DEFAULT_DATA_SERIES: DataSeries = []
 
-export const DATA_GRID_DEFAULT: DataGrid = []
+export const DEFAULT_DATA_GRID: DataGrid = []
 
-export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
+export const DEFAULT_DATA_MULTI_GRID: DataMultiGrid = []
 
-export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
+export const DEFAULT_DATA_MULTI_VALUE: DataMultiValue = []
 
-export const DATA_TREE_DEFAULT: DataTree = []
+export const DEFAULT_DATA_TREE: DataTree = []
 
-export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
+export const DEFAULTL_DATA_RELATIONA: DataRelationship = {
   nodes: [],
   edges: []
 }
 
 // -- Data Formatter --
 
-export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
+export const DEFAULT_DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
   position: 'left',
   scaleDomain: ['auto', 'auto'],
   scaleRange: [0, 0.9],
   label: '',
 }
 
-export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
+export const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
   position: 'bottom',
   scaleDomain: [0, 'max'],
   scalePadding: 0.5,
   label: ''
 }
 
-export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
+export const DEFAULT_DATA_FORMATTER_AXIS: DataFormatterAxis = {
+  scaleDomain: ['auto', 'auto'],
+  scaleRange: [0, 0.9],
+  label: '',
+}
+
+export const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer = {
   gap: 120,
   rowAmount: 1,
   columnAmount: 1
 }
 
-export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
+export const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries = {
   type: 'series',
   visibleFilter: (datum, context) => true,
   sort: null,
   seriesLabels: [],
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   },
   separateSeries: false,
   sumSeries: false
@@ -147,75 +160,78 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   //     ]
   // },
 }
-DATA_FORMATTER_SERIES_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_SERIES.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
+export const DEFAULT_DATA_FORMATTER_GRID_GRID: DataFormatterGridGrid = {
   seriesDirection: 'row',
   rowLabels: [],
   columnLabels: [],
-  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
-  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
+  valueAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
+  groupAxis: { ...DEFAULT_DATA_FORMATTER_GROUP_AXIS, },
   separateSeries: false,
   // slotIndex: 0,
   // seriesSlotIndexes: null
 }
 
-export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
+export const DEFAULT_DATA_FORMATTER_GRID: DataFormatterGrid = {
   type: 'grid',
   visibleFilter: (datum, context) => true,
-  grid: {
-    ...DATA_FORMATTER_GRID_GRID_DEFAULT
-  },
+  // grid: {
+    ...DEFAULT_DATA_FORMATTER_GRID_GRID,
+  // },
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   }
 }
-DATA_FORMATTER_GRID_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_GRID.visibleFilter.toString = () => `(datum, context) => true`
 
 // export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
-//   ...DATA_FORMATTER_GRID_DEFAULT,
+//   ...DEFAULT_DATA_FORMATTER_GRID,
 //   slotIndex: 0,
 //   seriesSlotIndexes: null
 // }
 
-export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
-  ...DATA_FORMATTER_GRID_GRID_DEFAULT
+export const DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID: DataFormatterMultiGridGrid = {
+  ...DEFAULT_DATA_FORMATTER_GRID_GRID
 }
 
-export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
+export const DEFAULT_DATA_FORMATTER_MULTI_GRID: DataFormatterMultiGrid = {
   type: 'multiGrid',
   visibleFilter: (datum, context) => true,
   gridList: [
     {
-      ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      ...DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
     },
   ],
   separateGrid: false,
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   }
 }
-DATA_FORMATTER_MULTI_GRID_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_MULTI_GRID.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
+export const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue = {
   type: 'multiValue',
   visibleFilter: (datum, context) => true,
   categoryLabels: [],
-  multiValue: [],
-  xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
-  yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  xAxis: { ...DEFAULT_DATA_FORMATTER_AXIS },
+  yAxis: { ...DEFAULT_DATA_FORMATTER_AXIS },
+  container: {
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
+  },
+  separateCategory: false
 }
-DATA_FORMATTER_MULTI_VALUE_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_MULTI_VALUE.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
+export const DEFAULT_DATA_FORMATTER_TREE: DataFormatterTree = {
   type: 'tree',
   visibleFilter: (datum, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
   categoryLabels: []
 }
-DATA_FORMATTER_TREE_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_TREE.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
+export const DEFAULT_DATA_FORMATTER_RELATIONSHIP: DataFormatterRelationship = {
   type: 'relationship',
   visibleFilter: (datum, context) => true,
   categoryLabels: []
@@ -228,5 +244,5 @@ export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
   //   descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
   // },
 }
-DATA_FORMATTER_RELATIONAL_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_RELATIONSHIP.visibleFilter.toString = () => `(datum, context) => true`
 

package/src/grid/computedDataFn.ts

@@ -1,7 +1,7 @@
 // import * as d3 from 'd3'
 import type { ComputedDataFn, DataGrid, DataGridDatum, DataFormatterGridGrid, ComputedDatumGrid } from '../../lib/core-types'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
-import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
+import { getMinMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
 
 // 統一 DataGrid 格式、並欄列資料轉置為一致方式
 export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
@@ -76,16 +76,16 @@ export const computedDataFn: ComputedDataFn<'grid'> = (context) => {
   try {
     
     // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter.grid)
+    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter)
 
     const seriesLabels = createGridSeriesLabels({
       transposedDataGrid,
-      dataFormatterGrid: dataFormatter.grid,
+      dataFormatterGrid: dataFormatter,
       chartType: 'grid'
     })
     const groupLabels = createGridGroupLabels({
       transposedDataGrid,
-      dataFormatterGrid: dataFormatter.grid,
+      dataFormatterGrid: dataFormatter,
       chartType: 'grid'
     })
 

package/src/grid/contextObserverCallback.ts

@@ -7,17 +7,20 @@ import {
   textSizePxObservable } from '../utils/observables'
 import {
   gridComputedLayoutDataObservable,
-  gridAxesTransformObservable,
-  gridAxesReverseTransformObservable,
-  gridGraphicTransformObservable,
-  gridGraphicReverseScaleObservable,
   gridAxesSizeObservable,
   gridSeriesLabelsObservable,
   gridVisibleComputedDataObservable,
   gridVisibleComputedLayoutDataObservable,
   // isSeriesSeprateObservable,
   gridContainerPositionObservable,
-  computedStackedDataObservables } from '../utils/gridObservables'
+  computedStackedDataObservables,
+  groupScaleDomainValueObservable,
+  filteredMinMaxValueObservable,
+  gridAxesTransformObservable,
+  gridAxesReverseTransformObservable,
+  gridGraphicTransformObservable,
+  gridGraphicReverseScaleObservable,
+} from '../utils/gridObservables'
 
 export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subject, observer }) => {
   
@@ -26,7 +29,7 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
   )
 
   const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    map(d => d.grid.separateSeries),
+    map(d => d.separateSeries),
     distinctUntilChanged(),
     shareReplay(1)
   )
@@ -37,33 +40,6 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     layout$: observer.layout$,
   })
 
-  const gridAxesTransform$ = gridAxesTransformObservable({
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
-    gridAxesTransform$
-  }).pipe(
-    shareReplay(1)
-  )
-  
-  const gridGraphicTransform$ = gridGraphicTransformObservable({
-    computedData$: observer.computedData$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    layout$: observer.layout$
-  }).pipe(
-    shareReplay(1)
-  )
-
-  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
-    gridContainerPosition$: gridContainerPosition$,
-    gridAxesTransform$: gridAxesTransform$,
-    gridGraphicTransform$: gridGraphicTransform$,
-  })
-
   const gridAxesSize$ = gridAxesSizeObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$
@@ -128,6 +104,49 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     shareReplay(1)
   )
 
+  const groupScaleDomainValue$ = groupScaleDomainValueObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const filteredMinMaxValue$ = filteredMinMaxValueObservable({
+    computedData$: observer.computedData$,
+    groupScaleDomainValue$: groupScaleDomainValue$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesTransform$ = gridAxesTransformObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
+    gridAxesTransform$
+  }).pipe(
+    shareReplay(1)
+  )
+  
+  const gridGraphicTransform$ = gridGraphicTransformObservable({
+    computedData$: observer.computedData$,
+    groupScaleDomainValue$: groupScaleDomainValue$,
+    filteredMinMaxValue$: filteredMinMaxValue$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
+    gridContainerPosition$: gridContainerPosition$,
+    gridAxesTransform$: gridAxesTransform$,
+    gridGraphicTransform$: gridGraphicTransform$,
+  })
+
 
   return {
     fullParams$: observer.fullParams$,
@@ -138,10 +157,6 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     textSizePx$,
     isSeriesSeprate$,
     gridContainerPosition$,
-    gridAxesTransform$,
-    gridAxesReverseTransform$,
-    gridGraphicTransform$,
-    gridGraphicReverseScale$,
     gridAxesSize$,
     gridHighlight$,
     seriesLabels$,
@@ -151,5 +166,11 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     visibleComputedData$,
     visibleComputedLayoutData$,
     computedStackedData$,
+    groupScaleDomainValue$,
+    filteredMinMaxValue$,
+    gridAxesTransform$,
+    gridAxesReverseTransform$,
+    gridGraphicTransform$,
+    gridGraphicReverseScale$,
   }
 }

package/src/grid/dataFormatterValidator.ts

@@ -6,15 +6,15 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
     visibleFilter: {
       toBeTypes: ['Function']
     },
-    grid: {
-      toBeTypes: ['object']
-    },
+    // grid: {
+    //   toBeTypes: ['object']
+    // },
     container: {
       toBeTypes: ['object']
     }
   })
-  if (dataFormatter.grid) {
-    const visibleFilterResult = validateColumns(dataFormatter.grid, {
+  // if (dataFormatter.grid) {
+    const visibleFilterResult = validateColumns(dataFormatter, {
       seriesDirection: {
         toBe: '"row" | "column"',
         test: (value) => value === 'row' || value === 'column'
@@ -38,11 +38,11 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
     if (visibleFilterResult.status === 'error') {
       return visibleFilterResult
     }
-    if (dataFormatter.grid.valueAxis) {
-      const valueAxisResult = validateColumns(dataFormatter.grid.valueAxis, {
+    if (dataFormatter.valueAxis) {
+      const valueAxisResult = validateColumns(dataFormatter.valueAxis, {
         position: {
-          toBe: '"left" | "right"',
-          test: (value) => value === 'left' || value === 'right'
+          toBe: '"bottom" | "left" | "top" | "right"',
+          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
         },
         scaleDomain: {
           toBe: '[number | "min" | "auto", number | "max" | "auto"]',
@@ -60,11 +60,11 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
         return valueAxisResult
       }
     }
-    if (dataFormatter.grid.groupAxis) {
-      const groupAxisResult = validateColumns(dataFormatter.grid.groupAxis, {
+    if (dataFormatter.groupAxis) {
+      const groupAxisResult = validateColumns(dataFormatter.groupAxis, {
         position: {
-          toBe: '"top" | "bottom"',
-          test: (value) => value === 'top' || value === 'bottom'
+          toBe: '"bottom" | "left" | "top" | "right"',
+          test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
         },
         scaleDomain: {
           toBe: '[number, number | "max"]',
@@ -81,7 +81,7 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
         return groupAxisResult
       }
     }
-  }
+  // }
   if (dataFormatter.container) {
     const containerResult = validateColumns(dataFormatter.container, {
       gap: {

package/src/multiGrid/computedDataFn.ts

@@ -1,5 +1,5 @@
 import type { ComputedDataFn, ComputedDatumGrid, DataFormatterGridGrid, ComputedDataMultiGrid } from '../../lib/core-types'
-import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
+import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
 import {
   createDefaultDatumId,
   seriesColorPredicate,
@@ -18,7 +18,7 @@ export const computedDataFn: ComputedDataFn<'multiGrid'> = (context) => {
   let multiGridData: ComputedDataMultiGrid = []
 
   try {
-    const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+    const defaultGrid = dataFormatter.gridList[0] || DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
 
     // 計算每個grid的dataFormatter
     const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {