@orbcharts/plugins-basic 3.0.0-beta.1 → 3.0.0-beta.10

package/src/relationship/plugins/RelationshipLegend.ts

@@ -0,0 +1,100 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'RelationshipLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      placement: {
+        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
+        test: (value) => {
+          return [
+            'top', 'top-start', 'top-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end',
+            'right', 'right-start', 'right-end'
+          ].includes(value)
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const RelationshipLegend = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const labelList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        labelList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    legendLabels$: observer.categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/relationship/plugins/RelationshipTooltip.ts

@@ -0,0 +1,66 @@
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'RelationshipTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      backgroundColorType: {
+        toBeOption: 'ColorType',
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      offset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      },
+      renderFn: {
+        toBeTypes: ['Function']
+      },
+    })
+    return result
+  }
+}
+
+export const RelationshipTooltip = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeTooltip = createBaseTooltip(pluginName, {
+    rootSelection,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeTooltip()
+  }
+})

package/src/relationship/relationshipObservables.ts

@@ -0,0 +1,50 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ContainerPosition } from '../../lib/core-types'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+// function createRelationshipSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
+//   selection: d3.Selection<any, unknown, any, unknown>
+//   pluginName: string
+//   separateSeries$: Observable<boolean>
+//   seriesLabels$: Observable<string[]>
+// }) {
+//   const seriesClassName = getClassName(pluginName, 'series')
+  
+//   return combineLatest({
+//     seriesLabels: seriesLabels$,
+//     separateSeries: separateSeries$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map((data, i) => {
+//       const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')]
+//       return selection
+//         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+//         .data(selectionData, d => d)
+//         .join(
+//           enter => {
+//             return enter
+//               .append('g')
+//               .classed(seriesClassName, true)
+//           },
+//           update => update,
+//           exit => exit.remove()
+//         )
+//     }),
+//     shareReplay(1)
+//   )
+// }

package/src/series/defaults.ts

