plotly / plotly/plotly.js

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

Abierto
#7,442 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

feature P3
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

No se nombra ningún archivo del repositorio ni ninguna prueba. Reproduce el script raíz funcional y el script añadido dinámicamente en un navegador utilizando las versiones de Plotly indicadas; después, inspecciona la carga de los scripts y la inicialización de window.Plotly. Se considera completado identificar si se admite la carga diferida y documentar o corregir el comportamiento con una prueba de regresión.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, typescript
Área
data-visualization, frontend, web-dev
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
28/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.