plotly / plotly/react-plotly.js

Graphs do not render in PopOS React App

Ouverte
#353 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

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

  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

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

Recevez les nouvelles issues par e-mail

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