できること

  • 7 日、30 日、90 日の表示を備えた、KPI ダッシュボード一式の HTML 1 ファイル
  • CSV や JSON の書き出しをダッシュボードのデータに変えるスクリプト
  • recharts を使った React のブロック、およびグラフの ECharts 版
  • 変化のチップ、前期の線、内訳の表、目標のバー
  • 任意:実行前に見積もる、PopNow のレポートのヘッダーの画像

向いている用途

  • 製品、店舗、サポート、グロースの KPI
  • 週次や月次の KPI レポートのページ
  • 社内ツールの概要画面

向いていない用途

  • 多くの画面がある本格的な管理アプリ
  • リアルタイムのストリーミングデータ
  • ひとつのグラフで多くの系列を比べること

使い方

Claude・ChatGPT で

PopNow のスキル「KPI ダッシュボードのテンプレート」(kpi-dashboard-template)を使って、次のことをしてください:exports/orders.csv から KPI ダッシュボードを作って。注文数、売上、訪問者数、初回返信時間を、チャネルごとの内訳つきで。

コーディングエージェントで

/popnow-kpi-dashboard-template exports/orders.csv から KPI ダッシュボードを作って。注文数、売上、訪問者数、初回返信時間を、チャネルごとの内訳つきで。

次はこれ

売上の目標を月 15 万に加えて、既定は直近 7 日にして。

当社の Next.js の管理アプリ用に、React 版をください。

用意しておくもの

  • CSV または JSON の書き出し、またはそれを作るコマンド
  • 4 つの指標と、値が小さいほうが良いかどうか
  • 任意:目標値と、ひとつの指標の内訳に使う列

似ているスキル

すべて見る →

よくある質問

数字はどこから来ますか?

あなた自身の書き出しからです。同梱のスクリプトが、CSV や JSON を、日次の合計でも生のイベントでも読み込み、指標ごとに 1 日 1 行と任意の内訳のデータを作って、ページに書き込みます。

変化率はどう計算されますか?

直近の 7、30、90 日を、その直前の同じ日数と比べます。合計は総和を、時間や率は平均を比べ、アクティブユーザーのような水準は最新の値を比べます。値が小さいほど良い指標では、下がることが良いとして表示されます。

グラフのライブラリが必要ですか?

HTML 版は何も必要とせず、オフラインで動きます。React 版は recharts を使い、すでに ECharts を使っているプロジェクトのために、グラフの ECharts 版も含まれます。

PopNow がグラフを描けますか?

できませんし、そうすべきでもありません。画像モデルは数字を間違えることがあります。PopNow は、任意の文字なしのヘッダーや共有カードの背景にだけ使い、本当の数字は HTML で上に載せます。