@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

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 (80) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +10246 -9523
  2. package/dist/orbcharts-plugins-basic.umd.js +10 -10
  3. package/dist/src/base/BaseBarStack.d.ts +5 -1
  4. package/dist/src/base/BaseBars.d.ts +5 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
  6. package/dist/src/base/BaseDots.d.ts +33 -0
  7. package/dist/src/base/BaseGroupAxis.d.ts +35 -0
  8. package/dist/src/base/BaseLines.d.ts +3 -1
  9. package/dist/src/base/BaseValueAxis.d.ts +36 -0
  10. package/dist/src/grid/defaults.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +18 -4
  12. package/dist/src/grid/index.d.ts +1 -1
  13. package/dist/src/grid/plugins/Dots.d.ts +1 -3
  14. package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
  15. package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
  16. package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
  17. package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
  18. package/dist/src/grid/types.d.ts +1 -1
  19. package/dist/src/multiGrid/defaults.d.ts +9 -2
  20. package/dist/src/multiGrid/index.d.ts +8 -1
  21. package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
  22. package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
  23. package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
  24. package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
  25. package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
  26. package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
  27. package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
  28. package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
  29. package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
  30. package/dist/src/multiGrid/types.d.ts +31 -0
  31. package/package.json +2 -2
  32. package/src/base/BaseBarStack.ts +375 -198
  33. package/src/base/BaseBars.ts +297 -191
  34. package/src/base/BaseBarsTriangle.ts +344 -229
  35. package/src/base/BaseDots.ts +634 -0
  36. package/src/base/BaseGroupAxis.ts +497 -0
  37. package/src/base/BaseLines.ts +180 -50
  38. package/src/base/BaseValueAxis.ts +475 -0
  39. package/src/grid/defaults.ts +3 -3
  40. package/src/grid/gridObservables.ts +147 -14
  41. package/src/grid/index.ts +1 -1
  42. package/src/grid/plugins/BarStack.ts +4 -0
  43. package/src/grid/plugins/Bars.ts +4 -0
  44. package/src/grid/plugins/BarsTriangle.ts +4 -0
  45. package/src/grid/plugins/Dots.ts +19 -410
  46. package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
  47. package/src/grid/plugins/GroupAxis.ts +16 -348
  48. package/src/grid/plugins/Lines.ts +2 -0
  49. package/src/grid/plugins/ScalingArea.ts +9 -6
  50. package/src/grid/plugins/ValueAxis.ts +13 -337
  51. package/src/grid/plugins/ValueStackAxis.ts +35 -336
  52. package/src/grid/types.ts +1 -1
  53. package/src/index.ts +1 -0
  54. package/src/multiGrid/defaults.ts +120 -14
  55. package/src/multiGrid/index.ts +9 -2
  56. package/src/multiGrid/multiGridObservables.ts +279 -0
  57. package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
  58. package/src/multiGrid/plugins/MultiBars.ts +59 -0
  59. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
  60. package/src/multiGrid/plugins/MultiDots.ts +58 -0
  61. package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
  62. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
  63. package/src/multiGrid/plugins/MultiLines.ts +58 -0
  64. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
  65. package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
  66. package/src/multiGrid/types.ts +39 -0
  67. package/tsconfig.dev.json +17 -0
  68. package/tsconfig.prod.json +14 -0
  69. package/vite.config.js +5 -0
  70. package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
  71. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
  72. package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
  73. package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
  74. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  75. package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
  76. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  77. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  78. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  79. /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
  80. /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
