Rangeselector buttons flashing

Aperta
  • Qualcosa non va?
#329 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia riproducendo issue #329 con il componente MonthlyStats fornito e react-plotly.js 2.6.0, concentrandoti sui pulsanti del rangeselector di xaxis e sul loro comportamento al passaggio del mouse. Confronta il comportamento con la libreria Plotly sottostante per determinare se il difetto appartiene a questo wrapper React o a upstream. Il lavoro è completato quando viene identificato il progetto responsabile e viene documentata una riproduzione minima o la posizione confermata della correzione.

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

Descrizione

I have a simple react plotly chart. I've been playing around with styles and such, but no matter what I do all but the left most rangeselector buttons continuously flash on hover. Including a video below.

I'm using react-plotly.js 2.6.0 and will include my component code in it's entirety below.

Is this an issue I should direct to the main plotly library?

https://github.com/plotly/react-plotly.js/assets/7331495/73eb4341-ed2f-4cf8-b2d5-c4ba9ab60e0c

import { useEffect, useState } from "react";

import Loading from "./Loading";
import Plot from 'react-plotly.js';
import { PropTypes } from "prop-types";
import React from "react";
import { formatMonthData } from "../utils/formatMonthData";

const MonthlyStats = ({userId}) => {
    const [loading, setLoading] = useState(false);
    const [months, setMonths] = useState([])
    const [runMiles, setRuns] = useState([])
    const [walkMiles, setWalks] = useState([])

    useEffect(() => {
        const retrieveData = async () => {
            setLoading(true);
            const response = await fetch(`https://us-central1-stroller-stats.cloudfunctions.net/app/monthly-activities/${userId}`)
            const data = await response.json();
            const [months, runDistances, walkDistances] = formatMonthData(data)
            setMonths(months)
            setRuns(runDistances)
            setWalks(walkDistances)
            setLoading(false);
        }
        retrieveData()
    }, [userId])

    const data = [
        {
        x: months,
        y: runMiles,
        type: 'scatter',
        name: "Run miles",
        mode: 'lines+markers',
        marker: {color: '#03045e'},
        line: {color: "#03045e", width: 3}
        },
        {
            x: months,
            y: walkMiles,
            type: 'scatter',
            name: "Walk miles",
            mode: 'lines+markers',
            marker: {color: "#00f5d4"},
            line: {color: "#00f5d4", width: 3}
        },
    ]

    const layout = { 
        font: {family: "Inter", color: "black"}, 
        font_color: "black", 
        dragmode: false, 
        xaxis: {
            rangeselector: {
                buttons: [{
                    step: 'month',
                    stepmode: 'backward',
                    count: 6,
                    label: '6m'
                },{
                    step: 'year',
                    stepmode: 'todate',
                    count: 1,
                    label: 'YTD'
                }, {step: 'all'}]
            },
            type: "date", 'tickformat': '%b', tickmode: "array", tickvals: months}, 
        yaxis: {visible: true, hoverformat: ".2f"}, 
        hovermode: "x", 
        tickformat: ".0f",
        legend: {
            orientation: "h"
        }, 
        margin: { r: 0, l: 15, t: 0}
    }

    return (
        <>
            <h1>Monthly stroller miles</h1>
            {loading ? <Loading /> :
            <Plot  
                data={data}
                layout={layout}
                useResizeHandler={true}
                style={{width: "100%"}}
                config={{displayModeBar: false}}
            />}
        </>
    );
}

MonthlyStats.propTypes = {
    userId: PropTypes.string.isRequired,
}

export default MonthlyStats;
Lingua principale
JavaScript
Stelle
1.1k
Fork
138
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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.

Altre issue di plotly/react-plotly.js

Tutte le issue di plotly/react-plotly.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.