diff --git a/web/modules/custom/figli_compta_ledger/css/dashboard.css b/web/modules/custom/figli_compta_ledger/css/dashboard.css index e68991d..27a414a 100644 --- a/web/modules/custom/figli_compta_ledger/css/dashboard.css +++ b/web/modules/custom/figli_compta_ledger/css/dashboard.css @@ -275,6 +275,48 @@ html.gin--dark-mode #figli-dashboard-app { white-space: nowrap; } +/* Compact variant -- same chart, narrower fixed columns and smaller + text so it fits inside a small-multiples grid card (see + .figli-year-hbar-grid below) instead of the full-width layout. */ +#figli-dashboard-app .figli-hbar-chart.is-compact { + gap: 0.3rem; +} +#figli-dashboard-app .figli-hbar-chart.is-compact .figli-hbar-row { + grid-template-columns: 5.5rem 1fr 3.5rem; + gap: 0.4rem; +} +#figli-dashboard-app .figli-hbar-chart.is-compact .figli-hbar-label { + font-size: 0.72rem; +} +#figli-dashboard-app .figli-hbar-chart.is-compact .figli-hbar-track { + height: 0.65rem; +} +#figli-dashboard-app .figli-hbar-chart.is-compact .figli-hbar-value { + font-size: 0.7rem; +} + +/* --- Year small multiples (par année, next to the all-time chart) --- */ +#figli-dashboard-app .figli-year-hbar-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); + gap: 0.75rem; + margin-top: 1.25rem; + padding-top: 1.25rem; + border-top: 1px solid var(--figli-border); +} +#figli-dashboard-app .figli-year-hbar-card { + background: var(--figli-bg-alt); + border: 1px solid var(--figli-border); + border-radius: 6px; + padding: 0.65rem 0.75rem; +} +#figli-dashboard-app .figli-year-hbar-title { + font-size: 0.78rem; + font-weight: 700; + color: var(--figli-text-light); + margin-bottom: 0.5rem; +} + /* --- Vertical bar chart (CA par année) --- */ #figli-dashboard-app .figli-vbar-chart { display: flex; diff --git a/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js b/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js index f8f6f34..a8cb172 100644 --- a/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js +++ b/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js @@ -213,6 +213,10 @@ items: { type: Array, required: true }, formatValue: { type: Function, required: true }, colorFor: { type: Function, default: null }, + // Narrower label/value columns, smaller text -- for the per-année + // small-multiples grids, where a full-width chart wouldn't fit in + // a grid card. + compact: { type: Boolean, default: false }, }, computed: { maxAbs() { @@ -225,7 +229,7 @@ }, }, template: - '