onDrill

The onDrill callback runs when the user clicks a drillable item in a visualization. InsightView, the chart components, and the pivot table accept it. Use it to respond to the click in your app, for example to open a detail view filtered by the clicked value.

Structure

onDrill?: (event: IDrillEvent) => void | boolean;

The IDrillEvent holds:

• dataView: the data the visualization was rendered from.
• drillContext: what the user clicked, including the type of the clicked element and the intersection of measures and attribute values at that point.

Example

import { HeaderPredicates, type IDrillEvent } from "@gooddata/sdk-ui";
import { InsightView } from "@gooddata/sdk-ui-ext";

function handleDrill(event: IDrillEvent) {
    console.log(event.drillContext.intersection);
}

export function DrillableVisualization() {
    return (
        <InsightView
            insight="<visualization-id>"
            drillableItems={[HeaderPredicates.identifierMatch("<measure-or-attribute-id>")]}
            onDrill={handleDrill}
        />
    );
}

Notes

• After onDrill runs, the visualization also dispatches a drill DOM event that bubbles up from the visualization’s element, with the same IDrillEvent as its detail. Return false from onDrill to stop that DOM event; any other return value lets it through.
• Only items that match drillableItems are drillable. Without drillableItems, onDrill never runs. See Make visualizations drillable.