plotly / plotly/react-plotly.js
Graphs do not render in PopOS React App
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
Description
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;
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par le composant React contenant les trois éléments et reproduisez les graphiques vierges avec npm start sur la configuration Pop!_OS signalée. Vérifiez la sortie du navigateur et déterminez si l’avertissement de source map est lié à l’échec du rendu. C’est terminé lorsque les graphiques circulaires codés en dur s’affichent visiblement et que la cause est documentée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- data-visualization, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 30/100