@orbcharts/plugins-basic 3.0.0-alpha.66 → 3.0.0-alpha.68
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.
- package/dist/orbcharts-plugins-basic.es.js +2098 -2084
- package/dist/orbcharts-plugins-basic.umd.js +14 -14
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +5 -4
- package/src/base/BaseGroupAxis.ts +7 -7
- package/src/base/BaseValueAxis.ts +5 -4
- package/src/grid/gridObservables.ts +10 -8
- package/src/grid/plugins/GroupAux.ts +22 -10
- package/src/grid/plugins/ScalingArea.ts +5 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orbcharts/plugins-basic",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.68",
|
|
4
4
|
"description": "plugins for OrbCharts",
|
|
5
5
|
"author": "Blue Planet Inc.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"vite-plugin-dts": "^3.7.3"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@orbcharts/core": "^3.0.0-alpha.
|
|
38
|
+
"@orbcharts/core": "^3.0.0-alpha.61",
|
|
39
39
|
"d3": "^7.8.5",
|
|
40
40
|
"rxjs": "^7.8.1"
|
|
41
41
|
}
|
package/src/base/BaseBarStack.ts
CHANGED
|
@@ -485,10 +485,11 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
|
485
485
|
map(data => {
|
|
486
486
|
const groupMin = 0
|
|
487
487
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
488
|
-
const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
const
|
|
488
|
+
// const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
489
|
+
// ? groupMin // - data.dataFormatter.grid.groupAxis.scalePadding
|
|
490
|
+
// : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number // - data.dataFormatter.grid.groupAxis.scalePadding
|
|
491
|
+
const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0]
|
|
492
|
+
const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
492
493
|
? groupMax // + data.dataFormatter.grid.groupAxis.scalePadding
|
|
493
494
|
: data.dataFormatter.grid.groupAxis.scaleDomain[1] as number // + data.dataFormatter.grid.groupAxis.scalePadding
|
|
494
495
|
|
|
@@ -10,7 +10,6 @@ import {
|
|
|
10
10
|
shareReplay,
|
|
11
11
|
Observable,
|
|
12
12
|
Subject } from 'rxjs'
|
|
13
|
-
import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
|
|
14
13
|
import type { ColorType, ComputedDataGrid, GridContainerPosition } from '@orbcharts/core'
|
|
15
14
|
import type { BasePluginFn } from './types'
|
|
16
15
|
import type {
|
|
@@ -216,11 +215,11 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
|
|
|
216
215
|
// 先等transition結束再處理文字，否則會被原本的文字覆蓋
|
|
217
216
|
xAxisEl
|
|
218
217
|
.selectAll('.tick text')
|
|
219
|
-
.each((
|
|
218
|
+
.each((groupIndex: number, i, n) => {
|
|
220
219
|
// -- 將原本單行文字改為多行文字 --
|
|
221
220
|
const groupLabel = groupLabels[groupIndex] ?? '' // 非整數index不顯示
|
|
222
221
|
const groupLabelTspans = groupLabel.split('\n')
|
|
223
|
-
const textSelection = d3.select(n[
|
|
222
|
+
const textSelection = d3.select(n[i])
|
|
224
223
|
.text(null) // 先清空原本的 text
|
|
225
224
|
|
|
226
225
|
const textX = Number(textSelection.attr('x'))
|
|
@@ -505,10 +504,11 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
|
|
|
505
504
|
map(data => {
|
|
506
505
|
const groupMin = 0
|
|
507
506
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
508
|
-
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
const
|
|
507
|
+
// const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
508
|
+
// ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
509
|
+
// : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
510
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
511
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
512
512
|
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
513
513
|
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
514
514
|
|
|
@@ -419,10 +419,11 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
|
|
|
419
419
|
).subscribe(data => {
|
|
420
420
|
const groupMin = 0
|
|
421
421
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
422
|
-
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
const
|
|
422
|
+
// const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
423
|
+
// ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
424
|
+
// : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
425
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
426
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
426
427
|
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
427
428
|
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
428
429
|
|
|
@@ -209,10 +209,11 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
|
|
|
209
209
|
map(data => {
|
|
210
210
|
const groupMin = 0
|
|
211
211
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
212
|
-
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
const
|
|
212
|
+
// const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
213
|
+
// ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
214
|
+
// : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
215
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
216
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
216
217
|
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
217
218
|
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
218
219
|
|
|
@@ -352,10 +353,11 @@ export const gridGroupPosition = ({ rootSelection, fullDataFormatter$, gridAxesS
|
|
|
352
353
|
map(data => {
|
|
353
354
|
const groupMin = 0
|
|
354
355
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
355
|
-
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
const
|
|
356
|
+
// const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
357
|
+
// ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
358
|
+
// : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
359
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
360
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
359
361
|
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
360
362
|
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
361
363
|
|
|
@@ -194,7 +194,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
|
|
|
194
194
|
.attr('height', `${rectHeight}px`)
|
|
195
195
|
.attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
|
|
196
196
|
.attr('x', rectX)
|
|
197
|
-
.attr('y', rectY -
|
|
197
|
+
.attr('y', rectY - 3) // 奇怪的偏移修正
|
|
198
198
|
.attr('rx', 5)
|
|
199
199
|
.attr('ry', 5)
|
|
200
200
|
.style('cursor', 'pointer')
|
|
@@ -256,7 +256,18 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
256
256
|
selection,
|
|
257
257
|
pluginName,
|
|
258
258
|
clipPathID: 'test',
|
|
259
|
-
seriesLabels$: observer.
|
|
259
|
+
seriesLabels$: observer.isSeriesSeprate$.pipe(
|
|
260
|
+
switchMap(isSeriesSeprate => {
|
|
261
|
+
return iif(
|
|
262
|
+
() => isSeriesSeprate,
|
|
263
|
+
observer.seriesLabels$,
|
|
264
|
+
// 如果沒分開的話只取一筆
|
|
265
|
+
observer.seriesLabels$.pipe(
|
|
266
|
+
map(d => [d[0]])
|
|
267
|
+
)
|
|
268
|
+
)
|
|
269
|
+
})
|
|
270
|
+
),
|
|
260
271
|
gridContainerPosition$: observer.gridContainerPosition$,
|
|
261
272
|
gridAxesTransform$: observer.gridAxesTransform$,
|
|
262
273
|
gridGraphicTransform$: observer.gridGraphicTransform$
|
|
@@ -417,10 +428,11 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
417
428
|
map(data => {
|
|
418
429
|
const groupMin = 0
|
|
419
430
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
|
420
|
-
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
const
|
|
431
|
+
// const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
|
432
|
+
// ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
433
|
+
// : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
434
|
+
const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
435
|
+
const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
|
|
424
436
|
? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
425
437
|
: data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
|
|
426
438
|
|
|
@@ -574,7 +586,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
574
586
|
takeUntil(destroy$),
|
|
575
587
|
)
|
|
576
588
|
|
|
577
|
-
|
|
578
589
|
// const mousemoveGroupLabel$ = combineLatest({
|
|
579
590
|
// rootMousemove: rootMousemove$,
|
|
580
591
|
// gridGroupPositionFn: gridGroupPositionFn$,
|
|
@@ -671,7 +682,10 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
671
682
|
textReverseTransformWithRotate: textReverseTransformWithRotate$,
|
|
672
683
|
GroupDataMap: observer.GroupDataMap$,
|
|
673
684
|
textSizePx: observer.textSizePx$
|
|
674
|
-
}).
|
|
685
|
+
}).pipe(
|
|
686
|
+
takeUntil(destroy$),
|
|
687
|
+
switchMap(async d => d),
|
|
688
|
+
).subscribe(data => {
|
|
675
689
|
// // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
|
|
676
690
|
// const eventData = {
|
|
677
691
|
// offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
|
|
@@ -953,7 +967,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
953
967
|
takeUntil(destroy$),
|
|
954
968
|
)
|
|
955
969
|
|
|
956
|
-
|
|
957
970
|
combineLatest({
|
|
958
971
|
rootRectMouseout: rootRectMouseout$,
|
|
959
972
|
axesSelection: axesSelection$,
|
|
@@ -961,7 +974,6 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
|
961
974
|
takeUntil(destroy$),
|
|
962
975
|
switchMap(async d => d)
|
|
963
976
|
).subscribe(data => {
|
|
964
|
-
|
|
965
977
|
setTimeout(() => {
|
|
966
978
|
// @Q@ workaround - 不知為何和 label 會有衝突，當滑鼠移動到 label 上時，會觸發 mouseout 事件
|
|
967
979
|
if (isLabelMouseover == true) {
|
|
@@ -80,10 +80,11 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
|
|
|
80
80
|
).subscribe(data => {
|
|
81
81
|
const groupMin = 0
|
|
82
82
|
const groupMax = data.groupMaxIndex
|
|
83
|
-
const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === '
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
const
|
|
83
|
+
// const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'min'
|
|
84
|
+
// ? groupMin - data.initGroupAxis.scalePadding
|
|
85
|
+
// : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
|
|
86
|
+
const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
|
|
87
|
+
const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
|
|
87
88
|
? groupMax + data.initGroupAxis.scalePadding
|
|
88
89
|
: data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
|
|
89
90
|
|