@orbcharts/plugins-basic 3.0.0-alpha.78 → 3.0.0-beta.1

package/src/base/BaseTooltip.ts

@@ -0,0 +1,383 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  merge,
+  filter,
+  switchMap,
+  first,
+  iif,
+  takeUntil,
+  Subject, 
+  Observable,
+  distinctUntilChanged } from 'rxjs'
+import type {
+  EventTypeMap,
+  PluginConstructor,
+  ChartType,
+  ChartParams,
+  Layout
+} from '../../lib/core-types'
+import type { BaseTooltipParams, BaseTooltipStyle } from '../../lib/plugins-basic-types'
+import type { BasePluginFn } from './types'
+import { defineNoneDataPlugin, textSizePxObservable } from '../../lib/core'
+import { getSvgGElementSize, appendSvg } from '../utils/d3Utils'
+import { getColor, getClassName } from '../utils/orbchartsUtils'
+
+
+interface BaseTooltipContext {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  fullParams$: Observable<BaseTooltipParams>
+  fullChartParams$: Observable<ChartParams>
+  layout$: Observable<Layout>
+  event$: Subject<EventTypeMap<any>>
+}
+
+// export interface BaseTooltipStyle {
+//   backgroundColor: string
+//   backgroundOpacity: number
+//   strokeColor: string
+//   offset: [number, number]
+//   padding: number
+//   textColor: string
+//   textSize: number | string // chartParams上的設定
+//   textSizePx: number
+// }
+
+function textToSvg (_textArr: string[] | string | null | undefined, textStyle: BaseTooltipStyle) {
+  const lineHeight = textStyle.textSizePx * 1.5
+
+  const textArr = _textArr == null
+    ? []
+    : Array.isArray(_textArr)
+      ? _textArr
+      : typeof _textArr === 'string'
+        ? _textArr.split('\n')
+        : [_textArr]
+
+  const tspan = textArr
+    .filter(d => d != '')
+    .map((text, i) => {
+      const top = i * lineHeight
+      return `<tspan x="0" y="${top}">${text}</tspan>`
+    })
+    .join('')
+
+  if (tspan) {
+    return `<text font-size="${textStyle.textSize}" fill="${textStyle.textColor}" x="0" y="0" style="dominant-baseline:text-before-edge">
+    ${tspan}
+  </text>`
+  } else {
+    return ''
+  }
+}
+
+function renderTooltip ({ rootSelection, pluginName, gClassName, boxClassName, rootWidth, rootHeight, svgString, tooltipStyle, event  }: {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  gClassName: string
+  boxClassName: string
+  rootWidth: number
+  rootHeight: number
+  svgString: string
+  tooltipStyle: BaseTooltipStyle
+  event: MouseEvent
+}) {
+  // if (!svgString) {
+  //   return
+  // }
+  // const rootSelection = d3.select('svg.bpcharts__root')
+  // console.log('tooltip', { selection, rootWidth, rootHeight, svgString, event  })
+  rootSelection.interrupt('fadeout')
+  const radius = 5
+
+  // data（svg string無值則為空陣列）
+  const contentData = svgString ? [svgString] : []
+  const styleData = svgString ? [tooltipStyle] : []
+  // tooltipG <g>
+  const tooltipG = rootSelection
+    .selectAll<SVGGElement, string>(`g.${gClassName}`)
+    .data(contentData)
+    .join(
+      enter => {
+        return enter
+          .append('g')
+          .classed(gClassName, true)
+          .attr('pointer-events', 'none')
+      },
+      update => {
+        return update
+      },
+      exit => {
+        return exit
+          // .transition('fadeout')
+          // .duration(0)
+          // .delay(500)
+          .style('opacity', 0)
+          .remove()
+      }
+    )
+    .attr('transform', () => `translate(${event.offsetX}, ${event.offsetY})`)
+
+  // tooltipBox <g><g>
+  const tooltipBox = tooltipG
+    .selectAll<SVGGElement, string>(`g.${boxClassName}`)
+    .data(styleData)
+    .join(
+      enter => {
+        return enter
+          .append('g')
+          .classed(getClassName(pluginName, 'box'), true)
+      },
+    )
+
+  // rect <g><g><rect>
+  const rect = tooltipBox
+    .selectAll<SVGRectElement, string>('rect')
+    .data(styleData)
+    .join(
+      enter => {
+        return enter
+          .append('rect')
+          .attr('rx', radius)
+          .attr('ry', radius)
+      }
+    )
+    .attr('fill', d => d.backgroundColor)
+    .attr('stroke', d => d.strokeColor)
+    .attr('opacity', d => d.backgroundOpacity)
+
+  // text <g><g><g>
+  const contentG = tooltipBox
+    .selectAll<SVGGElement, string>('g')
+    .data(contentData)
+    .join(
+      enter => {
+        return enter
+          .append('g')
+          .classed(getClassName(pluginName, 'content'), true)
+          .attr('transform', () => `translate(${tooltipStyle.padding}, ${tooltipStyle.padding})`)
+      }
+    )
+  // 使用字串加入svg
+  if (contentData.length) {
+    appendSvg(contentG, contentData[0])
+  }
+  const contentSize = (contentG?.node()) ? getSvgGElementSize(contentG!) : { width: 0, height: 0 }
+
+  // rect size
+  rect
+    .attr('width', contentSize.width + tooltipStyle.padding * 2)
+    .attr('height', contentSize.height + tooltipStyle.padding * 2)
+
+  // -- tooltipG --
+  // 取得tooltip <g>的尺寸
+  const tooltipSize = (tooltipBox?.node()) ? getSvgGElementSize(tooltipBox!) : { width: 0, height: 0 }
+  // const minX = 0
+  const maxX = rootWidth - tooltipSize.width
+  // const minY = 0
+  const maxY = rootHeight - tooltipSize.height
+
+  // -- 相對游標位置的offset --
+  const offsetX = (event.offsetX + tooltipStyle.offset[0]) > maxX ? maxX - event.offsetX : tooltipStyle.offset[0]
+  const offsetY = (event.offsetY + tooltipStyle.offset[1]) > maxY ? maxY - event.offsetY : tooltipStyle.offset[1]
+  tooltipBox.attr('transform', d => `translate(${offsetX}, ${offsetY})`)
+  tooltipBox.attr('transform', d => `translate(${offsetX}, ${offsetY})`)
+
+  // const minX = containerSize.x
+  // const maxX = containerSize.x + containerSize.width - tooltipSize.width
+  // const minY = containerSize.y
+  // const maxY = containerSize.y + containerSize.height - tooltipSize.height
+  
+    // .style('position', 'absolute')
+    // .style('z-index', 10000)
+    // .style('left', (d) => {
+    //   const x = d.x + this.fullParams.offsetX! - containerSize.x
+    //   if (x < minX) {
+    //     return `${minX}px`
+    //   } else if (x > maxX) {
+    //     return `${maxX}px`
+    //   }
+    //   return `${x}px`
+    // })
+    // .style('top', (d) => {
+    //   const y = d.y + this.fullParams.offsetY! - containerSize.y
+    //   if (y < minY) {
+    //     return `${minY}px`
+    //   } else if (y > maxY) {
+    //     return `${maxY}px`
+    //   }
+    //   return `${y}px`
+    // })
+    // .html((d) => d.contentHtml)
+  
+}
+
+export const createBaseTooltip: BasePluginFn<BaseTooltipContext> = (pluginName: string, {
+  rootSelection,
+  fullParams$,
+  fullChartParams$,
+  layout$,
+  event$
+}) => {
+
+  const destroy$ = new Subject()
+
+  const gClassName = getClassName(pluginName, 'g')
+  const boxClassName = getClassName(pluginName, 'box')
+
+  // 事件觸發
+  const eventMouseover$: Observable<EventTypeMap<any>> = event$.pipe(
+    takeUntil(destroy$),
+    filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
+    // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+    // map(d => d as EventTypeMap<typeof chartType>)
+  )
+  const eventMouseout$: Observable<EventTypeMap<any>> = event$.pipe(
+    takeUntil(destroy$),
+    filter(d => d.eventName === 'mouseout'),
+    // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
+    // map(d => d as EventTypeMap<typeof chartType>)
+  )
+
+  const textSizePx$ = textSizePxObservable(fullChartParams$)
+
+  const tooltipStyle$: Observable<BaseTooltipStyle> = combineLatest({
+    fullChartParams: fullChartParams$,
+    fullParams: fullParams$,
+    textSizePx: textSizePx$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      return {
+        backgroundColor: getColor(data.fullParams.backgroundColorType, data.fullChartParams),
+        backgroundOpacity: data.fullParams.backgroundOpacity,
+        strokeColor: getColor(data.fullParams.strokeColorType, data.fullChartParams),
+        offset: data.fullParams.offset,
+        padding: data.fullParams.padding,
+        textSize: data.fullChartParams.styles.textSize,
+        textSizePx: data.textSizePx,
+        textColor: getColor(data.fullParams.textColorType, data.fullChartParams),
+        seriesColors: data.fullChartParams.colors[data.fullChartParams.colorScheme].series
+      }
+    })
+  )
+
+  const contentRenderFn$: Observable<((eventData: EventTypeMap<any>) => string)> = combineLatest({
+    fullParams: fullParams$,
+    tooltipStyle: tooltipStyle$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      // if (data.fullParams.svgRenderFn) {
+      //   return data.fullParams.svgRenderFn
+      // }
+      // // 將textRenderFn回傳的資料使用<text>包裝起來
+      // return (eventData: EventTypeMap<any>) => {
+      //   const textArr: string | string[] | null = data.fullParams.textRenderFn
+      //     ? data.fullParams.textRenderFn(eventData as any)
+      //     : null
+      //   return textToSvg(textArr, data.tooltipStyle)
+      // }
+      return (eventData: EventTypeMap<any>) => {
+        const renderText: string | string[] = data.fullParams.renderFn(
+          // mouseover事件的資料
+          eventData,
+          // context
+          {
+            styles: data.tooltipStyle
+          }
+        )
+        // string
+        if (typeof renderText === 'string') {
+          const trimText = renderText.trim()
+          const isSvgText = trimText.slice(0, 1) === '<' && trimText.slice(trimText.length - 1, trimText.length) === '>'
+
+          if (isSvgText) {
+            return renderText // svg字串
+          } else {
+            const textArr = renderText.split('\n')
+            return textToSvg(textArr, data.tooltipStyle) // 多行文字轉svg字串
+          }
+        }
+        // string[]
+        else if (Array.isArray(renderText)) {
+          return textToSvg(renderText, data.tooltipStyle) // 多行文字轉svg字串
+        }
+        return ''
+      }
+    })
+  )
+
+  const mouseoverTooltipSvg$ = combineLatest({
+    event: eventMouseover$,
+    contentRenderFn: contentRenderFn$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(d => d.contentRenderFn(d.event))
+  )
+
+  const mouseoutTooltipSvg$ = eventMouseout$.pipe(
+    takeUntil(destroy$),
+    map(d => '')
+  )
+
+  const svgString$ = merge(mouseoverTooltipSvg$, mouseoutTooltipSvg$)
+    .pipe(
+      takeUntil(destroy$),
+      distinctUntilChanged((a, b) => a === b)      
+    )
+
+  const eventTooltip$ = merge(eventMouseover$, eventMouseout$)
+    .pipe(
+      takeUntil(destroy$),
+      // filter(d => {
+      //   return (d.eventName === 'mouseover' || d.eventName === 'mousemove' || d.eventName === 'mouseout')
+      //     && d.event != undefined
+      // }),
+      map(d => d.event!),
+    )
+
+  combineLatest({
+    svgString: svgString$,
+    eventTooltip: eventTooltip$,
+    layout: layout$,
+    tooltipStyle: tooltipStyle$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+  ).subscribe(data => {
+    renderTooltip({
+      rootSelection,
+      pluginName,
+      gClassName,
+      boxClassName,
+      rootWidth: data.layout.rootWidth,
+      rootHeight: data.layout.rootHeight,
+      svgString: data.svgString,
+      tooltipStyle: data.tooltipStyle,
+      event: data.eventTooltip
+    })
+  })
+
+
+
+  // const chartType$ = eventMouseover$.pipe(
+  //   takeUntil(destroy$),
+  //   map(d => d.type),
+  //   distinctUntilChanged()
+  // )
+  
+  
+  // eventMouseover$.subscribe(event => {
+    
+  // })
+  
+
+  return () => {
+    destroy$.next(undefined)
+  }
+}

package/src/grid/defaults.ts

@@ -9,8 +9,11 @@ import type {
   GroupAxisParams,
   ValueAxisParams,
   ValueStackAxisParams,
-  ScalingAreaParams,
-  GridLegendParams } from '../../lib/plugins-basic-types'
+  GridTooltipParams,
+  GridZoomParams,
+  GridLegendParams
+} from '../../lib/plugins-basic-types'
+import { measureTextWidth } from '../utils/commonUtils'
 
 export const DEFAULT_LINES_PARAMS: LinesParams = {
   lineCurve: 'curveLinear',
@@ -108,13 +111,14 @@ export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = {
   ...DEFAULT_VALUE_AXIS_PARAMS
 }
 
-export const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams = {
+export const DEFAULT_GRID_ZOOM_PARAMS: GridZoomParams = {
 
 }
 
 export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
-  position: 'right',
-  justify: 'end',
+  // position: 'right',
+  // justify: 'end',
+  placement: 'bottom',
   padding: 28,
   // offset: [0, 0],
   backgroundFill: 'none',
@@ -126,3 +130,116 @@ export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
   // highlightEvent: false
   textColorType: 'primary'
 }
+
+export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+//   renderFn: (eventData, { styles }) => {
+//     const bulletWidth = styles.textSizePx * 0.7
+//     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+//     if (eventData.highlightTarget === 'group') {
+//       const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
+//       const maxLengthText = eventData.groups.reduce((acc, group) => {
+//         const text = `${group.seriesLabel}${group.value}`
+//         return text.length > acc.length ? text : acc
+//       }, '')
+//       const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+//       const lineEndX = maxTextWidth + styles.textSizePx * 2
+//       const contentSvg = eventData.groups
+//         .map((group, i) => {
+//           const y = i * styles.textSizePx * 1.5
+//           return `<g transform="translate(0, ${styles.textSizePx * 2})">
+//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.color}"></rect>
+//   <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+//     <tspan>${group.seriesLabel}</tspan>
+//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${group.value}</tspan>
+//   </text>
+// </g>`
+//         })
+//         .join('')
+//       return `${titleSvg}
+// ${contentSvg}`
+//     } else if (eventData.highlightTarget === 'series') {
+//       const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
+//       const textWidth = measureTextWidth(`${eventData.seriesLabel}${eventData.datum.value}`, styles.textSizePx)
+//       const lineEndX = textWidth + styles.textSizePx * 2
+//       const contentSvg = `<g transform="translate(0, ${styles.textSizePx * 2})">
+//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset}" 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>
+//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${eventData.datum.value}</tspan>
+//   </text>
+// </g>`
+//       return `${titleSvg}
+// ${contentSvg}`
+//     } else {
+//       const textWidth = measureTextWidth(`${eventData.datum.label}${eventData.datum.value}`, styles.textSizePx)
+//       const lineEndX = textWidth + styles.textSizePx * 2
+//       return `<g>
+//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset}" 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.datum.label}</tspan>
+//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${eventData.datum.value}</tspan>
+//   </text>
+// </g>`
+//     }
+//   },
+  renderFn: (eventData, { styles }) => {
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+    const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
+    const maxLengthText = eventData.groups.reduce((acc, group) => {
+      const text = `${group.seriesLabel}${group.value}`
+      return text.length > acc.length ? text : acc
+    }, '')
+    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const lineEndX = maxTextWidth + styles.textSizePx * 2
+    const contentSvg = eventData.groups
+      .map((group, i) => {
+        const y = i * styles.textSizePx * 1.5
+        const isHighlight = group.id === (eventData.datum && eventData.datum.id)
+        return `<g transform="translate(0, ${styles.textSizePx * 2})">
+  <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.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' : ''}">${group.seriesLabel}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${group.value}</tspan>
+  </text>
+</g>`
+      })
+      .join('')
+    return `${titleSvg}
+${contentSvg}`
+  }
+}
+DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+    const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}">\${eventData.groupLabel}</text></g>\`
+    const maxLengthText = eventData.groups.reduce((acc, group) => {
+      const text = \`\${group.seriesLabel}\${group.value}\`
+      return text.length > acc.length ? text : acc
+    }, '')
+    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const lineEndX = maxTextWidth + styles.textSizePx * 2
+    const contentSvg = eventData.groups
+      .map((group, i) => {
+        const y = i * styles.textSizePx * 1.5
+        const isHighlight = group.id === (eventData.datum && eventData.datum.id)
+        return \`<g transform="translate(0, \${styles.textSizePx * 2})">
+  <rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${y + offset}" rx="\${bulletWidth / 2}" fill="\${group.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' : ''}">\${group.seriesLabel}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="\${lineEndX}">\${group.value}</tspan>
+  </text>
+</g>\`
+      })
+      .join('')
+    return \`\${titleSvg}
+\${contentSvg}\`
+}`

package/src/grid/index.ts

@@ -11,5 +11,6 @@ export { GridLegend } from './plugins/GridLegend'
 export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
 export { ValueStackAxis } from './plugins/ValueStackAxis'
-export { ScalingArea } from './plugins/ScalingArea'
+export { GridTooltip } from './plugins/GridTooltip'
+export { GridZoom } from './plugins/GridZoom'
 export { GroupAux } from './plugins/GroupAux'

package/src/grid/plugins/GridLegend.ts

@@ -21,6 +21,17 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_LE
   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']
       },

package/src/grid/plugins/GridTooltip.ts

@@ -0,0 +1,66 @@
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineGridPlugin } from '../../../lib/core'
+import { DEFAULT_GRID_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'GridTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_GRID_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 GridTooltip = defineGridPlugin(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/grid/plugins/{ScalingArea.ts → GridZoom.ts}

@@ -13,16 +13,16 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterGrid } from '../../../lib/core-types'
 import {
   defineGridPlugin, createAxisLinearScale } from '../../../lib/core'
-import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
+import { DEFAULT_GRID_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
 
-const pluginName = 'ScalingArea'
+const pluginName = 'GridZoom'
 const rectClassName = getClassName(pluginName, 'rect')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SCALING_AREA_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_ZOOM_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_SCALING_AREA_PARAMS,
+  defaultParams: DEFAULT_GRID_ZOOM_PARAMS,
   layerIndex: LAYER_INDEX_OF_ROOT,
   validator: (params, { validateColumns }) => {
     return {
@@ -33,7 +33,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SCALING
   }
 }
 
-export const ScalingArea = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()