manohar/Remodel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: fix month labels and reverse order, vertical hourly display
Some checks are pending
CI / Engine — lint / typecheck / test (push) Waiting to run
Details
CI / API — lint / typecheck / test (push) Waiting to run
Details
CI / Web — typecheck / lint / build (push) Waiting to run
Details

Browse source 
- Show Apr 27 instead of Apr - include FY suffix
- Reverse month order: Apr first, then May... Mar
- Change hourly from horizontal wrap to vertical stack
This commit is contained in:
Manohar Gupta 2026-05-16 12:00:59 +05:30
parent 7062688397
commit 96ddb2fa60
1 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/web/components/WorkbookView.tsx
View file

@ -540,16 +540,23 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
const hasData = hasSolar || hasWind;
// FY labels: if COD is April 2026, FY 2026-27 = Year 1
const getFyLabel = (yearIndex: number) => {
const startYear = codYear || new Date().getFullYear();
const getFyLabel = (yearIndex: number) => {
const fyStart = startYear + yearIndex;
const fyEnd = fyStart + 1;
return `FY ${String(fyStart).slice(-2)}-${String(fyEnd).slice(-2)}`;
};
const getMonthLabel = (month: number, yearIndex: number) => {
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return monthNames[month - 1];
// Month names - in reverse order (April first for Indian FY starting Apr)
const monthNames = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
// Mapping from position 0-11 to actual month 4-12, 1-3
const monthPositions = [4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3];
const getMonthLabel = (pos: number, yearIndex: number) => {
const month = monthPositions[pos];
const fyStart = startYear + yearIndex;
const fyEnd = fyStart + 1;
const fySuffix = month <= 3 ? String(fyEnd).slice(-2) : String(fyStart).slice(-2);
return `${monthNames[pos]} ${fySuffix}`;
};
// Expand state: which years/months/days are expanded
@ -650,15 +657,16 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
{hasWind && <span className="text-blue-700 w-24">{Math.round(windYr).toLocaleString()} MWh</span>}
</button>
{/* Month rows (expandable) */}
{/* Month rows - reverse order (Apr first for Indian FY) */}
{isYearExpanded && [...Array(12)].map((_, mi) => {
const month = mi + 1;
const pos = 11 - mi; // Reverse: 11->0 gives Apr first
const month = monthPositions[pos];
const monthKey = `${year}-${month}`;
const isMonthExpanded = expandedMonths.has(monthKey);
const solarMo = hasSolar ? computeMonthTotal(year, month, true) : 0;
const windMo = hasWind ? computeMonthTotal(year, month, false) : 0;
const daysInMonth = MONTH_DAYS[month - 1];
const monthLabel = getMonthLabel(month, i);
const monthLabel = getMonthLabel(pos, i);
return (
<div key={monthKey} className="ml-4">
@ -667,7 +675,7 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
className="w-full flex items-center gap-2 py-1 hover:bg-accent/30 rounded px-2 text-left"
>
<span className="text-[10px] w-4">{isMonthExpanded ? "▼" : "▶"}</span>
<span className="w-12 text-muted-foreground">{monthLabel}</span>
<span className="w-20 text-muted-foreground">{monthLabel}</span>
{hasSolar && <span className="text-orange-700/80 w-24">{Math.round(solarMo).toLocaleString()} MWh</span>}
{hasWind && <span className="text-blue-700/80 w-24">{Math.round(windMo).toLocaleString()} MWh</span>}
</button>
@ -692,19 +700,19 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
{hasWind && <span className="text-blue-600/70 w-20">{Math.round(windDy).toLocaleString()}</span>}
</button>
{/* Hour values */}
{/* Hour values - vertical stack */}
{isDayExpanded && (
<div className="ml-8 flex flex-wrap gap-0.5 py-1">
<div className="ml-8 flex flex-col gap-px py-1">
{[...Array(24)].map((_, h) => {
const hour = h;
const hourIdx = (day - 1) * 24 + hour;
const solarHr = hasSolar ? getDayData(year, month, day, true)[hourIdx % 24] : 0;
const windHr = hasWind ? getDayData(year, month, day, false)[hourIdx % 24] : 0;
return (
<div key={h} className="w-10 text-center text-[9px] border rounded px-0.5">
<span className="text-muted-foreground">{h}:00</span>
{hasSolar && <div className="text-orange-700">{Math.round(solarHr)}</div>}
{hasWind && <div className="text-blue-700">{Math.round(windHr)}</div>}
<div key={h} className="flex items-center gap-2 text-[9px] border-b border-border/30 px-1">
<span className="w-8 text-muted-foreground">{String(h).padStart(2, '0')}:00</span>
{hasSolar && <span className="text-orange-700 w-16 text-right">{Math.round(solarHr)}</span>}
{hasWind && <span className="text-blue-700 w-16 text-right">{Math.round(windHr)}</span>}
</div>
);
})}