@orbcharts/plugins-basic 3.0.0-alpha.62 → 3.0.0-alpha.64
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 +6117 -6067
- package/dist/orbcharts-plugins-basic.umd.js +10 -10
- package/package.json +2 -2
- package/src/base/BaseGroupAxis.ts +141 -62
- package/src/base/BaseLegend.ts +1 -0
- package/src/base/BaseValueAxis.ts +142 -45
- package/src/grid/defaults.ts +1 -1
- package/src/grid/plugins/GroupAux.ts +31 -28
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +3 -0
- package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +1 -0
@@ -129,17 +129,17 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
|
|
129
129
|
: []
|
130
130
|
}
|
131
131
|
|
132
|
-
function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, fullChartParams,
|
132
|
+
function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, fullChartParams, textReverseTransformWithRotate, textSizePx }: {
|
133
133
|
selection: d3.Selection<any, string, any, unknown>
|
134
134
|
labelData: LabelDatum[]
|
135
135
|
fullParams: GroupAuxParams
|
136
136
|
fullDataFormatter: DataFormatterGrid
|
137
137
|
fullChartParams: ChartParams
|
138
138
|
// gridAxesReverseTransformValue: string
|
139
|
-
|
139
|
+
textReverseTransformWithRotate: string
|
140
140
|
textSizePx: number
|
141
141
|
}) {
|
142
|
-
const rectHeight = textSizePx +
|
142
|
+
const rectHeight = textSizePx + 6
|
143
143
|
|
144
144
|
const gUpdate = selection
|
145
145
|
.selectAll<SVGGElement, LabelDatum>(`g.${labelClassName}`)
|
@@ -169,7 +169,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
|
|
169
169
|
let rectY = -2
|
170
170
|
if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
|
171
171
|
rectX = fullParams.labelRotate
|
172
|
-
? - rectWidth
|
172
|
+
? - rectWidth + rectHeight // 有傾斜時以末端對齊(+height是為了修正移動太多)
|
173
173
|
: - rectWidth / 2
|
174
174
|
rectY = 2
|
175
175
|
} else if (fullDataFormatter.grid.groupAxis.position === 'left') {
|
@@ -180,7 +180,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
|
|
180
180
|
rectY = - rectHeight / 2
|
181
181
|
} else if (fullDataFormatter.grid.groupAxis.position === 'top') {
|
182
182
|
rectX = fullParams.labelRotate
|
183
|
-
? - rectWidth
|
183
|
+
? - rectWidth + rectHeight // 有傾斜時以末端對齊(+height是為了修正移動太多)
|
184
184
|
: - rectWidth / 2
|
185
185
|
rectY = - rectHeight + 2
|
186
186
|
}
|
@@ -194,14 +194,14 @@ 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 - 2) // 奇怪的偏移修正
|
198
198
|
.attr('rx', 5)
|
199
199
|
.attr('ry', 5)
|
200
200
|
.style('cursor', 'pointer')
|
201
201
|
// .style('pointer-events', 'none')
|
202
202
|
const rect = rectUpdate.merge(rectEnter)
|
203
203
|
.attr('width', d => `${rectWidth}px`)
|
204
|
-
.style('transform',
|
204
|
+
.style('transform', textReverseTransformWithRotate)
|
205
205
|
rectUpdate.exit().remove()
|
206
206
|
|
207
207
|
const textUpdate = d3.select(n[i])
|
@@ -215,7 +215,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
|
|
215
215
|
// .style('pointer-events', 'none')
|
216
216
|
const text = textUpdate.merge(textEnter)
|
217
217
|
.text(d => d.text)
|
218
|
-
.style('transform',
|
218
|
+
.style('transform', textReverseTransformWithRotate)
|
219
219
|
.attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
|
220
220
|
.attr('font-size', fullChartParams.styles.textSize)
|
221
221
|
.attr('x', rectX + 6)
|
@@ -588,33 +588,36 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
588
588
|
// shareReplay(1)
|
589
589
|
// )
|
590
590
|
|
591
|
-
|
592
|
-
|
593
|
-
fullDataFormatter: observer.fullDataFormatter$,
|
591
|
+
|
592
|
+
const textReverseTransform$ = combineLatest({
|
594
593
|
gridAxesReverseTransform: observer.gridAxesReverseTransform$,
|
595
594
|
gridContainerPosition: observer.gridContainerPosition$
|
596
595
|
}).pipe(
|
597
596
|
takeUntil(destroy$),
|
598
|
-
switchMap(async d => d),
|
597
|
+
switchMap(async (d) => d),
|
599
598
|
map(data => {
|
600
|
-
const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
|
601
|
-
const
|
602
|
-
const
|
603
|
-
const
|
604
|
-
|
605
|
-
|
606
|
-
: data.fullParams.labelRotate
|
607
|
-
// ? 180 // 修正文字倒轉
|
608
|
-
// : 0
|
609
|
-
|
610
|
-
const textRotateValue = `rotate(${tickTextRotateDeg}deg)`
|
611
|
-
|
612
|
-
// 必須按照順序(先抵消外層rotate,再抵消最外層scale,最後再做本身的rotate)
|
613
|
-
return `${axisReverseTranslateValue} ${axisReverseRotateValue} ${containerScaleReverseScaleValue} ${textRotateValue}`
|
599
|
+
// const axisReverseTranslateValue = `translate(${data.gridAxesReverseTransform.translate[0]}px, ${data.gridAxesReverseTransform.translate[1]}px)`
|
600
|
+
const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
|
601
|
+
const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
|
602
|
+
const containerScaleReverseValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
|
603
|
+
// 必須按照順序(先抵消外層rotate,再抵消最外層scale)
|
604
|
+
return `${axesRotateXYReverseValue} ${axesRotateReverseValue} ${containerScaleReverseValue}`
|
614
605
|
}),
|
615
606
|
distinctUntilChanged()
|
616
607
|
)
|
617
608
|
|
609
|
+
const textReverseTransformWithRotate$ = combineLatest({
|
610
|
+
textReverseTransform: textReverseTransform$,
|
611
|
+
fullParams: observer.fullParams$,
|
612
|
+
}).pipe(
|
613
|
+
takeUntil(destroy$),
|
614
|
+
switchMap(async (d) => d),
|
615
|
+
map(data => {
|
616
|
+
// 必須按照順序(先抵消外層rotate,再抵消最外層scale,最後再做本身的rotate)
|
617
|
+
return `${data.textReverseTransform} rotate(${data.fullParams.labelRotate}deg)`
|
618
|
+
})
|
619
|
+
)
|
620
|
+
|
618
621
|
const columnAmount$ = observer.gridContainerPosition$.pipe(
|
619
622
|
takeUntil(destroy$),
|
620
623
|
map(gridContainerPosition => {
|
@@ -665,7 +668,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
665
668
|
fullChartParams: observer.fullChartParams$,
|
666
669
|
highlightTarget: highlightTarget$,
|
667
670
|
// gridAxesReverseTransform: observer.gridAxesReverseTransform$,
|
668
|
-
|
671
|
+
textReverseTransformWithRotate: textReverseTransformWithRotate$,
|
669
672
|
GroupDataMap: observer.GroupDataMap$,
|
670
673
|
textSizePx: observer.textSizePx$
|
671
674
|
}).subscribe(data => {
|
@@ -707,7 +710,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
|
|
707
710
|
fullDataFormatter: data.fullDataFormatter,
|
708
711
|
fullChartParams: data.fullChartParams,
|
709
712
|
// gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
|
710
|
-
|
713
|
+
textReverseTransformWithRotate: data.textReverseTransformWithRotate,
|
711
714
|
textSizePx: data.textSizePx
|
712
715
|
})
|
713
716
|
|
@@ -47,6 +47,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
47
47
|
takeUntil(destroy$),
|
48
48
|
switchMap(async (d) => d),
|
49
49
|
map(data => {
|
50
|
+
console.log('data', data)
|
50
51
|
if (!data.fullDataFormatter.gridList[data.secondGridIndex]) {
|
51
52
|
data.fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, data.fullDataFormatter.gridList[data.firstGridIndex])
|
52
53
|
}
|
@@ -62,6 +63,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
62
63
|
} else if (position === 'right') {
|
63
64
|
reversePosition = 'left'
|
64
65
|
}
|
66
|
+
// console.log('reversePosition', reversePosition)
|
65
67
|
return <DataFormatterGrid>{
|
66
68
|
type: 'grid',
|
67
69
|
visibleFilter: data.fullDataFormatter.visibleFilter as any,
|
@@ -116,6 +118,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
116
118
|
})
|
117
119
|
return {
|
118
120
|
...observables,
|
121
|
+
dataFormatter$: secondGridDataFormatter$,
|
119
122
|
gridAxesTransform$,
|
120
123
|
gridAxesReverseTransform$,
|
121
124
|
gridContainerPosition$,
|