整備工場・車販店 分析グラフ ｜ 開発仕様書

1. アーキテクチャ概要

• 純粋なクライアントサイドSPA。ビルド工程・サーバーサイド処理・APIは一切無い。 静的ファイルをWebサーバー（Apache）に置くだけで動作する。
• CSVの読込・解析・集計・描画・出力はすべてブラウザ内（JavaScript）で完結。データは外部送信されない。
• 編集対象は app.js / style.css / index.html の3ファイルのみ。 トランスパイル不要（ES2020相当をそのまま記述）。

ファイル構成と責務

2. データフロー

ファイル選択/ドロップ
  → handleFiles()            … 各ファイルを順に処理
  → readFile()               … FileReader で ArrayBuffer 取得
  → decodeBuffer()           … UTF-8 / Shift-JIS を自動判定しテキスト化
  → Papa.parse(header:true)  … 配列<オブジェクト> 化
  → classify()               … ヘッダー列名から 顧客/車両/伝票/入金 を判定
  → state[type] に格納
[分析する]
  → analyze()
      → buildIndexes()       … idx.custTx / idx.vehLast / idx.years を構築
      → safe('タブ名', renderXxx)  … 6タブを個別 try/catch で描画
  → saveSession()            … IndexedDB に取込内容を保存（最新10件）

3. グローバル状態（app.js 冒頭）

4. 入力データの扱い

4.1 文字コード判定 — decodeBuffer()

UTF-8・Shift-JIS の両方で TextDecoder デコードし、日本語文字数から不正文字（U+FFFD）数×20を引いたスコアの高い方を採用。

4.2 ファイル分類 — classify()

ヘッダー列名集合に対し、種別ごとの特徴列（SIGNATURE）の一致数を数え、最大の種別へ割当て（最低2列一致）。

4.3 列名のゆらぎ吸収 — pick(r, ...names)

業務システムの出力により列名が異なるため（例：法人区分 / 法人個人区分）、候補名を並べ最初に値のある列を返す。新たなゆらぎは pick() の候補追加で対応。

4.4 和暦日付 — parseDate()

元号記号（M/T/S/H/R）・漢字元号・西暦を解釈。元号→西暦は ERA_BASE のオフセット表（S=1925, H=1988, R=2018 など）で換算。日が無い H10-01 は1日扱い。日付列は必ず parseDate() を通すこと。

5. 集計の定義

5.1 RFM 5段階スコア（しきい値はデータから自動算出）

スコアの境界値は固定しない。業態・店舗規模により取引回数や購買額の水準が大きく異なるため、 取込んだCSVの分布から分位数（quintile）で自動算出する。 R・F・M それぞれについて、取引実績のある全顧客の値を昇順に並べ、20/40/60/80パーセンタイル点 （quintileCuts()）を境界として5段階に分類する。

R・F・M の定義：R＝idx.custTx の last と基準日(TODAY)の差日数、 F＝count（伝票件数）、M＝total（伝票合計の累計）。顧客⇔伝票は顧客CDで突合。 実装は renderRFM() 内の rCut/fCut/mCut（境界値）と rSc/fSc/mSc（スコア関数）。 RFM内訳グラフの「範囲」列にはこの自動算出された境界値が表示される。

5.2 顧客ランク（★0〜★5）

合計スコア sc = R + F + M（3〜15）で判定。取引実績の無い顧客は sc によらず ★0。 R・F・M が相対評価（分位数）になったため、ランク境界は固定のまま運用できる。

5.3 ランク別の表示指標

5.4 デモデータ

CSVが無い環境での動作確認用に buildDemoData() を用意。顧客160／車両260／伝票1,600／入金1,300件の 擬似データ（2024〜2026年）を生成して state に直接投入する。アップロード画面の「デモデータで試す」ボタンから実行。 取込履歴には保存しない。

6. 描画レイヤ

主要ヘルパ

各タブは renderOverview / renderYoY / renderCustomers / renderVehicles / renderRFM / renderRanking。 analyze() から safe() 経由で呼ばれ、1タブが例外を投げても他タブは描画される。

Chart.js のアニメーションは analyze() で Chart.defaults.animation=false に設定（非表示タブの実寸描画・出力のため）。

7. ドリルダウン

カテゴリ系グラフをクリックすると該当明細をモーダル表示する。

• draw() が全チャートに onClick を設定。クリック要素の (datasetIndex,index) で drills[id] を呼び、戻り値 {title,columns,rows} を openDrill() に渡す。
• drillCat(id,items,keyFn,labels,cols,prefix)：カテゴリ別グラフ用。クリックした凡例ラベルで items を絞込。
• drillSeg(id,items,keyFn,actFn,labels,cols,prefix)：活性区分つき積み上げ用。ラベル×系列(active/alert/inactive)で絞込。
• 表示カラムは COL_CUST / COL_CUST_TX / COL_VEH / COL_INV / COL_PAY（[見出し,取得関数] の配列）。
• モーダルは画面表示500件まで、CSV/印刷は全件。downloadCSV()（BOM付きUTF-8）/ printTable()（別窓印刷）。

8. 出力機能

• PNG一括 exportPNGzip()：全チャートを chartPNG()（白背景付与）でPNG化し JSZip でZIP化。
• PowerPoint exportPPTX()：PptxGenJS で表紙＋1グラフ1スライド。画像は縦横比保持で配置。
• withAllVisible()：出力前に全タブを一時表示＋resize()し、非表示タブのチャートも実寸で取得。
• collectCharts()：charts を走査し {no,tab,title,dataURL,w,h} を収集。

9. 取込履歴（IndexedDB）

DB名 dreampower_graph（version 2）。ストアを2つに分離し、件数を増やしても一覧表示が重くならない設計。

saveSession() が両ストアへ put、getAllKeys() で KEEP(=10) 件超を削除。 restoreSession(id) が data から復元し再分析。id は nextId() で単調増加を保証。

10. 拡張ガイド

グラフを1つ追加する

// 該当の renderXxx() 内
chartCard(grid,'my-chart','タイトル','サブ');
draw('my-chart',{type:'bar',data:{labels,datasets},options:{...}});
// 明細ドリルを付ける場合（カテゴリ別グラフ）
drillCat('my-chart', items, r=>r['区分名'], labels, COL_INV, '区分');

変更ポイント早見表

デプロイ

1. app.js / style.css を編集
2. index.html の ?v= とフッター ver. を繰上げ（ブラウザキャッシュ対策。必須）
3. ファイル一式を /var/www/html/dreampower_graph/ へ配置（Apache。AllowOverride None のため .htaccess は無効）

11. 既知の制約

• 集計は取込CSVの記載値どおり。赤伝・マイナス伝票もそのまま合算。
• 売掛残は「請求額累計−入金額累計」の推計。
• 顧客⇔伝票は顧客CD、車両⇔伝票は車両CDで突合。コード体系不一致時は紐付かない。
• 車検継続率は車両CDのある車検伝票のみが母数。車両CD欠落分は除外。
• アンケート満足度・人時生産性・AI査定・予算（目標値）は入力データに無く対象外。
• IndexedDB不可の環境では取込履歴のみ無効（分析・出力は動作）。