Zenn
☀️

M5Stackで蓄積したデータベースをグラフ表示するWebアプリを作る。３(グラフ表示編)

2024/11/04に公開
React
sqlite3
PureScript
Vite
opfs
tech

前回で環境測定データーベースからデーターを取得できたので、グラフ表示してみる。

GitHubリポジトリ

GitHubにプロジェクト一式を置いておくので、試してください。
https://github.com/ak1211/vite-react-purs

チャートライブラリのインストール

とりあえずapexchartsを使うことにする。

https://apexcharts.com/docs/installation/

~/vite-react-purs$ spago install apexcharts
[info] Installing 2 dependencies.
[info] Searching for packages cache metadata..
[info] Recent packages cache metadata found, using it..
[info] Installing "options"
[info] Installing "apexcharts"
[info] Installation complete.

ソースの編集

  • index.html
    apexchartsはCDNを使う。

  • src/App/Pages/Home.purs
    コンソールに出力していたデーターを、State変数に入れるようにする。

  • src/App/Chart/PressureChart.purs
    気圧グラフ表示Reactコンポーネントを作る。

  • src/App/Chart/RelativeHumidityChart.purs
    相対湿度グラフ表示Reactコンポーネントを作る。

  • src/App/Chart/TemperatureChart.purs
    気温グラフ表示Reactコンポーネントを作る。

実行

一旦OPFSにファイルアップロードしておくと、いつでもデーターベースオープンできる。

次回はReactのUIコンポーネントライブラリを導入しようかな。

Discussion