グラフ・メーター表示

売上、件数、進捗、達成率、残数を視覚的に確認できる形にします。

グラフ・メーター表示は、一覧や詳細に埋もれやすい数字を、推移、割合、達成状況、残り作業として一目で判断できるようにするUIです。Roundtableでは、どの数字を意思決定に使うか、リアルタイム性が必要か、管理側だけか公開側にも見せるかを整理してから実装範囲を決めます。

この機能でできること

売上推移、問い合わせ件数、予約数、承認待ち、在庫残数、作業進捗、目標達成率などを、棒グラフ、折れ線、ドーナツ、進捗バー、ゲージで表示できます。数字の一覧だけでは気づきにくい増減、偏り、滞留、期限切れを画面上で見つけやすくします。

数字を読むための画面ではなく、次に見るべき箇所を判断するための画面です。 合計値、分母、集計期間、対象条件をそろえると、発注者、実装者、AIに指示する人が同じ数字を前提に話せます。

よくある利用場面

ダッシュボードの状況把握 今月売上、未対応件数、達成率、期限切れ数をトップ画面でまとめて確認します。

進捗・残数の確認 作業完了率、在庫残数、予約枠の残り、申込上限までの空きをメーターで表示します。

月別・担当者別の比較 月別推移、カテゴリ別件数、担当者別状況をグラフにして、偏りや変化を見つけます。

プロンプト例

何を集計するか、期間、表示形式、更新タイミング、クリック後に見せる詳細をまとめて伝えると、グラフだけが先にできて数字の意味が曖昧になることを避けられます。

プロンプト 管理画面のトップにグラフ・メーター表示を追加してください。今月売上、問い合わせ件数、対応完了率、承認待ち、予約残数を表示し、売上は月別の棒グラフ、対応完了率はゲージ、予約残数は進捗バーにしてください。各カードをクリックすると対象一覧へ絞り込み付きで移動できるようにしてください。公開側では顧客ごとの進捗率だけを表示してください。

この機能を使うときのポイント

数字の定義売上、件数、達成率、残数の計算条件と、含めるデータ・除外するデータを決めます。

集計期間当日、今週、今月、会計期間、任意期間など、業務判断に使う区切りを選びます。

表示形式推移は棒や折れ線、割合はドーナツやゲージ、残りは進捗バーのように目的に合わせます。

公開範囲管理側だけの経営数字、担当者別の数字、顧客に見せる進捗を分けます。

この機能を実装するときのコツ

まず集計処理を表示テンプレートから分け、対象データ、期間、権限をサーバー側で確定させます。画面側では、グラフに渡す値、ラベル、色、最大値、単位を配列としてそろえ、表示だけをJavaScriptやCSSに任せると保守しやすくなります。管理側と公開側で同じ集計を使う場合でも、公開側は必ず表示対象を絞り、内部の合計や他顧客の数字が混ざらないようにします。