📊
BIダッシュボードを作れるEvidenceを触ってみた
EvidenceでBIダッシュボードを作ってみた
Evidenceとは
Evidenceは、BIダッシュボードをコードで管理できるOSSプロジェクトです。SQLとMarkdownを使って、データ分析レポートを作成できます。
背景
スプレッドシートに溜まった膨大なデータを簡単に集計できないもんだろうかと思い触ってみました。スプレッドシートの関数やLooker Studioで集計したりするのですが、スプレッドシートの関数は複雑になりがち、Looker Studioは接続が壊れがち、そんな背景もあり、コードベースで管理できるEvidenceを試してみることにしました。
セットアップ＆表示
初期セットアップ
npx degit evidence-dev/template my-evidence-project
cd my-evidence-project
npm install
開発サーバーの起動
npm run sources
npm run dev
これで、localhostがブラウザで立ち上がり、サンプルの集計データが表示されました。
構成を見てみる
ここで表示しているのはpages/ディレクトリ内のindex.mdです。なので、そのファイルを修正すると、ホットリロードで表示画面に即座に反映されます。
表示しているデータはsources/ディレクトリ内のファイルを参照しているみたいですね。
ちなみにデータはdockdbのデータなので
duckdb sources/needful_things/needful_things.duckdb
D .tables
orders
D .schema orders
CREATE TABLE orders(id BIGINT, order_datetime TIMESTAMP_NS, order_month TIMESTAMP_NS, first_name VARCHAR, last_name VARCHAR, email VARCHAR, address VARCHAR, state VARCHAR, zipcode BIGINT, item VARCHAR, category VARCHAR, sales DOUBLE, channel VARCHAR, channel_group VARCHAR, channel_month VARCHAR);
こんな感じ確認できます。
チャートを追加してみる
AIに支持して、チャートのコードを教えてもらいます書いてもらったらサクッと追加できます。こんな感じのものをindex.mdに追加すればOK。
```sql monthly_sales_trend
select
date_trunc('month', order_datetime) as month,
sum(sales) as sales_usd
from needful_things.orders
where category like '${inputs.category.value}'
and date_part('year', order_datetime) like '${inputs.year.value}'
group by month
order by month desc
```
<LineChart
data={monthly_sales_trend}
title="Monthly Sales Trend - {inputs.category.label}"
x=month
y=sales_usd
yFmt=usd
/>
データの再読み込み
npm run sources
npm run dev
LineChartが表示されました
感想
順番にやっていくとスムーズにできますが、Claude Codeでいきなり独自のデータを表示させようとしたら、思ったよりもハマりました。
良かった点
- SQLクエリはClaude Codeでうまく生成できる
- コードで管理できるので、変更履歴が追いやすい
今回は動かしてみただけですが、自分のデータに置き換えたりしたいので、公式ドキュメントをもう少し読み込んで、触ってみます。
次に試したいこと
- データを簡単に読み込むこと
- queryを簡単に書くこと
このあたりをやっていきたいと思っています。
Discussion