plotly / plotly/plotly.js

Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace

Ouverte
#7,442 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

feature P3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

I want to lazy load Plotly from a CDN in my application, when required. When I dynamically create a <script> tag to fetch the CDN at runtime, the window.Ploty namespace is not populated.

  1. Is it possible to support this mechanism?
  2. Is there something I need to hook into with the initial page load?
Consuming CDN at application root

When I fetch plotly from a CDN via an html <script> tag added to my applications root. My chart render and work as expected. The file is fetched, initialized and the window.Plotly instance exists.

<!-- WORKS -->
 <script type="text/javascript" src="https://cdn.plot.ly/plotly-2.24.3.min.js"></script> 
Consuming CDN with lazy load

However, if I want to lazy load the CDN by creating the <script> tag only when required. When I do this in typescript, the file is successfully fetched, but the window.Plotly namespace never gets populated:

/** DOES NOT WORK */
const init = (): void => {
  const src = 'https://cdn.plot.ly/plotly-2.35.2.min.js';
  const script: HTMLScriptElement = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.onerror = (): void => {
    console.error(`Error loading plotly.js library from ${src}`);
  };

  const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
  head.appendChild(script);

  let counter = 200; // equivalent of 10 seconds...
  // Checks if the plotly.js library is loaded by looking for the global Plotly variable.
  const checkLoad = (): void => {
    const plotly = (window as PlotlyWindow).Plotly;
    if (plotly) {
      // ready
      // do something
    } else if (counter > 0) {
      // wait
      counter--;
      setTimeout(checkLoad, 50);
    } else {
      // expire
      throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
    }
  };
  checkLoad();
};

Image

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Aucun fichier du dépôt ni aucun test n’est nommé. Reproduisez le script racine fonctionnel et le script ajouté dynamiquement dans un navigateur en utilisant les versions de Plotly indiquées, puis examinez le chargement des scripts et l’initialisation de window.Plotly. Le travail est terminé lorsqu’il est établi si le chargement différé est pris en charge et que le comportement est documenté ou corrigé avec un test de régression.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, typescript
Domaine
data-visualization, frontend, web-dev
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
28/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.