@@ -1,207 +1,207 @@
-import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '../../lib/core-types'
-import type {
-  BubblesParams,
-  PieParams,
-  PieEventTextsParams,
-  PieLabelsParams,
-  RoseParams,
-  RoseLabelsParams,
-  SeriesLegendParams,
-  SeriesTooltipParams
-} from '../../lib/plugins-basic-types'
-
-  
-export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
-  force: {
-    strength: 0.08, // 泡泡引力
-    velocityDecay: 0.3, // 衰減數
-    collisionSpacing: 2 // 泡泡間距
-  },
-  bubbleText: {
-    fillRate: 0.6,
-    lineHeight: 12,
-    lineLengthMin: 4
-  },
-  // highlightRIncrease: 0,
-  arcScaleType: 'area'
-}
-
-export const DEFAULT_PIE_PARAMS: PieParams = {
-  // padding: {
-  //   top: 50,
-  //   right: 70,
-  //   bottom: 50,
-  //   left: 70
-  // },
-  outerRadius: 0.85,
-  innerRadius: 0,
-  outerRadiusWhileHighlight: 0.9,
-  // label?: LabelStyle
-  // enterDuration: 800,
-  startAngle: 0,
-  endAngle: Math.PI * 2,
-  padAngle: 0,
-  strokeColorType: 'background',
-  strokeWidth: 1,
-  // padRadius: 100,
-  cornerRadius: 0,
-  // highlightTarget: 'datum',
-  // highlightId: null,
-  // highlightLabel: null,
-}
-
-export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
-  eventFn: (eventData: EventSeries, eventName: EventName, t: number) => {
-    if (eventName === 'mouseover' || eventName === 'mousemove') {
-      return [String(eventData.datum!.value)]
-    }
-    return [
-      String(
-        Math.round(
-          eventData.data.reduce((acc, seriesData) => {
-            return acc + seriesData.reduce((_acc, data) => {
-              return _acc + (data.value ?? 0)
-            }, 0)
-          }, 0) * t
-        )
-      )
-    ]
-  },
-  textAttrs: [
-    {
-      "transform": "translate(0, 0)"
-    }
-  ],
-  textStyles: [
-    {
-      "font-weight": "bold",
-      "text-anchor": "middle",
-      "pointer-events": "none",
-      "dominant-baseline": "middle",
-      "font-size": 64,
-      "fill": "#000"
-    }
-  ]
-}
-DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries, eventName: EventName, t: number) => {
-  if (eventName === 'mouseover' || eventName === 'mousemove') {
-    return [String(eventData.datum!.value)]
-  }
-  return [
-    String(
-      Math.round(
-        eventData.data.reduce((acc, seriesData) => {
-          return acc + seriesData.reduce((_acc, data) => {
-            return _acc + (data.value ?? 0)
-          }, 0)
-        }, 0) * t
-      )
-    )
-  ]
-}`
-
-export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
-  // solidColor: undefined,
-  // colors: DEFAULT_COLORS,
-  outerRadius: 0.85,
-  outerRadiusWhileHighlight: 0.9,
-  // innerRadius: 0,
-  // enterDuration: 800,
-  startAngle: 0,
-  endAngle: Math.PI * 2,
-  labelCentroid: 2.1,
-  // fontSize: 12,
-  labelColorType: 'primary',
-  labelFn: d => String(d.label),
-}
-DEFAULT_PIE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
-
-export const DEFAULT_ROSE_PARAMS: RoseParams = {
-  outerRadius: 0.85,
-  padAngle: 0,
-  strokeColorType: 'background',
-  strokeWidth: 0,
-  cornerRadius: 0,
-  arcScaleType: 'area',
-  angleIncreaseWhileHighlight: 0.05
-}
-
-export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
-  outerRadius: 0.85,
-  labelCentroid: 2.1,
-  labelFn: d => String(d.label),
-  labelColorType: 'primary',
-  arcScaleType: 'area'
-}
-DEFAULT_ROSE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
-
-export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
-  // position: 'right',
-  // justify: 'end',
-  placement: 'right-end',
-  padding: 28,
-  // offset: [0, 0],
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  // highlightEvent: false
-  textColorType: 'primary'
-}
-
-export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
-  backgroundColorType: 'background',
-  strokeColorType: 'primary',
-  backgroundOpacity: 0.8,
-  textColorType: 'primary',
-  offset: [20, 5],
-  padding: 10,
-  renderFn: (eventData, { styles }) => {
-    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
-    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
-    const bulletWidth = styles.textSizePx * 0.7
-    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
-    const seriesSvg = hasSeriesLabel
-      ? `<rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset - 1}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
-  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    <tspan>${eventData.seriesLabel}</tspan>
-  </text>`
-      : ''
-    const datumLabelSvg = hasDatumLabel
-      ? `<tspan>${eventData.datum.label}</tspan>  `
-      : ''
-    const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
-  </text>`
-
-    return `${seriesSvg}
-  <g ${hasSeriesLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
-    ${datumSvg}
-  </g>`
-  },
-}
-DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
-    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
-    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
-    const bulletWidth = styles.textSizePx * 0.7
-    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
-    const seriesSvg = hasSeriesLabel
-      ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
-  <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    <tspan>\${eventData.seriesLabel}</tspan>
-  </text>\`
-      : ''
-    const datumLabelSvg = hasDatumLabel
-      ? \`<tspan>\${eventData.datum.label}</tspan>  \`
-      : ''
-    const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
-  </text>\`
-
-    return \`\${seriesSvg}
-  <g \${hasSeriesLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
-    \${datumSvg}
-  </g>\`
+import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '../../lib/core-types'
+import type {
+  BubblesParams,
+  PieParams,
+  PieEventTextsParams,
+  PieLabelsParams,
+  RoseParams,
+  RoseLabelsParams,
+  SeriesLegendParams,
+  SeriesTooltipParams
+} from '../../lib/plugins-basic-types'
+
+  
+export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
+  force: {
+    strength: 0.08, // 泡泡引力
+    velocityDecay: 0.3, // 衰減數
+    collisionSpacing: 2 // 泡泡間距
+  },
+  bubbleLabel: {
+    fillRate: 0.6,
+    lineHeight: 1,
+    lineLengthMin: 4
+  },
+  // highlightRIncrease: 0,
+  arcScaleType: 'area'
+}
+
+export const DEFAULT_PIE_PARAMS: PieParams = {
+  // padding: {
+  //   top: 50,
+  //   right: 70,
+  //   bottom: 50,
+  //   left: 70
+  // },
+  outerRadius: 0.85,
+  innerRadius: 0,
+  outerRadiusWhileHighlight: 0.9,
+  // label?: LabelStyle
+  // enterDuration: 800,
+  startAngle: 0,
+  endAngle: Math.PI * 2,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 1,
+  // padRadius: 100,
+  cornerRadius: 0,
+  // highlightTarget: 'datum',
+  // highlightId: null,
+  // highlightLabel: null,
+}
+
+export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
+  renderFn: (eventData: EventSeries) => {
+    if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+      return [String(eventData.datum!.value)]
+    }
+    return [
+      String(
+        Math.round(
+          eventData.data.reduce((acc, seriesData) => {
+            return acc + seriesData.reduce((_acc, data) => {
+              return _acc + (data.value ?? 0)
+            }, 0)
+          }, 0) * (eventData.tween ?? 1)
+        )
+      )
+    ]
+  },
+  textAttrs: [
+    {
+      "transform": "translate(0, 0)"
+    }
+  ],
+  textStyles: [
+    {
+      "font-weight": "bold",
+      "text-anchor": "middle",
+      "pointer-events": "none",
+      "dominant-baseline": "middle",
+      "font-size": 64,
+      "fill": "#000"
+    }
+  ]
+}
+DEFAULT_PIE_EVENT_TEXTS_PARAMS.renderFn.toString = () => `(eventData) => {
+  if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+    return [String(eventData.datum.value)]
+  }
+  return [
+    String(
+      Math.round(
+        eventData.data.reduce((acc, seriesData) => {
+          return acc + seriesData.reduce((_acc, data) => {
+            return _acc + (data.value ?? 0)
+          }, 0)
+        }, 0) * (eventData.tween ?? 1)
+      )
+    )
+  ]
+}`
+
+export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
+  // solidColor: undefined,
+  // colors: DEFAULT_COLORS,
+  outerRadius: 0.85,
+  outerRadiusWhileHighlight: 0.9,
+  // innerRadius: 0,
+  // enterDuration: 800,
+  startAngle: 0,
+  endAngle: Math.PI * 2,
+  labelCentroid: 2.1,
+  // fontSize: 12,
+  labelColorType: 'primary',
+  labelFn: d => String(d.label),
+}
+DEFAULT_PIE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
+
+export const DEFAULT_ROSE_PARAMS: RoseParams = {
+  outerRadius: 0.85,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 0,
+  cornerRadius: 0,
+  arcScaleType: 'area',
+  angleIncreaseWhileHighlight: 0.05
+}
+
+export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
+  outerRadius: 0.85,
+  labelCentroid: 2.1,
+  labelFn: d => String(d.label),
+  labelColorType: 'primary',
+  arcScaleType: 'area'
+}
+DEFAULT_ROSE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
+
+export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'right-end',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+  textColorType: 'primary'
+}
+
+export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  renderFn: (eventData, { styles, utils }) => {
+    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const seriesSvg = hasSeriesLabel
+      ? `<rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset - 1}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
+  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    <tspan>${eventData.seriesLabel}</tspan>
+  </text>`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? `<tspan>${eventData.datum.label}</tspan>  `
+      : ''
+    const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+  </text>`
+
+    return `${seriesSvg}
+  <g ${hasSeriesLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+    ${datumSvg}
+  </g>`
+  },
+}
+DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const seriesSvg = hasSeriesLabel
+      ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
+  <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+    <tspan>\${eventData.seriesLabel}</tspan>
+  </text>\`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? \`<tspan>\${eventData.datum.label}</tspan>  \`
+      : ''
+    const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+  </text>\`
+
+    return \`\${seriesSvg}
+  <g \${hasSeriesLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+    \${datumSvg}
+  </g>\`
 }`

package/src/series/index.ts

@@ -1,10 +1,10 @@
-export * from './defaults'
-// export * from './types'
-export { Bubbles } from './plugins/Bubbles'
-export { Pie } from './plugins/Pie'
-export { PieEventTexts } from './plugins/PieEventTexts'
-export { PieLabels } from './plugins/PieLabels'
-export { Rose } from './plugins/Rose'
-export { RoseLabels } from './plugins/RoseLabels'
-export { SeriesLegend } from './plugins/SeriesLegend'
+export * from './defaults'
+// export * from './types'
+export { Bubbles } from './plugins/Bubbles'
+export { Pie } from './plugins/Pie'
+export { PieEventTexts } from './plugins/PieEventTexts'
+export { PieLabels } from './plugins/PieLabels'
+export { Rose } from './plugins/Rose'
+export { RoseLabels } from './plugins/RoseLabels'
+export { SeriesLegend } from './plugins/SeriesLegend'
 export { SeriesTooltip } from './plugins/SeriesTooltip'