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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-core.es.js +221 -218
  3. package/dist/orbcharts-core.umd.js +2 -2
  4. package/package.json +41 -41
  5. package/src/AbstractChart.ts +48 -48
  6. package/src/GridChart.ts +20 -20
  7. package/src/MultiGridChart.ts +20 -20
  8. package/src/MultiValueChart.ts +20 -20
  9. package/src/RelationshipChart.ts +20 -20
  10. package/src/SeriesChart.ts +20 -20
  11. package/src/TreeChart.ts +20 -20
  12. package/src/base/createBaseChart.ts +369 -369
  13. package/src/base/createBasePlugin.ts +95 -95
  14. package/src/defaults.ts +226 -226
  15. package/src/defineGridPlugin.ts +3 -3
  16. package/src/defineMultiGridPlugin.ts +3 -3
  17. package/src/defineMultiValuePlugin.ts +3 -3
  18. package/src/defineNoneDataPlugin.ts +4 -4
  19. package/src/defineRelationshipPlugin.ts +3 -3
  20. package/src/defineSeriesPlugin.ts +3 -3
  21. package/src/defineTreePlugin.ts +3 -3
  22. package/src/grid/computeGridData.ts +134 -134
  23. package/src/grid/createGridContextObserver.ts +155 -155
  24. package/src/grid/gridObservables.ts +613 -607
  25. package/src/index.ts +21 -21
  26. package/src/multiGrid/computeMultiGridData.ts +130 -130
  27. package/src/multiGrid/createMultiGridContextObserver.ts +41 -41
  28. package/src/multiGrid/multiGridObservables.ts +365 -365
  29. package/src/multiValue/computeMultiValueData.ts +143 -143
  30. package/src/multiValue/createMultiValueContextObserver.ts +12 -12
  31. package/src/relationship/computeRelationshipData.ts +118 -118
  32. package/src/relationship/createRelationshipContextObserver.ts +12 -12
  33. package/src/series/computeSeriesData.ts +90 -90
  34. package/src/series/createSeriesContextObserver.ts +93 -93
  35. package/src/series/seriesObservables.ts +175 -175
  36. package/src/tree/computeTreeData.ts +132 -132
  37. package/src/tree/createTreeContextObserver.ts +61 -61
  38. package/src/tree/treeObservables.ts +94 -94
  39. package/src/types/Chart.ts +50 -50
  40. package/src/types/ChartParams.ts +51 -51
  41. package/src/types/ComputedData.ts +83 -83
  42. package/src/types/ComputedDataGrid.ts +13 -13
  43. package/src/types/ComputedDataMultiGrid.ts +2 -2
  44. package/src/types/ComputedDataMultiValue.ts +9 -9
  45. package/src/types/ComputedDataRelationship.ts +19 -19
  46. package/src/types/ComputedDataSeries.ts +7 -7
  47. package/src/types/ComputedDataTree.ts +19 -19
  48. package/src/types/ContextObserver.ts +38 -38
  49. package/src/types/ContextObserverGrid.ts +42 -42
  50. package/src/types/ContextObserverMultiGrid.ts +16 -16
  51. package/src/types/ContextObserverMultiValue.ts +4 -4
  52. package/src/types/ContextObserverRelationship.ts +4 -4
  53. package/src/types/ContextObserverSeries.ts +29 -29
  54. package/src/types/ContextObserverTree.ts +11 -11
  55. package/src/types/ContextSubject.ts +18 -18
  56. package/src/types/Data.ts +45 -45
  57. package/src/types/DataFormatter.ts +74 -74
  58. package/src/types/DataFormatterGrid.ts +67 -67
  59. package/src/types/DataFormatterMultiGrid.ts +44 -44
  60. package/src/types/DataFormatterMultiValue.ts +23 -23
  61. package/src/types/DataFormatterRelationship.ts +25 -25
  62. package/src/types/DataFormatterSeries.ts +20 -20
  63. package/src/types/DataFormatterTree.ts +12 -12
  64. package/src/types/DataGrid.ts +11 -11
  65. package/src/types/DataMultiGrid.ts +6 -6
  66. package/src/types/DataMultiValue.ts +12 -12
  67. package/src/types/DataRelationship.ts +27 -27
  68. package/src/types/DataSeries.ts +11 -11
  69. package/src/types/DataTree.ts +20 -20
  70. package/src/types/Event.ts +153 -153
  71. package/src/types/Layout.ts +11 -11
  72. package/src/types/Padding.ts +5 -5
  73. package/src/types/Plugin.ts +60 -60
  74. package/src/types/TransformData.ts +7 -7
  75. package/src/types/index.ts +37 -37
  76. package/src/utils/commonUtils.ts +50 -50
  77. package/src/utils/d3Utils.ts +92 -92
  78. package/src/utils/index.ts +4 -4
  79. package/src/utils/observables.ts +201 -201
  80. package/src/utils/orbchartsUtils.ts +349 -349
  81. package/tsconfig.base.json +13 -13
  82. package/tsconfig.json +2 -2
  83. package/vite.config.js +22 -22
