@orbcharts/plugins-basic 3.0.0-beta.8 → 3.0.0

package/src/multiValue/plugins/{XYZoom.ts → XZoom.ts}

@@ -13,16 +13,16 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterMultiValue } from '../../../lib/core-types'
 import {
   defineMultiValuePlugin, createValueToAxisScale } from '../../../lib/core'
-import { DEFAULT_X_Y_ZOOM_PARAMS } from '../defaults'
+import { DEFAULT_X_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
 
-const pluginName = 'XYZoom'
+const pluginName = 'XZoom'
 const rectClassName = getClassName(pluginName, 'rect')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_Y_ZOOM_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_ZOOM_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_X_Y_ZOOM_PARAMS,
+  defaultParams: DEFAULT_X_ZOOM_PARAMS,
   layerIndex: LAYER_INDEX_OF_ROOT,
   validator: (params, { validateColumns }) => {
     return {
@@ -33,7 +33,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_Y_ZOO
   }
 }
 
-export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+export const XZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 
@@ -119,15 +119,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     combineLatest({
       initXAxis: initXAxis$,
       layout: observer.layout$,
-      minMaxXY: observer.minMaxXY$
+      xyMinMax: observer.xyMinMax$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
     
       const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.minMaxXY.maxX,
-        minValue: data.minMaxXY.minX,
+        maxValue: data.xyMinMax.maxX,
+        minValue: data.xyMinMax.minX,
         axisWidth: data.layout.width,
         scaleDomain: data.initXAxis.scaleDomain,
         scaleRange: data.initXAxis.scaleRange,
@@ -141,15 +141,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     combineLatest({
       initYAxis: initYAxis$,
       layout: observer.layout$,
-      minMaxXY: observer.minMaxXY$
+      xyMinMax: observer.xyMinMax$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
     
       const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.minMaxXY.maxY,
-        minValue: data.minMaxXY.minY,
+        maxValue: data.xyMinMax.maxY,
+        minValue: data.xyMinMax.minY,
         axisWidth: data.layout.height,
         scaleDomain: data.initYAxis.scaleDomain,
         scaleRange: data.initYAxis.scaleRange,
@@ -163,15 +163,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
   const minMaxScaleDomain$ = combineLatest({
     initXAxis: initXAxis$,
     initYAxis: initYAxis$,
-    minMaxXY: observer.minMaxXY$
+    xyMinMax: observer.xyMinMax$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      let minX = data.minMaxXY.minX
-      let maxX = data.minMaxXY.maxX
-      let minY = data.minMaxXY.minY
-      let maxY = data.minMaxXY.maxY
+      let minX = data.xyMinMax.minX
+      let maxX = data.xyMinMax.maxX
+      let minY = data.xyMinMax.minY
+      let maxY = data.xyMinMax.maxY
 
       // 原始設定為auto時要額外判斷
       if (data.initXAxis.scaleDomain[0] === 'auto' && minX > 0) {
@@ -202,7 +202,7 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     fullDataFormatter: observer.fullDataFormatter$,
     // groupMax: groupMax$,
-    // minMaxXY: observer.minMaxXY$,
+    // xyMinMax: observer.xyMinMax$,
     minMaxScaleDomain: minMaxScaleDomain$,
     // layout: observer.layout$,
     // axisSize: observer.gridAxesSize$

package/src/relationship/defaults.ts

@@ -1,30 +1,56 @@
 import type {
   ForceDirectedParams,
+  ForceDirectedBubblesParams,
   RelationshipLegendParams,
   RelationshipTooltipParams
 } from '../../lib/plugins-basic-types'
 
 
 export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
-  node: {
-    dotRadius: 10,
-    dotFillColorType: 'label',
-    dotStrokeColorType: 'label',
-    dotStrokeWidth: 1,
-    dotStyleFn: (node) => '',
-    labelColorType: 'primary',
-    labelSizeFixed: false,
-    labelStyleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+  // node: {
+  //   dotRadius: 10,
+  //   dotFillColorType: 'label',
+  //   dotStrokeColorType: 'label',
+  //   dotStrokeWidth: 1,
+  //   dotStyleFn: (node) => '',
+  //   labelColorType: 'primary',
+  //   labelSizeFixed: false,
+  //   labelStyleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+  // },
+  // edge: {
+  //   arrowColorType: 'primary',
+  //   arrowStrokeWidth: 1.5,
+  //   arrowWidth: 5,
+  //   arrowHeight: 5,
+  //   arrowStyleFn: (node) => '',
+  //   labelColorType: 'secondary',
+  //   labelSizeFixed: false,
+  //   labelStyleFn: (node) => ''
+  // },
+  dot: {
+    radius: 10,
+    fillColorType: 'label',
+    strokeColorType: 'label',
+    strokeWidth: 1,
+    styleFn: (node) => '',
   },
-  edge: {
-    arrowColorType: 'primary',
-    arrowStrokeWidth: 1.5,
-    arrowWidth: 5,
-    arrowHeight: 5,
-    arrowStyleFn: (node) => '',
-    labelColorType: 'secondary',
-    labelSizeFixed: false,
-    labelStyleFn: (node) => ''
+  dotLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    // styleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+    styleFn: (node) => ''
+  },
+  arrow: {
+    colorType: 'primary',
+    strokeWidth: 1.5,
+    pointerWidth: 5,
+    pointerHeight: 5,
+    styleFn: (node) => '',
+  },
+  arrowLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    styleFn: (node) => ''
   },
   force: {
     nodeStrength: -500, // 泡泡引力
@@ -44,6 +70,65 @@ export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
     max: Infinity
   }
 }
+DEFAULT_FORCE_DIRECTED_PARAMS.dot.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.dotLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
+
+export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams = {
+  bubble: {
+    radiusMin: 15,
+    radiusMax: 45,
+    arcScaleType: 'area',
+    fillColorType: 'label',
+    strokeColorType: 'label',
+    strokeWidth: 1,
+    styleFn: (node) => '',
+  },
+  bubbleLabel: {
+    fillRate: 0.9,
+    lineHeight: 1,
+    maxLineLength: 6,
+    wordBreakAll: true,
+    colorType: 'labelContrast',
+    styleFn: (node) => ''
+  },
+  arrow: {
+    colorType: 'primary',
+    strokeWidthMin: 1.5,
+    strokeWidthMax: 4.5,
+    pointerWidth: 5,
+    pointerHeight: 5,
+    styleFn: (node) => '',
+  },
+  arrowLabel: {
+    colorType: 'primary',
+    sizeFixed: false,
+    styleFn: (node) => ''
+  },
+  force: {
+    nodeStrength: -500, // 泡泡引力
+    linkDistance: 130, // 連結長度
+    velocityDecay: 0.1, // 衰減數
+    alphaDecay: 0.05
+    // collisionSpacing: 2 // 泡泡間距
+  },
+  zoomable: true,
+  transform: {
+    x: 0,
+    y: 0,
+    k: 1
+  },
+  scaleExtent: {
+    min: 0,
+    max: Infinity
+  }
+}
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubble.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubbleLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
+
 
 export const DEFAULT_RELATIONSHIP_LEGEND_PARAMS: RelationshipLegendParams = {
   placement: 'right-end',
@@ -67,6 +152,7 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
   renderFn: (eventData, { styles, utils }) => {
     const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
+    const valueText = utils.toCurrency(eventData.datum.value)
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
     const categorySvg = hasCategoryLabel
@@ -78,8 +164,19 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(`${eventData.categoryLabel}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${valueText}`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 0.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</tspan>
   </text>`
 
     return `${categorySvg}
@@ -91,6 +188,7 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
 DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
   const hasCategoryLabel = eventData.categoryLabel ? true : false
   const hasDatumLabel = eventData.datum.label ? true : false
+  const valueText = utils.toCurrency(eventData.datum.value)
   const bulletWidth = styles.textSizePx * 0.7
   const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
   const categorySvg = hasCategoryLabel
@@ -102,8 +200,19 @@ DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { sty
   const datumLabelSvg = hasDatumLabel
     ? \`<tspan>\${eventData.datum.label}</tspan>  \`
     : ''
+  const categoryLabelTextWidth = hasCategoryLabel
+    ? utils.measureTextWidth(\`\${eventData.categoryLabel}\${valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+    : 0
+  const datumLabelTextWidth = hasDatumLabel
+    ? utils.measureTextWidth(\`\${eventData.datum.label}\${valueText}\`, styles.textSizePx)
+    : 0
+  const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+  const lineEndX = hasDatumLabel
+    ? maxTextWidth + styles.textSizePx * 0.5
+    : 0
+  const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
   const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-  \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+  \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
 </text>\`
 
   return \`\${categorySvg}

package/src/relationship/index.ts

@@ -1,4 +1,5 @@
 export * from './defaults'
 export { ForceDirected } from './plugins/ForceDirected'
+export { ForceDirectedBubbles } from './plugins/ForceDirectedBubbles'
 export { RelationshipLegend } from './plugins/RelationshipLegend'
 export { RelationshipTooltip } from './plugins/RelationshipTooltip'