BI移行、UXはどう引き継ぐ？ HTMLで相談し、Tableauで確かめる

<svg viewBox="0 0 80 40"><rect width="30" height="20"/></svg>

棒の形の構造例です。値に応じた長さ、線、系列の管理は別途作ります。

<svg><path d="M0 40L20 20L40 30L40 40Z"/></svg>

面の輪郭だけを示します。積み上げ位置や基準線の計算は含みません。

<div class="plot"><svg class="bars"></svg><svg class="line"></svg></div>

棒と線を置く構造だけです。描画・重ね方・尺度・軸の同期は別途作ります。

.tiles{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}

領域を並べるCSS例です。地理情報や値に応じた面積の計算は含みません。

<table><tr><th scope="row">状態</th><td>未選択</td></tr></table>

表の骨組みです。集計結果やクロス集計、並べ替えの処理は別途作ります。

const ratio=(n,d)=>d===0?null:n/d;

ゼロで割る場合を空扱いにする比率の例です。総計での分子・分母は別途定義します。

const color=selected=>selected?"#c57943":"#749b86";

選択状態と色を対応させる例です。値の判定や欠損の処理は別途作ります。

.panel{display:grid;gap:1rem;color:#173f46;font-size:1rem}

配置・余白・文字の書式例です。小さな画面向けの指定も別途加えます。

<select multiple aria-label="条件"><option>条件を選ぶ</option></select>

複数選択の入力部品です。実際の候補・日付入力・絞り込み処理は別途用意します。

const changeParent=(s,parent)=>({...s,parent,child:null});

親を変更し、子の選択を解除する状態処理です。候補の更新と画面描画は別途作ります。

const choose=(s,value)=>({...s,selected:value});

選択状態を更新する例です。選択イベントとの接続や、反映先の表示更新は別途作ります。

const hide=(series,id)=>series.filter(s=>s.id!==id);

指定した系列を表示対象から外す例です。元の系列は保持し、強調や全表示は別に作ります。

const inRange=(x,lo,hi)=>lo<=x&&x<=hi;

範囲内かの判定だけです。入力値の確認や条件の組合せ、表示更新は別途作ります。

<input type="date" aria-label="基準日">

基準日の入力欄です。比較期間や年度の計算は、この入力部品だけでは行いません。

<details><summary>パネルを開く</summary><p>説明</p></details>

クリックやキー操作で開閉できる最小例です。画面移動と状態の保持は別に作ります。

const resetCondition=s=>({...s,condition:null});

条件だけを初期化し、ほかの状態を残す関数です。画面の更新は別途作ります。

<button type="button" title="操作の説明">対象</button>

titleによる簡易な補足です。キー操作・タッチ・読み上げ向けの表示は別途対応します。

<details><summary>数表を見る</summary><table></table></details>

補助表を開閉する枠です。表示する行・列・集計の単位は別途定義します。

<a href="figure.svg" download>図を保存</a>

既に用意したファイルを保存するリンクです。ファイル生成や権限の確認は別途必要です。

@media(max-width:40rem){.cards{grid-template-columns:1fr}}

画面幅で列数を変える例です。対象の端末で表示と操作感を確かめます。

<button type="button" aria-label="条件を戻す">↺</button>

読み上げ名を持つボタンです。実際の初期化処理や色以外の区別は別途作ります。

HTMLだけでは不可。認証基盤やサーバー側の認証・認可が必要。

画面を隠すだけでは権限制御になりません。表示してよいデータを取得前に制御します。

取得元API・認証・資格情報管理・定期実行の仕組みが必要。

ブラウザの表示だけでは接続や無人の定期更新は完了しません。秘密情報をHTMLへ置きません。

外部への書き戻しには、認証付きAPIやサーバー側の処理が必要。

入力欄だけでは外部システムへ安全に保存できません。送信・検証・権限・保存処理を別途作ります。