@orbcharts/plugins-basic 3.0.0-alpha.24

package/src/series/plugins/PieEventTexts.ts

@@ -0,0 +1,194 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  switchMap,
+  first,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  Subject } from 'rxjs'
+import type { Subscription } from 'rxjs'
+import {
+  defineSeriesPlugin} from '@orbcharts/core'
+import type {
+  EventName,
+  EventSeries } from '@orbcharts/core'
+import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
+import { getD3TransitionEase } from '../../utils/d3Utils'
+import { getClassName } from '../../utils/orbchartsUtils'
+
+type TextDatum = {
+  text: string
+  attr: { [key:string]: any }
+  style: { [key:string]: any }
+}
+
+const pluginName = 'PieEventTexts'
+const textClassName = getClassName(pluginName, 'text')
+
+function renderText (
+  selection: d3.Selection<SVGGElement, unknown, any, any>,
+  data: Array<TextDatum>
+): d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> {
+  const textUpdate = selection
+    .selectAll<SVGTextElement, TextDatum>(`text.${textClassName}`)
+    .data(data)
+  const textEnter = textUpdate.enter()
+    .append('text')
+    .classed(textClassName, true)
+  const text = textUpdate.merge(textEnter)
+  text
+    .each((d, i, g) => {
+      const t = d3.select(g[i])
+        .text(d.text)
+      Object.keys(d.attr)
+        .forEach(key => {
+          t.attr(key, d.attr[key])
+        })
+      Object.keys(d.style)
+        .forEach(key => {
+          t.style(key, d.style[key])
+        })
+    })
+    
+  textUpdate.exit().remove()
+  
+  return text
+}
+
+function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles }: {
+  eventData: EventSeries,
+  eventName: EventName,
+  t: number,
+  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
+  textAttrs: Array<{ [key:string]: string | number }>
+  textStyles: Array<{ [key:string]: string | number }>
+}): TextDatum[] {
+  const callbackText = eventFn(eventData, eventName, t)
+  return callbackText.map((d, i) => {
+    return {
+      text: d,
+      attr: textAttrs[i],
+      style: textStyles[i]
+    }
+  })
+}
+
+
+
+export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
+  let centerTextSelection: d3.Selection<SVGTextElement, TextDatum, SVGGElement, unknown> | undefined
+  let storeEventSubscription: Subscription | undefined
+
+  observer.layout$
+    .pipe(
+      first()
+    )
+    .subscribe(size => {
+      selection
+        .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+      observer.layout$
+        .pipe(
+          takeUntil(destroy$)
+        )
+        .subscribe(size => {
+          selection
+            .transition()
+            .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+        })
+    })
+
+
+  const highlightTarget$ = observer.fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => d.highlightTarget),
+    distinctUntilChanged()
+  )
+
+  combineLatest({
+    computedData: observer.computedData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$,
+    highlightTarget: highlightTarget$
+  }).pipe(
+    takeUntil(destroy$),
+    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    graphicSelection
+      .transition()
+      .duration(data.fullChartParams.transitionDuration!)
+      .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
+      .tween('move', (event, datum) => {
+        return (t) => {
+          const renderData = makeTextData({
+            eventData: {
+              type: 'series',
+              pluginName: name,
+              eventName: 'transitionMove',
+              event,
+              highlightTarget: data.highlightTarget,
+              data: data.computedData,
+              series: [],
+              seriesIndex: -1,
+              seriesLabel: '',
+              datum: null
+            },
+            eventName: 'transitionMove',
+            t,
+            eventFn: data.fullParams.eventFn!,
+            textAttrs: data.fullParams.textAttrs!,
+            textStyles: data.fullParams.textStyles!
+          })
+          centerTextSelection = renderText(graphicSelection, renderData)
+        }
+      })
+      .on('end', (event, datum) => {
+        const renderData = makeTextData({
+          eventData: {
+            type: 'series',
+            pluginName: name,
+            eventName: 'transitionEnd',
+            event,
+            highlightTarget: data.highlightTarget,
+            data: data.computedData,
+            series: [],
+            seriesIndex: -1,
+            seriesLabel: '',
+            datum: null
+          },
+          eventName: 'transitionMove',
+          t: 1,
+          eventFn: data.fullParams.eventFn!,
+          textAttrs: data.fullParams.textAttrs!,
+          textStyles: data.fullParams.textStyles!
+        })
+        centerTextSelection = renderText(graphicSelection, renderData)
+
+        if (storeEventSubscription) {
+          storeEventSubscription.unsubscribe()
+        }
+        storeEventSubscription = subject.event$
+          .subscribe(eventData => {
+            const renderData = makeTextData({
+              eventData,
+              eventName: eventData.eventName,
+              t: 1,
+              eventFn: data.fullParams.eventFn!,
+              textAttrs: data.fullParams.textAttrs!,
+              textStyles: data.fullParams.textStyles!
+            })
+            centerTextSelection = renderText(graphicSelection, renderData)
+          })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
+})

package/src/series/plugins/PieLabels.ts

@@ -0,0 +1,289 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  switchMap,
+  first,
+  takeUntil,
+  Subject,
+  BehaviorSubject } from 'rxjs'
+import {
+  defineSeriesPlugin } from '@orbcharts/core'
+import type {
+  ChartParams } from '@orbcharts/core'
+import type { PieLabelsPluginParams } from '../types'
+import type { PieDatum } from '../seriesUtils'
+import { DEFAULT_PIE_LABELS_PARAMS } from '../defaults'
+import { makePieData } from '../seriesUtils'
+import { makeD3Arc } from '../../utils/d3Utils'
+import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
+
+interface RenderDatum {
+  pieDatum: PieDatum
+  arcIndex: number
+  arcLabel: string
+  x: number
+  y: number
+  mouseoverX: number
+  mouseoverY: number
+}
+
+const pluginName = 'PieLabels'
+const textClassName = getClassName(pluginName, 'text')
+
+function makeRenderData (pieData: PieDatum[], arc: d3.Arc<any, d3.DefaultArcObject>, mouseoverArc: d3.Arc<any, d3.DefaultArcObject>, centroid: number): RenderDatum[] {
+  return pieData
+    .map((d, i) => {
+      const [_x, _y] = arc!.centroid(d as any)
+      const [_mouseoverX, _mouseoverY] = mouseoverArc!.centroid(d as any)
+      return {
+        pieDatum: d,
+        arcIndex: i,
+        arcLabel: d.data.label,
+        x: _x * centroid!,
+        y: _y * centroid!,
+        mouseoverX: _mouseoverX * centroid!,
+        mouseoverY: _mouseoverY * centroid!
+      }
+    })
+    .filter(d => d.pieDatum.data.visible)
+}
+
+// 繪製圓餅圖
+function renderLabel (selection: d3.Selection<SVGGElement, undefined, any, any>, data: RenderDatum[], pluginParams: PieLabelsPluginParams, fullChartParams: ChartParams) {
+  // console.log(data)
+  // let update = this.gSelection.selectAll('g').data(pieData)
+  let update: d3.Selection<SVGPathElement, RenderDatum, any, any> = selection
+    .selectAll<SVGPathElement, RenderDatum>('text')
+    .data(data, d => d.pieDatum.id)
+  let enter = update.enter()
+    .append<SVGPathElement>('text')
+    .classed(textClassName, true)
+  let exit = update.exit()
+
+  enter
+    .append('text')
+    
+  const labelSelection = update.merge(enter)
+  labelSelection
+    .attr('font-weight', 'bold')
+    .attr('text-anchor', 'middle')
+    .style('dominant-baseline', 'middle')
+    // .style('pointer-events', 'none')
+    .style('cursor', d => fullChartParams.highlightTarget && fullChartParams.highlightTarget != 'none'
+      ? 'pointer'
+      : 'none')
+    // .text((d, i) => d.arcLabel)
+    .text(d => pluginParams.labelFn(d.pieDatum.data))
+    .attr('font-size', fullChartParams.styles.textSize)
+    .attr('fill', (d, i) => getDatumColor({ datum: d.pieDatum.data, colorType: pluginParams.labelColorType, fullChartParams }))
+    .transition()
+    .attr('transform', (d) => {
+      // console.log('transform', d)
+      return 'translate(' + d.x + ',' + d.y + ')'
+    })
+    // .on('end', () => initHighlight({ labelSelection, data, fullChartParams }))
+  exit.remove()
+
+  // 如無新增資料則不用等動畫
+  // if (enter.size() == 0) {
+  //   this.initHighlight()
+  // }
+
+  return labelSelection
+}
+
+// function initHighlight ({ labelSelection, data, fullChartParams }: {
+//   labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any>)
+//   data: RenderDatum[]
+//   fullChartParams: ChartParams
+// }) {
+//   removeHighlight({ labelSelection })
+//   // if (fullParams.highlightSeriesId || fullParams.highlightDatumId) {
+//     highlight({
+//       labelSelection,
+//       data,
+//       id: fullChartParams.highlightDefault,
+//       label: fullChartParams.highlightDefault,
+//       fullChartParams
+//     })
+//   // }
+// }
+
+function highlight ({ labelSelection, ids, fullChartParams }: {
+  labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any>)
+  ids: string[]
+  fullChartParams: ChartParams
+}) {
+  labelSelection.interrupt('highlight')
+  
+  if (!ids.length) {
+    labelSelection
+      .transition()
+      .duration(200)
+      .attr('transform', (d) => {
+        return 'translate(' + d.x + ',' + d.y + ')'
+      })
+      .style('opacity', 1)
+    return
+  }
+  
+  labelSelection.each((d, i, n) => {
+    const segment = d3.select<SVGPathElement, RenderDatum>(n[i])
+
+    if (ids.includes(d.pieDatum.id)) {
+      segment
+        .style('opacity', 1)
+        .transition()
+        .duration(200)
+        .attr('transform', (d) => {
+          return 'translate(' + d.mouseoverX + ',' + d.mouseoverY + ')'
+        })
+    } else {
+      segment
+        .style('opacity', fullChartParams.styles.unhighlightedOpacity)
+        .transition()
+        .duration(200)
+        .attr('transform', (d) => {
+          return 'translate(' + d.x + ',' + d.y + ')'
+        })
+    }
+  })
+}
+
+
+// function removeHighlight ({ labelSelection }: {
+//   labelSelection: (d3.Selection<SVGPathElement, RenderDatum, any, any> | undefined)
+// }) {
+//   if (!labelSelection) {
+//     return
+//   }
+  
+//   // 取消放大
+//   labelSelection
+//     .transition()
+//     .duration(200)
+//     .attr('transform', (d) => {
+//       return 'translate(' + d.x + ',' + d.y + ')'
+//     })
+//     .style('opacity', 1)
+
+// }
+
+
+export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
+  let labelSelection$: Subject<d3.Selection<SVGPathElement, RenderDatum, any, any>> = new Subject()
+  let renderData: RenderDatum[] = []
+  // let highlightTarget: HighlightTarget | undefined
+  // let fullChartParams: ChartParams | undefined
+
+  observer.layout$
+    .pipe(
+      first()
+    )
+    .subscribe(size => {
+      selection
+        .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+      observer.layout$
+        .pipe(
+          takeUntil(destroy$)
+        )
+        .subscribe(size => {
+          selection
+            .transition()
+            .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
+        })
+    })
+
+  
+
+  // combineLatest({
+  //   event: store.event$,
+  //   fullChartParams: fullChartParams$
+  // }).pipe(
+  //   // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
+  //   switchMap(async (d) => d),
+  // ).subscribe(d => {
+  //   if (d.event.eventName === 'mouseover' && d.event.datum) {
+  //     highlight({
+  //       labelSelection,
+  //       data: renderData,
+  //       id: d.fullChartParams.highlightTarget === 'datum' ? d.event.datum!.id : undefined,
+  //       label: d.fullChartParams.highlightTarget === 'series' ? d.event.datum!.label : undefined,
+  //       fullChartParams: d.fullChartParams
+  //     })
+  //   } else if (d.event.eventName === 'mouseout') {
+  //     removeHighlight({ labelSelection })
+  //   }
+  // })
+
+  combineLatest({
+    layout: observer.layout$,
+    computedData: observer.computedData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
+
+    // 弧產生器 (d3.arc())
+    const arc = makeD3Arc({
+      axisWidth: shorterSideWith,
+      innerRadius: 0,
+      outerRadius: data.fullParams.outerRadius,
+      padAngle: 0,
+      cornerRadius: 0
+    })
+
+    const arcMouseover = makeD3Arc({
+      axisWidth: shorterSideWith,
+      innerRadius: 0,
+      outerRadius: data.fullParams.outerMouseoverRadius, // 外半徑變化
+      padAngle: 0,
+      cornerRadius: 0
+    })
+
+    const pieData = makePieData({
+      computedDataSeries: data.computedData,
+      startAngle: data.fullParams.startAngle,
+      endAngle: data.fullParams.endAngle
+    })
+
+    renderData = makeRenderData(pieData, arc, arcMouseover, data.fullParams.labelCentroid)
+
+    const labelSelection = renderLabel(graphicSelection, renderData, data.fullParams, data.fullChartParams)
+
+    labelSelection$.next(labelSelection)
+
+  })
+
+  // const highlight$ = highlightObservable({ datumList$: computedData$, fullChartParams$, event$: store.event$ })
+  const highlightSubscription = observer.seriesHighlight$.subscribe()
+  
+  combineLatest({
+    labelSelection: labelSelection$,
+    highlight: observer.seriesHighlight$,
+    fullChartParams: observer.fullChartParams$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d)
+  ).subscribe(data => {
+    highlight({
+      labelSelection: data.labelSelection,
+      ids: data.highlight,
+      fullChartParams: data.fullChartParams,
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    highlightSubscription.unsubscribe()
+  }
+})

package/src/series/seriesUtils.ts

@@ -0,0 +1,51 @@
+import * as d3 from 'd3'
+import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
+// import type { D3PieDatum, PieDatum } from '../types'
+
+// 由d3.pie()建出來的資料格式
+export interface D3PieDatum {
+  data: any
+  index: number,
+  value: number,
+  startAngle: number,
+  endAngle: number,
+  padAngle: number,  
+}
+
+export interface PieDatum extends D3PieDatum {
+  data: ComputedDatumSeries
+  id: string
+}
+
+export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
+  computedDataSeries: ComputedDataSeries
+  startAngle: number
+  endAngle: number
+  // itemLabels: string[]
+  // arcLabels: string[]
+}): PieDatum[] {
+  let pie = d3.pie<any, any>()
+    .startAngle(startAngle)
+    // .endAngle(startAngle + (endAngle - startAngle) * t)
+    .endAngle(endAngle)
+    .value((d) => d.visible == false ? 0 : d.value)
+    // .sort(null) // 不要排序
+    .sort((a, b) => a.sortedIndex - b.sortedIndex)
+    // .sort((a: any, b: any) => {
+    //   return b.value - a.value
+    // })
+    // .sort(d3.ascending)
+  const pieData = pie(computedDataSeries)
+  return pieData.map((d: D3PieDatum, i: number) => {
+    // const itemLabel = d.data.itemLabel
+    let _d: any = d
+    _d.id = d.data.id
+    return _d
+    // return {
+    //   ...d,
+    //   itemIndex: itemLabels.indexOf(itemLabel),
+    //   itemLabel,
+    //   id: d.data.id,
+    // }
+  })
+}