@@ -1,15 +1,148 @@
1
- import { Observable, Subject, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
1
+ import * as d3 from 'd3'
2
+ import { Observable, Subject, of, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
2
3
  import type {
3
4
  ChartParams,
4
5
  HighlightTarget,
5
6
  DataFormatterGrid,
6
7
  ComputedDataGrid,
7
8
  ComputedDatumGrid,
9
+ TransformData,
10
+ ContainerPosition,
8
11
  Layout } from '@orbcharts/core'
9
12
  import { createAxisQuantizeScale } from '@orbcharts/core'
13
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
14
+
15
+ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existedSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
16
+ selection: d3.Selection<any, unknown, any, unknown>
17
+ pluginName: string
18
+ clipPathID: string
19
+ // computedData$: Observable<ComputedDataGrid>
20
+ existedSeriesLabels$: Observable<string[]>
21
+ gridContainer$: Observable<ContainerPosition[]>
22
+ gridAxesTransform$: Observable<TransformData>
23
+ gridGraphicTransform$: Observable<TransformData>
24
+ }) => {
25
+ const seriesClassName = getClassName(pluginName, 'series')
26
+ const axesClassName = getClassName(pluginName, 'axes')
27
+ const graphicClassName = getClassName(pluginName, 'graphic')
28
+
29
+ const seriesSelection$ = existedSeriesLabels$.pipe(
30
+ map((existedSeriesLabels, i) => {
31
+ return selection
32
+ .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
33
+ .data(existedSeriesLabels, d => d)
34
+ .join(
35
+ enter => {
36
+ return enter
37
+ .append('g')
38
+ .classed(seriesClassName, true)
39
+ .each((d, i, g) => {
40
+ const axesSelection = d3.select(g[i])
41
+ .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
42
+ .data([i])
43
+ .join(
44
+ enter => {
45
+ return enter
46
+ .append('g')
47
+ .classed(axesClassName, true)
48
+ .attr('clip-path', `url(#${clipPathID})`)
49
+ .each((d, i, g) => {
50
+ const defsSelection = d3.select(g[i])
51
+ .selectAll<SVGDefsElement, any>('defs')
52
+ .data([i])
53
+ .join('defs')
54
+
55
+ const graphicGSelection = d3.select(g[i])
56
+ .selectAll<SVGGElement, any>('g')
57
+ .data([i])
58
+ .join('g')
59
+ .classed(graphicClassName, true)
60
+ })
61
+ },
62
+ update => update,
63
+ exit => exit.remove()
64
+ )
65
+ })
66
+ },
67
+ update => update,
68
+ exit => exit.remove()
69
+ )
70
+ }),
71
+ switchMap(selection => combineLatest({
72
+ seriesSelection: of(selection),
73
+ gridContainer: gridContainer$
74
+ })),
75
+ map(data => {
76
+ data.seriesSelection
77
+ .transition()
78
+ .attr('transform', (d, i) => {
79
+ const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
80
+ const translate = gridContainer.translate
81
+ const scale = gridContainer.scale
82
+ return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
83
+ })
84
+ return data.seriesSelection
85
+ })
86
+ )
87
+
88
+ // combineLatest({
89
+ // seriesSelection: seriesSelection$,
90
+ // gridContainer: gridContainer$
91
+ // }).pipe(
92
+ // switchMap(async d => d)
93
+ // ).subscribe(data => {
94
+ // data.seriesSelection
95
+ // .transition()
96
+ // .attr('transform', (d, i) => {
97
+ // const translate = data.gridContainer[i].translate
98
+ // const scale = data.gridContainer[i].scale
99
+ // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
100
+ // })
101
+ // })
102
+
103
+
104
+ const axesSelection$ = combineLatest({
105
+ seriesSelection: seriesSelection$,
106
+ gridAxesTransform: gridAxesTransform$
107
+ }).pipe(
108
+ switchMap(async d => d),
109
+ map(data => {
110
+ return data.seriesSelection
111
+ .select<SVGGElement>(`g.${axesClassName}`)
112
+ .style('transform', data.gridAxesTransform.value)
113
+ })
114
+ )
115
+ const defsSelection$ = axesSelection$.pipe(
116
+ map(axesSelection => {
117
+ return axesSelection.select<SVGDefsElement>('defs')
118
+ })
119
+ )
120
+ const graphicGSelection$ = combineLatest({
121
+ axesSelection: axesSelection$,
122
+ gridGraphicTransform: gridGraphicTransform$
123
+ }).pipe(
124
+ switchMap(async d => d),
125
+ map(data => {
126
+ const graphicGSelection = data.axesSelection
127
+ .select<SVGGElement>(`g.${graphicClassName}`)
128
+ graphicGSelection
129
+ .transition()
130
+ .duration(50)
131
+ .style('transform', data.gridGraphicTransform.value)
132
+ return graphicGSelection
133
+ })
134
+ )
135
+
136
+ return {
137
+ seriesSelection$,
138
+ axesSelection$,
139
+ defsSelection$,
140
+ graphicGSelection$
141
+ }
142
+ }
10
143
 
11
144
  // 由事件取得group data的function
12
- export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
145
+ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
13
146
  fullDataFormatter$: Observable<DataFormatterGrid>
14
147
  gridAxesSize$: Observable<{
15
148
  width: number;
@@ -18,7 +151,7 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
18
151
  computedData$: Observable<ComputedDataGrid>
19
152
  // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
20
153
  fullChartParams$: Observable<ChartParams>
21
- }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> {
154
+ }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
22
155
  const destroy$ = new Subject()
23
156
 
24
157
  // 顯示範圍內的group labels
