Day tab labels
This commit is contained in:
fraxle
2026-07-29 16:09:33 +01:00
parent 147e07a52f
commit 1acadb7519
3 changed files with 99 additions and 5 deletions
+13 -2
View File
@@ -133,8 +133,10 @@ export function DayTabs({
// full config strip now live in the nav dropdown (ConfigPanel); here we
// only need the derived main metric to compute the day-tab numbers and to
// label the "what temps am I looking at" row below.
const { isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel } =
deriveProfileMain(activeProfile, outdoorsVariant);
const {
isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel,
mainMetricLabel, mainMetricDesc, secondaryMetricLabel, secondaryMetricDesc,
} = deriveProfileMain(activeProfile, outdoorsVariant);
// Read-only label of the current main-config value, for the row above the
// day tabs — makes it obvious at a glance which temperature basis (SunSoak
@@ -202,6 +204,15 @@ export function DayTabs({
onClick=${() => scrollDayTabs(1)}
aria-label="Scroll days right"
type="button"></button>
${/* Fixed label column outside the scroller — names the two stacked
numbers in every tab, since which metrics they are changes with
the active profile. Bottom-aligned against the tabs' numeric
block (see .utci-day-legend-col in table.css). */''}
<div class="utci-day-legend-col">
<span class="utci-day-legend-main" title=${mainMetricDesc}>${mainMetricLabel}</span>
${(isVehicleProfile || secondaryField) && html`
<span class="utci-day-legend-sec" title=${secondaryMetricDesc}>${secondaryMetricLabel}</span>`}
</div>
<div class="utci-day-tabs" ref=${dayTabsRef}>
${days.map((d, i) => {
const band = confidenceBand(i);
+21 -1
View File
@@ -192,7 +192,27 @@ export function deriveProfileMain(activeProfile, outdoorsVariant) {
const mainLabel = activeProfile === 'outdoors'
? (OUTDOORS_VARIANTS[outdoorsVariant]?.name || FILTER_PROFILES.outdoors.label)
: (FILTER_PROFILES[activeProfile]?.label || 'SunSoak');
return { isHomeOrOffice, isVehicleProfile, isPetsProfile, mainConfigKey, mainField, secondaryField, mainLabel };
// Human names for the two numbers stacked in each day tab, so the label
// column beside the strip can say what they are. Pulled from
// COL_DESCRIPTIONS so they never drift from the table column tooltips —
// every field matches its column key except utciAdj, whose column is utciP.
const colKey = mainField === 'utciAdj' ? 'utciP' : mainField;
const mainMetric = COL_DESCRIPTIONS[colKey] || {};
// Vehicle/Driver has no secondary column — the small number is a live
// re-run of the cabin model with ventilation forced on (see DayTabs).
const secondaryMetric = isVehicleProfile
? { title: 'Windows Open', desc: 'The same vehicle interior estimate, recalculated with the windows open — how much cooler the cabin would run if it were ventilated.' }
: (secondaryField ? (COL_DESCRIPTIONS[secondaryField] || {}) : null);
return {
isHomeOrOffice, isVehicleProfile, isPetsProfile,
mainConfigKey, mainField, secondaryField, mainLabel,
mainMetricLabel: mainMetric.title || '',
mainMetricDesc: mainMetric.desc || '',
secondaryMetricLabel: secondaryMetric?.title || '',
secondaryMetricDesc: secondaryMetric?.desc || '',
};
}
// Emoji glyph per place/activity variant.