Summary of KPI Cards Layout
// Brainstorming with AI //
Horizontal bar chart — The KPI card uses a horizontal bar chart where categories form the y‑axis and values form the x‑axis, ideal for allocation breakdowns.
Descending sorting logic — Bars reorder dynamically based on the selected Period (SEP26, AUG26, JUL26), sorted by Inv$ or Amount.
Label placement options — Three display styles were evaluated: inside the bar, end‑of‑bar labels, and right‑aligned columns for financial clarity.
Auto‑switch label position — Short or zero‑value bars require conditional logic so labels automatically move outside the bar when they cannot fit inside.
Chart.js configuration placement — All chart logic (sorting, datalabels, auto‑switching) lives inside the Chart.js config, typically in index.html or a dedicated JS file.
KPI card CSS structure — CSS styles the KPI card container, header, footer, and canvas wrapper; Chart.js handles internal chart visuals.
Correct Google Sheets structure — Period is a column, not multiple columns; each row represents a Category + Period + Inv$ + Inv%.
TotalInv$ handling — TotalInv$ must be calculated in a helper cell, not stored as a row, to avoid double counting and sorting issues.
Inv% calculation — Inv% should be computed in Google Sheets using Inv$ / TotalInv$, not in the API or Chart.js.
Percent formatting in JSON — Google Sheets percent values (e.g., 23.1%) convert to numeric decimals (0.231) in JSON, which is correct and preferred for Chart.js.
Axis behavior in Chart.js — Horizontal bar charts automatically determine x‑axis and y‑axis ranges; manual ranges are optional and only needed for custom formatting.
