Merge pull request #664 from klinecharts/pr/bandaralsehli/657

feat: update TooltipIcon, CandleTooltipView, and IndicatorTooltipView

Author: liihuu

src/Store.ts

@@ -25,7 +25,7 @@ import type Precision from './common/Precision'
 import Action from './common/Action'
 import { ActionType, type ActionCallback } from './common/Action'
 import { formatValue, formatTimestampToString, formatBigNumber, formatThousands, formatFoldDecimal } from './common/utils/format'
-import { getDefaultStyles, type Styles, type TooltipLegend } from './common/Styles'
+import { getDefaultStyles, type TooltipFeatureStyle, type Styles, type TooltipLegend } from './common/Styles'
 import { isArray, isString, isValid, isNumber, isBoolean, isFunction, merge } from './common/utils/typeChecks'
 import { createId } from './common/utils/id'
 import { binarySearchNearest } from './common/utils/number'
@@ -38,7 +38,7 @@ import { classifyTimeWeightTicks, createTimeWeightTickList } from './common/Time
 
 import type { Options, CustomApi, ThousandsSeparator, DecimalFold } from './Options'
 
-import { IndicatorDataState, type IndicatorOverride, type IndicatorCreate, type IndicatorFilter } from './component/Indicator'
+import { IndicatorDataState, type IndicatorOverride, type IndicatorCreate, type IndicatorFilter, type Indicator } from './component/Indicator'
 import type IndicatorImp from './component/Indicator'
 import { IndicatorSeries } from './component/Indicator'
 import { getIndicatorClass } from './extension/indicator/index'
@@ -64,10 +64,10 @@ const enum ScrollLimitRole {
   Distance
 }
 
