@orbcharts/core 3.0.4 → 3.0.6

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.
@@ -141,160 +141,6 @@ export const computedXYDataObservable = ({ computedData$, xyMinMax$, xyValueInde
141
141
  )
142
142
  }
143
143
 
144
- // export const multiValueAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
145
- // fullDataFormatter$: Observable<DataFormatterTypeMap<'multiValue'>>
146
- // layout$: Observable<Layout>
147
- // }): Observable<TransformData> => {
148
- // const destroy$ = new Subject()
149
-
150
- // function calcAxesTransform ({ xAxis, yAxis, width, height }: {
151
- // xAxis: DataFormatterXYAxis,
152
- // yAxis: DataFormatterXYAxis,
153
- // width: number,
154
- // height: number
155
- // }): TransformData {
156
- // if (!xAxis || !yAxis) {
157
- // return {
158
- // translate: [0, 0],
159
- // scale: [1, 1],
160
- // rotate: 0,
161
- // rotateX: 0,
162
- // rotateY: 0,
163
- // value: ''
164
- // }
165
- // }
166
- // // const width = size.width - fullChartParams.layout.left - fullChartParams.layout.right
167
- // // const height = size.height - fullChartParams.layout.top - fullChartParams.layout.bottom
168
- // let translateX = 0
169
- // let translateY = height
170
- // let rotate = 0
171
- // let rotateX = 180
172
- // let rotateY = 0
173
-
174
- // return {
175
- // translate: [translateX, translateY],
176
- // scale: [1, 1],
177
- // rotate,
178
- // rotateX,
179
- // rotateY,
180
- // value: `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
181
- // }
182
- // }
183
-
184
- // return new Observable(subscriber => {
185
- // combineLatest({
186
- // fullDataFormatter: fullDataFormatter$,
187
- // layout: layout$
188
- // }).pipe(
189
- // takeUntil(destroy$),
190
- // switchMap(async (d) => d),
191
- // ).subscribe(data => {
192
- // const axesTransformData = calcAxesTransform({
193
- // xAxis: data.fullDataFormatter.xAxis,
194
- // yAxis: data.fullDataFormatter.yAxis,
195
- // width: data.layout.width,
196
- // height: data.layout.height
197
- // })
198
-
199
- // subscriber.next(axesTransformData)
200
- // })
201
-
202
- // return function unscbscribe () {
203
- // destroy$.next(undefined)
204
- // }
205
- // })
206
- // }
207
-
208
-
209
- // export const multiValueAxesReverseTransformObservable = ({ multiValueAxesTransform$ }: {
210
- // multiValueAxesTransform$: Observable<TransformData>
211
- // }): Observable<TransformData> => {
212
- // return multiValueAxesTransform$.pipe(
213
- // map(d => {
214
- // // const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
215
- // const translate: [number, number] = [0, 0] // 無需逆轉
216
- // const scale: [number, number] = [1 / d.scale[0], 1 / d.scale[1]]
217
- // const rotate = d.rotate * -1
218
- // const rotateX = d.rotateX * -1
219
- // const rotateY = d.rotateY * -1
220
- // return {
221
- // translate,
222
- // scale,
223
- // rotate,
224
- // rotateX,
225
- // rotateY,
226
- // value: `translate(${translate[0]}px, ${translate[1]}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(${rotate}deg)`
227
- // }
228
- // }),
229
- // )
230
- // }
231
-
232
-
233
-
234
- // export const multiValueAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
235
- // fullDataFormatter$: Observable<DataFormatterMultiValue>
236
- // layout$: Observable<Layout>
237
- // }): Observable<{
238
- // width: number;
239
- // height: number;
240
- // }> => {
241
- // const destroy$ = new Subject()
242
-
243
- // function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
244
- // xAxisPosition: AxisPosition
245
- // yAxisPosition: AxisPosition
246
- // width: number
247
- // height: number
248
- // }) {
249
- // if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
250
- // return { width, height }
251
- // } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
252
- // return {
253
- // width: height,
254
- // height: width
255
- // }
256
- // } else {
257
- // // default
258
- // return { width, height }
259
- // }
260
- // }
261
-
262
- // return new Observable(subscriber => {
263
- // combineLatest({
264
- // fullDataFormatter: fullDataFormatter$,
265
- // layout: layout$
266
- // }).pipe(
267
- // takeUntil(destroy$),
268
- // switchMap(async (d) => d),
269
- // ).subscribe(data => {
270
-
271
- // const axisSize = calcAxesSize({
272
- // xAxisPosition: 'bottom',
273
- // yAxisPosition: 'left',
274
- // width: data.layout.width,
275
- // height: data.layout.height,
276
- // })
277
-
278
- // subscriber.next(axisSize)
279
-
280
- // return function unsubscribe () {
281
- // destroy$.next(undefined)
282
- // }
283
- // })
284
- // })
285
- // }
286
-
287
- // export const highlightObservable = ({ computedData$, fullChartParams$, event$ }: {
288
- // computedData$: Observable<ComputedDataTypeMap<'multiValue'>>
289
- // fullChartParams$: Observable<ChartParams>
290
- // event$: Subject<any>
291
- // }): Observable<string[]> => {
292
- // const datumList$ = computedData$.pipe(
293
- // map(d => d.flat())
294
- // )
295
- // return highlightObservable ({ datumList$, fullChartParams$, event$ })
296
- // }
297
-
298
144
  export const categoryLabelsObservable = ({ computedData$, fullDataFormatter$ }: {
299
145
  computedData$: Observable<ComputedDataTypeMap<'multiValue'>>
300
146
  fullDataFormatter$: Observable<DataFormatterTypeMap<'multiValue'>>
@@ -306,7 +152,7 @@ export const categoryLabelsObservable = ({ computedData$, fullDataFormatter$ }:
306
152
  // .filter(d => d != null && d != '')
307
153
  }),
308
154
  distinctUntilChanged((a, b) => {
309
- return JSON.stringify(a).length === JSON.stringify(b).length
155
+ return JSON.stringify(a) === JSON.stringify(b)
310
156
  }),
311
157
  )
