feat(tooltip): improve positioning with popperjs

api/charts.api.md

@@ -404,6 +404,9 @@ export const CurveType: Readonly<{
 // @public (undocumented)
 export type CurveType = $Values<typeof CurveType>;
 
+// @public
+export type CustomTooltip = ComponentType<TooltipInfo>;
+
 // Warning: (ae-missing-release-tag) "DARK_THEME" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -494,14 +497,10 @@ export const DEFAULT_MISSING_COLOR = "red";
 // @public (undocumented)
 export const DEFAULT_SETTINGS_SPEC: SettingsSpec;
 
-// Warning: (ae-missing-release-tag) "DEFAULT_TOOLTIP_SNAP" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export const DEFAULT_TOOLTIP_SNAP = true;
 
-// Warning: (ae-missing-release-tag) "DEFAULT_TOOLTIP_TYPE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export const DEFAULT_TOOLTIP_TYPE: "vertical";
 
 // Warning: (ae-missing-release-tag) "DefaultSettingsProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1322,7 +1321,6 @@ export interface SettingsSpec extends Spec {
     showLegend: boolean;
     showLegendExtra: boolean;
     theme?: PartialTheme | PartialTheme[];
-    // (undocumented)
     tooltip: TooltipSettings;
     // Warning: (ae-forgotten-export) The symbol "Domain" needs to be exported by the entry point index.d.ts
     //
@@ -1455,33 +1453,28 @@ export type TickStyle = StrokeStyle & Visible;
 // @public (undocumented)
 export function timeFormatter(format: string): TickFormatter;
 
-// Warning: (ae-missing-release-tag) "TooltipProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
+export interface TooltipInfo {
+    header: TooltipValue | null;
+    values: TooltipValue[];
+}
+
+// @public
 export interface TooltipProps {
     boundary?: HTMLElement | 'chart';
-    // Warning: (ae-forgotten-export) The symbol "CustomTooltip" needs to be exported by the entry point index.d.ts
     customTooltip?: CustomTooltip;
     fallbackPlacements?: Placement[];
-    // (undocumented)
     headerFormatter?: TooltipValueFormatter;
     placement?: Placement;
-    // (undocumented)
     snap?: boolean;
-    // (undocumented)
     type?: TooltipType;
-    // (undocumented)
+    // @alpha
     unit?: string;
 }
 
-// Warning: (ae-missing-release-tag) "TooltipSettings" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export type TooltipSettings = TooltipType | TooltipProps;
 
-// Warning: (ae-missing-release-tag) "TooltipType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-// Warning: (ae-missing-release-tag) "TooltipType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export const TooltipType: Readonly<{
     VerticalCursor: "vertical";
@@ -1490,12 +1483,10 @@ export const TooltipType: Readonly<{
     None: "none";
 }>;
 
-// @public (undocumented)
+// @public
 export type TooltipType = $Values<typeof TooltipType>;
 
-// Warning: (ae-missing-release-tag) "TooltipValue" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export interface TooltipValue {
     color: Color;
     isHighlighted: boolean;
@@ -1507,9 +1498,7 @@ export interface TooltipValue {
     valueAccessor?: Accessor;
 }
 
-// Warning: (ae-missing-release-tag) "TooltipValueFormatter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;
 
 // @public

src/components/tooltip/types.ts

@@ -20,11 +20,27 @@ import { ComponentType } from 'react';
 
 import { TooltipValue } from '../../specs';
 
+/**
+ * The set of info used to render the a tooltip.
+ * @public
+ */
 export interface TooltipInfo {
+  /**
+   * The TooltipValue for the header. On XYAxis chart the x value
+   */
   header: TooltipValue | null;
+  /**
+   * The array of {@link TooltipValue}s to show on the tooltip.
+   * On XYAxis chart correspond to the set of y values for each series
+   */
   values: TooltipValue[];
 }
 
+/**
+ * The react component used to render a custom tooltip
+ * with the {@link TooltipInfo} props
+ * @public
+ */
 export type CustomTooltip = ComponentType<TooltipInfo>;
 
 /** @internal */

src/index.ts

@@ -43,6 +43,7 @@ export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/ind
 export { Goal } from './chart_types/goal_chart/specs/index';
 export { AccessorFn, IndexedAccessorFn, UnaryAccessorFn } from './utils/accessor';
 export { SpecTypes } from './specs/settings';
+export { CustomTooltip, TooltipInfo } from './components/tooltip/types';
 
 // scales
 export { ScaleType } from './scales';

src/specs/settings.tsx

@@ -99,7 +99,10 @@ export interface PointerOutEvent extends BasePointerEvent {
 
 export type PointerEvent = PointerOverEvent | PointerOutEvent;
 
-/** The type of tooltip to use */
+/**
+ * This enums provides the available tooltip types
+ * @public
+ */
 export const TooltipType = Object.freeze({
   /** Vertical cursor parallel to x axis */
   VerticalCursor: 'vertical' as 'vertical',
@@ -111,6 +114,10 @@ export const TooltipType = Object.freeze({
   None: 'none' as 'none',
 });
 
+/**
+ * The TooltipType
+ * @public
+ */
 export type TooltipType = $Values<typeof TooltipType>;
 
 export const BrushAxis = Object.freeze({
@@ -121,6 +128,10 @@ export const BrushAxis = Object.freeze({
 
 export type BrushAxis = $Values<typeof BrushAxis>;
 
+/**
+ * This interface describe the properties of single value shown in the tooltip
+ * @public
+ */
 export interface TooltipValue {
   /**
    * The label of the tooltip value
@@ -156,11 +167,28 @@ export interface TooltipValue {
   valueAccessor?: Accessor;
 }
 
+/**
+ * A value formatter of a {@link (TooltipValue:type) | TooltipValue}
+ * @public
+ */
 export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;
 
+/**
+ * The advanced configuration for the tooltip
+ * @public
+ */
 export interface TooltipProps {
+  /**
+   * The {@link (TooltipType:type) | TooltipType} of the tooltip
+   */
   type?: TooltipType;
+  /**
+   * Whenever the tooltip needs to snap to the x/band position or not
+   */
   snap?: boolean;
+  /**
+   * A {@link TooltipValueFormatter} to format the header value
+   */
   headerFormatter?: TooltipValueFormatter;
   /**
    * Preferred placement of tooltip relative to anchor.
@@ -183,6 +211,11 @@ export interface TooltipProps {
    * @defaultValue parent scroll container
    */
   boundary?: HTMLElement | 'chart';
+  /**
+   * Unit for event (i.e. `time`, `feet`, `count`, etc.).
+   * Not currently used/implemented
+   * @alpha
+   */
   unit?: string;
   /**
    * Render custom tooltip given header and values
@@ -192,6 +225,7 @@ export interface TooltipProps {
 
 /**
  * Either a TooltipType or an object with configuration of type, snap, and/or headerFormatter
+ * @public
  */
 export type TooltipSettings = TooltipType | TooltipProps;
 
@@ -246,6 +280,9 @@ export interface SettingsSpec extends Spec {
   rotation: Rotation;
   animateData: boolean;
   showLegend: boolean;
+  /**
+   * The tooltip configuration forr the chart {@link TooltipSettings}
+   */
   tooltip: TooltipSettings;
   debug: boolean;
   legendPosition: Position;
@@ -314,7 +351,18 @@ export type DefaultSettingsProps =
   | 'brushAxis'
   | 'minBrushDelta';
 
+/**
+ * Default value for the tooltip type
+ * @defaultValue `vertical` {@link (TooltipType:type) | TooltipType.VerticalCursor}
+ * @public
+ */
 export const DEFAULT_TOOLTIP_TYPE = TooltipType.VerticalCursor;
+
+/**
+ * Default value for the tooltip snap
+ * @defaultValue `true`
+ * @public
+ */
 export const DEFAULT_TOOLTIP_SNAP = true;
 
 export const SpecTypes = Object.freeze({