@orbcharts/plugin-basic 4.0.0-pre-alpha.0

package/src/plugins/Tooltip/defaults.ts

@@ -0,0 +1,458 @@
+import type { TooltipParams, TooltipPluginParams } from './types'
+import type { EventData, ModelDatumMultivariate, ModelDatumSeries } from '@orbcharts/core'
+
+export const DEFAULT_SERIES_TOOLTIP_PLUGIN_PARAMS: TooltipPluginParams = {
+  styles: {
+    padding: {
+      top: 60,
+      right: 60,
+      bottom: 60,
+      left: 60
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum: ModelDatumSeries) => true,
+  sort: null,
+  datasetIndex: 0
+}
+DEFAULT_SERIES_TOOLTIP_PLUGIN_PARAMS.visibleFilter.toString = () => '(datum) => true'
+
+export const DEFAULT_SERIES_TOOLTIP_PARAMS: TooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  // renderFn: (eventData, { styles, utils }) => {
+  //   const hasSeriesLabel = eventData.target.series.slice(0, 7) === 'series_' ? false : true
+  //   const hasDatumLabel = eventData.target.name.slice(0, 7) === 'series_' ? false : true
+  //   const valueText = utils.toCurrency(eventData.target.value)
+  //   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.target.color}"></rect>
+  // <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  //   <tspan>${eventData.target.name}</tspan>
+  // </text>`
+  //     : ''
+  //   const datumLabelSvg = hasDatumLabel
+  //     ? `<tspan>${eventData.target.name}</tspan>  `
+  //     : ''
+  //   const seriesLabelTextWidth = hasSeriesLabel
+  //     ? utils.measureTextWidth(`${eventData.target.series}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+  //     : 0
+  //   const datumLabelTextWidth = hasDatumLabel
+  //     ? utils.measureTextWidth(`${eventData.target.name}${valueText}`, styles.textSizePx)
+  //     : 0
+  //   const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+  //   const lineEndX = hasDatumLabel
+  //     ? maxTextWidth + styles.textSizePx * 1.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 `${seriesSvg}
+  // <g ${hasSeriesLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+  //   ${datumSvg}
+  // </g>`
+  // },
+  renderFn: (eventData, { styles, utils, categoryData }) => {
+    function renderSeriesData () {
+      const hasSeriesLabel = eventData.target.series.slice(0, 7) === 'series_' ? false : true
+      const hasDatumLabel = eventData.target.name.slice(0, 7) === 'series_' ? false : true
+      const valueText = utils.toCurrency(eventData.target.value)
+      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.target.color}"></rect>
+  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    <tspan>${eventData.target.name}</tspan>
+  </text>`
+        : ''
+      const datumLabelSvg = hasDatumLabel
+        ? `<tspan>${eventData.target.name}</tspan>  `
+        : ''
+      const seriesLabelTextWidth = hasSeriesLabel
+        ? utils.measureTextWidth(`${eventData.target.series}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+        : 0
+      const datumLabelTextWidth = hasDatumLabel
+        ? utils.measureTextWidth(`${eventData.target.name}${valueText}`, styles.textSizePx)
+        : 0
+      const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+      const lineEndX = hasDatumLabel
+        ? maxTextWidth + styles.textSizePx * 1.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 `${seriesSvg}
+<g ${hasSeriesLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+  ${datumSvg}
+</g>`
+    }
+    function renderGridData () {
+      const bulletWidth = styles.textSizePx * 0.7
+      const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+      const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}" fill="${styles.textColor}">${eventData.target.category}</text></g>`
+      const categoryLabelTextWidth = utils.measureTextWidth(eventData.target.category, styles.textSizePx)
+      const listTextWidth = categoryData.reduce((acc, category) => {
+        const text = `${category.series}${utils.toCurrency(category.value)}`
+        const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+        return _maxTextWidth > acc ? _maxTextWidth : acc
+      }, 0)
+      const maxTextWidth = Math.max(categoryLabelTextWidth, listTextWidth)
+      const lineEndX = maxTextWidth + styles.textSizePx * 3
+      const contentSvg = categoryData
+        .map((category, i) => {
+          const y = i * styles.textSizePx * 1.5
+          const isHighlight = category.id === (eventData.target && eventData.target.id)
+          return `<g transform="translate(0, ${styles.textSizePx * 2})">
+  <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${category.color}"></rect>
+  <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    <tspan font-weight="${isHighlight ? 'bold' : ''}">${category.series}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${utils.toCurrency(category.value)}</tspan>
+  </text>
+</g>`
+        })
+        .join('')
+      return `${titleSvg}
+${contentSvg}`
+    }
+    function renderMultivariateData () {
+      const hasCategoryLabel = eventData.target.category === '' ? false : true
+      const hasDatumLabel = eventData == null || eventData.target.name.slice(0, 11) === 'multiValue_' ? false : true
+      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.target.color}"></rect>
+<text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  <tspan>${eventData.target.category}</tspan>
+</text>`
+        : ''
+
+      const datumLabelSvg = hasDatumLabel
+        ? `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  <tspan>${eventData.target.name}</tspan>
+</text>`
+        : ''
+
+      const maxTextWidth = (() => {
+        const categoryLabelTextWidth = utils.measureTextWidth(eventData.target.category, styles.textSizePx)
+        const datumLabelTextWidth = hasDatumLabel ? utils.measureTextWidth(eventData.target.name, styles.textSizePx) : 0
+        const valueDetailTextWidth = (eventData.target as ModelDatumMultivariate).multivariate.reduce((acc, detail) => {
+          const text = `${detail.name}${utils.toCurrency(detail.value)}`
+          const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+          return _maxTextWidth > acc ? _maxTextWidth : acc
+        }, 0)
+        return Math.max(categoryLabelTextWidth, datumLabelTextWidth, valueDetailTextWidth)
+      })()
+
+      const valueDetailSvg = (eventData.target as ModelDatumMultivariate).multivariate.map((detail, i) => {
+        const y = (i * styles.textSizePx * 1.5) + (datumLabelSvg ? styles.textSizePx * 2 : 0)
+        const lineEndX = maxTextWidth + styles.textSizePx * 3
+        return `<text x="0" y="${y}" font-weight="bold" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  <tspan>${detail.name}</tspan>
+  <tspan text-anchor="end" x="${lineEndX}">${utils.toCurrency(detail.value)}</tspan>
+</text>`
+      }).join('')
+
+      const datumDetailSvg = datumLabelSvg || valueDetailSvg
+        ? `<g ${hasCategoryLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+  ${datumLabelSvg}
+  ${valueDetailSvg}
+</g>`
+        : ''
+
+      return `${categorySvg}
+${datumDetailSvg}`
+    }
+    function renderGraphData () {
+      const hasCategoryLabel = eventData.target.category ? true : false
+      const hasDatumLabel = eventData.target.name ? true : false
+      const valueText = utils.toCurrency(eventData.target.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.target.color}"></rect>
+<text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  <tspan>${eventData.target.category}</tspan>
+</text>`
+        : ''
+      const datumLabelSvg = hasDatumLabel
+        ? `<tspan>${eventData.target.name}</tspan>  `
+        : ''
+      const categoryLabelTextWidth = hasCategoryLabel
+        ? utils.measureTextWidth(`${eventData.target.category}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+        : 0
+      const datumLabelTextWidth = hasDatumLabel
+        ? utils.measureTextWidth(`${eventData.target.name}${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>`
+    }
+    function renderTreeData () {
+      const hasCategoryLabel = eventData.target.category ? true : false
+      const hasDatumLabel = eventData.target.name ? true : false
+      const valueText = utils.toCurrency(eventData.target.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.target.color}"></rect>
+<text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+  <tspan>${eventData.target.category}</tspan>
+</text>`
+        : ''
+      const datumLabelSvg = hasDatumLabel
+        ? `<tspan>${eventData.target.name}</tspan>  `
+        : ''
+      const categoryLabelTextWidth = hasCategoryLabel
+        ? utils.measureTextWidth(`${eventData.target.category}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+        : 0
+      const datumLabelTextWidth = hasDatumLabel
+        ? utils.measureTextWidth(`${eventData.target.name}${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>`
+    }
+    if (eventData.target.modelType === 'series') {
+      return renderSeriesData()
+    } else if (eventData.target.modelType === 'grid') {
+      return renderGridData()
+    } else if (eventData.target.modelType === 'multivariate') {
+      return renderMultivariateData()
+    } else if (eventData.target.modelType === 'graph') {
+      return renderGraphData()
+    } else if (eventData.target.modelType === 'tree') {
+      return renderTreeData()
+    }
+    return ''
+  }
+}
+DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+  function renderSeriesData () {
+    const hasSeriesLabel = eventData.target.series.slice(0, 7) === 'series_' ? false : true
+    const hasDatumLabel = eventData.target.name.slice(0, 7) === 'series_' ? false : true
+    const valueText = utils.toCurrency(eventData.target.value)
+    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.target.color}"></rect>
+<text x="$\{styles.textSizePx * 1.5}" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{eventData.target.name}</tspan>
+</text>\`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? \`<tspan>$\{eventData.target.name}</tspan>  \`
+      : ''
+    const seriesLabelTextWidth = hasSeriesLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.series}$\{valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.name}$\{valueText}\`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 1.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 \`$\{seriesSvg}
+<g $\{hasSeriesLabel ? \`transform="translate(0, $\{styles.textSizePx * 2})"\` : ''}>
+  $\{datumSvg}
+</g>\`
+  }
+  function renderGridData () \{
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+    const titleSvg = \`<g><text dominant-baseline="hanging" font-size="$\{styles.textSizePx}" fill="$\{styles.textColor}">$\{eventData.target.category}</text></g>\`
+    const categoryLabelTextWidth = utils.measureTextWidth(eventData.target.category, styles.textSizePx)
+    const listTextWidth = categoryData.reduce((acc, category) => \{
+      const text = \`$\{category.series}$\{utils.toCurrency(category.value)}\`
+      const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+      return _maxTextWidth > acc ? _maxTextWidth : acc
+    }, 0)
+    const maxTextWidth = Math.max(categoryLabelTextWidth, listTextWidth)
+    const lineEndX = maxTextWidth + styles.textSizePx * 3
+    const contentSvg = categoryData
+      .map((category, i) => \{
+        const y = i * styles.textSizePx * 1.5
+        const isHighlight = category.id === (eventData.target && eventData.target.id)
+        return \`<g transform="translate(0, $\{styles.textSizePx * 2})">
+  <rect width="$\{bulletWidth}" height="$\{bulletWidth}" x="$\{offset}" y="$\{y + offset}" rx="$\{bulletWidth / 2}" fill="$\{category.color}"></rect>
+  <text x="$\{styles.textSizePx * 1.5}" y="$\{y}" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+    <tspan font-weight="$\{isHighlight ? 'bold' : ''}">$\{category.series}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="$\{lineEndX}">$\{utils.toCurrency(category.value)}</tspan>
+  </text>
+</g>\`
+      })
+      .join('')
+    return \`$\{titleSvg}
+$\{contentSvg}\`
+  }
+  function renderMultivariateData () \{
+    const hasCategoryLabel = eventData.target.category === '' ? false : true
+    const hasDatumLabel = eventData == null || eventData.target.name.slice(0, 11) === 'multiValue_' ? false : true
+    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.target.color}"></rect>
+<text x="$\{styles.textSizePx * 1.5}" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{eventData.target.category}</tspan>
+</text>\`
+      : ''
+
+    const datumLabelSvg = hasDatumLabel
+      ? \`<text font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{eventData.target.name}</tspan>
+</text>\`
+      : ''
+
+    const maxTextWidth = (() => \{
+      const categoryLabelTextWidth = utils.measureTextWidth(eventData.target.category, styles.textSizePx)
+      const datumLabelTextWidth = hasDatumLabel ? utils.measureTextWidth(eventData.target.name, styles.textSizePx) : 0
+      const valueDetailTextWidth = (eventData.target as ModelDatumMultivariate).multivariate.reduce((acc, detail) => \{
+        const text = \`$\{detail.name}$\{utils.toCurrency(detail.value)}\`
+        const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+        return _maxTextWidth > acc ? _maxTextWidth : acc
+      }, 0)
+      return Math.max(categoryLabelTextWidth, datumLabelTextWidth, valueDetailTextWidth)
+    })()
+
+    const valueDetailSvg = (eventData.target as ModelDatumMultivariate).multivariate.map((detail, i) => \{
+      const y = (i * styles.textSizePx * 1.5) + (datumLabelSvg ? styles.textSizePx * 2 : 0)
+      const lineEndX = maxTextWidth + styles.textSizePx * 3
+      return \`<text x="0" y="$\{y}" font-weight="bold" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{detail.name}</tspan>
+  <tspan text-anchor="end" x="$\{lineEndX}">$\{utils.toCurrency(detail.value)}</tspan>
+</text>\`
+    }).join('')
+
+    const datumDetailSvg = datumLabelSvg || valueDetailSvg
+      ? \`<g $\{hasCategoryLabel ? \`transform="translate(0, $\{styles.textSizePx * 2})"\` : ''}>
+  $\{datumLabelSvg}
+  $\{valueDetailSvg}
+</g>\`
+      : ''
+
+    return \`$\{categorySvg}
+$\{datumDetailSvg}\`
+  }
+  function renderGraphData () \{
+    const hasCategoryLabel = eventData.target.category ? true : false
+    const hasDatumLabel = eventData.target.name ? true : false
+    const valueText = utils.toCurrency(eventData.target.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.target.color}"></rect>
+<text x="$\{styles.textSizePx * 1.5}" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{eventData.target.category}</tspan>
+</text>\`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? \`<tspan>$\{eventData.target.name}</tspan>  \`
+      : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.category}$\{valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.name}$\{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>\`
+  }
+  function renderTreeData () \{
+    const hasCategoryLabel = eventData.target.category ? true : false
+    const hasDatumLabel = eventData.target.name ? true : false
+    const valueText = utils.toCurrency(eventData.target.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.target.color}"></rect>
+<text x="$\{styles.textSizePx * 1.5}" font-size="$\{styles.textSizePx}" dominant-baseline="hanging" fill="$\{styles.textColor}">
+  <tspan>$\{eventData.target.category}</tspan>
+</text>\`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? \`<tspan>$\{eventData.target.name}</tspan>  \`
+      : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.category}$\{valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(\`$\{eventData.target.name}$\{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>\`
+  }
+  if (eventData.target.modelType === 'series') \{
+    return renderSeriesData()
+  } else if (eventData.target.modelType === 'grid') \{
+    return renderGridData()
+  } else if (eventData.target.modelType === 'multivariate') \{
+    return renderMultivariateData()
+  } else if (eventData.target.modelType === 'graph') \{
+    return renderGraphData()
+  } else if (eventData.target.modelType === 'tree') \{
+    return renderTreeData()
+  }
+  return ''
+}`

package/src/plugins/Tooltip/index.ts

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip'
+export * from './defaults'
+export * from './types'

package/src/plugins/Tooltip/layers/Tooltip.ts

@@ -0,0 +1,90 @@
+import * as d3 from 'd3'
+import {
+  Subject, 
+  Observable,
+  BehaviorSubject} from 'rxjs'
+import type { TooltipExtendContext, TooltipPluginParams, TooltipParams } from "../types"
+import type { ColorType } from '@orbcharts/core'
+import { defineSVGLayer } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_SERIES_TOOLTIP_PARAMS } from "../defaults"
+import { LAYER_INDEX_OF_TOOLTIP } from '../../../const/layerIndex'
+import { createBaseTooltip } from '../../../baseLayers/BaseTooltip'
+
+const pluginName = 'Tooltip'
+const layerName = 'Tooltip'
+
+export const Tooltip = defineSVGLayer<TooltipExtendContext, TooltipPluginParams, TooltipParams>({
+  name: layerName,
+  defaultParams: DEFAULT_SERIES_TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  initShow: true,
+  validator: (params) => {
+    const result = validateObject(params, {
+      backgroundColorType: {
+        toBe: 'ColorType',
+        test: (value: any) => {
+          const colorTypes: ColorType[] = ['data', 'primary', 'secondary', 'dataContrast', 'background', 'none']
+          return typeof value === 'string'
+            && colorTypes.includes(value as ColorType)
+        }
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBe: 'ColorType',
+        test: (value: any) => {
+          const colorTypes: ColorType[] = ['data', 'primary', 'secondary', 'dataContrast', 'background', 'none']
+          return typeof value === 'string'
+            && colorTypes.includes(value as 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: {
+        toBe: 'ColorType',
+        test: (value: any) => {
+          const colorTypes: ColorType[] = ['data', 'primary', 'secondary', 'dataContrast', 'background', 'none']
+          return typeof value === 'string'
+            && colorTypes.includes(value as ColorType)
+        }
+      },
+      renderFn: {
+        toBeTypes: ['Function']
+      },
+    })
+    return result
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+
+    const destroy$ = new Subject()
+
+    const unsubscribeTooltip = createBaseTooltip({
+      rootSelection: d3.select(svgG),
+      pluginName,
+      layerName,
+      baseTooltipParams$: layerParams$,
+      theme$: context.theme$,
+      layout$: context.layout$,
+      event$: context.event$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeTooltip()
+    }
+  }
+})

package/src/plugins/Tooltip/types.ts

@@ -0,0 +1,55 @@
+
+import { Observable } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { GraphicStyles, Layout, VisibleFilter } from '../../types/PluginParams'
+import { ComputedDatum, ComputedDatumSeries } from '../../types/ComputedData'
+import { BaseTooltipStyle, BaseTooltipUtils } from '../../baseLayers/types'
+
+// context
+export interface TooltipExtendContext {
+  layout$: Observable<Layout>
+  fontSizePx$: Observable<number>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+  CategoryDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
+}
+
+// plugin params
+export interface TooltipPluginParams {
+  styles: GraphicStyles
+  visibleFilter: VisibleFilter<'series'>
+  sort: ((a: ModelDatumSeries, b: ModelDatumSeries) => number) | null
+  // container: Container
+  // separateSeries: boolean
+  // separateName: boolean
+  datasetIndex: number
+}
+
+// all layer params
+export interface TooltipAllLayerParams {
+  Tooltip: TooltipParams
+}
+
+// -- layer params --
+
+export interface TooltipParams {
+  backgroundColorType: ColorType
+  backgroundOpacity: number
+  strokeColorType: ColorType
+  textColorType: ColorType
+  offset: [number, number]
+  padding: number
+  // textRenderFn: (<T extends ChartType>(eventData: EventTypeMap<T>) => string[] | string) | null
+  // svgRenderFn: (<T extends ChartType>(eventData: EventTypeMap<T>) => string) | null
+  renderFn: (
+    (
+      eventData: EventData,
+      context: {
+        styles: BaseTooltipStyle
+        utils: BaseTooltipUtils
+        seriesData: ComputedDatum<'series'>[]
+        categoryData: ComputedDatum<'series'>[]
+      }
+    ) => string[] | string
+  )
+}
+

package/src/plugins/Tooltip/utils.ts

@@ -0,0 +1,53 @@
+import * as d3 from 'd3'
+// import type { ModelDatumSeries } from '@orbcharts/core'
+import type { ComputedDatumSeries } from '../../types/ComputedData'
+// 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/plugins/index.ts

@@ -0,0 +1,8 @@
+
+export * from './ScatterPlot'
+export * from './SeriesPlot'
+export * from './HierarchyPlot'
+export * from './Legend'
+export * from './NetworkPlot'
+export * from './Tooltip'
+export * from './CompositionPlot'