312
158
  }
@@ -533,49 +379,6 @@ export const containerPositionObservable = ({ computedData$, fullDataFormatter$,
533
379
  return containerPosition$
534
380
  }
535
381
 
536
- // export const containerSizeObservable = ({ layout$, containerPosition$ }: {
537
- // layout$: Observable<Layout>
538
- // containerPosition$: Observable<ContainerPositionScaled[]>
539
- // }) => {
540
- // const rowAmount$ = containerPosition$.pipe(
541
- // map(containerPosition => {
542
- // const maxRowIndex = containerPosition.reduce((acc, current) => {
543
- // return current.rowIndex > acc ? current.rowIndex : acc
544
- // }, 0)
545
- // return maxRowIndex + 1
546
- // }),
547
- // distinctUntilChanged(),
548
- // )
549
-
550
- // const columnAmount$ = containerPosition$.pipe(
551
- // map(containerPosition => {
552
- // const maxColumnIndex = containerPosition.reduce((acc, current) => {
553
- // return current.columnIndex > acc ? current.columnIndex : acc
554
- // }, 0)
555
- // return maxColumnIndex + 1
556
- // }),
557
- // distinctUntilChanged()
558
- // )
559
-
560
- // return combineLatest({
561
- // layout: layout$,
562
- // rowAmount: rowAmount$,
563
- // columnAmount: columnAmount$
564
- // }).pipe(
565
- // switchMap(async (d) => d),
566
- // map(data => {
567
- // const width = (data.layout.rootWidth / data.columnAmount) - (data.layout.left + data.layout.right)
568
- // const height = (data.layout.rootHeight / data.rowAmount) - (data.layout.top + data.layout.bottom)
569
- // return {
570
- // width,
571
- // height
572
- // }
573
- // }),
574
- // distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height),
575
- // shareReplay(1)
576
- // )
577
- // }
578
-
579
382
  export const filteredXYMinMaxDataObservable = ({ visibleComputedXYData$, xyMinMax$, xyValueIndex$, fullDataFormatter$ }: {
580
383
  visibleComputedXYData$: Observable<ComputedXYDataMultiValue>
581
384
  xyMinMax$: Observable<{ minX: number, maxX: number, minY: number, maxY: number }>
@@ -660,98 +463,6 @@ export const filteredXYMinMaxDataObservable = ({ visibleComputedXYData$, xyMinMa
660
463
  )
661
464
  }
662
465
 
663
- // export const visibleComputedRankingDataObservable = ({ visibleComputedData$ }: {
664
- // visibleComputedData$: Observable<ComputedDatumMultiValue[][]>
665
- // }) => {
666
- // return visibleComputedData$.pipe(
667
- // map(visibleComputedData => visibleComputedData
668
- // .flat()
669
- // .map(d => {
670
- // // 新增總計資料欄位
671
- // ;(d as any)._sum = d.value.reduce((acc, curr) => acc + curr, 0)
672
- // return d
673
- // })
674
- // .sort((a: any, b: any) => b._sum - a._sum)
675
- // )
676
- // )
677
-
678
- // // const labelAmountLimit$ = combineLatest({
679
- // // layout: layout$,
680
- // // textSizePx: textSizePx$,
681
- // // sortedLabels: sortedLabels$
682
- // // }).pipe(
683
- // // switchMap(async (d) => d),
684
- // // map(data => {
685
- // // const lineHeight = data.textSizePx * 2 // 2倍行高
686
- // // const labelAmountLimit = Math.floor(data.layout.height / lineHeight)
687
- // // return labelAmountLimit
688
- // // }),
689
- // // distinctUntilChanged()
690
- // // )
691
-
692
- // // return combineLatest({
693
- // // sortedLabels: sortedLabels$,
694
- // // labelAmountLimit: labelAmountLimit$
695
- // // }).pipe(
696
- // // map(data => {
697
- // // return data.sortedLabels.slice(0, data.labelAmountLimit)
698
- // // })
699
- // // )
700
-
701
- // }
702
-
703
- // export const rankingAmountLimitObservable = ({ layout$, textSizePx$ }: {
704
- // layout$: Observable<Layout>
705
- // textSizePx$: Observable<number>
706
- // }) => {
707
- // return combineLatest({
708
- // layout: layout$,
709
- // textSizePx: textSizePx$
710
- // }).pipe(
711
- // switchMap(async (d) => d),
712
- // map(data => {
713
- // const lineHeight = data.textSizePx * 2 // 2倍行高
714
- // const labelAmountLimit = Math.floor(data.layout.height / lineHeight)
715
- // return labelAmountLimit
716
- // }),
717
- // distinctUntilChanged()
718
- // )
719
- // }
720
-
721
- // export const rankingScaleObservable = ({ layout$, visibleComputedRankingData$, rankingAmountLimit$ }: {
722
- // layout$: Observable<Layout>
723
- // visibleComputedRankingData$: Observable<ComputedDatumMultiValue[]>
724
- // rankingAmountLimit$: Observable<number>
725
- // }) => {
726
- // return combineLatest({
727
- // layout: layout$,
728
- // rankingAmountLimit: rankingAmountLimit$,
729
- // visibleComputedRankingData: visibleComputedRankingData$,
730
- // }).pipe(
731
- // switchMap(async (d) => d),
732
- // map(data => {
733
- // let labelAmount = 0
734
- // let lineHeight = 0
735
- // let totalHeight = 0
736
- // if (data.visibleComputedRankingData.length > data.rankingAmountLimit) {
737
- // labelAmount = data.rankingAmountLimit
738
- // lineHeight = data.layout.height / labelAmount
739
- // totalHeight = lineHeight * labelAmount // 用全部的數量來算而不是要顯示的數量(要超出圖軸高度)
740
- // } else {
741
- // labelAmount = data.visibleComputedRankingData.length
742
- // lineHeight = data.layout.height / labelAmount
743
- // totalHeight = data.layout.height
744
- // }
745
-
746
- // return createLabelToAxisScale({
747
- // axisLabels: data.visibleComputedRankingData.map(d => d.label),
748
- // axisWidth: totalHeight,
749
- // padding: 0.5
750
- // })
751
- // })
752
- // )
753
- // }
754
-
755
466
  export const graphicTransformObservable = ({ xyMinMax$, xyValueIndex$, filteredXYMinMaxData$, fullDataFormatter$, layout$ }: {
756
467
  xyMinMax$: Observable<{ minX: number, maxX: number, minY: number, maxY: number }>
757
468
  xyValueIndex$: Observable<[number, number]>
@@ -1017,53 +728,6 @@ export const xScaleObservable = ({ visibleComputedSumData$, fullDataFormatter$,
1017
728
  )
1018
729
  }
1019
730
 
1020
- // X 軸圖軸 - 用所有 valueIndex 加總資料
1021
- // export const xSumScaleObservable = ({ fullDataFormatter$, filteredXYMinMaxData$, containerSize$ }: {
1022
- // // valueIndex$: Observable<number>
1023
- // fullDataFormatter$: Observable<DataFormatterMultiValue>
1024
- // filteredXYMinMaxData$: Observable<{
1025
- // minXDatum: ComputedXYDatumMultiValue
1026
- // maxXDatum: ComputedXYDatumMultiValue
1027
- // minYDatum: ComputedXYDatumMultiValue
1028
- // maxYDatum: ComputedXYDatumMultiValue
1029
- // }>
1030
- // // layout$: Observable<Layout>
1031
- // containerSize$: Observable<ContainerSize>
1032
- // }) => {
1033
- // return combineLatest({
1034
- // // valueIndex: valueIndex$,
1035
- // fullDataFormatter: fullDataFormatter$,
1036
- // containerSize: containerSize$,
1037
- // // xyMinMax: xyMinMax$
1038
- // filteredXYMinMaxData: filteredXYMinMaxData$
1039
- // }).pipe(
1040
- // switchMap(async (d) => d),
1041
- // map(data => {
1042
- // const valueIndex = data.fullDataFormatter.xAxis.valueIndex
1043
- // if (!data.filteredXYMinMaxData.minXDatum || !data.filteredXYMinMaxData.maxXDatum
1044
- // // || data.filteredXYMinMaxData.minXDatum.value[valueIndex] == null || data.filteredXYMinMaxData.maxXDatum.value[valueIndex] == null
1045
- // ) {
1046
- // return
1047
- // }
1048
- // let maxValue: number | null = data.filteredXYMinMaxData.maxXDatum.value[valueIndex]
1049
- // let minValue: number | null = data.filteredXYMinMaxData.minXDatum.value[valueIndex]
1050
- // if (maxValue === minValue && maxValue === 0) {
1051
- // // 避免最大及最小值同等於 0 造成無法計算scale
1052
- // maxValue = 1
1053
- // }
1054
-
1055
- // const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
1056
- // maxValue,
1057
- // minValue,
1058
- // axisWidth: data.containerSize.width,
1059
- // scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
1060
- // scaleRange: data.fullDataFormatter.xAxis.scaleRange,
1061
- // })
1062
- // return xScale
1063
- // })
1064
- // )
1065
- // }
1066
-
1067
731
  export const yScaleObservable = ({ fullDataFormatter$, filteredXYMinMaxData$, containerSize$ }: {
1068
732
  fullDataFormatter$: Observable<DataFormatterMultiValue>
1069
733
  filteredXYMinMaxData$: Observable<{
@@ -1199,21 +863,3 @@ export const ordinalScaleObservable = ({ ordinalScaleDomain$, computedData$, con
1199
863
  })
1200
864
  )
1201
865
  }
1202
-
1203
- // export const valueLabelsObservable = ({ fullDataFormatter$, computedData$ }: {
1204
- // fullDataFormatter$: Observable<DataFormatterMultiValue>
1205
- // computedData$: Observable<ComputedDataTypeMap<'multiValue'>>
1206
- // }) => {
1207
- // return combineLatest({
1208
- // fullDataFormatter: fullDataFormatter$,
1209
- // computedData: computedData$
1210
- // }).pipe(
1211
- // switchMap(async (d) => d),
1212
- // map(data => {
1213
- // const valueLabels = data.computedData[0] && data.computedData[0][0] && data.computedData[0][0].value.length
1214
- // ? data.computedData[0][0].value.map((d, i) => data.fullDataFormatter.valueLabels[i] ?? String(i)) // 預設為 0, 1, 2, 3...
1215
- // : []
1216
- // return valueLabels
1217
- // })
1218
- // )
1219
- // }
@@ -31,7 +31,7 @@ export const categoryLabelsObservable = (
31
31
  return [...Array.from(data.CategoryNodeMap.keys()), ...Array.from(data.CategoryEdgeMap.keys())]
32
32
  }),
33
33
  distinctUntilChanged((a, b) => {
34
- return JSON.stringify(a).length === JSON.stringify(b).length
34
+ return JSON.stringify(a) === JSON.stringify(b)
35
35
  }),
36
36
  )
37
37
  }
@@ -1,4 +1,4 @@
1
- import { map, shareReplay } from 'rxjs'
1
+ import { map, share, shareReplay } from 'rxjs'
2
2
  import type { ContextObserverCallback } from '../../lib/core-types'
3
3
  import {
4
4
  seriesDataMapObservable,
@@ -6,12 +6,15 @@ import {
6
6
  import { highlightObservable, textSizePxObservable } from '../utils/observables'
7
7
 
8
8
  import {
9
+ datumLabelsObservable,
9
10
  separateSeriesObservable,
11
+ separateLabelObservable,
12
+ sumSeriesObservable,
10
13
  seriesVisibleComputedDataObservable,
11
14
  seriesComputedSortedDataObservable,
12
15
  seriesLabelsObservable,
13
16
  seriesContainerPositionObservable,
14
- seriesContainerPositionMapObservable
17
+ datumContainerPositionMapObservable
15
18
  } from './seriesObservables'
16
19
 
17
20
  export const contextObserverCallback: ContextObserverCallback<'series'> = ({ subject, observer }) => {
@@ -20,21 +23,42 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
20
23
  shareReplay(1)
21
24
  )
22
25
 
26
+ const datumLabels$ = datumLabelsObservable({
27
+ computedData$: observer.computedData$
28
+ }).pipe(
29
+ shareReplay(1)
30
+ )
31
+
23
32
  const separateSeries$ = separateSeriesObservable({
24
33
  fullDataFormatter$: observer.fullDataFormatter$
25
34
  }).pipe(
26
35
  shareReplay(1)
27
36
  )
28
37
 
29
- const visibleComputedData$ = seriesVisibleComputedDataObservable({
30
- computedData$: observer.computedData$,
38
+ const separateLabel$ = separateLabelObservable({
39
+ fullDataFormatter$: observer.fullDataFormatter$
40
+ }).pipe(
41
+ shareReplay(1)
42
+ )
43
+
44
+ const sumSeries$ = sumSeriesObservable({
45
+ fullDataFormatter$: observer.fullDataFormatter$
31
46
  }).pipe(
32
47
  shareReplay(1)
33
48
  )
34
49
 
50
+ // const visibleComputedData$ = seriesVisibleComputedDataObservable({
51
+ // computedData$: observer.computedData$,
52
+ // }).pipe(
53
+ // shareReplay(1)
54
+ // )
55
+
35
56
  const computedSortedData$ = seriesComputedSortedDataObservable({
36
57
  computedData$: observer.computedData$,
37
- fullDataFormatter$: observer.fullDataFormatter$
58
+ separateSeries$: separateSeries$,
59
+ separateLabel$: separateLabel$,
60
+ sumSeries$: sumSeries$,
61
+ datumLabels$: datumLabels$,
38
62
  }).pipe(
39
63
  shareReplay(1)
40
64
  )
@@ -72,17 +96,16 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
72
96
  )
73
97
 
74
98
  const seriesContainerPosition$ = seriesContainerPositionObservable({
75
- computedData$: observer.computedData$,
99
+ computedSortedData$: computedSortedData$,
76
100
  fullDataFormatter$: observer.fullDataFormatter$,
77
101
  layout$: observer.layout$,
78
102
  }).pipe(
79
103
  shareReplay(1)
80
104
  )
81
105
 
82
- const SeriesContainerPositionMap$ = seriesContainerPositionMapObservable({
106
+ const DatumContainerPositionMap$ = datumContainerPositionMapObservable({
83
107
  seriesContainerPosition$: seriesContainerPosition$,
84
- seriesLabels$: seriesLabels$,
85
- separateSeries$: separateSeries$,
108
+ computedSortedData$: computedSortedData$,
86
109
  }).pipe(
87
110
  shareReplay(1)
88
111
  )
@@ -94,14 +117,16 @@ export const contextObserverCallback: ContextObserverCallback<'series'> = ({ sub
94
117
  computedData$: observer.computedData$,
95
118
  layout$: observer.layout$,
96
119
  textSizePx$,
97
- visibleComputedData$,
120
+ // visibleComputedData$,
98
121
  visibleComputedSortedData$,
99
122
  separateSeries$,
123
+ separateLabel$,
124
+ sumSeries$,
100
125
  computedSortedData$,
101
126
  seriesHighlight$,
102
127
  seriesLabels$,
103
128
  SeriesDataMap$,
104
129
  seriesContainerPosition$,
105
- SeriesContainerPositionMap$,
130
+ DatumContainerPositionMap$,
106
131
  }
107
132
  }