Mise en Place du Event Emitter System

• Ajouter le script du SDK

  Incluez le script SDK dans votre page HTML pour permettre l'utilisation des fonctionnalités de Toucan Toco :

  
              <script src="https://toucan-customer-trial.toucantoco.com/scripts/tctc-sdk.js"></script>
            

  Copier

• Initialiser le SDK

  Utilisez l'adminToken pour initialiser l'instance du SDK. La méthode est asynchrone, alors assurez-vous de la placer dans une fonction async.

  
              const instance = await TcTcEmbed.initialize(adminToken);
            

  Copier

• Souscrire aux Événements

  Initialisez l'embed et souscrivez aux événements chart:selection et chart:drill pour écouter les interactions de l'utilisateur.

  
              const instance = await TcTcEmbed.initialize();
              const embed = await instance.get('my_embed_id');
  
              embed.subscribe('chart:selection', (eventData, context) => {
                  console.log('Sélection effectuée :', eventData);
                  console.log('Contexte :', context);
                  displaySelectionDetails(eventData, context);
              });
  
              embed.subscribe('chart:drill', (eventData, context) => {
                  console.log('Drill effectué :', eventData);
                  console.log('Contexte :', context);
                  displayDrillDetails(eventData, context);
              });
          

  Copier

• Gérer les Événements

  Récupérez les détails des événements et affichez-les dans l'interface utilisateur.

  
              function displaySelectionDetails(eventData, context) {
                  const { dataRow, dataLabel, type } = eventData;
                  const { chartType, embedId, storyId } = context;
  
                  document.getElementById('selection-output').innerHTML = \`
                      
  Détails de la Sélection
                      
  Type de Graphique : \${chartType}
                      
  ID de l'Embed : \${embedId}
                      
  Étiquette Sélectionnée : \${dataLabel}
                      
  Données : \${JSON.stringify(dataRow)}
                  \`;
              }
  
              function displayDrillDetails(eventData, context) {
                  const { drillInfo, children } = context;
  
                  document.getElementById('drill-output').innerHTML = \`
                      
  Détails du Drill
                      
  Informations de Drill : \${JSON.stringify(drillInfo)}
                      
  Données Enfant : \${JSON.stringify(children)}
                  \`;
              }
          

  Copier

• Pour en savoir plus 💡

  Consultez le CodePen pour accéder à l'entièreté de la démonstration. Vous pouvez également la documentation Toucan traitant du Event Emitter System