@orbcharts/plugins-basic 3.0.9 → 3.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "description": "Plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -39,9 +39,9 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.6",
-    "@orbcharts/core-types": "^3.0.4",
-    "@orbcharts/plugins-basic-types": "^3.0.4",
+    "@orbcharts/core": "^3.0.7",
+    "@orbcharts/core-types": "^3.0.5",
+    "@orbcharts/plugins-basic-types": "^3.0.5",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/series/defaults.ts

@@ -230,7 +230,9 @@ export const DEFAULT_INDICATOR_PARAMS: IndicatorParams = {
   startAngle: - Math.PI / 2,
   endAngle: Math.PI / 2,
   radius: 0.6,
-  size: 20,
+  indicatorType: 'needle',
+  size: 10,
   colorType: 'label',
-  value: 0
+  // autoHighlight: false,
+  value: 0,
 }

package/src/series/plugins/Indicator.ts

@@ -2,17 +2,22 @@ import * as d3 from 'd3'
 import {
   combineLatest,
   switchMap,
+  mergeMap,
+  mergeWith,
+  concatMap,
   first,
+  filter,
   map,
   takeUntil,
   Observable,
   distinctUntilChanged,
   Subject,
   BehaviorSubject } from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
+import type { ContextSubject, DefinePluginConfig } from '../../../lib/core-types'
 import {
   defineSeriesPlugin } from '../../../lib/core'
 import type {
+  ComputedDataSeries,
   ComputedDatumSeries,
   ContainerPosition,
   EventSeries,
@@ -23,16 +28,33 @@ import type { IndicatorParams } from '../../../lib/plugins-basic-types'
 import { DEFAULT_INDICATOR_PARAMS } from '../defaults'
 import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
 import { seriesCenterSelectionObservable } from '../seriesObservables'
-import { LAYER_INDEX_OF_LABEL } from '../../const'
+import { LAYER_INDEX_OF_GRAPHIC_COVER } from '../../const'
+
+interface RenderParams {
+  containerSelection: d3.Selection<SVGGElement, any, any, unknown>
+  angle: number
+  value: number
+  datum: ComputedDatumSeries | null
+  computedData: ComputedDataSeries
+  SeriesDataMap: Map<string, ComputedDatumSeries[]>
+  pointerDistance: number
+  fullParams: IndicatorParams
+  fullChartParams: ChartParams
+  graphicColor: string
+  event$: Subject<EventSeries>
+}
 
 const pluginName = 'Indicator'
 const indicatorGClassName = getClassName(pluginName, 'indicator-g')
 const triangleGClassName = getClassName(pluginName, 'triangle-g')
+const lineGClassName = getClassName(pluginName, 'line-g')
+const needleGClassName = getClassName(pluginName, 'needle-g')
+const pinGClassName = getClassName(pluginName, 'pin-g')
 
 const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_INDICATOR_PARAMS> = {
   name: pluginName,
   defaultParams: DEFAULT_INDICATOR_PARAMS,
-  layerIndex: LAYER_INDEX_OF_LABEL,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC_COVER,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
       startAngle: {
@@ -44,12 +66,19 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_INDICAT
       radius: {
         toBeTypes: ['number'],
       },
+      indicatorType: {
+        toBe: '"line" | "needle" | "pin" | "triangle"',
+        test: (value: any) => ['line', 'needle', 'pin', 'triangle'].includes(value)
+      },
       size: {
         toBeTypes: ['number'],
       },
       colorType: {
         toBeOption: 'ColorType'
       },
+      // autoHighlight: {
+      //   toBeTypes: ['boolean'],
+      // },
       value: {
         toBeTypes: ['number'],
       },
@@ -58,15 +87,17 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_INDICAT
   }
 }
 
-function renderIndicatorTriangle ({ containerSelection, angle, pointerDistance, fullParams, fullChartParams, graphicColor }: {
+function createIndicatorG({ containerSelection, angle, datum, value, computedData, SeriesDataMap, fullParams, fullChartParams, event$ }: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   angle: number
-  pointerDistance: number
+  datum: ComputedDatumSeries | null
+  value: number
+  computedData: ComputedDataSeries
+  SeriesDataMap: Map<string, ComputedDatumSeries[]>
   fullParams: IndicatorParams
   fullChartParams: ChartParams
-  graphicColor: string
+  event$: Subject<EventSeries>
 }) {
-
   const indicatorG = containerSelection.selectAll(`g.${indicatorGClassName}`)
     .data([angle])
     .join(
@@ -77,11 +108,56 @@ function renderIndicatorTriangle ({ containerSelection, angle, pointerDistance,
       exit => exit.remove()
     )
 
-  indicatorG
+  const transitionG = indicatorG
     .transition()
     .duration(fullChartParams.transitionDuration)
     .attr('transform', `rotate(${angle})`)
 
+  const series = SeriesDataMap.get(datum.seriesLabel)!
+
+  // work around（暫時使用這個方式來共享value）
+  transitionG
+    .tween('move', (self, t) => {
+      return (t) => {
+        event$.next({
+          type: 'series',
+          pluginName,
+          eventName: 'transitionMove',
+          event: undefined,
+          highlightTarget: fullChartParams.highlightTarget,
+          datum: datum,
+          series: series,
+          seriesIndex: datum.seriesIndex,
+          seriesLabel: datum.seriesLabel,
+          data: computedData,
+          mark: value,  // work around
+          tween: t
+        })
+      }
+    })
+    .on('end', (self, t) => {
+      event$.next({
+        type: 'series',
+        pluginName,
+        eventName: 'transitionEnd',
+        event: undefined,
+        highlightTarget: fullChartParams.highlightTarget,
+        datum: datum,
+        series: series,
+        seriesIndex: datum.seriesIndex,
+        seriesLabel: datum.seriesLabel,
+        data: computedData,
+        mark: value  // work around
+      })
+    })
+
+  return indicatorG
+}
+
+function renderIndicatorTriangle ({ containerSelection, angle, value, datum, computedData, SeriesDataMap, pointerDistance, fullParams, fullChartParams, graphicColor, event$ }: RenderParams) {
+
+  const indicatorG = createIndicatorG({ containerSelection, angle, value, datum, computedData, SeriesDataMap, fullParams, fullChartParams, event$ })
+
   indicatorG
     .selectAll(`g.${triangleGClassName}`)
     .data([pointerDistance])
@@ -98,16 +174,96 @@ function renderIndicatorTriangle ({ containerSelection, angle, pointerDistance,
     .attr('fill', graphicColor)
 }
 
+function renderIndicatorLine ({ containerSelection, angle, value, datum, computedData, SeriesDataMap, pointerDistance, fullParams, fullChartParams, graphicColor, event$ }: RenderParams) {
+  const indicatorG = createIndicatorG({ containerSelection, angle, value, datum, computedData, SeriesDataMap, fullParams, fullChartParams, event$ })
+
+  indicatorG
+    .selectAll(`g.${lineGClassName}`)
+    .data([pointerDistance])
+    .join('g')
+    .attr('class', lineGClassName)
+    .selectAll('rect')
+    .data([fullParams.size])
+    .join('rect')
+    .attr('x', -fullParams.size / 2)  // 水平置中
+    .attr('y', -pointerDistance)       // 從中心向上延伸
+    .attr('width', fullParams.size)    // 寬度為 size
+    .attr('height', pointerDistance)   // 長度為 pointerDistance
+    .attr('fill', graphicColor)
+}
+
+function renderIndicatorNeedle ({ containerSelection, angle, value, datum, computedData, SeriesDataMap, pointerDistance, fullParams, fullChartParams, graphicColor, event$ }: RenderParams) {
+  const indicatorG = createIndicatorG({ containerSelection, angle, value, datum, computedData, SeriesDataMap, fullParams, fullChartParams, event$ })
+
+  indicatorG
+    .selectAll(`g.${needleGClassName}`)
+    .data([pointerDistance])
+    .join('g')
+    .attr('class', needleGClassName)
+    .selectAll('path')
+    .data([fullParams.size])
+    .join('path')
+    .attr('d', () => {
+      const width = fullParams.size
+      
+      // 建構4角菱形路徑
+      const points = [
+        [0, -pointerDistance], // 頂點（針尖）
+        [width / 2, 0], // 右側最寬點
+        [0, width / 2], // 尾部
+        [-width / 2, 0] // 左側最寬點
+      ]
+      
+      return `M${points.map(p => p.join(',')).join('L')}Z`
+    })
+    .attr('fill', graphicColor)
+}
+
+function renderIndicatorPin ({ containerSelection, angle, value, datum, computedData, SeriesDataMap, pointerDistance, fullParams, fullChartParams, graphicColor, event$ }: RenderParams) {
+  const indicatorG = createIndicatorG({ containerSelection, angle, value, datum, computedData, SeriesDataMap, fullParams, fullChartParams, event$ })
+
+  const pinG = indicatorG
+    .selectAll(`g.${pinGClassName}`)
+    .data([pointerDistance])
+    .join('g')
+    .attr('class', pinGClassName)
+
+  // 繪製大頭針的針身（細線）- 從中心向外延伸
+  pinG
+    .selectAll('line.pin-shaft')
+    .data([1])
+    .join('line')
+    .attr('class', 'pin-shaft')
+    .attr('x1', 0)
+    .attr('y1', 0)                     // 從中心開始
+    .attr('x2', 0)
+    .attr('y2', -pointerDistance)      // 向外延伸到 pointerDistance
+    .attr('stroke', graphicColor)
+    .attr('stroke-width', Math.min(fullParams.size * 0.2, 2))  // 針身較細
+    .attr('stroke-linecap', 'round')
+
+  // 繪製大頭針的頭部（圓形）- 放在中心位置
+  pinG
+    .selectAll('circle.pin-head')
+    .data([fullParams.size])
+    .join('circle')
+    .attr('class', 'pin-head')
+    .attr('cx', 0)
+    .attr('cy', 0)                     // 頭部在中心
+    .attr('r', fullParams.size / 2)    // 頭部半徑為 size 的一半
+    .attr('fill', graphicColor)
+}
+
 function createEachGraphic (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
-  // computedData$: Observable<ComputedDatumSeries[][]>
+  renderFn: (params: RenderParams) => void
   containerVisibleComputedSortedData$: Observable<ComputedDatumSeries[]>
-  // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<IndicatorParams>
   fullChartParams$: Observable<ChartParams>
-  // textSizePx$: Observable<number>
-  // seriesHighlight$: Observable<ComputedDatumSeries[]>
   seriesContainerPosition$: Observable<ContainerPosition>
+  computedData$: Observable<ComputedDatumSeries[][]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+  subject: ContextSubject<"series">
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()
@@ -119,7 +275,7 @@ function createEachGraphic (pluginName: string, context: {
     distinctUntilChanged()
   )
 
-  const valueToAngle$ = combineLatest({
+  const valueToAngleScale$ = combineLatest({
     fullParams: context.fullParams$,
     containerValueSum: containerValueSum$,
   }).pipe(
@@ -138,11 +294,14 @@ function createEachGraphic (pluginName: string, context: {
 
   const angle$ = combineLatest({
     value: value$,
-    valueToAngle: valueToAngle$,
+    valueToAngleScale: valueToAngleScale$,
+    containerValueSum: containerValueSum$,
   }).pipe(
     switchMap(async d => d),
-    map(({ value, valueToAngle }) => {
-      return valueToAngle(value)
+    map(({ value, valueToAngleScale, containerValueSum }) => {
+      // value 限制在 0 ~ containerValueSum 之間
+      const validValue = Math.max(Math.min(value, containerValueSum), 0)
+      return valueToAngleScale(validValue)
     }),
     distinctUntilChanged()
   )
@@ -162,30 +321,38 @@ function createEachGraphic (pluginName: string, context: {
   )
 
   // indicator 的 value 對應到 data 區間
-  const valueStackedIndex$ = combineLatest({
+  const datum$ = combineLatest({
     value: value$,
     containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
   }).pipe(
     switchMap(async d => d),
     map(({ value, containerVisibleComputedSortedData }) => {
-      let valueIndex = 0
+      // let seriesIndex = 0
+      let datum: ComputedDatumSeries | null = null
       let stackedValue = 0
       for (let i = 0; i < containerVisibleComputedSortedData.length; i++) {
         const datumValue = containerVisibleComputedSortedData[i].value ?? 0
         stackedValue += datumValue
         if (stackedValue >= value) {
-          valueIndex = i
+          // seriesIndex = containerVisibleComputedSortedData[i].seriesIndex
+          datum = containerVisibleComputedSortedData[i]
           break
         }
+        if (i === containerVisibleComputedSortedData.length - 1) {
+          // seriesIndex = containerVisibleComputedSortedData[i].seriesIndex
+          datum = containerVisibleComputedSortedData[i]
+        }
       }
-      return valueIndex
+      return datum
     }),
     distinctUntilChanged()
   )
 
   const graphicColor$ = combineLatest({
     value: value$,
-    valueStackedIndex: valueStackedIndex$,
+    valueSeriesIndex: datum$.pipe(
+      map(d => d ? d.seriesIndex : 0),
+    ),
     // containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$,
@@ -193,7 +360,7 @@ function createEachGraphic (pluginName: string, context: {
     switchMap(async d => d),
     map(data => {
       const labelColor = data.fullParams.colorType === 'label'
-        ? data.fullChartParams.colors[data.fullChartParams.colorScheme].label[data.valueStackedIndex]
+        ? data.fullChartParams.colors[data.fullChartParams.colorScheme].label[data.valueSeriesIndex]
         : '' // 忽略
 
       const datum: ComputedDatumBaseSeries = {
@@ -211,20 +378,71 @@ function createEachGraphic (pluginName: string, context: {
     distinctUntilChanged()
   )
 
+  // 紀錄目前的 chartParams
+  let chartParamsRef: ChartParams | null = null
+  context.fullChartParams$
+    .pipe(takeUntil(destroy$))
+    .subscribe(params => {
+      chartParamsRef = params
+    })
+
+  // const newDefaultHighlight$ = combineLatest({
+  //   datum: datum$,
+  //   fullChartParams: context.fullChartParams$,
+  // }).pipe(
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     return data.fullChartParams.highlightTarget === 'datum'
+  //       ? data.datum.id
+  //       : data.fullChartParams.highlightTarget === 'series'
+  //         ? data.datum.seriesLabel
+  //         : null
+  //   }),
+  //   distinctUntilChanged()
+  // )
+
+  // autoHighlight
+  // context.fullParams$.pipe(
+  //   map(params => params.autoHighlight),
+  //   filter(autoHighlight => autoHighlight === true),
+  //   mergeWith(context.event$.pipe(
+  //     filter(event => event.eventName === 'mouseout'),
+  //   )),
+  //   switchMap(() => newDefaultHighlight$),
+  //   takeUntil(destroy$),
+  // ).subscribe(newDefaultHighlight => {
+  //   if (!newDefaultHighlight) {
+  //     return
+  //   }
+  //   context.subject.chartParams$.next({
+  //     ...chartParamsRef,
+  //     highlightDefault: newDefaultHighlight
+  //   })
+  // })
+
   combineLatest({
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$,
     angle: angle$,
     pointerDistance: pointerDistance$,
     graphicColor: graphicColor$,
+    value: value$,
+    datum: datum$,
+    computedData: context.computedData$,
+    SeriesDataMap: context.SeriesDataMap$,
   }).subscribe(data => {
-    renderIndicatorTriangle({
+    context.renderFn({
       containerSelection: context.containerSelection,
       angle: data.angle,
+      value: data.fullParams.value,
+      datum: data.datum,
+      computedData: data.computedData,
+      SeriesDataMap: data.SeriesDataMap,
       pointerDistance: data.pointerDistance,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams,
       graphicColor: data.graphicColor,
+      event$: context.event$
     })
   })
 
@@ -236,7 +454,15 @@ function createEachGraphic (pluginName: string, context: {
 
 
 export const Indicator = defineSeriesPlugin(pluginConfig)(({ selection, observer, subject }) => {
-  
+  subject.plugins$
+    // .pipe(
+    //   map(plugins => plugins.find(p => p.name === 'Indicator')),
+    //   filter(p => !!p),
+    //   switchMap(p => p.params$)
+    // )
+    .subscribe(params => {
+      console.log('Indicator params', params)
+    })
   const destroy$ = new Subject()
 
   const { seriesCenterSelection$ } = seriesCenterSelectionObservable({
@@ -248,43 +474,61 @@ export const Indicator = defineSeriesPlugin(pluginConfig)(({ selection, observer
 
   const unsubscribeFnArr: (() => void)[] = []
 
-  seriesCenterSelection$
-    .pipe(
-      takeUntil(destroy$)
-    )
-    .subscribe(seriesCenterSelection => {
-      // 每次重新計算時，清除之前的訂閱
-      unsubscribeFnArr.forEach(fn => fn())
-
-      seriesCenterSelection.each((d, containerIndex, g) => { 
-        
-        const containerSelection = d3.select(g[containerIndex])
-
-        const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
-          takeUntil(destroy$),
-          map(data => data[containerIndex] ?? data[0])
-        )
-
-        const containerPosition$ = observer.seriesContainerPosition$.pipe(
-          takeUntil(destroy$),
-          map(data => data[containerIndex] ?? data[0])
-        )
-
-        unsubscribeFnArr[containerIndex] = createEachGraphic(pluginName, {
-          containerSelection: containerSelection,
-          // computedData$: observer.computedData$,
-          containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
-          // SeriesDataMap$: observer.SeriesDataMap$,
-          fullParams$: observer.fullParams$,
-          fullChartParams$: observer.fullChartParams$,
-          // textSizePx$: observer.textSizePx$,
-          // seriesHighlight$: observer.seriesHighlight$,
-          seriesContainerPosition$: containerPosition$,
-          event$: subject.event$,
-        })
+  const renderFn$ = observer.fullParams$.pipe(
+    map(params => {
+      if (params.indicatorType === 'triangle') {
+        return renderIndicatorTriangle
+      } else if (params.indicatorType === 'line') {
+        return renderIndicatorLine
+      } else if (params.indicatorType === 'needle') {
+        return renderIndicatorNeedle
+      } else if (params.indicatorType === 'pin') {
+        return renderIndicatorPin
+      } else {
+        return renderIndicatorTriangle
+      }
+    }),
+  )
 
+  combineLatest({
+    seriesCenterSelection: seriesCenterSelection$,
+    renderFn: renderFn$,
+  }).pipe(
+    switchMap(async d => d),
+    takeUntil(destroy$)
+  ).subscribe(data => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    data.seriesCenterSelection.each((d, containerIndex, g) => { 
+      
+      const containerSelection = d3.select(g[containerIndex])
+
+      const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      const containerPosition$ = observer.seriesContainerPosition$.pipe(
+        takeUntil(destroy$),
+        map(data => data[containerIndex] ?? data[0])
+      )
+
+      unsubscribeFnArr[containerIndex] = createEachGraphic(pluginName, {
+        containerSelection: containerSelection,
+        renderFn: data.renderFn,
+        containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
+        fullParams$: observer.fullParams$,
+        fullChartParams$: observer.fullChartParams$,
+        seriesContainerPosition$: containerPosition$,
+        computedData$: observer.computedData$,
+        SeriesDataMap$: observer.SeriesDataMap$,
+        subject,
+        event$: subject.event$,
       })
+
     })
+  })
 
   return () => {
     destroy$.next(undefined)