@orbcharts/plugins-basic 3.0.0-beta.14 → 3.0.0-beta.16

package/src/base/BaseRacingValueLabels.ts

@@ -0,0 +1,403 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  of,
+  iif,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  ChartParams,
+  ComputedDatumMultiValue,
+  ComputedDataMultiValue,
+  ComputedXYDatumMultiValue,
+  ContainerSize,
+  ContainerPositionScaled,
+  DataFormatterMultiValue,
+  Layout
+} from '../../lib/core-types'
+import type { BaseRacingValueLabelsParams } from '../../lib/plugins-basic-types'
+import type { BasePluginFn } from './types'
+import { getColor, getClassName, getUniID } from '../utils/orbchartsUtils'
+import { parseTickFormatValue } from '../utils/d3Utils'
+import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
+
+interface BaseRacingAxisContext {
+  selection: d3.Selection<any, unknown, any, unknown>
+  computedData$: Observable<ComputedDataMultiValue>
+  visibleComputedRankingData$: Observable<ComputedDatumMultiValue[][]>
+  rankingScaleList$: Observable<Array<d3.ScalePoint<string>>>
+  xScale$: Observable<(n: number) => number>
+  computedRankingAmount$: Observable<number>
+  fullParams$: Observable<BaseRacingValueLabelsParams>
+  // fullDataFormatter$: Observable<DataFormatterMultiValue>
+  fullChartParams$: Observable<ChartParams>
+  // layout$: Observable<Layout>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  isCategorySeprate$: Observable<boolean>
+  // xyValueIndex$: Observable<[number, number]>
+}
+
+type ClipPathDatum = {
+  id: string;
+  // x: number;
+  // y: number;
+  width: number;
+  height: number;
+}
+
+// const pluginName = 'RacingAxis'
+
+const yTickTextAnchor = 'start'
+const yTickDominantBaseline = 'middle'
+
+
+function renderRacingLabels ({ selection, fullParams, fullChartParams, rankingScale, xScale, categoryData, computedRankingAmount }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  fullParams: BaseRacingValueLabelsParams
+  fullChartParams: ChartParams
+  rankingScale: d3.ScalePoint<string>
+  xScale: ((n: number) => number)
+  categoryData: ComputedDatumMultiValue[]
+  computedRankingAmount: number
+  // textReverseTransform: string
+  // xyValueIndex: [number, number]
+}) {
+
+  const labelData = categoryData.slice(0, computedRankingAmount + 1) // 將多餘的label移除避免不避要的計算
+
+  const labelGSelection = selection
+    .selectAll<SVGGElement, string>(`g`)
+    .data(labelData, (d: ComputedDatumMultiValue) => d.id)
+    // .join('g')
+    // .classed(boxClassName, true)
+    .join(
+      enter => {
+        return enter
+          .append('g')
+          // .attr('x', d => xScale(d.value[xyValueIndex[0]]) + fullParams.padding)
+          // .attr('y', d => rankingScale(d.label)!)
+          .attr('transform', d => `translate(${xScale((d.value[d.xValueIndex] ?? 0)) + fullParams.padding}, ${rankingScale(d.label)!})`)
+      },
+      update => {
+        return update
+          .transition()
+          .duration(fullChartParams.transitionDuration)
+          .ease(d3.easeLinear)
+          // // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
+          // .attr('x', d => xScale(d.value[xyValueIndex[0]]) + fullParams.padding)
+          // .attr('y', d => rankingScale(d.label)!)
+          .attr('transform', d => `translate(${xScale((d.value[d.xValueIndex] ?? 0)) + fullParams.padding}, ${rankingScale(d.label)!})`)
+      },
+      exit => exit.remove()
+    )
+    .each((d, i, g) => {
+      const gSelection = d3.select(g[i])
+      gSelection
+        .selectAll<SVGRectElement, string>('text')
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('text')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('text-anchor', yTickTextAnchor)
+        .attr('dominant-baseline', yTickDominantBaseline)
+        .attr('font-size', fullChartParams.styles.textSize)
+        .style('fill', getColor(fullParams.colorType, fullChartParams))
+        // .style('transform', textReverseTransform)
+        // .style('transform', textReverseTransformWithRotate)
+        // .text(d => parseTickFormatValue(d.value[xyValueIndex[0]], fullParams.format))
+        .transition()
+        .duration(fullChartParams.transitionDuration)
+        .ease(d3.easeLinear)
+        .textTween(datum => {
+          const currentIndex = datum.xValueIndex
+          const prevIndex = currentIndex === 0 ? 0 : currentIndex - 1
+          const prev = datum.value[prevIndex]
+          const current = datum.value[currentIndex]
+          return t => {
+            const tweenNumber = t === 1
+              ? d3.interpolateNumber(prev, current)(t)
+              : d3.interpolateRound(prev, current)(t) // 過渡時使用整數避免小數位數爆炸多
+            return parseTickFormatValue(tweenNumber, fullParams.format)
+          }
+        })
+    })
+
+  // const labelSelection = selection
+  //   .selectAll<SVGGElement, string>(`text`)
+  //   .data(categoryData, (d: ComputedDatumMultiValue) => d.id)
+  //   // .join('g')
+  //   // .classed(boxClassName, true)
+  //   .join(
+  //     enter => {
+  //       return enter
+  //         .append('text')
+  //         // .style('font-weight', 'bold')
+  //         .attr('x', d => xScale(d.value[xyValueIndex[0]]) + fullParams.padding)
+  //         .attr('y', d => rankingScale(d.label)!)
+  //     },
+  //     update => {
+  //       return update
+  //         .transition()
+  //         .duration(fullChartParams.transitionDuration)
+  //         .ease(d3.easeLinear)
+  //         // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
+  //         .attr('x', d => xScale(d.value[xyValueIndex[0]]) + fullParams.padding)
+  //         .attr('y', d => rankingScale(d.label)!)
+  //     },
+  //     exit => exit.remove()
+  //   )
+  //   .attr('text-anchor', yTickTextAnchor)
+  //   .attr('dominant-baseline', yTickDominantBaseline)
+  //   .attr('font-size', fullChartParams.styles.textSize)
+  //   .style('fill', getColor(fullParams.colorType, fullChartParams))
+  //   // .style('transform', textReverseTransformWithRotate)
+  //   // .text(d => parseTickFormatValue(d.value[xyValueIndex[0]], fullParams.format))
+  //   .transition()
+  //   .duration(fullChartParams.transitionDuration)
+  //   .ease(d3.easeLinear)
+  //   .textTween(datum => {
+  //     const currentIndex = xyValueIndex[0]
+  //     const prevIndex = currentIndex === 0 ? 0 : currentIndex - 1
+  //     const prev = datum.value[prevIndex]
+  //     const current = datum.value[currentIndex]
+  //     return t => {
+  //       const tweenNumber = d3.interpolateNumber(prev, current)(t)
+  //       return parseTickFormatValue(tweenNumber, fullParams.format)
+  //     }
+  //   })
+
+  const labelSelection: d3.Selection<SVGTextElement, ComputedDatumMultiValue, SVGGElement, unknown> = labelGSelection.selectAll(`text`)
+
+  return labelSelection
+}
+
+
+function renderClipPath ({ defsSelection, clipPathData }: {
+  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
+  clipPathData: ClipPathDatum[]
+  // textReverseTransform: string
+}) {
+  const clipPath = defsSelection
+    .selectAll<SVGClipPathElement, Layout>('clipPath')
+    .data(clipPathData)
+    .join(
+      enter => {
+        return enter
+          .append('clipPath')
+      },
+      update => update,
+      exit => exit.remove()
+    )
+    .attr('id', d => d.id)
+    // .attr('transform', textReverseTransform)
+    .each((d, i, g) => {
+      const rect = d3.select(g[i])
+        .selectAll<SVGRectElement, typeof d>('rect')
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('rect')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('x', _d => 0)
+        .attr('y', 0)
+        .attr('width', _d => _d.width * 1.5) // value太長時右側可能會超出區塊
+        .attr('height', _d => _d.height)
+    })
+}
+
+export const createBaseRacingValueLabels: BasePluginFn<BaseRacingAxisContext> = (pluginName: string, {
+  selection,
+  computedData$,
+  visibleComputedRankingData$,
+  rankingScaleList$,
+  xScale$,
+  computedRankingAmount$,
+  fullParams$,
+  // fullDataFormatter$,
+  fullChartParams$,
+  // layout$,
+  containerPosition$,
+  containerSize$,
+  isCategorySeprate$,
+  // xyValueIndex$
+}) => {
+
+  const destroy$ = new Subject()
+  
+  const containerClassName = getClassName(pluginName, 'container')
+  const boxClassName = getClassName(pluginName, 'box')
+  const clipPathID = getUniID(pluginName, 'clipPath-box')
+
+  const containerSelection$ = multiValueContainerSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID: null,
+    computedData$,
+    containerPosition$,
+    isCategorySeprate$,
+  }).pipe(
+    takeUntil(destroy$),
+  )
+
+  // const containerSelection$ = combineLatest({
+  //   computedData: computedData$.pipe(
+  //     distinctUntilChanged((a, b) => {
+  //       // 只有當series的數量改變時，才重新計算
+  //       return a.length === b.length
+  //     }),
+  //   ),
+  //   isCategorySeprate: isCategorySeprate$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(data => {
+  //     return data.isCategorySeprate
+  //       // category分開的時候顯示各別axis
+  //       ? data.computedData
+  //       // category合併的時候只顯示第一個axis
+  //       : [data.computedData[0]]
+  //   }),
+  //   map((computedData, i) => {
+  //     return selection
+  //       .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${containerClassName}`)
+  //       .data(computedData, d => d[0] ? d[0].categoryIndex : i)
+  //       .join('g')
+  //       .classed(containerClassName, true)
+  //   })
+  // )
+
+  // combineLatest({
+  //   containerSelection: containerSelection$,
+  //   containerPosition: containerPosition$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+  //   data.containerSelection
+  //     .attr('transform', (d, i) => {
+  //       const containerPosition = data.containerPosition[i] ?? data.containerPosition[0]
+  //       const translate = containerPosition.translate
+  //       const scale = containerPosition.scale
+  //       // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+  //       return `translate(${translate[0]}, ${translate[1]})`
+  //     })
+  //     // .attr('opacity', 0)
+  //     // .transition()
+  //     // .attr('opacity', 1)
+  // })
+
+  // const textReverseTransform$ = containerPosition$.pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(containerPosition => {
+  //     // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
+  //     // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
+  //     const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
+  //     // 抵消最外層scale
+  //     return `${containerScaleReverseValue}`
+  //   }),
+  //   distinctUntilChanged()
+  // )
+
+  // const textReverseTransformWithRotate$ = combineLatest({
+  //   textReverseTransform: textReverseTransform$,
+  //   fullParams: fullParams$,
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(data => {
+  //     // 必須按照順序（先抵消外層rotate，再抵消最外層scale，最後再做本身的rotate）
+  //     return `${data.textReverseTransform} rotate(${data.fullParams.barLabel.rotate}deg)`
+  //   })
+  // )
+
+  // const rankingLabelList$ = visibleComputedRankingData$.pipe(
+  //   takeUntil(destroy$),
+  //   map(data => {
+  //     return data.map(categoryData => categoryData.map(d => d.label))
+  //   })
+  // )
+
+  containerSize$.subscribe(data => {
+    const defsSelection = selection.selectAll<SVGDefsElement, any>('defs')
+      .data([clipPathID])
+      .join('defs')
+    const clipPathData = [{
+      id: clipPathID,
+      width: data.width,
+      height: data.height
+    }]
+    renderClipPath({
+      defsSelection: defsSelection,
+      clipPathData,
+      // textReverseTransform: data.textReverseTransform
+    })
+  })
+
+  combineLatest({
+    containerSelection: containerSelection$,
+    fullParams: fullParams$,
+    fullChartParams: fullChartParams$,
+    visibleComputedRankingData: visibleComputedRankingData$,
+    rankingScaleList: rankingScaleList$,
+    xScale: xScale$,
+    computedRankingAmount: computedRankingAmount$,
+    // textReverseTransform: textReverseTransform$,
+    // xyValueIndex: xyValueIndex$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    data.containerSelection.each((d, i, g) => {
+      const _containerSelection = d3.select(g[i])
+      // const rankingLabels = data.rankingLabelList[i]
+      const rankingScale = data.rankingScaleList[i]
+      if (!rankingScale) {
+        return
+      }
+      
+      // const containerClipPathID = `${clipPathID}-${i}`  
+      const axisSelection = _containerSelection
+        .selectAll<SVGGElement, any>(`g.${boxClassName}`)
+        .data([i])
+        .join('g')
+        .attr('class', boxClassName)
+        .attr('clip-path', `url(#${clipPathID})`)
+
+      renderRacingLabels({
+        selection: axisSelection,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams,
+        rankingScale: rankingScale,
+        categoryData: data.visibleComputedRankingData[i],
+        // textReverseTransform: data.textReverseTransform,
+        // textReverseTransformWithRotate: data.textReverseTransformWithRotate,
+        xScale: data.xScale,
+        computedRankingAmount: data.computedRankingAmount,
+        // xyValueIndex: data.xyValueIndex,
+      })
+    })
+
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
+}

package/src/base/{BaseStackedBar.ts → BaseStackedBars.ts}

@@ -13,35 +13,35 @@ import type {
   ComputedDatumGrid,
   ComputedDataGrid,
   ComputedLayoutDatumGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   DataFormatterGrid,
   EventGrid,
   ChartParams,
   ContainerPositionScaled,
   Layout,
   TransformData } from '../../lib/core-types'
-import type { BaseStackedBarParams } from '../../lib/plugins-basic-types'
+import type { BaseStackedBarsParams } from '../../lib/plugins-basic-types'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 import { gridSelectionsObservable } from '../grid/gridObservables'
 import { shareReplay } from 'rxjs/operators'
 
-// export interface BaseStackedBarParams {
+// export interface BaseStackedBarsParams {
 //   barWidth: number
 //   barGroupPadding: number
 //   barRadius: number | boolean
 // }
 
-interface BaseStackedBarContext {
+interface BaseStackedBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  fullParams$: Observable<BaseStackedBarParams>
+  fullParams$: Observable<BaseStackedBarsParams>
   fullDataFormatter$: Observable<DataFormatterGrid>
   fullChartParams$: Observable<ChartParams>
   gridAxesTransform$: Observable<TransformData>
@@ -70,7 +70,7 @@ interface RenderBarParams {
   zeroY: number
   groupLabels: string[]
   // barScale: d3.ScalePoint<string>
-  params: BaseStackedBarParams
+  params: BaseStackedBarsParams
   chartParams: ChartParams
   barWidth: number
   transformedBarRadius: [number, number][]
@@ -87,7 +87,7 @@ type ClipPathDatum = {
   height: number;
 }
 
-// const pluginName = 'StackedBar'
+// const pluginName = 'StackedBars'
 // const rectClassName = getClassName(pluginName, 'rect')
 // group的delay在動畫中的佔比（剩餘部份的時間為圖形本身的動畫時間，因為delay時間和最後一個group的動畫時間加總為1）
 const groupDelayProportionOfDuration = 0.3
@@ -105,7 +105,7 @@ function calcBarWidth ({ axisWidth, groupAmount, barGroupPadding = 0 }: {
 
 }
 
-// function makeBarScale (barWidth: number, seriesLabels: string[], params: StackedBarParams) {
+// function makeBarScale (barWidth: number, seriesLabels: string[], params: StackedBarsParams) {
 //   const barHalfWidth = barWidth! / 2
 //   const barGroupWidth = barWidth * seriesLabels.length + params.barPadding! * seriesLabels.length
 //   return d3.scalePoint()
@@ -292,12 +292,12 @@ function highlight ({ selection, ids, fullChartParams }: {
 }
 
 
-export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (pluginName: string, {
+export const createBaseStackedBars: BasePluginFn<BaseStackedBarsContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -335,7 +335,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
   })
 
 
-  const zeroY$ = visibleComputedLayoutData$.pipe(
+  const zeroY$ = visibleComputedAxesData$.pipe(
     takeUntil(destroy$),
     map(d => d[0] && d[0][0]
       ? d[0][0].axisY - d[0][0].axisYFromZero
@@ -502,7 +502,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
 
   // 堆疊後的高度對應圖軸的比例（最大值/最大值所在group的總和）
   const yRatio$ = combineLatest({
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     groupScaleDomain: groupScaleDomain$
   }).pipe(
     takeUntil(destroy$),
@@ -511,7 +511,7 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
       const groupScaleDomainMin = data.groupScaleDomain[0]
       const groupScaleDomainMax = data.groupScaleDomain[1]
       // 只選取group篩選範圍內的資料
-      const filteredData = data.visibleComputedLayoutData
+      const filteredData = data.visibleComputedAxesData
         .map(d => {
           return d.filter((_d, i) => {
             return _d.groupIndex >= groupScaleDomainMin && _d.groupIndex <= groupScaleDomainMax
@@ -537,16 +537,16 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
   )
 
   const stackedData$ = combineLatest({
-    computedLayoutData: computedLayoutData$,
+    computedAxesData: computedAxesData$,
     yRatio: yRatio$,
     zeroY: zeroY$
   }).pipe(
     takeUntil(destroy$),
     map(data => {
-      let accYArr: number[] = data.computedLayoutData[0]
-        ? data.computedLayoutData[0].map(() => data.zeroY)
+      let accYArr: number[] = data.computedAxesData[0]
+        ? data.computedAxesData[0].map(() => data.zeroY)
         : []
-      return data.computedLayoutData.map((series, seriesIndex) => {
+      return data.computedAxesData.map((series, seriesIndex) => {
         return series.map((datum, groupIndex) => {
           const _barStartY = accYArr[groupIndex] // 前一次的累加高度
           let _barHeight = 0
@@ -578,13 +578,13 @@ export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (plugin
   )
 
   const noneStackedData$ = combineLatest({
-    computedLayoutData: computedLayoutData$,
+    computedAxesData: computedAxesData$,
     // yRatio: yRatio$,
     zeroY: zeroY$
   }).pipe(
     takeUntil(destroy$),
     map(data => {
-      return data.computedLayoutData.map((series, seriesIndex) => {
+      return data.computedAxesData.map((series, seriesIndex) => {
         return series.map((datum, groupIndex) => {
           return <GraphicDatum>{
             ...datum,