Skip to content

fix(dashboard): savings-trend tooltip omits year for daily/weekly intervals; ambiguous across year boundaries #53

Description

@cristim

Symptom

After LeanerCloud/cloud-commitments-cli#1257 the Home savings-over-time tooltip shows a date instead of the raw 13-digit millisecond value (QA 3.2). However, the helper it reuses (formatTrendAxisTick in frontend/src/dashboard.ts:996) returns "Jun 15" for daily/weekly intervals with no year component. The hourly branch also omits the year.

For the 90d range (daily) and the new ~365-day All range (weekly), the tooltip can show two points labeled "Jun 15" -- one from this year and one from last year -- with no way to distinguish them. The same is true for any range straddling a year boundary (e.g. clicking 90d in February).

Root cause

The frontend reuses formatTrendAxisTick for both x-axis tick labels and the tooltip title (PR LeanerCloud/cloud-commitments-cli#1257). The axis-tick branch needs to be compact (limited horizontal space per label), but the tooltip has plenty of room and would benefit from including the year.

export function formatTrendAxisTick(tsMs: number, intervalHint: 'hourly' | 'daily' | 'weekly'): string {
  const d = new Date(tsMs);
  if (intervalHint === 'hourly') {
    return d.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false });
  }
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });  // no year
}

Fix

Add a separate formatter formatTrendTooltipTitle(tsMs, interval) that includes the year. The axis-tick formatter stays as-is (compact). Wire the tooltip title callback to the new helper:

export function formatTrendTooltipTitle(tsMs: number, intervalHint: 'hourly' | 'daily' | 'weekly'): string {
  const d = new Date(tsMs);
  if (intervalHint === 'hourly') {
    return d.toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false });
  }
  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}

Test parity: extend the existing tooltip-title test in dashboard.test.ts to assert the rendered string contains the year (/2024/).

Notes

Discovered via

Adversarial review of LeanerCloud/cloud-commitments-cli#1257.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions