Graphs do not render in PopOS React App

Abierto
#353 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Comienza con el componente de React que contiene los tres elementos y reproduce los gráficos en blanco con npm start en la configuración de Pop!_OS indicada. Comprueba la salida del navegador y determina si la advertencia de source map está relacionada con el fallo de renderizado. Se considera terminado cuando los gráficos circulares codificados de forma fija se rendericen visiblemente y la causa esté documentada.

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

Descripción

I am making a React app using Plotly connected to a flask backend. However, my graphs only display as white squares that when hovered over display the plotly toolbar.

This is a picture of what it looks like: here

When I use the command npm start, I get this message which might have something to do with it:

WARNING in ./node_modules/plotly.js/dist/plotly.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map' file: Error: ENOENT: no such file or directory, open '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map'

Can anyone help me figure out why my plotly graphs are not displaying at all?

My code seems relatively straightforward as I hard coded the numbers to begin with just to get something going:

import React from 'react';
import Plot from 'react-plotly.js'

function Portfolio() {
    const growthPortfolio = [{
            values: [19, 26, 55],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]

    const valuePortfolio = [{
            values: [30, 40, 30],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]


    const totalPortfolio = [{
            values: [45, 35, 20],
            labels: ['Residential', 'Non-Residential', 'Utility'],
            type: 'pie',
            hole: 0.4,
    }]


    return (
        <div>
            <Plot data={growthPortfolio} />
            <Plot data={valuePortfolio} />
            <Plot data={totalPortfolio}/>
        </div>
    );
}

export default Portfolio;
Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
138
Merge medio
3 d 2 h
PR fusionados (30 d)
4

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

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.

Más de plotly/react-plotly.js

Todos los issues de plotly/react-plotly.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.