877e32c247ce20e0e4f25af4d62831be6de40a9ceb2f8310b33056e7f7b79352acb3b6f664ecfac74a4244e709397adba1491e738f774fac41fabc1aa2e172 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { Dictionary, TooltipRenderMode, ColorString, TooltipOrderMode, DimensionType, CommonTooltipOption } from '../../util/types.js';
  2. import { TooltipMarkerType } from '../../util/format.js';
  3. import SeriesModel from '../../model/Series.js';
  4. import Model from '../../model/Model.js';
  5. import { TooltipOption } from './TooltipModel.js';
  6. /**
  7. * This is an abstract layer to insulate the upper usage of tooltip content
  8. * from the different backends according to different `renderMode` ('html' or 'richText').
  9. * With the help of the abstract layer, it does not need to consider how to create and
  10. * assemble html or richText snippets when making tooltip content.
  11. *
  12. * @usage
  13. *
  14. * ```ts
  15. * class XxxSeriesModel {
  16. * formatTooltip(
  17. * dataIndex: number,
  18. * multipleSeries: boolean,
  19. * dataType: string
  20. * ) {
  21. * ...
  22. * return createTooltipMarkup('section', {
  23. * header: header,
  24. * blocks: [
  25. * createTooltipMarkup('nameValue', {
  26. * name: name,
  27. * value: value,
  28. * noValue: value == null
  29. * })
  30. * ]
  31. * });
  32. * }
  33. * }
  34. * ```
  35. */
  36. export declare type TooltipMarkupBlockFragment = TooltipMarkupSection | TooltipMarkupNameValueBlock;
  37. interface TooltipMarkupBlock {
  38. sortParam?: unknown;
  39. }
  40. export interface TooltipMarkupSection extends TooltipMarkupBlock {
  41. type: 'section';
  42. header?: unknown;
  43. noHeader?: boolean;
  44. blocks?: TooltipMarkupBlockFragment[];
  45. sortBlocks?: boolean;
  46. valueFormatter?: CommonTooltipOption<unknown>['valueFormatter'];
  47. }
  48. export interface TooltipMarkupNameValueBlock extends TooltipMarkupBlock {
  49. type: 'nameValue';
  50. markerType?: TooltipMarkerType;
  51. markerColor?: ColorString;
  52. name?: string;
  53. value?: unknown | unknown[];
  54. valueType?: DimensionType | DimensionType[];
  55. noName?: boolean;
  56. noValue?: boolean;
  57. valueFormatter?: CommonTooltipOption<unknown>['valueFormatter'];
  58. }
  59. /**
  60. * Create tooltip markup by this function, we can get TS type check.
  61. */
  62. export declare function createTooltipMarkup(type: 'section', option: Omit<TooltipMarkupSection, 'type'>): TooltipMarkupSection;
  63. export declare function createTooltipMarkup(type: 'nameValue', option: Omit<TooltipMarkupNameValueBlock, 'type'>): TooltipMarkupNameValueBlock;
  64. declare type MarkupText = string;
  65. /**
  66. * @return markupText. null/undefined means no content.
  67. */
  68. export declare function buildTooltipMarkup(fragment: TooltipMarkupBlockFragment, markupStyleCreator: TooltipMarkupStyleCreator, renderMode: TooltipRenderMode, orderMode: TooltipOrderMode, useUTC: boolean, toolTipTextStyle: TooltipOption['textStyle']): MarkupText;
  69. export declare function retrieveVisualColorForTooltipMarker(series: SeriesModel, dataIndex: number): ColorString;
  70. export declare function getPaddingFromTooltipModel(model: Model<TooltipOption>, renderMode: TooltipRenderMode): number | number[];
  71. /**
  72. * The major feature is generate styles for `renderMode: 'richText'`.
  73. * But it also serves `renderMode: 'html'` to provide
  74. * "renderMode-independent" API.
  75. */
  76. export declare class TooltipMarkupStyleCreator {
  77. readonly richTextStyles: Dictionary<Dictionary<unknown>>;
  78. private _nextStyleNameId;
  79. private _generateStyleName;
  80. makeTooltipMarker(markerType: TooltipMarkerType, colorStr: ColorString, renderMode: TooltipRenderMode): string;
  81. /**
  82. * @usage
  83. * ```ts
  84. * const styledText = markupStyleCreator.wrapRichTextStyle([
  85. * // The styles will be auto merged.
  86. * {
  87. * fontSize: 12,
  88. * color: 'blue'
  89. * },
  90. * {
  91. * padding: 20
  92. * }
  93. * ]);
  94. * ```
  95. */
  96. wrapRichTextStyle(text: string, styles: Dictionary<unknown> | Dictionary<unknown>[]): string;
  97. }
  98. export {};