plotly / plotly/plotly.js

[BUG]: Polar plot zoom function wipes internal layout settings and incorrect range for dblclick zoomout function

Aperta
#7,594 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

Description

Haven't seen if this is an issue in other plot types, but currently working on a polar plot.

There is a problem when if you initialize a plot with empty traces with autorange: true or with range not specified and then update the data, the zoomout dbl click does not accurately zoom out to the full range of the dataset, it defaults to a range of [0, 1].

Secondly the zoom button from the barmenu will wipe some layout settings of the plot.
For example in a polar plot dragmode: false disable user to rotate the plot. However when the user zooms in,
the user is able to rotate the plot.

The following code snippet will be able to reproduce the above mentioned issues on codepen.

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-3.1.2.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
    {
        r: Array(8).fill(0),
        // r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "11-14 m/s",
        marker: { color: "rgb(106,81,163)" },
        type: "barpolar"
    },
    {
        // r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "8-11 m/s",
        marker: { color: "rgb(158,154,200)" },
        type: "barpolar"
    },
    {
        // r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "5-8 m/s",
        marker: { color: "rgb(203,201,226)" },
        type: "barpolar"
    },
    {
        // r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "< 5 m/s",
        marker: { color: "rgb(242,240,247)" },
        type: "barpolar"
    }
];


var layout = {
    title: {
        text: "Wind Speed Distribution in Laurel, NE"
    },
    font: { size: 16 },
    legend: { font: { size: 16 } },
    polar: {
        radialaxis: {
            ticksuffix: "%",
            angle: 45
        },
        angularaxis: {
            direction: "clockwise"
        }
    },
    dragmode: false
};

var newData = {
    r: [
        [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
        [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
        [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
        [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5]
    ]
};

const updatedLayout = {
    polar: {
        radialaxis: {
            range: [0, 100] // Update only the radial axis range
        }
    }
};

Plotly.react("myDiv", data, layout);
Plotly.update("myDiv", newData);

Steps to reproduce
  1. Plot unable to be rotated
  2. Click on zoom on plot bar menu
  3. Select area in plot to zoom in
  4. Bug reproduced
    • Plot able to be rotated
  5. Double click in plot to zoom out
    • Unable to zoom out to full range
    • Radial axis range set to [0, 1]
Notes

Also if you use Plotly.update("myDiv", newData), although only range was meant to be set, other radialaxis layout settings was reset from the update

Guida per i contributori

Apri la guida per i contributori

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.

Direzione di ricerca

Inizia con la riproduzione fornita usando Plotly.react e Plotly.update, concentrandoti sui grafici polari, sui controlli dello zoom, su autorange e sullo zoomout con doppio clic. Il payload non nomina file o test del repository; il lavoro è completato quando vengono mantenute le impostazioni del layout come dragmode e la configurazione di radialaxis, ripristinando l'intero intervallo dei dati dopo lo zoomout.

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

Valutazione

Stack tecnologico
javascript
Ambito
data-visualization
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.