@orbcharts/core 3.0.0-alpha.48 → 3.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-core.es.js +3 -2
  3. package/dist/orbcharts-core.umd.js +1 -1
  4. package/dist/src/types/Chart.d.ts +10 -12
  5. package/package.json +41 -41
  6. package/src/AbstractChart.ts +48 -48
  7. package/src/GridChart.ts +20 -20
  8. package/src/MultiGridChart.ts +20 -20
  9. package/src/MultiValueChart.ts +20 -20
  10. package/src/RelationshipChart.ts +20 -20
  11. package/src/SeriesChart.ts +20 -20
  12. package/src/TreeChart.ts +20 -20
  13. package/src/base/createBaseChart.ts +369 -368
  14. package/src/base/createBasePlugin.ts +95 -95
  15. package/src/defaults.ts +220 -220
  16. package/src/defineGridPlugin.ts +3 -3
  17. package/src/defineMultiGridPlugin.ts +3 -3
  18. package/src/defineMultiValuePlugin.ts +3 -3
  19. package/src/defineNoneDataPlugin.ts +4 -4
  20. package/src/defineRelationshipPlugin.ts +3 -3
  21. package/src/defineSeriesPlugin.ts +3 -3
  22. package/src/defineTreePlugin.ts +3 -3
  23. package/src/grid/computeGridData.ts +134 -134
  24. package/src/grid/createGridContextObserver.ts +155 -155
  25. package/src/grid/gridObservables.ts +600 -600
  26. package/src/index.ts +21 -21
  27. package/src/multiGrid/computeMultiGridData.ts +130 -130
  28. package/src/multiGrid/createMultiGridContextObserver.ts +40 -40
  29. package/src/multiGrid/multiGridObservables.ts +364 -364
  30. package/src/multiValue/computeMultiValueData.ts +143 -143
  31. package/src/multiValue/createMultiValueContextObserver.ts +12 -12
  32. package/src/relationship/computeRelationshipData.ts +118 -118
  33. package/src/relationship/createRelationshipContextObserver.ts +12 -12
  34. package/src/series/computeSeriesData.ts +90 -90
  35. package/src/series/createSeriesContextObserver.ts +93 -93
  36. package/src/series/seriesObservables.ts +175 -175
  37. package/src/tree/computeTreeData.ts +131 -131
  38. package/src/tree/createTreeContextObserver.ts +61 -61
  39. package/src/tree/treeObservables.ts +94 -94
  40. package/src/types/Chart.ts +50 -48
  41. package/src/types/ChartParams.ts +51 -51
  42. package/src/types/ComputedData.ts +83 -83
  43. package/src/types/ComputedDataGrid.ts +13 -13
  44. package/src/types/ComputedDataMultiGrid.ts +2 -2
  45. package/src/types/ComputedDataMultiValue.ts +9 -9
  46. package/src/types/ComputedDataRelationship.ts +19 -19
  47. package/src/types/ComputedDataSeries.ts +7 -7
  48. package/src/types/ComputedDataTree.ts +19 -19
  49. package/src/types/ContextObserver.ts +38 -38
  50. package/src/types/ContextObserverGrid.ts +42 -42
  51. package/src/types/ContextObserverMultiGrid.ts +15 -15
  52. package/src/types/ContextObserverMultiValue.ts +4 -4
  53. package/src/types/ContextObserverRelationship.ts +4 -4
  54. package/src/types/ContextObserverSeries.ts +29 -29
  55. package/src/types/ContextObserverTree.ts +11 -11
  56. package/src/types/ContextSubject.ts +18 -18
  57. package/src/types/Data.ts +45 -45
  58. package/src/types/DataFormatter.ts +74 -74
  59. package/src/types/DataFormatterGrid.ts +67 -67
  60. package/src/types/DataFormatterMultiGrid.ts +44 -44
  61. package/src/types/DataFormatterMultiValue.ts +23 -23
  62. package/src/types/DataFormatterRelationship.ts +25 -25
  63. package/src/types/DataFormatterSeries.ts +20 -20
  64. package/src/types/DataFormatterTree.ts +12 -12
  65. package/src/types/DataGrid.ts +11 -11
  66. package/src/types/DataMultiGrid.ts +6 -6
  67. package/src/types/DataMultiValue.ts +12 -12
  68. package/src/types/DataRelationship.ts +27 -27
  69. package/src/types/DataSeries.ts +11 -11
  70. package/src/types/DataTree.ts +20 -20
  71. package/src/types/Event.ts +153 -153
  72. package/src/types/Layout.ts +11 -11
  73. package/src/types/Padding.ts +5 -5
  74. package/src/types/Plugin.ts +60 -60
  75. package/src/types/TransformData.ts +7 -7
  76. package/src/types/index.ts +37 -37
  77. package/src/utils/commonUtils.ts +50 -50
  78. package/src/utils/d3Utils.ts +89 -89
  79. package/src/utils/index.ts +4 -4
  80. package/src/utils/observables.ts +201 -201
  81. package/src/utils/orbchartsUtils.ts +349 -349
  82. package/tsconfig.json +13 -13
  83. package/vite.config.js +44 -44
