plotly / plotly/plotly.js

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

Aperta
#7,442 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

feature P3
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Non sono indicati file del repository né test. Riproduci lo script root funzionante e lo script aggiunto dinamicamente in un browser utilizzando le versioni di Plotly riportate, quindi esamina il caricamento degli script e l'inizializzazione di window.Plotly. Il lavoro è completato quando viene identificato se il lazy loading è supportato e il comportamento viene documentato o corretto con un test di regressione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, typescript
Ambito
data-visualization, frontend, web-dev
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
28/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.