diff --git a/types/victory/index.d.ts b/types/victory/index.d.ts index d23ffea90b..6f152a9fcb 100644 --- a/types/victory/index.d.ts +++ b/types/victory/index.d.ts @@ -33,6 +33,7 @@ declare module "victory" { // Many victory components accept string or number or callback which returns string or number type StringOrNumberOrCallback = string | number | { (): string | number }; + type NumberOrCallback = { (): number } | number; /** * Style interface used in components/themeing @@ -520,6 +521,145 @@ declare module "victory" { */ export const VictoryTheme: VictoryThemeInterface; + type OrientationTypes = "top" | "bottom" | "left" | "right"; + + export interface VictoryTooltipProps { + /** + * The active prop specifies whether the tooltip component should be displayed. + */ + active?: boolean; + /** + * When true, tooltip events will set the active prop on both data and label elements. + * @default false + */ + activateData?: boolean; + /** + * The angle prop specifies the angle to rotate the tooltip around its origin point. + */ + angle?: string | number; + /** + * The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum. + */ + cornerRadius?: NumberOrCallback; + /** + * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine text. + */ + datum?: {}; + /** + * Victory components can pass a data prop to their label component. This can be useful in custom components that need to make use of the entire dataset. + */ + data?: any[]; + /** + * The dx prop defines a horizontal shift from the x coordinate. + */ + dx?: StringOrNumberOrCallback; + /** + * The dy prop defines a vertical shift from the y coordinate. + */ + dy?: StringOrNumberOrCallback; + /** + * The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. + * When events are provided via Victory’s event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey. + * Examples: events={{onClick: (evt) => alert("x: " + evt.clientX)}} + */ + events?: {}; + /** + * The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent. + */ + flyoutStyle?: React.CSSProperties; + /** + * The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. + * The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. + * Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. + * If flyoutComponent is omitted, a default Flyout component will be created with props described above. + * Examples: flyoutComponent={}, flyoutComponent={} + * @default + */ + flyoutComponent?: React.ReactElement; + /** + * The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a tag. + * @default groupComponent={} + */ + groupComponent?: React.ReactElement; + /** + * The height prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. + * If this prop is not set, height will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip. + */ + height?: NumberOrCallback; + /** + * The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. + * This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. negative values result in a left orientation and positive values will result in a right orientation by default. + */ + horizontal?: boolean; + /** + * The index prop represents the index of the datum in the data array. + */ + index?: number | string; + /** + * The labelComponent prop takes a component instance which will be used to render each tooltip label. + * The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. + * Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. + * If labelComponent is omitted, a new VictoryLabel will be created with the props described above. + * Examples: labelComponent={}, labelComponent={} + * @default + */ + labelComponent?: React.ReactElement; + /** + * The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. + * This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these values. + * If this prop is not provided it will be determined from the sign of the datum, and the value of the horizontal prop. + */ + orientation?: OrientationTypes; + /** + * The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. + */ + pointerLength?: NumberOrCallback; + /** + * The pointerWidth prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. + */ + pointerWidth?: NumberOrCallback; + /** + * When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element within VictoryContainer. Note: This prop should not be set to true when using a custom container element. + */ + renderInPortal?: boolean; + /** + * The style prop applies CSS properties to the rendered `` element. + */ + style?: React.CSSProperties; + /** + * The text prop defines the text VictoryTooltip will render. The text prop may be given as a string, number, or function of datum. + * When VictoryLabel is used as the labelComponent, strings may include newline characters, which VictoryLabel will split in to separate elements. + */ + text?: StringOrNumberOrCallback | string[] | number[]; + /** + * VictoryAxis uses the standard theme prop. Read about it here + * @default VictoryTheme.grayscale + */ + theme?: VictoryThemeDefinition; + /** + * The width prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, width will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip. + */ + width?: NumberOrCallback; + /** + * The x prop defines the x coordinate to use as a basis for horizontal positioning. + */ + x?: number; + /** + * The y prop defines the y coordinate to use as a basis for vertical positioning. + */ + y?: number; + } + + + /** + * VictoryTooltip renders a tooltip component with a set of default events. When VictoryTooltip is used as a label component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered. + * VictoryTooltip renders text as well as a configurable Flyout container. + */ + export class VictoryTooltip extends React.Component< + VictoryTooltipProps, + any + > {} + /** * Animate object used in components */