@@ -1,61 +1,61 @@
1
- import { map, shareReplay } from 'rxjs'
2
- import type { ContextObserverFn } from '../types'
3
- import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
4
- import {
5
- nodeListObservable,
6
- existCategoryLabelsObservable,
7
- treeVisibleComputedDataObservable
8
- } from './treeObservables'
9
-
10
- export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
11
-
12
- const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
13
- shareReplay(1)
14
- )
15
-
16
- const nodeList$ = nodeListObservable({
17
- computedData$: observer.computedData$
18
- }).pipe(
19
- shareReplay(1)
20
- )
21
-
22
- const treeHighlight$ = highlightObservable({
23
- datumList$: nodeList$,
24
- fullChartParams$: observer.fullChartParams$,
25
- event$: subject.event$
26
- }).pipe(
27
- shareReplay(1)
28
- )
29
-
30
- const existCategoryLabels$ = existCategoryLabelsObservable({
31
- nodeList$,
32
- fullDataFormatter$: observer.fullDataFormatter$
33
- }).pipe(
34
- shareReplay(1)
35
- )
36
-
37
- const CategoryDataMap$ = categoryDataMapObservable({
38
- datumList$: nodeList$
39
- }).pipe(
40
- shareReplay(1)
41
- )
42
-
43
- const visibleComputedData$ = treeVisibleComputedDataObservable({
44
- computedData$: observer.computedData$
45
- }).pipe(
46
- shareReplay(1)
47
- )
48
-
49
- return {
50
- fullParams$: observer.fullParams$,
51
- fullChartParams$: observer.fullChartParams$,
52
- fullDataFormatter$: observer.fullDataFormatter$,
53
- computedData$: observer.computedData$,
54
- layout$: observer.layout$,
55
- textSizePx$,
56
- treeHighlight$,
57
- existCategoryLabels$,
58
- CategoryDataMap$,
59
- visibleComputedData$
60
- }
61
- }
1
+ import { map, shareReplay } from 'rxjs'
2
+ import type { ContextObserverFn } from '../types'
3
+ import { highlightObservable, categoryDataMapObservable, textSizePxObservable } from '../utils/observables'
4
+ import {
5
+ nodeListObservable,
6
+ existCategoryLabelsObservable,
7
+ treeVisibleComputedDataObservable
8
+ } from './treeObservables'
9
+
10
+ export const createTreeContextObserver: ContextObserverFn<'tree'> = ({ subject, observer }) => {
11
+
12
+ const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
13
+ shareReplay(1)
14
+ )
15
+
16
+ const nodeList$ = nodeListObservable({
17
+ computedData$: observer.computedData$
18
+ }).pipe(
19
+ shareReplay(1)
20
+ )
21
+
22
+ const treeHighlight$ = highlightObservable({
23
+ datumList$: nodeList$,
24
+ fullChartParams$: observer.fullChartParams$,
25
+ event$: subject.event$
26
+ }).pipe(
27
+ shareReplay(1)
28
+ )
29
+
30
+ const existCategoryLabels$ = existCategoryLabelsObservable({
31
+ nodeList$,
32
+ fullDataFormatter$: observer.fullDataFormatter$
33
+ }).pipe(
34
+ shareReplay(1)
35
+ )
36
+
37
+ const CategoryDataMap$ = categoryDataMapObservable({
38
+ datumList$: nodeList$
39
+ }).pipe(
40
+ shareReplay(1)
41
+ )
42
+
43
+ const visibleComputedData$ = treeVisibleComputedDataObservable({
44
+ computedData$: observer.computedData$
45
+ }).pipe(
46
+ shareReplay(1)
47
+ )
48
+
49
+ return {
50
+ fullParams$: observer.fullParams$,
51
+ fullChartParams$: observer.fullChartParams$,
52
+ fullDataFormatter$: observer.fullDataFormatter$,
53
+ computedData$: observer.computedData$,
54
+ layout$: observer.layout$,
55
+ textSizePx$,
56
+ treeHighlight$,
57
+ existCategoryLabels$,
58
+ CategoryDataMap$,
59
+ visibleComputedData$
60
+ }
61
+ }
@@ -1,95 +1,95 @@
1
- import {
2
- combineLatest,
3
- distinctUntilChanged,
4
- filter,
5
- map,
6
- merge,
7
- takeUntil,
8
- shareReplay,
9
- switchMap,
10
- Subject,
11
- Observable } from 'rxjs'
12
- import type {
13
- ChartParams,
14
- ComputedDataTree,
15
- ComputedDataTypeMap,
16
- DataFormatterTree } from '../types'
17
-
18
-
19
- // 所有節點list結構
20
- export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
21
- return computedData$.pipe(
22
- map(data => {
23
- function setNodeList (accNodeList: ComputedDataTree[], branch: ComputedDataTree) {
24
- accNodeList.push(branch)
25
- if (branch.children) {
26
- branch.children.forEach(childBranch => {
27
- accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
28
- })
29
- }
30
- return accNodeList
31
- }
32
- return setNodeList([], data)
33
- })
34
- )
35
- }
36
-
37
- export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
38
- nodeList$: Observable<ComputedDataTree[]>
39
- fullDataFormatter$: Observable<DataFormatterTree>
40
- }) => {
41
-
42
- const categoryLabels$ = fullDataFormatter$.pipe(
43
- map(d => d.categoryLabels),
44
- distinctUntilChanged((a, b) => {
45
- return JSON.stringify(a).length === JSON.stringify(b).length
46
- }),
47
- )
48
-
49
- return combineLatest({
50
- nodeList: nodeList$,
51
- categoryLabels: categoryLabels$
52
- }).pipe(
53
- switchMap(async d => d),
54
- map(data => {
55
- const CurrentLabelSet = new Set(data.categoryLabels)
56
- const ExistLabelSet = new Set(
57
- data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
58
- )
59
- // 加入已存在的label(data.nodeList有,但是dataFormatter.categoryLabels沒有)
60
- Array.from(ExistLabelSet).forEach(label => {
61
- if (!CurrentLabelSet.has(label)) {
62
- CurrentLabelSet.add(label)
63
- }
64
- })
65
- // 移除不存在的label(dataFormatter.categoryLabels有,但是data.nodeList沒有)
66
- Array.from(CurrentLabelSet).forEach(label => {
67
- if (!ExistLabelSet.has(label)) {
68
- ExistLabelSet.delete(label)
69
- }
70
- })
71
-
72
- return Array.from(CurrentLabelSet)
73
- }),
74
- distinctUntilChanged((a, b) => {
75
- return JSON.stringify(a).length === JSON.stringify(b).length
76
- }),
77
- )
78
- }
79
-
80
- // 所有可見的節點
81
- export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
82
- return computedData$.pipe(
83
- map(data => {
84
- function filterChildren (accTree: ComputedDataTree) {
85
- if (accTree.children) {
86
- accTree.children = accTree.children
87
- .filter(child => child.visible) // 篩選visible
88
- .map(child => filterChildren(child)) // 遞迴子節點
89
- }
90
- return accTree
91
- }
92
- return filterChildren(data)
93
- })
94
- )
1
+ import {
2
+ combineLatest,
3
+ distinctUntilChanged,
4
+ filter,
5
+ map,
6
+ merge,
7
+ takeUntil,
8
+ shareReplay,
9
+ switchMap,
10
+ Subject,
11
+ Observable } from 'rxjs'
12
+ import type {
13
+ ChartParams,
14
+ ComputedDataTree,
15
+ ComputedDataTypeMap,
16
+ DataFormatterTree } from '../types'
17
+
18
+
19
+ // 所有節點list結構
20
+ export const nodeListObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
21
+ return computedData$.pipe(
22
+ map(data => {
23
+ function setNodeList (accNodeList: ComputedDataTree[], branch: ComputedDataTree) {
24
+ accNodeList.push(branch)
25
+ if (branch.children) {
26
+ branch.children.forEach(childBranch => {
27
+ accNodeList = setNodeList(accNodeList, childBranch) // 遞迴子節點
28
+ })
29
+ }
30
+ return accNodeList
31
+ }
32
+ return setNodeList([], data)
33
+ })
34
+ )
35
+ }
36
+
37
+ export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
38
+ nodeList$: Observable<ComputedDataTree[]>
39
+ fullDataFormatter$: Observable<DataFormatterTree>
40
+ }) => {
41
+
42
+ const categoryLabels$ = fullDataFormatter$.pipe(
43
+ map(d => d.categoryLabels),
44
+ distinctUntilChanged((a, b) => {
45
+ return JSON.stringify(a).length === JSON.stringify(b).length
46
+ }),
47
+ )
48
+
49
+ return combineLatest({
50
+ nodeList: nodeList$,
51
+ categoryLabels: categoryLabels$
52
+ }).pipe(
53
+ switchMap(async d => d),
54
+ map(data => {
55
+ const CurrentLabelSet = new Set(data.categoryLabels)
56
+ const ExistLabelSet = new Set(
57
+ data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
58
+ )
59
+ // 加入已存在的label(data.nodeList有,但是dataFormatter.categoryLabels沒有)
60
+ Array.from(ExistLabelSet).forEach(label => {
61
+ if (!CurrentLabelSet.has(label)) {
62
+ CurrentLabelSet.add(label)
63
+ }
64
+ })
65
+ // 移除不存在的label(dataFormatter.categoryLabels有,但是data.nodeList沒有)
66
+ Array.from(CurrentLabelSet).forEach(label => {
67
+ if (!ExistLabelSet.has(label)) {
68
+ ExistLabelSet.delete(label)
69
+ }
70
+ })
71
+
72
+ return Array.from(CurrentLabelSet)
73
+ }),
74
+ distinctUntilChanged((a, b) => {
75
+ return JSON.stringify(a).length === JSON.stringify(b).length
76
+ }),
77
+ )
78
+ }
79
+
80
+ // 所有可見的節點
81
+ export const treeVisibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTree> }) => {
82
+ return computedData$.pipe(
83
+ map(data => {
84
+ function filterChildren (accTree: ComputedDataTree) {
85
+ if (accTree.children) {
86
+ accTree.children = accTree.children
87
+ .filter(child => child.visible) // 篩選visible
88
+ .map(child => filterChildren(child)) // 遞迴子節點
89
+ }
90
+ return accTree
91
+ }
92
+ return filterChildren(data)
93
+ })
94
+ )
95
95
  }
