feat(charts): drop the explanatory line under day-linked charts

src/components/charts/__tests__/health-chart-day-links.test.tsx

@@ -52,11 +52,10 @@ describe("<HealthChart> day links", () => {
     vi.resetModules();
   });
 
-  it("a metric page's chart opens its days: plot, caption and table", async () => {
+  it("a metric page's chart opens its days: plot and table", async () => {
     const html = await renderChart({ dayLinks: true, showDataTable: true });
     expect(html).toContain('data-day-links="true"');
-    expect(html).toContain('data-slot="chart-day-caption"');
-    expect(html).toContain("Click a point to open its day.");
+    expect(html).not.toContain('data-slot="chart-day-caption"');
     const links = html.match(/data-slot="day-link"/g) ?? [];
     expect(links).toHaveLength(10);
     expect(html).toMatch(/href="[^"]*\?day=\d{4}-\d{2}-\d{2}"/);

src/components/charts/compliance-heatmap.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ChartDayCaption } from "@/components/day/chart-day";
 import { dayAnchor } from "@/components/day/chart-day-links";
 import { OPEN_DAY_CELL, useHeatmapDay } from "@/components/day/heatmap-day";
 import { useCalendarDate } from "@/hooks/use-calendar-date";
@@ -368,7 +367,6 @@ export function ComplianceHeatmap({
       </div>
       {activeCells.length > 0 ? (
         <>
-          <ChartDayCaption coarse={heatmapDay.coarse} mark="cell" rug={false} />
           {/* The keyboard and screen-reader way to each active day's doses,
               and to the day itself. */}
           <ChartDataTable

src/components/charts/mood-heatmap.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ChartDayCaption, useCoarsePointer } from "@/components/day/chart-day";
 import { dayAnchor } from "@/components/day/chart-day-links";
 import { OPEN_DAY_CELL, useHeatmapDay } from "@/components/day/heatmap-day";
 import { useCalendarDate } from "@/hooks/use-calendar-date";
@@ -102,14 +101,13 @@ export function MoodHeatmapBody({
 /**
  * The loading shape of the stretched heatmap, at exactly the height the
  * painted heatmap takes: the reserved grid box, the legend line, the day
- * caption and the data-table toggle. `days` is the window when it is already
+ * data-table toggle. `days` is the window when it is already
  * known; without it the shape assumes a window short enough to reach the cell
  * ceiling on every width down to 360 px (eight weeks), the height most
  * calendars settle at.
  */
 export function MoodHeatmapSkeleton({ days = 56 }: { days?: number }) {
   const timeZone = useDisplayTimezone();
-  const coarse = useCoarsePointer();
   return (
     <div
       data-slot="mood-heatmap-skeleton"
@@ -120,7 +118,6 @@ export function MoodHeatmapSkeleton({ days = 56 }: { days?: number }) {
         <div className="bg-muted/50 h-full w-full animate-pulse rounded-md motion-reduce:animate-none" />
       </MoodHeatmapBody>
       <div className="mt-2 h-4" />
-      <ChartDayCaption coarse={coarse} mark="cell" rug={false} />
       <div className="border-border mt-3 border-t pt-3">
         <div className="min-h-11" />
       </div>
@@ -411,7 +408,6 @@ export function MoodHeatmap({
       </div>
       {loggedCells.length > 0 ? (
         <>
-          <ChartDayCaption coarse={heatmapDay.coarse} mark="cell" rug={false} />
           {/* The keyboard and screen-reader way to each logged day's value,
               and to the day itself. */}
           <ChartDataTable

src/components/charts/nutrient-daily-bar-chart.tsx

@@ -173,7 +173,6 @@ export function NutrientDailyBarChart({
         links={chartDays}
         points={points.map((p) => ({ timestamp: dayAnchor(p.day) }))}
         axis="band"
-        mark="bar"
         // The y axis (44) on the left, the margin (12) on the right.
         insetLeft={44}
         insetRight={12}