OnFireDrillEvent

The onFiredDrillEvent parameter allows you to catch drilling events from visualizations on non-embedded KPI dashboards and to respond to them using the function that you have chosen to use and implemented.

When a user clicks a drillable item in a visualization on a non-embedded KPI dashboard, a default drill event is generated. This event has a format of { drillContext, executionContext } and is sent to the function that you have chosen.

• If you want the default drilling event not to be generated, the function must return false. In this case, only what you have implemented in the function body is performed.
• When the function returns anything else but false, whatever you have implemented in the function body is performed, and then the default drilling event is also generated.

Structure

<Visualization
   ....
   onFiredDrillEvent={({ drillContext, executionContext }) => {
      console.log('chart clicked!');
      var workspaceId = '<workspace-id>';
      var attributeIdentifier = executionContext.measures[0].definition.measure.item.identifier;
 
      gooddata.md.getUrisFromIdentifiers(workspaceId, [ attributeIdentifier ]).then(result => {
         // converting the attribute identifier into the attribute URI
         var attributeUri = result[0].uri;
 
         gooddata.md.getObjectDetails(attributeUri).then(attribute => {
            // attribute metadata requested based on the attribute URI
            var attributeDisplayFormUri = attribute.attribute.content.displayForms[0].meta.uri;
            var attributeDisplayFormId = attributeDisplayFormUri.split('/').slice(-1)[0]; // attribute's displayForm identifier
 
            gooddata.md.getValidElements(workspaceId, attributeDisplayFormId).then(validElements => {
               // elements of the attribute's displayForm
               const items = validElements.validElements.items.map(item => item.element);
               console.log('data retrieved!', items);
               // see the console in your browser dev tools
            });
         });
      });
   }}
/>

Example

import { HeaderPredicateFactory } from '@gooddata/react-components';

<Visualization
   projectId="<workspace-id>"
   identifier="<visualization-identifier>"
   config={<chart-config>}
   onFiredDrillEvent={(data) => { console.log(data.executionContext); }}
   drillableItems={[
        HeaderPredicateFactory.identifierMatch('drillable-Identifier1'), 
        HeaderPredicateFactory.uriMatch('/drillable-Uri2')
   ]}
/>