@@ -33,18 +166,18 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
33
166
  ).subscribe(data => {
34
167
  const groupMin = 0
35
168
  const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
36
- const groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0] === 'auto'
37
- ? groupMin - data.dataFormatter.groupAxis.scalePadding
38
- : data.dataFormatter.groupAxis.scaleDomain[0] as number - data.dataFormatter.groupAxis.scalePadding
39
- const groupScaleDomainMax = data.dataFormatter.groupAxis.scaleDomain[1] === 'auto'
40
- ? groupMax + data.dataFormatter.groupAxis.scalePadding
41
- : data.dataFormatter.groupAxis.scaleDomain[1] as number + data.dataFormatter.groupAxis.scalePadding
169
+ const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
170
+ ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
171
+ : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
172
+ const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
173
+ ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
174
+ : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
42
175
 
43
176
  // const groupingAmount = data.computedData[0]
44
177
  // ? data.computedData[0].length
45
178
  // : 0
46
179
 
47
- let _labels = data.dataFormatter.grid.seriesType === 'row'
180
+ let _labels = data.dataFormatter.grid.gridData.seriesDirection === 'row'
48
181
  ? (data.computedData[0] ?? []).map(d => d.groupLabel)
49
182
  : data.computedData.map(d => d[0].groupLabel)
50
183
 
@@ -75,8 +208,8 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
75
208
  switchMap(async (d) => d),
76
209
  ).subscribe(data => {
77
210
 
78
- const reverse = data.dataFormatter.valueAxis.position === 'right'
79
- || data.dataFormatter.valueAxis.position === 'bottom'
211
+ const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
212
+ || data.dataFormatter.grid.valueAxis.position === 'bottom'
80
213
  ? true : false
81
214
 
82
215
  // 比例尺座標對應非連續資料索引
@@ -88,8 +221,8 @@ export function gridGroupPositionFnObservable ({ fullDataFormatter$, gridAxesSiz
88
221
 
89
222
  // 依比例尺位置計算座標
90
223
  const axisValuePredicate = (event: any) => {
91
- return data.dataFormatter.groupAxis.position === 'bottom'
92
- || data.dataFormatter.groupAxis.position === 'top'
224
+ return data.dataFormatter.grid.groupAxis.position === 'bottom'
225
+ || data.dataFormatter.grid.groupAxis.position === 'top'
93
226
  ? event.offsetX - data.fullChartParams.padding.left
94
227
  : event.offsetY - data.fullChartParams.padding.top
95
228
  }
package/src/grid/index.ts CHANGED
@@ -10,4 +10,4 @@ export { GroupAxis } from './plugins/GroupAxis'
10
10
  export { ValueAxis } from './plugins/ValueAxis'
11
11
  export { ValueStackAxis } from './plugins/ValueStackAxis'
12
12
  export { ScalingArea } from './plugins/ScalingArea'
13
- export { GroupArea } from './plugins/GroupArea'
13
+ export { GroupAux } from './plugins/GroupAux'
@@ -15,6 +15,7 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
15
15
  selection,
16
16
  computedData$: observer.computedData$,
17
17
  visibleComputedData$: observer.visibleComputedData$,
18
+ existedSeriesLabels$: observer.existedSeriesLabels$,
18
19
  SeriesDataMap$: observer.SeriesDataMap$,
19
20
  GroupDataMap$: observer.GroupDataMap$,
20
21
  fullParams$: observer.fullParams$,
@@ -22,8 +23,11 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
22
23
  fullChartParams$: observer.fullChartParams$,
23
24
  gridAxesTransform$: observer.gridAxesTransform$,
24
25
  gridGraphicTransform$: observer.gridGraphicTransform$,
26
+ gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
25
27
  gridAxesSize$: observer.gridAxesSize$,
26
28
  gridHighlight$: observer.gridHighlight$,
29
+ gridContainer$: observer.gridContainer$,
30
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
27
31
  event$: subject.event$,
28
32
  })
29
33
 
@@ -15,14 +15,18 @@ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selecti
15
15
  selection,
16
16
  computedData$: observer.computedData$,
17
17
  visibleComputedData$: observer.visibleComputedData$,
18
+ existedSeriesLabels$: observer.existedSeriesLabels$,
18
19
  SeriesDataMap$: observer.SeriesDataMap$,
19
20
  GroupDataMap$: observer.GroupDataMap$,
20
21
  fullParams$: observer.fullParams$,
21
22
  fullChartParams$: observer.fullChartParams$,
22
23
  gridAxesTransform$: observer.gridAxesTransform$,
23
24
  gridGraphicTransform$: observer.gridGraphicTransform$,
25
+ gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
24
26
  gridAxesSize$: observer.gridAxesSize$,
25
27
  gridHighlight$: observer.gridHighlight$,
28
+ gridContainer$: observer.gridContainer$,
29
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
26
30
  event$: subject.event$,
27
31
  })
28
32
 
@@ -13,6 +13,8 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
13
13
  const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {
14
14
  selection,
15
15
  computedData$: observer.computedData$,
16
+ visibleComputedData$: observer.visibleComputedData$,
17
+ existedSeriesLabels$: observer.existedSeriesLabels$,
16
18
  SeriesDataMap$: observer.SeriesDataMap$,
17
19
  GroupDataMap$: observer.GroupDataMap$,
18
20
  fullParams$: observer.fullParams$,
@@ -21,6 +23,8 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
21
23
  gridGraphicTransform$: observer.gridGraphicTransform$,
22
24
  gridAxesSize$: observer.gridAxesSize$,
23
25
  gridHighlight$: observer.gridHighlight$,
26
+ gridContainer$: observer.gridContainer$,
27
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
24
28
  event$: subject.event$,
25
29
  })
26
30