@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.
@@ -129,17 +129,17 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
129
129
  : []
130
130
  }
131
131
 
132
- function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, fullChartParams, labelTransform, textSizePx }: {
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
- labelTransform: string
139
+ textReverseTransformWithRotate: string
140
140
  textSizePx: number
141
141
  }) {
142
- const rectHeight = textSizePx + 4
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', labelTransform)
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', labelTransform)
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
- const labelTransform$ = combineLatest({
592
- fullParams: observer.fullParams$,
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 axisReverseRotateValue = `rotate(${data.gridAxesReverseTransform.rotate}deg) rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
602
- const containerScaleReverseScaleValue = `scale(${1 / data.gridContainerPosition[0].scale[0]}, ${1 / data.gridContainerPosition[0].scale[1]})`
603
- const tickTextRotateDeg = (data.fullDataFormatter.grid.groupAxis.position === 'left' && data.fullDataFormatter.grid.valueAxis.position === 'top')
604
- || (data.fullDataFormatter.grid.groupAxis.position === 'right' && data.fullDataFormatter.grid.valueAxis.position === 'bottom')
605
- ? data.fullParams.labelRotate + 180 // 修正文字倒轉
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
- labelTransform: labelTransform$,
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
- labelTransform: data.labelTransform,
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$,
@@ -117,6 +117,7 @@ export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginName, DEFAU
117
117
  })
118
118
  return {
119
119
  ...observables,
120
+ dataFormatter$: secondGridDataFormatter$,
120
121
  gridAxesTransform$,
121
122
  gridAxesReverseTransform$,
122
123
  gridContainerPosition$,