@@ -1,48 +1,50 @@
1
- import type { ChartParams, ChartParamsPartial } from './ChartParams'
2
- import type { ContextSubject } from './ContextSubject'
3
- import type { ContextObserverFn } from './ContextObserver'
4
- import type { ComputedDataFn } from './ComputedData'
5
- import type { DataFormatterTypeMap, DataFormatterPartialTypeMap } from './DataFormatter'
6
-
7
- export type ChartType = 'series' | 'grid' | 'multiGrid' | 'multiValue' | 'tree' | 'relationship'
8
-
9
- export interface CreateBaseChart {
10
- <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
11
- defaultDataFormatter: DataFormatterTypeMap<T>
12
- computedDataFn: ComputedDataFn<T>
13
- contextObserverFn: ContextObserverFn<T>
14
- }): CreateChart<T>
15
- }
16
-
17
-
18
- export interface CreateChart<T extends ChartType> {
19
- // (element: HTMLElement | Element, pluginParams: any[], chartParams?: Partial<ChartParams>): Chart<T>
20
- (element: HTMLElement | Element, options?: ChartOptionsPartial<T>): ChartEntity<T>
21
- }
22
-
23
- export interface ChartEntity<T extends ChartType> extends ContextSubject<T> {
24
- selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
25
- destroy: () => void
26
- }
27
-
28
- export interface ChartOptions<T extends ChartType> {
29
- preset: Preset<T>
30
- }
31
-
32
- export interface ChartOptionsPartial<T extends ChartType> {
33
- preset?: PresetPartial<T>
34
- }
35
-
36
- export interface Preset<T extends ChartType> {
37
- chartParams: ChartParams
38
- dataFormatter: DataFormatterTypeMap<T>
39
- allPluginParams: {[key: string]: any}
40
- description: string
41
- }
42
-
43
- export interface PresetPartial<T extends ChartType> {
44
- chartParams?: ChartParamsPartial
45
- dataFormatter?: DataFormatterPartialTypeMap<T>
46
- allPluginParams?: {[key: string]: any}
47
- description?: string
48
- }
1
+ import type { ChartParams, ChartParamsPartial } from './ChartParams'
2
+ import type { ContextSubject } from './ContextSubject'
3
+ import type { ContextObserverFn } from './ContextObserver'
4
+ import type { ComputedDataFn } from './ComputedData'
5
+ import type { DataFormatterTypeMap, DataFormatterPartialTypeMap } from './DataFormatter'
6
+
7
+ export type ChartType = 'series' | 'grid' | 'multiGrid' | 'multiValue' | 'tree' | 'relationship'
8
+
9
+ export interface CreateBaseChart {
10
+ <T extends ChartType>({ defaultDataFormatter, computedDataFn, contextObserverFn }: {
11
+ defaultDataFormatter: DataFormatterTypeMap<T>
12
+ computedDataFn: ComputedDataFn<T>
13
+ contextObserverFn: ContextObserverFn<T>
14
+ }): CreateChart<T>
15
+ }
16
+
17
+
18
+ export interface CreateChart<T extends ChartType> {
19
+ // (element: HTMLElement | Element, pluginParams: any[], chartParams?: Partial<ChartParams>): Chart<T>
20
+ (element: HTMLElement | Element, options?: ChartOptionsPartial<T>): ChartEntity<T>
21
+ }
22
+
23
+ export interface ChartEntity<T extends ChartType> extends ContextSubject<T> {
24
+ selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
25
+ destroy: () => void
26
+ }
27
+
28
+ export interface ChartOptions<T extends ChartType> {
29
+ preset: Preset<T, unknown>
30
+ }
31
+
32
+ export interface ChartOptionsPartial<T extends ChartType> {
33
+ preset?: Preset<T, unknown>
34
+ }
35
+
36
+ export interface Preset<T extends ChartType, AllPluginParams> {
37
+ name: string
38
+ description: string
39
+ chartParams: ChartParams
40
+ dataFormatter: DataFormatterTypeMap<T>
41
+ allPluginParams: AllPluginParams
42
+ }
43
+
44
+ export interface PresetPartial<T extends ChartType, AllPluginParams> {
45
+ name?: string
46
+ description?: string
47
+ chartParams?: ChartParamsPartial
48
+ dataFormatter?: DataFormatterPartialTypeMap<T>
49
+ allPluginParams?: AllPluginParams
50
+ }
@@ -1,51 +1,51 @@
1
- import type { Padding } from './Padding'
2
-
3
- export interface ChartParams {
4
- padding: Padding,
5
- highlightTarget: HighlightTarget
6
- highlightDefault: string | null
7
- colorScheme: 'dark' | 'light'
8
- colors: {
9
- light: ColorScheme
10
- dark: ColorScheme
11
- }
12
- styles: Styles
13
- transitionDuration: number
14
- transitionEase: string
15
- // [key: string]: any
16
- }
17
-
18
- export type ChartParamsPartial = Partial<ChartParams | {
19
- padding: Partial<Padding>,
20
- colors: Partial<{
21
- light: Partial<ColorScheme>
22
- dark: Partial<ColorScheme>
23
- }>
24
- styles: Partial<Styles>
25
- }>
26
-
27
- function test (): ChartParamsPartial {
28
- return {
29
- colorScheme: 'dark',
30
- padding: {
31
- top: 10
32
- }
33
- }
34
- }
35
-
36
- export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
37
-
38
- export interface Styles {
39
- textSize: string | number
40
- unhighlightedOpacity: number
41
- }
42
-
43
- export interface ColorScheme {
44
- series: string[]
45
- primary: string
46
- secondary: string
47
- white: string
48
- background: string
49
- }
50
-
51
- export type ColorType = 'none' | keyof ColorScheme
1
+ import type { Padding } from './Padding'
2
+
3
+ export interface ChartParams {
4
+ padding: Padding,
5
+ highlightTarget: HighlightTarget
6
+ highlightDefault: string | null
7
+ colorScheme: 'dark' | 'light'
8
+ colors: {
9
+ light: ColorScheme
10
+ dark: ColorScheme
11
+ }
12
+ styles: Styles
13
+ transitionDuration: number
14
+ transitionEase: string
15
+ // [key: string]: any
16
+ }
17
+
18
+ export type ChartParamsPartial = Partial<ChartParams | {
19
+ padding: Partial<Padding>,
20
+ colors: Partial<{
21
+ light: Partial<ColorScheme>
22
+ dark: Partial<ColorScheme>
23
+ }>
24
+ styles: Partial<Styles>
25
+ }>
26
+
27
+ function test (): ChartParamsPartial {
28
+ return {
29
+ colorScheme: 'dark',
30
+ padding: {
31
+ top: 10
32
+ }
33
+ }
34
+ }
35
+
36
+ export type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none'
37
+
38
+ export interface Styles {
39
+ textSize: string | number
40
+ unhighlightedOpacity: number
41
+ }
42
+
43
+ export interface ColorScheme {
44
+ series: string[]
45
+ primary: string
46
+ secondary: string
47
+ white: string
48
+ background: string
49
+ }
50
+
51
+ export type ColorType = 'none' | keyof ColorScheme