plotlyでグラフのコンポーネントを複数作成する

備忘録です
Graph.svelte

<script>
  import { onMount } from 'svelte';
  import Plotly from 'plotly.js-dist';

  export let graphData;
  export let graphLayout;
  let graphDiv;

  onMount(() => {
    Plotly.newPlot(graphDiv, [graphData], graphLayout);
  });
</script>

<div bind:this={graphDiv}></div>

<script>
  import { onMount } from 'svelte';
  import PlotlyGraph from './PlotlyGraph.svelte';

  let dataList = [];

  onMount(async () => {
    // データを非同期に取得する例
    const response = await fetch('/api/getGraphData');
    dataList = await response.json();
  });
</script>
App.svelte
<main>
  <h1>複数のグラフの表示</h1>
  {#each dataList as item (item.id)}
    <div class="graph-container">
      <h2>{item.layout.title}</h2>
      <PlotlyGraph graphData={item.data} graphLayout={item.layout} />
    </div>
  {/each}
</main>