Mise en Place du Graphique Interactif

• Configurer les Filtres

  Définissez les filtres permettant aux utilisateurs de personnaliser les données affichées. Utilisez des menus déroulants pour les pays et des sélecteurs de dates pour affiner les résultats.

  
  $(document).ready(function() {
    $('#countrySelect').select2({
      placeholder: "Sélectionnez un pays",
      allowClear: true,
      width: 'resolve'
    });
  });
  flatpickr("#dateRange", {
    mode: "range",
    dateFormat: "Y-m-d",
    onChange: function(selectedDates) {
      if (selectedDates.length === 2) {
        startDealDate = convertToISO(selectedDates[0]);
        endDealDate = convertToISO(selectedDates[1]);
        updateEmbeds();
      }
    }
  });
            

  Copier

• Gérer les Onglets

  Assurez-vous que les filtres sont maintenus lorsque les utilisateurs naviguent entre les onglets. Chaque onglet doit afficher les graphiques correspondants tout en conservant les filtres appliqués.

  
  $('#myTab a').on('shown.bs.tab', async function (e) {
    const tabId = $(e.target).attr('id').replace('-tab', '');
    const containerId = 'chartContainer' + tabId.charAt(tabId.length - 1);
    await initializeToucan(tabId, containerId, 'VOTRE_EMBED_ID');
    if (selectedCountry || startDealDate || endDealDate) {
      let filters = {};
      if (selectedCountry) filters.country = selectedCountry;
      if (startDealDate) filters.start_deal = startDealDate;
      if (endDealDate) filters.end_deal = endDealDate;
      await toucanInstances[tabId].setExtraVariablesForAllEmbeds(filters);
    }
  });
            

  Copier

• Initialiser le SDK Toucan Toco

  Créez et configurez les instances du SDK pour chaque graphique. Insérez les graphiques dans les conteneurs spécifiés et assurez-vous qu'ils sont prêts à afficher les données filtrées.

  
  async function initializeToucan(tabId, containerId, embedId) {
    if (!toucanInstances[tabId]) {
      try {
        toucanInstances[tabId] = await TcTcEmbed.initialize();
        await toucanInstances[tabId].insertEmbedById(
          embedId,
          document.getElementById(containerId),
          {
            token: 'VOTRE_TOKEN',
            lang: 'en',
            panel: false,
            header: true
          }
        );
        updateEmbeds();
      } catch (error) {
        console.error(`Erreur lors de l'initialisation de l'onglet ${tabId}:`, error);
      }
    }
  }
            

  Copier

• Appliquer les Filtres

  Pour obtenir plus d'informations, vous consultez :

  
  async function updateEmbeds() {
    for (const instance in toucanInstances) {
      try {
        let filters = {};
        if (selectedCountry) filters.country = selectedCountry;
        if (startDealDate) filters.start_deal = startDealDate;
        if (endDealDate) filters.end_deal = endDealDate;
        await toucanInstances[instance].setExtraVariablesForAllEmbeds(filters);
      } catch (error) {
        console.error(`Erreur lors de l'application du filtre pour l'onglet ${instance}:`, error);
      }
    }
  }
            

  Copier

• Gestion des Changements de Sélection

  Assurez-vous que les changements effectués dans les filtres se reflètent immédiatement dans les graphiques, même lors de la navigation entre les onglets. Les événements de sélection doivent déclencher une mise à jour des graphiques.

  
  $('#countrySelect').on('change', function() {
    selectedCountry = $(this).val();
    updateEmbeds();
  });
  $('#dateRange').on('change', function() {
    startDealDate = convertToISO(new Date($('#dateRange').data('startDate')));
    endDealDate = convertToISO(new Date($('#dateRange').data('endDate')));
    updateEmbeds();
  });
            

  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 des ExtraVariables