3.5.8
Day tab labels
This commit is contained in:
@@ -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
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user