plotly / react-plotly.js

A plotly.js React component from Plotly 📈
MIT License
1.01k stars 135 forks source link

uirevision doesn't works on dist version #311

Closed MeterKishor closed 1 year ago

MeterKishor commented 1 year ago

I'm trying to build Plotly chart where it shouldn't reset chart when dynamically adding data. I'm using buddy.works as deploy engine and i have limited ram so had to use " plotly.js-basic-dist-min" this is what I'm trying to achieve https://codepen.io/plotly/pen/ebMJEW .

but I'm facing problem while using dist-min version. as uirevision works fine on import Plot from 'react-plotly.js';

but it doesn't work for

import createPlotlyComponent from "react-plotly.js/factory"; var Plotly = require('plotly.js-basic-dist-min')

    do i need to pass any other options? or is there any mistakes in my code?

    here's full code

    `import React, { useEffect, useState } from 'react';
    import './App.css';
    import createPlotlyComponent from "react-plotly.js/factory";
    var Plotly = require('plotly.js-basic-dist-min')

    function App() {
      const Plot = createPlotlyComponent(Plotly);
      const [data, setData] = useState<any>({
        x:[],
        y:[],
        type:'scatter'
      })
      useEffect(()=>{
        let x:any=[]
        let y:any=[]
        let i=1;
        let inval = setInterval(()=>{
          x= [...x, i]
          y= [...y, Math.floor(Math.random() * 10) + 1]
          setData({
            x:x,
            y:y,
            type:'scatter'
          })
          i++
        }, 5000)
        return ()=>{
          clearInterval(inval);
        }

      },[])
      return (
        <div className="App">
          <Plot
              data={[data]}
              config={{ scrollZoom: false, responsive: true, displaylogo: false}}
              useResizeHandler={true}
              style={{ width: "100%", height: "100%" }} 

              layout={{
                title: 'User Zoom Persists<br>When uirevision Unchanged',
                uirevision:'true',
                xaxis: {autorange: true},
                yaxis: {autorange: true}
              }}

            />
        </div>
      );
    }

    export default App;

`

MeterKishor commented 1 year ago

moving const Plot = createPlotlyComponent(Plotly); outside function fixed it.

alexcjohnson commented 1 year ago

See https://github.com/plotly/plotly.js/issues/6473