Files
temetro/frontend/components/charts/fade-edges.ts
T
Khalid Abdi 321a6298a4 frontend: pharmacy inventory, lab add-result & analysis charts
- Pharmacy: the sidebar entry now expands into Pharmacy + a new Inventory page
  (searchable medication stock with derived in-stock/low/out availability,
  backed by /api/inventory). Fix the dispensing-queue "Expiring" badge so it
  only flags courses ending within the next 7 days, not ones already elapsed.
- Lab "Add analysis result": the patient picker no longer lists patients until
  you type and supports arrow-key + Enter selection; the test field offers a
  catalog of common analyses with an Advanced option (custom analysis + ref
  range); submitted results now show immediately in a Recent results feed.
- Analysis: add a Live panel (real-time line chart) and replace the flat trend
  sparklines with bklit-ui area + bar charts (installed from the @bklit shadcn
  registry; chart CSS variables wired into the theme for light and dark).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-12 19:22:07 +03:00

53 lines
1.4 KiB
TypeScript

export type FadeEdges = boolean | "left" | "right";
export interface FadeSides {
/** Whether the left edge should fade out. */
left: boolean;
/** Whether the right edge should fade out. */
right: boolean;
/** True if either side fades — use to gate gradient/mask defs. */
any: boolean;
}
export function resolveFadeSides(fade: FadeEdges): FadeSides {
if (fade === false) {
return { left: false, right: false, any: false };
}
if (fade === "left") {
return { left: true, right: false, any: true };
}
if (fade === "right") {
return { left: false, right: true, any: true };
}
return { left: true, right: true, any: true };
}
export interface FadeGradientStop {
offset: string;
opacity: number;
}
/**
* Stops for a horizontal fade gradient with opacity 0 at the faded side(s)
* and opacity 1 in the middle. Matches the historic 0/15/85/100 pattern.
*/
export function fadeGradientStops(sides: FadeSides): FadeGradientStop[] {
return [
{ offset: "0%", opacity: sides.left ? 0 : 1 },
{ offset: "15%", opacity: 1 },
{ offset: "85%", opacity: 1 },
{ offset: "100%", opacity: sides.right ? 0 : 1 },
];
}
/** Horizontal fade gradient pinned to the chart viewport (not the series path bounds). */
export function viewportFadeGradientAttrs(innerWidth: number) {
return {
gradientUnits: "userSpaceOnUse" as const,
x1: 0,
x2: innerWidth,
y1: 0,
y2: 0,
};
}