@adobe/react-spectrum-charts
Version:
Declarative library for composing Spectrum visualizations in React.
128 lines • 4.96 kB
TypeScript
import { MutableRefObject } from 'react';
import { Item, Scene, SceneGroup, SceneItem, ScenegraphEvent, View } from 'vega';
import { Datum, MarkBounds } from '@spectrum-charts/vega-spec-builder';
import { MarkMouseInputDetail } from '../hooks/useMarkMouseInputDetails';
import { MarkOnClickDetail } from '../hooks/useMarkOnClickDetails';
export type ActionItem = Item | undefined | null;
type ViewEventCallback = (event: ScenegraphEvent, item: ActionItem) => void;
export interface GetOnMarkClickCallbackArgs {
chartView: MutableRefObject<View | undefined>;
hiddenSeries: string[];
chartId: string;
selectedData: MutableRefObject<Datum | null>;
selectedDataBounds: MutableRefObject<MarkBounds | undefined>;
selectedDataName: MutableRefObject<string | undefined>;
setHiddenSeries: (hiddenSeries: string[]) => void;
legendIsToggleable?: boolean;
legendHasPopover?: boolean;
onLegendClick?: (seriesName: string) => void;
trigger: 'click' | 'contextmenu';
}
/**
* Generates the callback for the mark click handler
* @param chartView
* @param hiddenSeries
* @param chartId
* @param selectedData
* @param selectedDataBounds
* @param selectedDataName
* @param setHiddenSeries
* @param legendIsToggleable
* @param onLegendClick
* @returns
*/
export declare const getOnMarkClickCallback: (args: GetOnMarkClickCallbackArgs) => ViewEventCallback;
/**
* Returns the callback to be used for the `onClick` prop on a mark.
* @param chartView - The mutable ref object containing the chart view.
* @param onClickMarkDetails - The details for all marks with the onClick prop.
* @returns The callback to be used for the `onClick` prop on a mark.
*/
export declare const getOnChartMarkClickCallback: (chartView: MutableRefObject<View | undefined>, onClickMarkDetails?: MarkOnClickDetail[]) => ViewEventCallback;
/**
* Updates the hidden series when a legend item is clicked
* @param item
* @param onLegendMouseInput
* @returns
*/
export declare const handleLegendItemMouseInput: (item: ActionItem, onLegendMouseInput?: (seriesName: string) => void) => void;
/**
* Generates the callback for mouse events (both legend and mark hover)
* @param onLegendMouseInput
* @param markHoverDetails
* @returns
*/
export declare const getOnMouseInputCallback: (onLegendMouseInput?: (seriesName: string) => void, markMouseInputDetails?: MarkMouseInputDetail[]) => ViewEventCallback;
/**
* Checks if the clicked item is a legend item
* @param item
* @returns
*/
export declare const isLegendItem: (item: Item) => boolean;
/**
* Updates the hidden series when a legend item is clicked
* @param item
* @param hiddenSeries
* @param setHiddenSeries
* @returns
*/
export declare const handleLegendItemClick: (item: NonNullable<ActionItem>, { chartView, hiddenSeries, chartId, selectedData, selectedDataBounds, selectedDataName, setHiddenSeries, legendHasPopover, legendIsToggleable, onLegendClick, trigger, }: GetOnMarkClickCallbackArgs) => void;
/**
* Gets the value of the clicked legend item
* @param item
* @returns
*/
export declare const getLegendItemValue: (item: unknown) => string | undefined;
/**
* Checks if the clicked item is a group mark item
* @param item
* @returns
*/
export declare const isGroupMarkItem: (item: Item) => boolean;
/**
* Checks if the clicked item is an area mark item
* @param item
* @returns
*/
export declare const isAreaMarkItem: (item: ActionItem) => boolean;
/**
* Gets the item that should be used for the selected point when the user clicks on an area mark
* The default clicked mark is the entire area
* This will traverse the object to get the correct associated point
* @param item
* @returns
*/
export declare const getItemForAreaMark: (item: ActionItem) => ActionItem;
/**
* Gets the bounds for an item provided by the click handler.
* If the item is in a group that has an offset (like for a grouped bar),
* then the offset is added to the bounds.
* @param item
* @returns MarkBounds
*/
export declare const getItemBounds: (item: ActionItem) => MarkBounds;
/**
* Gets the bounds for an item provided by the click handler.
* If the item is in a group that has an offset (like for a grouped bar),
* then the offset is added to the bounds.
* @param item
* @returns MarkBounds
*/
export declare const getItemName: (item: ActionItem) => string | undefined;
/**
* Gets the the group offset for the provided item.
*
* Mark groups can be nested multiple levels deep.
* This function will recursively step through all groups to get the total offset.
* @param item
* @returns
*/
export declare const getGroupOffset: (item: ActionItem) => {
x: number;
y: number;
};
export declare function isItemSceneItem(item: unknown): item is Item & SceneItem;
export declare const isSceneGroup: (item: unknown) => item is SceneGroup;
export declare const isScene: (item: unknown) => item is Scene;
export {};
//# sourceMappingURL=markClickUtils.d.ts.map