package/src/index.ts CHANGED
@@ -1,21 +1,21 @@
1
-
2
- export { SeriesChart } from './SeriesChart'
3
- export { GridChart } from './GridChart'
4
- export { MultiGridChart } from './MultiGridChart'
5
- export { MultiValueChart } from './MultiValueChart'
6
- export { RelationshipChart } from './RelationshipChart'
7
- export { TreeChart } from './TreeChart'
8
-
9
- export { defineSeriesPlugin } from './defineSeriesPlugin'
10
- export { defineGridPlugin } from './defineGridPlugin'
11
- export { defineMultiGridPlugin } from './defineMultiGridPlugin'
12
- export { defineMultiValuePlugin } from './defineMultiValuePlugin'
13
- export { defineNoneDataPlugin } from './defineNoneDataPlugin'
14
- export { defineRelationshipPlugin } from './defineRelationshipPlugin'
15
- export { defineTreePlugin } from './defineTreePlugin'
16
-
17
- export * from './types'
18
- export * from './utils'
19
-
20
-
21
-
1
+
2
+ export { SeriesChart } from './SeriesChart'
3
+ export { GridChart } from './GridChart'
4
+ export { MultiGridChart } from './MultiGridChart'
5
+ export { MultiValueChart } from './MultiValueChart'
6
+ export { RelationshipChart } from './RelationshipChart'
7
+ export { TreeChart } from './TreeChart'
8
+
9
+ export { defineSeriesPlugin } from './defineSeriesPlugin'
10
+ export { defineGridPlugin } from './defineGridPlugin'
11
+ export { defineMultiGridPlugin } from './defineMultiGridPlugin'
12
+ export { defineMultiValuePlugin } from './defineMultiValuePlugin'
13
+ export { defineNoneDataPlugin } from './defineNoneDataPlugin'
14
+ export { defineRelationshipPlugin } from './defineRelationshipPlugin'
15
+ export { defineTreePlugin } from './defineTreePlugin'
16
+
17
+ export * from './types'
18
+ export * from './utils'
19
+
20
+
21
+
@@ -1,130 +1,130 @@
1
- import type { DataGrid, DataGridDatum } from '../types/DataGrid'
2
- import type { ComputedDataFn } from '../types/ComputedData'
3
- import type { ComputedDatumGrid } from '../types/ComputedDataGrid'
4
- import type { DataFormatterContext } from '../types/DataFormatter'
5
- import type { DataFormatterGridGrid } from '../types/DataFormatterGrid'
6
- import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
7
- // import { computeBaseGridData } from '../grid/computeGridData'
8
- import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
9
- import {
10
- createDefaultDatumId,
11
- seriesColorPredicate,
12
- createGridSeriesLabels,
13
- createMultiGridSeriesLabels,
14
- createMultiGridGroupLabels
15
- } from '../utils/orbchartsUtils'
16
- // import type { DataGridDatumTemp } from '../grid/computeGridData'
17
- import { createTransposedDataGrid } from '../grid/computeGridData'
18
-
19
- export const computeMultiGridData: ComputedDataFn<'multiGrid'> = (context) => {
20
- const { data = [], dataFormatter, chartParams } = context
21
- if (!data.length) {
22
- return []
23
- }
24
-
25
- let multiGridData: ComputedDataMultiGrid = []
26
-
27
- try {
28
- const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
29
-
30
- // 計算每個grid的dataFormatter
31
- const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {
32
- return dataFormatter.gridList[gridIndex] || defaultGrid
33
- })
34
-
35
- const transposedDataGridList = data.map((gridData, gridIndex) => {
36
- // 依seriesDirection轉置資料矩陣
37
- return createTransposedDataGrid(gridData, gridDataFormatterList[gridIndex])
38
- })
39
-
40
- // const isOverlappingMultiGrid = (() => {
41
- // const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.slotIndex))
42
- // // 判斷是否有重疊的grid
43
- // return SlotIndexSet.size !== gridDataFormatterList.length
44
- // })()
45
-
46
- const multiGridSeriesLabels = dataFormatter.separateGrid
47
- // grid分開的時候,預設每組的seriesLabels相同
48
- ? transposedDataGridList
49
- .map((gridData, gridIndex) => {
50
- return createGridSeriesLabels({
51
- transposedDataGrid: gridData,
52
- dataFormatterGrid: gridDataFormatterList[gridIndex],
53
- chartType: 'multiGrid',
54
- })
55
- })
56
- // grid不分開的時候,預設每個grid相同seriesIndex的seriesLabel相同
57
- : transposedDataGridList
58
- .map((gridData, gridIndex) => {
59
- return createMultiGridSeriesLabels({
60
- transposedDataGrid: gridData,
61
- dataFormatterGrid: gridDataFormatterList[gridIndex],
62
- chartType: 'multiGrid',
63
- gridIndex
64
- })
65
- })
66
-
67
- const SeriesLabelColorMap: Map<string, string> = new Map()
68
- let accIndex = 0
69
- multiGridSeriesLabels.flat().forEach((label, i) => {
70
- if (!SeriesLabelColorMap.has(label)) {
71
- const color = seriesColorPredicate(accIndex, chartParams)
72
- SeriesLabelColorMap.set(label, color)
73
- accIndex ++
74
- }
75
- })
76
-
77
- // 計算每個grid的資料
78
- multiGridData = transposedDataGridList.map((gridData, gridIndex) => {
79
- const gridSeriesLabels = multiGridSeriesLabels[gridIndex]
80
- const groupLabels = createMultiGridGroupLabels({
81
- transposedDataGrid: gridData,
82
- dataFormatterGrid: gridDataFormatterList[gridIndex],
83
- chartType: 'multiGrid',
84
- gridIndex
85
- })
86
-
87
- let _index = 0
88
- let computedDataGrid: ComputedDatumGrid[][] = gridData.map((seriesData, seriesIndex) => {
89
- return seriesData.map((groupDatum, groupIndex) => {
90
-
91
- const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
92
- const groupLabel = groupLabels[groupIndex]
93
- const seriesLabel = gridSeriesLabels[seriesIndex]
94
-
95
- const computedDatum: ComputedDatumGrid = {
96
- id: groupDatum.id ? groupDatum.id : defaultId,
97
- index: _index,
98
- label: groupDatum.label ? groupDatum.label : defaultId,
99
- description: groupDatum.description ?? '',
100
- data: groupDatum.data,
101
- value: groupDatum.value,
102
- gridIndex,
103
- // accSeriesIndex: seriesIndex, // 預設為seriesIndex
104
- seriesIndex,
105
- seriesLabel,
106
- groupIndex,
107
- groupLabel,
108
- color: SeriesLabelColorMap.get(seriesLabel),
109
- visible: true // 先給一個預設值
110
- }
111
-
112
- computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
113
-
114
- _index ++
115
-
116
- return computedDatum
117
- })
118
- })
119
-
120
- return computedDataGrid
121
- })
122
-
123
-
124
- } catch (e) {
125
- // console.error(e)
126
- throw Error(e)
127
- }
128
-
129
- return multiGridData
130
- }
1
+ import type { DataGrid, DataGridDatum } from '../types/DataGrid'
2
+ import type { ComputedDataFn } from '../types/ComputedData'
3
+ import type { ComputedDatumGrid } from '../types/ComputedDataGrid'
4
+ import type { DataFormatterContext } from '../types/DataFormatter'
5
+ import type { DataFormatterGridGrid } from '../types/DataFormatterGrid'
6
+ import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
7
+ // import { computeBaseGridData } from '../grid/computeGridData'
8
+ import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
9
+ import {
10
+ createDefaultDatumId,
11
+ seriesColorPredicate,
12
+ createGridSeriesLabels,
13
+ createMultiGridSeriesLabels,
14
+ createMultiGridGroupLabels
15
+ } from '../utils/orbchartsUtils'
16
+ // import type { DataGridDatumTemp } from '../grid/computeGridData'
17
+ import { createTransposedDataGrid } from '../grid/computeGridData'
18
+
19
+ export const computeMultiGridData: ComputedDataFn<'multiGrid'> = (context) => {
20
+ const { data = [], dataFormatter, chartParams } = context
21
+ if (!data.length) {
22
+ return []
23
+ }
24
+
25
+ let multiGridData: ComputedDataMultiGrid = []
26
+
27
+ try {
28
+ const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
29
+
30
+ // 計算每個grid的dataFormatter
31
+ const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {
32
+ return dataFormatter.gridList[gridIndex] || defaultGrid
33
+ })
34
+
35
+ const transposedDataGridList = data.map((gridData, gridIndex) => {
36
+ // 依seriesDirection轉置資料矩陣
37
+ return createTransposedDataGrid(gridData, gridDataFormatterList[gridIndex])
38
+ })
39
+
40
+ // const isOverlappingMultiGrid = (() => {
41
+ // const SlotIndexSet = new Set(gridDataFormatterList.map(d => d.slotIndex))
42
+ // // 判斷是否有重疊的grid
43
+ // return SlotIndexSet.size !== gridDataFormatterList.length
44
+ // })()
45
+
46
+ const multiGridSeriesLabels = dataFormatter.separateGrid
47
+ // grid分開的時候,預設每組的seriesLabels相同
48
+ ? transposedDataGridList
49
+ .map((gridData, gridIndex) => {
50
+ return createGridSeriesLabels({
51
+ transposedDataGrid: gridData,
52
+ dataFormatterGrid: gridDataFormatterList[gridIndex],
53
+ chartType: 'multiGrid',
54
+ })
55
+ })
56
+ // grid不分開的時候,預設每個grid相同seriesIndex的seriesLabel相同
57
+ : transposedDataGridList
58
+ .map((gridData, gridIndex) => {
59
+ return createMultiGridSeriesLabels({
60
+ transposedDataGrid: gridData,
61
+ dataFormatterGrid: gridDataFormatterList[gridIndex],
62
+ chartType: 'multiGrid',
63
+ gridIndex
64
+ })
65
+ })
66
+
67
+ const SeriesLabelColorMap: Map<string, string> = new Map()
68
+ let accIndex = 0
69
+ multiGridSeriesLabels.flat().forEach((label, i) => {
70
+ if (!SeriesLabelColorMap.has(label)) {
71
+ const color = seriesColorPredicate(accIndex, chartParams)
72
+ SeriesLabelColorMap.set(label, color)
73
+ accIndex ++
74
+ }
75
+ })
76
+
77
+ // 計算每個grid的資料
78
+ multiGridData = transposedDataGridList.map((gridData, gridIndex) => {
79
+ const gridSeriesLabels = multiGridSeriesLabels[gridIndex]
80
+ const groupLabels = createMultiGridGroupLabels({
81
+ transposedDataGrid: gridData,
82
+ dataFormatterGrid: gridDataFormatterList[gridIndex],
83
+ chartType: 'multiGrid',
84
+ gridIndex
85
+ })
86
+
87
+ let _index = 0
88
+ let computedDataGrid: ComputedDatumGrid[][] = gridData.map((seriesData, seriesIndex) => {
89
+ return seriesData.map((groupDatum, groupIndex) => {
90
+
91
+ const defaultId = createDefaultDatumId('multiGrid', gridIndex, seriesIndex, groupIndex)
92
+ const groupLabel = groupLabels[groupIndex]
93
+ const seriesLabel = gridSeriesLabels[seriesIndex]
94
+
95
+ const computedDatum: ComputedDatumGrid = {
96
+ id: groupDatum.id ? groupDatum.id : defaultId,
97
+ index: _index,
98
+ label: groupDatum.label ? groupDatum.label : defaultId,
99
+ description: groupDatum.description ?? '',
100
+ data: groupDatum.data,
101
+ value: groupDatum.value,
102
+ gridIndex,
103
+ // accSeriesIndex: seriesIndex, // 預設為seriesIndex
104
+ seriesIndex,
105
+ seriesLabel,
106
+ groupIndex,
107
+ groupLabel,
108
+ color: SeriesLabelColorMap.get(seriesLabel),
109
+ visible: true // 先給一個預設值
110
+ }
111
+
112
+ computedDatum.visible = dataFormatter.visibleFilter(computedDatum, context)
113
+
114
+ _index ++
115
+
116
+ return computedDatum
117
+ })
118
+ })
119
+
120
+ return computedDataGrid
121
+ })
122
+
123
+
124
+ } catch (e) {
125
+ // console.error(e)
126
+ throw Error(e)
127
+ }
128
+
129
+ return multiGridData
130
+ }
@@ -1,41 +1,41 @@
1
- import {
2
- map,
3
- shareReplay } from 'rxjs'
4
- import type { ContextObserverFn } from '../types'
5
- import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
6
- import { textSizePxObservable } from '../utils/observables'
7
-
8
- export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
9
-
10
- const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
11
- shareReplay(1)
12
- )
13
-
14
- const multiGridEachDetail$ = multiGridEachDetailObservable({
15
- fullDataFormatter$: observer.fullDataFormatter$,
16
- computedData$: observer.computedData$,
17
- layout$: observer.layout$,
18
- fullChartParams$: observer.fullChartParams$,
19
- event$: subject.event$
20
- }).pipe(
21
- shareReplay(1)
22
- )
23
-
24
- const multiGridContainerPosition$ = multiGridContainerObservable({
25
- computedData$: observer.computedData$,
26
- fullDataFormatter$: observer.fullDataFormatter$,
27
- layout$: observer.layout$,
28
- })
29
-
30
- return {
31
- fullParams$: observer.fullParams$,
32
- fullChartParams$: observer.fullChartParams$,
33
- fullDataFormatter$: observer.fullDataFormatter$,
34
- computedData$: observer.computedData$,
35
- layout$: observer.layout$,
36
- textSizePx$,
37
- multiGridContainerPosition$,
38
- multiGridEachDetail$,
39
- // multiGridContainer$
40
- }
41
- }
1
+ import {
2
+ map,
3
+ shareReplay } from 'rxjs'
4
+ import type { ContextObserverFn } from '../types'
5
+ import { multiGridEachDetailObservable, multiGridContainerObservable } from './multiGridObservables'
6
+ import { textSizePxObservable } from '../utils/observables'
7
+
8
+ export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
9
+
10
+ const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
11
+ shareReplay(1)
12
+ )
13
+
14
+ const multiGridEachDetail$ = multiGridEachDetailObservable({
15
+ fullDataFormatter$: observer.fullDataFormatter$,
16
+ computedData$: observer.computedData$,
17
+ layout$: observer.layout$,
18
+ fullChartParams$: observer.fullChartParams$,
19
+ event$: subject.event$
20
+ }).pipe(
21
+ shareReplay(1)
22
+ )
23
+
24
+ const multiGridContainerPosition$ = multiGridContainerObservable({
25
+ computedData$: observer.computedData$,
26
+ fullDataFormatter$: observer.fullDataFormatter$,
27
+ layout$: observer.layout$,
28
+ })
29
+
30
+ return {
31
+ fullParams$: observer.fullParams$,
32
+ fullChartParams$: observer.fullChartParams$,
33
+ fullDataFormatter$: observer.fullDataFormatter$,
34
+ computedData$: observer.computedData$,
35
+ layout$: observer.layout$,
36
+ textSizePx$,
37
+ multiGridContainerPosition$,
38
+ multiGridEachDetail$,
39
+ // multiGridContainer$
40
+ }
41
+ }