【備忘録】Next.jsでPlotly.jsを使う

素のReactとNext.jsで若干書き方に違いがあった。
地味につまずいたのでメモ。
筆者はReact・フロントは門外漢。

dashさまさまだと思った。

要約

• 行頭の'use client'を指定する
• Next.js selfが定義されていないとか言われるのでimport変える
  • https://github.com/plotly/react-plotly.js/issues/272
• TypeScript使うときは型定義ファイルもinstallする
• selected, onclickイベント取得がバグってる？？
  • https://github.com/plotly/react-plotly.js/issues/116
• pythonでfig.to_json()したデータを使えば簡単にPlotが再現できる(た)
  • がしかし型…

変更の要約

ほとんどこの人の記事ママ

Next.jsで扱うための変更とかだけ書く

行頭〜importを以下のように書き換える。

'use client'
import React from 'react'
import dynamic from 'next/dynamic'
const Plot = dynamic(() => import("react-plotly.js"), { ssr: false, })
import {PlotParams} from 'react-plotly.js'
import {Layout, PlotData} from 'plotly.js'

return

イベントもこんな感じで書けば取得できるらしい

onselectedは動かないが、onselectingだと良いとか…

  return (
    // <Plot data={allData} layout={layout1} />
    <Plot
        data={allData}
        layout={layout1}
        onHover={(data)=>{console.log(data)}}
    />
  )

memo：　プロジェクトの作成

npx create-next-app --ts test-app
#...etc...
cd test-app
npm i plotly.js react-plotly.js
npm i --save-dev @types/plotly.js @types/react-plotly.js

cat << EOF > app/page.tsx
import ThreeGraph from "./threegraph";

export default () => {
  return(
    <div>
      <ThreeGraph />
    </div>
  )
}
EOF

touch app/threegraph.tsx
# 上の内容をコピペ

参考