Impossible de redimensionner le graphique Plotly.js dans react-grid-layout.

Question

Je travaille sur une react-grid-layout pour afficher et déplacer des graphiques à l'écran. Actuellement, je suis capable d'ajouter un graphique plotly.js à un conteneur. Il est déplaçable mais ne se redimensionne pas avec le conteneur. Je me demande si une fonction asynchrone est nécessaire pour permettre au graphique de se rendre à nouveau lorsque la boîte du conteneur est redimensionnée. Ci-dessous se trouve le code pour la grille de mise en page, ainsi que pour l'histogramme également.

const ReactGridLayout = WidthProvider(Responsive);

const Dash = (props) => {
  const { value, addItem } = props
  const ref = useRef()

  return (

      Ajouter un élément
         console.log(props.layout)}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
          resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw','se', 'ne']}
          verticalCompact={false}
          // onDragStart={'.dragbackground'}
          // isDraggable={false}
          draggableHandle=".dragHandle"

      >        
        {_.map(value, (item, i) => (
           props.updateLayout(props.layout[i])}>
            Déplacer d'ici

              {item}

            Déplacer d'ici

        ))}

  );
}

Dash.propTypes = {
  value: PropTypes.array,
  onIncreaseClick: PropTypes.func.isRequired
}

const mapStateToProps = (state) => {
  return {
    value: state.count,
    layout: state.layout,
    onLayoutChange: state.onLayoutChange,
  };
};

const mapDispatchToProps = dispatch => { 
  return {
    addItem: () => dispatch({type: actionTypes.ADD_GRID_ITEM}),
    updateLayout: (i) => dispatch({type: actionTypes.UPDATE_LAYOUT, layoutId: i}),
    removeItem: (i) => dispatch({type: actionTypes.REMOVE_ITEM, layoutElId: i})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dash);

Voici le code pour l'histogramme utilisant plotly.js:

export default function Histogram(props) {

  const { width, height, ref } = useResizeDetector({
    //
  })

  const layout = props.layout

  return(   

       this.setChart(chart)}
      style={{width: "100%", height: "100%"}}
      config={{responsive: true}}
      data={[
        {
          x: d1,
          type: 'histogram',
          marker: {
            colour: 'red',
            opacity: 0.5
          },
        },
        {
          x: d2,
          type: 'histogram',
          marker: {
            colour: 'blue',
            opacity: 0.5
          }
        }
      ]}
      layout={{   
        ...layout,
        height: height,
        width: width,
        autosize:true,
        margin: {
          l: 50,
          r: 50,
          b: 100,
          t: 100,
          pad: 4
        },
        title: 'Titre de l'histogramme',
          barmode: 'empiler',
          bargap: 0.05,
          bargroup: 2,
          xaxis: {
            title: 'Titre de l'axe X'
          },
          yaxis: {
            title: 'Fréquence',
            automargin:true
          }}}
      style= {{
        display: 'flex',
        alignItems: 'center',
      }}
      config= {{
      responsive: true 
      }}  
      />

  )
};

Le Redux reducer que j'utilise pour insérer des éléments graphiques dans ma grille:

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case actionTypes.ADD_GRID_ITEM:
            const id = uuid()
            console.log("ajout de: " + id)
            return{
                ...state,
                count: state.count.concat(),
                layout: state.layout.concat({
                    i: `${id}`,
                    x: 2,
                    y: 0,
                    w: 4,
                    h: 5
                }),
            }

Answer 1

J'ai juste construit quelque chose de similaire et ce qui fonctionne pour moi est d'envelopper le plot dans un div avec une référence en utilisant react-resize-detector de sorte qu'il remplisse toujours son parent de cette manière il répond au redimensionnement de la fenêtre et au redimensionnement par glisser-déposer mais reste découplé de la grille de mise en page de react. Voici le composant plot que j'ai utilisé :

import { useResizeDetector } from 'react-resize-detector'
import Plot from 'react-plotly.js'
export default function ResponsivePlot(props) {
  const { width, height, ref } = useResizeDetector({ 
    // refreshMode: 'debounce', 
    // refreshRate: 1000
  })
  const { layout, layers } = props
  return (

  )
};

Utilisation :

import ResponsivePlot from './ResponsivePlot'

//...autres trucs