-export interface TooltipIcon {
+export interface TooltipFeatureInfo {
   paneId: string
-  indicatorName: string
-  iconId: string
+  indicator: Nullable<Indicator>
+  feature: TooltipFeatureStyle
 }
 
 export interface ProgressOverlayInfo {
@@ -292,7 +292,7 @@ export default class StoreImp implements Store {
   /**
    * Active tooltip icon info
    */
-  private _activeTooltipIcon: Nullable<TooltipIcon> = null
+  private _activeTooltipFeatureInfo: Nullable<TooltipFeatureInfo> = null
 
   /**
    * Actions
@@ -947,12 +947,12 @@ export default class StoreImp implements Store {
     return this._crosshair
   }
 
-  setActiveTooltipIcon (icon?: TooltipIcon): void {
-    this._activeTooltipIcon = icon ?? null
+  setActiveTooltipFeatureInfo (info?: TooltipFeatureInfo): void {
+    this._activeTooltipFeatureInfo = info ?? null
   }
 
-  getActiveTooltipIcon (): Nullable<TooltipIcon> {
-    return this._activeTooltipIcon
+  getActiveTooltipFeatureInfo (): Nullable<TooltipFeatureInfo> {
+    return this._activeTooltipFeatureInfo
   }
 
   executeAction (type: ActionType, data?: unknown): void {
@@ -1447,7 +1447,7 @@ export default class StoreImp implements Store {
     this._timeWeightTickMap.clear()
     this._timeWeightTickList = []
     this._crosshair = {}
-    this._activeTooltipIcon = null
+    this._activeTooltipFeatureInfo = null
   }
 
   getChart (): Chart {

src/common/Action.ts

@@ -20,7 +20,7 @@ export enum ActionType {
   OnZoom = 'onZoom',
   OnScroll = 'onScroll',
   OnVisibleRangeChange = 'onVisibleRangeChange',
-  OnTooltipIconClick = 'onTooltipIconClick',
+  OnCandleTooltipFeatureClick = 'onCandleTooltipFeatureClick',
   OnCrosshairChange = 'onCrosshairChange',
   OnCandleBarClick = 'onCandleBarClick',
   OnPaneDrag = 'onPaneDrag'

src/common/Styles.ts

@@ -60,6 +60,17 @@ export interface StateLineStyle extends LineStyle {
   show: boolean
 }
 
+export enum PathType {
+  Stroke = 'stroke',
+  Fill = 'fill',
+}
+
+export interface PathStyle {
+  style: PathType
+  color: string
+  lineWidth: number
+}
+
 export enum PolygonType {
   Stroke = 'stroke',
   Fill = 'fill',
@@ -139,29 +150,46 @@ export interface TooltipLegend {
   value: string | TooltipLegendChild
 }
 
-export enum TooltipIconPosition {
+export enum TooltipFeatureType {
+  Path = 'path',
+  IconFont = 'icon_font'
+}
+
+export enum TooltipFeaturePosition {
   Left = 'left',
   Middle = 'middle',
   Right = 'right'
 }
-export interface TooltipIconStyle extends Padding, Margin {
+
+export interface TooltipFeaturePathStyle extends Omit<PathStyle, 'color'> {
+  path: string
+}
+
+export interface TooltipFeatureIconFontStyle {
+  family: string
+  content: string
+}
+
+export interface TooltipFeatureStyle extends Padding, Margin {
   id: string
-  position: TooltipIconPosition
-  color: string
-  activeColor: string
-  size: number
-  fontFamily: string
-  icon: string
+  position: TooltipFeaturePosition
   backgroundColor: string
   activeBackgroundColor: string
+  size: number
+  color: string
+  activeColor: string
+  borderRadius: number | number[]
+  type: TooltipFeatureType
+  path: TooltipFeaturePathStyle
+  iconFont: TooltipFeatureIconFontStyle
 }
 
 export interface TooltipStyle {
   showRule: TooltipShowRule
   showType: TooltipShowType
   defaultValue: string
   text: TooltipTextStyle
-  icons: TooltipIconStyle[]
+  features: TooltipFeatureStyle[]
 }
 
 export interface CandleAreaPointStyle {
@@ -501,7 +529,7 @@ function getDefaultCandleStyle (): CandleStyle {
         marginRight: 8,
         marginBottom: 4
       },
-      icons: []
+      features: []
     }
   }
 }
@@ -584,7 +612,7 @@ function getDefaultIndicatorStyle (): IndicatorStyle {
         marginRight: 8,
         marginBottom: 4
       },
-      icons: []
+      features: []
     }
   }
 }

src/component/Indicator.ts

@@ -19,7 +19,7 @@ import type { KLineData, NeighborData } from '../common/Data'
 import type Bounding from '../common/Bounding'
 import type BarSpace from '../common/BarSpace'
 import type Crosshair from '../common/Crosshair'
-import type { IndicatorStyle, IndicatorPolygonStyle, SmoothLineStyle, RectStyle, TextStyle, TooltipIconStyle, LineStyle, LineType, TooltipLegend } from '../common/Styles'
+import type { IndicatorStyle, IndicatorPolygonStyle, SmoothLineStyle, RectStyle, TextStyle, TooltipFeatureStyle, LineStyle, LineType, TooltipLegend } from '../common/Styles'
 import { isNumber, isValid, merge, isBoolean, isString, clone, isFunction } from '../common/utils/typeChecks'
 
 import type { XAxis } from './XAxis'
@@ -75,13 +75,12 @@ export type IndicatorRegenerateFiguresCallback<D, C> = (calcParams: C[]) => Arra
 export interface IndicatorTooltipData {
   name: string
   calcParamsText: string
-  icons: TooltipIconStyle[]
+  features: TooltipFeatureStyle[]
   legends: TooltipLegend[]
 }
 
 export interface IndicatorCreateTooltipDataSourceParams<D> {
   chart: Chart
-
   indicator: Indicator<D>
   bounding: Bounding
   crosshair: Crosshair
@@ -91,6 +90,17 @@ export interface IndicatorCreateTooltipDataSourceParams<D> {
 
 export type IndicatorCreateTooltipDataSourceCallback<D> = (params: IndicatorCreateTooltipDataSourceParams<D>) => IndicatorTooltipData
 
+export enum IndicatorEventTarget {
+  Feature = 'feature'
+}
+
+export interface IndicatorEvent {
+  target: IndicatorEventTarget
+  [key: string]: unknown
+}
+
+export type IndicatorEventCallback = (params: IndicatorEvent) => void
+
 export interface IndicatorDrawParams<D, C, E> {
   ctx: CanvasRenderingContext2D
   chart: Chart
@@ -231,6 +241,11 @@ export interface Indicator<D = unknown, C = unknown, E = unknown> {
    */
   onDataStateChange: Nullable<IndicatorOnDataStateChangeCallback<D>>
 
+  /**
+   * Event
+   */
+  onClick: Nullable<IndicatorEventCallback>
+
   /**
    * Calculation result
    */
@@ -359,6 +374,8 @@ export default class IndicatorImp<D = unknown, C = unknown, E = unknown> impleme
   createTooltipDataSource: Nullable<IndicatorCreateTooltipDataSourceCallback<D>> = null
   draw: Nullable<IndicatorDrawCallback<D, C, E>> = null
 
+  onClick: Nullable<IndicatorEventCallback> = null
+
   onDataStateChange: Nullable<IndicatorOnDataStateChangeCallback<D>> = null
 
   result: D[] = []

src/extension/figure/index.ts

@@ -22,10 +22,11 @@ import polygon from './polygon'
 import rect from './rect'
 import text from './text'
 import arc from './arc'
+import path from './path'
 
 const figures: Record<string, FigureInnerConstructor> = {}
 
-const extensions = [circle, line, polygon, rect, text, arc]
+const extensions = [circle, line, polygon, rect, text, arc, path]
 extensions.forEach((figure: FigureTemplate) => {
   figures[figure.name] = FigureImp.extend(figure)
 })