@orbcharts/plugins-basic 3.0.0-alpha.79 → 3.0.0-beta.10

package/src/tree/defaults.ts

@@ -1,23 +1,79 @@
-import type { TreeMapParams, TreeLegendParams } from '../../lib/plugins-basic-types'
-
-export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
-  paddingInner: 2,
-  paddingOuter: 2,
-  labelColorType: 'primary',
-  squarifyRatio: 1.618034, // 黃金比例
-  sort: (a, b) => b.value - a.value
-}
-DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`
-
-export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
-  position: 'right',
-  justify: 'end',
-  padding: 28,
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  textColorType: 'primary'
-}
+import type { TreeMapParams, TreeLegendParams, TreeTooltipParams } from '../../lib/plugins-basic-types'
+
+export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
+  paddingInner: 2,
+  paddingOuter: 2,
+  labelColorType: 'primary',
+  squarifyRatio: 1.618034, // 黃金比例
+  sort: (a, b) => b.value - a.value
+}
+DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`
+
+export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'right-end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  textColorType: 'primary'
+}
+
+export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  renderFn: (eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel ? true : false
+    const hasDatumLabel = eventData.datum.label ? true : false
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const categorySvg = hasCategoryLabel
+      ? `<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.categoryLabel}</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 `${categorySvg}
+  <g ${hasCategoryLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+    ${datumSvg}
+  </g>`
+  },
+}
+DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel ? true : false
+    const hasDatumLabel = eventData.datum.label ? true : false
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const categorySvg = hasCategoryLabel
+      ? \`<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.categoryLabel}</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 \`\${categorySvg}
+  <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+    \${datumSvg}
+  </g>\`
+}`

package/src/tree/index.ts

@@ -1,4 +1,5 @@
-export * from './defaults'
-// export * from './types'
-export { TreeLegend } from './plugins/TreeLegend'
-export { TreeMap } from './plugins/TreeMap'
+export * from './defaults'
+// export * from './types'
+export { TreeLegend } from './plugins/TreeLegend'
+export { TreeMap } from './plugins/TreeMap'
+export { TreeTooltip } from './plugins/TreeTooltip'

package/src/tree/plugins/TreeLegend.ts

@@ -1,96 +1,100 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineTreePlugin } from '../../../lib/core'
-import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
-import { createBaseLegend } from '../../base/BaseLegend'
-import { LAYER_INDEX_OF_INFO } from '../../const'
-
-const pluginName = 'TreeLegend'
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_TREE_LEGEND_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_TREE_LEGEND_PARAMS,
-  layerIndex: LAYER_INDEX_OF_INFO,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      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 TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return Array.from(data.keys())
-    })
-  )
-
-  // 全部列點矩型使用相同樣式參數
-  const fullParams$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      const seriesList = [
-        {
-          listRectWidth: d.listRectWidth,
-          listRectHeight: d.listRectHeight,
-          listRectRadius: d.listRectRadius,
-        }
-      ]
-      return {
-        ...d,
-        seriesList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    seriesLabels$: categoryLabels$,
-    fullParams$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    textSizePx$: observer.textSizePx$
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseLegend()
-  }
-})
-
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineTreePlugin } from '../../../lib/core'
+import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'TreeLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_TREE_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_TREE_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 TreeLegend = defineTreePlugin(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()
+  }
+})
+