Files
temetro/.agents/skills/bklit-ui/rules/tooltips.md
T
Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-14 19:27:17 +03:00

1.4 KiB

Tooltips

Default tooltip

Use ChartTooltip as a child of the root chart. Defaults include crosshair, dots, and date pill where applicable.

<LineChart data={data}>
  <Line dataKey="users" />
  <XAxis />
  <ChartTooltip />
</LineChart>

Custom content

<ChartTooltip
  content={({ point, formattedDate }) => (
    <div className="rounded-md bg-popover px-3 py-2 text-popover-foreground text-sm">
      <div className="font-medium">{formattedDate}</div>
      <div>{point.users as number} users</div>
    </div>
  )}
/>

indicatorColor (candlestick and crosshair)

Match the crosshair to the hovered datum — e.g. green/red candles:

<ChartTooltip
  indicatorColor={(point) =>
    (point.close as number) >= (point.open as number)
      ? "var(--chart-1)"
      : "var(--chart-3)"
  }
  showDots={false}
/>

Custom indicators

For advanced crosshair/markers, use useChart() and the patterns in the custom indicator docs.

Incorrect

// Reading mouse position manually outside chart context
const [x, setX] = useState(0);
useEffect(() => {
  window.addEventListener("mousemove", ...);
}, []);

Correct

import { useChart } from "@bklitui/ui/charts";

function CustomIndicator() {
  const { tooltipData } = useChart();
  // render from tooltipData
}

Docs