This is a working example--not an optimized example!
The basic idea:
import * as Plotly from 'plotly.js-basic-dist'
.- Call the
<PlotlyPlot />
component with data and layout options. Both can be constants or signals! - In
<PlotlyPlot />
, it creates a new div with a random name. We execute Plotly code to create the plot insideonMount()
, so it happens after the new div exists. - In
<PlotlyPlot />
, we usecreateEffect()
to update the plot if the data or layout changes.
For the example with filtered data, filtering is done with signals and effects in App.tsx
and only the data to plot is passed to <PlotlyPlot />
. It may be preferable to pass <PlotlyPlot />
the initial data and a filter signal and do the processing in there--to be explored.