@orbcharts/plugins-basic 3.0.6 → 3.0.7

package/src/series/seriesObservables.ts

@@ -1,168 +1,168 @@
-import * as d3 from 'd3'
-import {
-  Observable,
-  Subject,
-  of,
-  takeUntil,
-  filter,
-  first,
-  map,
-  switchMap,
-  combineLatest,
-  merge,
-  shareReplay,
-  distinctUntilChanged
-} from 'rxjs'
-import type {
-  ContainerPosition,
-  ComputedDatumSeries } from '../../lib/core-types'
-import { getClassName, getUniID } from '../utils/orbchartsUtils'
-
-function createSeriesSelection ({ selection, pluginName, visibleComputedSortedData$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  // separateSeries$: Observable<boolean>
-  // separateLabel$: Observable<boolean>
-  // seriesLabels$: Observable<string[]>
-  // datumLabels$: Observable<string[]>
-  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
-}) {
-  const seriesClassName = getClassName(pluginName, 'series')
-  
-  return visibleComputedSortedData$.pipe(
-    map(data => data.map(series => series[0] ? `${series[0].seriesLabel}_${series[0].label}` : '')),
-    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
-    map(data => {
-      return selection
-      .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
-      .data(data, d => d)
-      .join(
-        enter => {
-          return enter
-            .append('g')
-            .classed(seriesClassName, true)
-        },
-        update => update,
-        exit => exit.remove()
-      )
-    }),
-    shareReplay(1)
-  )
-
-
-  // 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)
-  // )
-}
-
-// series選取器，以起始座標位置為基準
-export const seriesStartSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
-  seriesContainerPosition$: Observable<ContainerPosition[]>
-}) => {
-  
-  const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
-
-  combineLatest({
-    seriesStartSelection: seriesStartSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-    // selection數量不同的時候才執行
-    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
-  ).subscribe(data => {
-    // 無transition動畫
-    data.seriesStartSelection
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
-      })
-  })
-
-  combineLatest({
-    seriesStartSelection: seriesStartSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-  ).subscribe(data => {
-    // 有transition動畫
-    data.seriesStartSelection
-      .transition()
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
-      })
-  })
-
-  return {
-    seriesStartSelection$
-  }
-}
-
-// series選取器，以中心座標位置為基準
-export const seriesCenterSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
-  selection: d3.Selection<any, unknown, any, unknown>
-  pluginName: string
-  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
-  seriesContainerPosition$: Observable<ContainerPosition[]>
-}) => {
-  
-  const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
-
-  combineLatest({
-    seriesCenterSelection: seriesCenterSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-    // selection數量相同的時候才執行
-    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
-  ).subscribe(data => {
-    // 無transition動畫
-    data.seriesCenterSelection
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
-      })
-  })
-
-  combineLatest({
-    seriesCenterSelection: seriesCenterSelection$,
-    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
-  }).pipe(
-    switchMap(async d => d),
-  ).subscribe(data => {
-    // 有transition動畫
-    data.seriesCenterSelection
-      .transition()
-      .attr('transform', (d, i) => {
-        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
-        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
-      })
-  })
-
-  return {
-    seriesCenterSelection$,
-  }
-}
-
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ContainerPosition,
+  ComputedDatumSeries } from '../../lib/core-types'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+function createSeriesSelection ({ selection, pluginName, visibleComputedSortedData$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  // separateSeries$: Observable<boolean>
+  // separateLabel$: Observable<boolean>
+  // seriesLabels$: Observable<string[]>
+  // datumLabels$: Observable<string[]>
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+}) {
+  const seriesClassName = getClassName(pluginName, 'series')
+  
+  return visibleComputedSortedData$.pipe(
+    map(data => data.map(series => series[0] ? `${series[0].seriesLabel}_${series[0].label}` : '')),
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    map(data => {
+      return selection
+      .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+      .data(data, d => d)
+      .join(
+        enter => {
+          return enter
+            .append('g')
+            .classed(seriesClassName, true)
+        },
+        update => update,
+        exit => exit.remove()
+      )
+    }),
+    shareReplay(1)
+  )
+
+
+  // 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)
+  // )
+}
+
+// series選取器，以起始座標位置為基準
+export const seriesStartSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+}) => {
+  
+  const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
+
+  combineLatest({
+    seriesStartSelection: seriesStartSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+    // selection數量不同的時候才執行
+    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
+  ).subscribe(data => {
+    // 無transition動畫
+    data.seriesStartSelection
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
+      })
+  })
+
+  combineLatest({
+    seriesStartSelection: seriesStartSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+  ).subscribe(data => {
+    // 有transition動畫
+    data.seriesStartSelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.startX}, ${seriesContainerPosition.startY})`
+      })
+  })
+
+  return {
+    seriesStartSelection$
+  }
+}
+
+// series選取器，以中心座標位置為基準
+export const seriesCenterSelectionObservable = ({ selection, pluginName, visibleComputedSortedData$, seriesContainerPosition$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
+}) => {
+  
+  const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, visibleComputedSortedData$ })
+
+  combineLatest({
+    seriesCenterSelection: seriesCenterSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+    // selection數量相同的時候才執行
+    distinctUntilChanged((a, b) => a.seriesContainerPosition.length === b.seriesContainerPosition.length)
+  ).subscribe(data => {
+    // 無transition動畫
+    data.seriesCenterSelection
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
+      })
+  })
+
+  combineLatest({
+    seriesCenterSelection: seriesCenterSelection$,
+    seriesContainerPosition: seriesContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d),
+  ).subscribe(data => {
+    // 有transition動畫
+    data.seriesCenterSelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const seriesContainerPosition = data.seriesContainerPosition[i] ?? data.seriesContainerPosition[0]
+        return `translate(${seriesContainerPosition.centerX}, ${seriesContainerPosition.centerY})`
+      })
+  })
+
+  return {
+    seriesCenterSelection$,
+  }
+}
+

package/src/series/seriesUtils.ts

@@ -1,52 +1,52 @@
-import * as d3 from 'd3'
-import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '../../lib/core-types'
-// 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 ({ data, startAngle, endAngle }: {
-  data: ComputedDatumSeries[]
-  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.value)
-    // .value((d) => d.visible == false ? 0 : d.value)
-    // .sort(null) // 不要排序
-    .sort((a, b) => a.seq - b.seq)
-    // .sort((a: any, b: any) => {
-    //   return b.value - a.value
-    // })
-    // .sort(d3.ascending)
-  const pieData = pie(data)
-  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,
-    // }
-  })
+import * as d3 from 'd3'
+import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '../../lib/core-types'
+// 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 ({ data, startAngle, endAngle }: {
+  data: ComputedDatumSeries[]
+  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.value)
+    // .value((d) => d.visible == false ? 0 : d.value)
+    // .sort(null) // 不要排序
+    .sort((a, b) => a.seq - b.seq)
+    // .sort((a: any, b: any) => {
+    //   return b.value - a.value
+    // })
+    // .sort(d3.ascending)
+  const pieData = pie(data)
+  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/tree/defaults.ts

@@ -1,103 +1,103 @@
-import type { TreeMapParams, TreeLegendParams, TreeTooltipParams } from '../../lib/plugins-basic-types'
-
-export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
-  paddingInner: 2,
-  paddingOuter: 2,
-  labelColorType: 'labelContrast',
-  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 valueText = utils.toCurrency(eventData.datum.value)
-    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 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" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</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 valueText = utils.toCurrency(eventData.datum.value)
-  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 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" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
-</text>\`
-
-  return \`\${categorySvg}
-<g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
-  \${datumSvg}
-</g>\`
+import type { TreeMapParams, TreeLegendParams, TreeTooltipParams } from '../../lib/plugins-basic-types'
+
+export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
+  paddingInner: 2,
+  paddingOuter: 2,
+  labelColorType: 'labelContrast',
+  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 valueText = utils.toCurrency(eventData.datum.value)
+    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 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" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</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 valueText = utils.toCurrency(eventData.datum.value)
+  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 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" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
+</text>\`
+
+  return \`\${categorySvg}
+<g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+  \${datumSvg}
+</g>\`
 }`

package/src/tree/index.ts

@@ -1,5 +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'