package/src/series/types.ts

@@ -0,0 +1,53 @@
+import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
+
+export type ScaleType = 'area' | 'radius'
+
+export interface BubblesPluginParams {
+  force: {
+    strength: number; // 泡泡引力
+    velocityDecay: number; // 衰減數
+    collisionSpacing: number // 泡泡間距
+  }
+  bubbleText: {
+    fillRate: number
+    lineHeight: number
+    lineLengthMin: number
+  }
+  highlightRIncrease: number
+  scaleType: ScaleType
+}
+
+export interface PiePluginParams {
+  // padding: Padding
+  outerRadius: number;
+  innerRadius: number;
+  outerMouseoverRadius: number;
+  // label?: LabelStyle
+  enterDuration: number
+  startAngle: number
+  endAngle: number
+  padAngle: number
+  // padRadius: number
+  cornerRadius: number
+}
+
+export interface PieEventTextsPluginParams {
+  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
+  textAttrs: Array<{ [key:string]: string | number }>
+  textStyles: Array<{ [key:string]: string | number }>
+}
+
+export interface PieLabelsPluginParams {
+  // solidColor?: string;
+  // colors?: string[];
+  outerRadius: number
+  outerMouseoverRadius: number
+  // innerRadius?: number;
+  // enterDuration?: number
+  startAngle: number
+  endAngle: number
+  labelCentroid: number
+  // fontSize?: number
+  labelFn: ((d: ComputedDatumSeries) => string)
+  labelColorType: ColorType
+}

package/src/utils/commonUtils.ts

@@ -0,0 +1,22 @@
+// 取得文字寬度
+export function measureTextWidth (text: string, size: number = 10) {
+  const context = document.createElement("canvas").getContext("2d")
+  let width = context?.measureText(text)?.width ?? 0
+  return width * size / 10 // 以10為基準
+}
+
+// 取得最小及最大值 - 數字陣列
+export function getMinAndMax (data: number[]): [number, number] {
+  const defaultMinAndMax: [number, number] = [0, 0] // default
+  if (!data.length) {
+    return defaultMinAndMax
+  }
+  const minAndMax: [number, number] = data.reduce((prev, current) => {
+    // [min, max]
+    return [
+      current < prev[0] ? current : prev[0],
+      current > prev[1] ? current : prev[1]
+    ]
+  }, [data[0], data[0]])
+  return minAndMax
+}