refactor(admin): use inline pixel heights for overview charts
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m40s
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m40s
Refactors the admin overview dashboard charts to use inline pixel heights (up to 150px) instead of CSS variables and percentage-based heights. This provides more robust rendering and layout control. Changes include: - Replacing `Height` with `HeightPx` in chart bar structures. - Rendering inline styles for height and width on charts and status bars. - Adding fallback data attributes (`data-height-px`, `data-chart-value`, etc.) and loading a new fallback script (`25-admin-charts.js`). - Updating and expanding test coverage to assert correct scaling and HTML rendering.
This commit is contained in:
@@ -707,24 +707,60 @@ func TestAdminOverviewChartsUseZeroAndFullHeights(t *testing.T) {
|
||||
for i, bar := range overview.UploadDays {
|
||||
want := 0
|
||||
if i == len(overview.UploadDays)-1 {
|
||||
want = 100
|
||||
want = 150
|
||||
}
|
||||
if bar.Height != want {
|
||||
t.Fatalf("upload bar %d height = %d, want %d", i, bar.Height, want)
|
||||
if bar.HeightPx != want {
|
||||
t.Fatalf("upload bar %d height = %d, want %d", i, bar.HeightPx, want)
|
||||
}
|
||||
}
|
||||
for i, bar := range overview.StorageDays {
|
||||
want := 0
|
||||
if i == len(overview.StorageDays)-1 {
|
||||
want = 100
|
||||
want = 150
|
||||
}
|
||||
if bar.Height != want {
|
||||
t.Fatalf("storage bar %d height = %d, want %d", i, bar.Height, want)
|
||||
if bar.HeightPx != want {
|
||||
t.Fatalf("storage bar %d height = %d, want %d", i, bar.HeightPx, want)
|
||||
}
|
||||
}
|
||||
if overview.StatusBars[0].WidthPercent != 100 {
|
||||
t.Fatalf("active status width = %d, want 100", overview.StatusBars[0].WidthPercent)
|
||||
}
|
||||
}
|
||||
|
||||
func TestAdminOverviewRendersBarHeightVariables(t *testing.T) {
|
||||
func TestAdminOverviewChartsScaleRelativeToVisibleRange(t *testing.T) {
|
||||
now := time.Now().UTC()
|
||||
today := time.Date(now.Year(), now.Month(), now.Day(), 12, 0, 0, 0, time.UTC)
|
||||
yesterday := today.AddDate(0, 0, -1)
|
||||
twoDaysAgo := today.AddDate(0, 0, -2)
|
||||
boxes := []services.AdminBox{
|
||||
{ID: "today-1", CreatedAt: today, TotalSize: 30},
|
||||
{ID: "today-2", CreatedAt: today, TotalSize: 30},
|
||||
{ID: "today-3", CreatedAt: today, TotalSize: 30},
|
||||
{ID: "yesterday-1", CreatedAt: yesterday, TotalSize: 20},
|
||||
{ID: "yesterday-2", CreatedAt: yesterday, TotalSize: 20},
|
||||
{ID: "two-days-ago", CreatedAt: twoDaysAgo, TotalSize: 10},
|
||||
}
|
||||
overview := buildAdminOverview(boxes, services.AdminStats{TotalBoxes: 6, ExpiredBoxes: 2, ProtectedBoxes: 1})
|
||||
|
||||
last := len(overview.UploadDays) - 1
|
||||
if overview.UploadDays[last].HeightPx != 150 {
|
||||
t.Fatalf("3-upload day height = %d, want 150", overview.UploadDays[last].HeightPx)
|
||||
}
|
||||
if overview.UploadDays[last-1].HeightPx != 100 {
|
||||
t.Fatalf("2-upload day height = %d, want 100", overview.UploadDays[last-1].HeightPx)
|
||||
}
|
||||
if overview.UploadDays[last-2].HeightPx != 50 {
|
||||
t.Fatalf("1-upload day height = %d, want 50", overview.UploadDays[last-2].HeightPx)
|
||||
}
|
||||
if overview.StorageDays[last].HeightPx != 150 || overview.StorageDays[last-1].HeightPx != 66 || overview.StorageDays[last-2].HeightPx != 16 {
|
||||
t.Fatalf("storage heights = %d/%d/%d, want 150/66/16", overview.StorageDays[last].HeightPx, overview.StorageDays[last-1].HeightPx, overview.StorageDays[last-2].HeightPx)
|
||||
}
|
||||
if overview.StatusBars[0].WidthPercent != 100 || overview.StatusBars[1].WidthPercent != 50 || overview.StatusBars[2].WidthPercent != 25 {
|
||||
t.Fatalf("status widths = %d/%d/%d, want 100/50/25", overview.StatusBars[0].WidthPercent, overview.StatusBars[1].WidthPercent, overview.StatusBars[2].WidthPercent)
|
||||
}
|
||||
}
|
||||
|
||||
func TestAdminOverviewRendersInlineBarDimensions(t *testing.T) {
|
||||
app, cleanup := newTestApp(t)
|
||||
defer cleanup()
|
||||
adminToken := createAdminSession(t, app)
|
||||
@@ -738,11 +774,26 @@ func TestAdminOverviewRendersBarHeightVariables(t *testing.T) {
|
||||
t.Fatalf("AdminDashboard status = %d, body = %s", response.Code, response.Body.String())
|
||||
}
|
||||
body := response.Body.String()
|
||||
if !strings.Contains(body, "--bar-height: 100%") {
|
||||
t.Fatalf("admin overview did not render a full-height bar: %s", body)
|
||||
if !strings.Contains(body, `style="height: 150px"`) {
|
||||
t.Fatalf("admin overview did not render a full-height pixel bar: %s", body)
|
||||
}
|
||||
if strings.Contains(body, `style="height:`) {
|
||||
t.Fatalf("admin overview still uses fragile percent height styles: %s", body)
|
||||
if !strings.Contains(body, `data-height-px="150"`) || !strings.Contains(body, `data-chart-value=`) {
|
||||
t.Fatalf("admin overview did not render chart fallback data attributes: %s", body)
|
||||
}
|
||||
if !strings.Contains(body, `style="height: 0px"`) {
|
||||
t.Fatalf("admin overview did not render zero pixel bars: %s", body)
|
||||
}
|
||||
if !strings.Contains(body, `style="width: 100%"`) {
|
||||
t.Fatalf("admin overview did not render a full-width status bar: %s", body)
|
||||
}
|
||||
if !strings.Contains(body, `data-width-percent="100"`) || !strings.Contains(body, `data-stat-value=`) {
|
||||
t.Fatalf("admin overview did not render status fallback data attributes: %s", body)
|
||||
}
|
||||
if strings.Contains(body, "--bar-height") {
|
||||
t.Fatalf("admin overview still uses css variable bar heights: %s", body)
|
||||
}
|
||||
if !strings.Contains(body, "/static/js/25-admin-charts.js?version=test") {
|
||||
t.Fatalf("admin overview did not load chart fallback script: %s", body)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user