@sequenceholdings/atlas-ui 0.1.3 → 0.1.5

package/dist/charts.d.ts

@@ -57,6 +57,7 @@ export declare const CHART_JS_TOOLTIP_STYLE: {
     readonly boxPadding: 4;
 };
 
+/** DES-334: computed — Chart.js / Recharts tick APIs take numeric px, not CSS vars */
 export declare const CHART_TICK: {
     readonly fontSize: 10;
     readonly fill: "#94A3B8";
@@ -64,10 +65,10 @@ export declare const CHART_TICK: {
 };
 
 export declare const CHART_TOOLTIP: {
-    readonly borderRadius: 8;
+    readonly borderRadius: "var(--corner-surface-nested)";
     readonly border: "1px solid #E2E8F0";
-    readonly boxShadow: "0 2px 8px rgba(0,0,0,0.06)";
-    readonly fontSize: 12;
+    readonly boxShadow: "var(--elevation-popover)";
+    readonly fontSize: "var(--type-caption)";
     readonly fontFamily: "ui-monospace, monospace";
 };
 
@@ -127,7 +128,7 @@ declare interface StackedBarChartProps {
     labels: string[];
     datasets: BarDataset[];
     stacked?: boolean;
-    yFormat?: 'currency' | 'count';
+    yFormat?: 'currency' | 'count' | 'percent';
     onClick?: (index: number) => void;
     barTotals?: boolean;
     maxTicksLimit?: number;
@@ -135,7 +136,7 @@ declare interface StackedBarChartProps {
     className?: string;
 }
 
-export declare function TimeseriesLineChart({ labels, datasets, yFormat, tension, maxTicksLimit, height, className, }: TimeseriesLineChartProps): JSX.Element | null;
+export declare function TimeseriesLineChart({ labels, datasets, yFormat, tension, maxTicksLimit, showPoints, showValueLabels, height, className, }: TimeseriesLineChartProps): JSX.Element | null;
 
 declare interface TimeseriesLineChartProps {
     labels: string[];
@@ -143,6 +144,8 @@ declare interface TimeseriesLineChartProps {
     yFormat?: 'currency' | 'percent' | 'number';
     tension?: number;
     maxTicksLimit?: number;
+    showPoints?: boolean;
+    showValueLabels?: boolean;
     height?: number;
     className?: string;
 }

package/dist/charts.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "./utils-BZS7Y02J.js";
+import { t as e } from "./utils-D-IFNYlh.js";
 import { forwardRef as t, useEffect as n, useMemo as r, useRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../../../atlas/src/shared/components/ui/chart-card.tsx
@@ -7412,7 +7412,7 @@ function ll({ segments: e, centerLabel: t, centerValue: n, size: s = 220, classN
 				className: "text-lg font-semibold text-foreground",
 				children: n
 			}), t && /* @__PURE__ */ a("span", {
-				className: "text-xs font-medium uppercase tracking-wider text-black-50",
+				className: "text-xs font-medium uppercase tracking-wider text-muted-foreground",
 				children: t
 			})]
 		})]
@@ -7491,13 +7491,19 @@ function ml({ labels: e, datasets: t, stacked: n = !0, yFormat: o = "currency",
 			backgroundColor: e.color,
 			borderColor: e.borderColor ?? e.color,
 			borderWidth: +!!e.borderColor,
-			borderRadius: 3,
-			borderSkipped: !1
+			borderRadius: o === "percent" ? 1 : 3,
+			borderSkipped: !1,
+			barPercentage: o === "percent" ? .72 : .9,
+			categoryPercentage: o === "percent" ? .82 : .9
 		}))
-	}), [e, t]), m = r(() => ({
+	}), [
+		e,
+		t,
+		o
+	]), m = r(() => ({
 		responsive: !0,
 		maintainAspectRatio: !1,
-		layout: c ? { padding: { top: 24 } } : void 0,
+		layout: c ? { padding: { top: 24 } } : o === "percent" ? { padding: { top: 10 } } : void 0,
 		interaction: {
 			mode: "index",
 			intersect: !1
@@ -7516,7 +7522,7 @@ function ml({ labels: e, datasets: t, stacked: n = !0, yFormat: o = "currency",
 				callbacks: o === "currency" ? {
 					label: (e) => `  ${e.dataset.label}: ${fl(e.raw)}`,
 					footer: (e) => `Total: ${fl(e.reduce((e, t) => e + t.raw, 0))}`
-				} : void 0
+				} : o === "percent" ? { label: (e) => `  ${e.dataset.label}: ${e.raw.toFixed(1)}%` } : void 0
 			},
 			legend: { display: !1 }
 		},
@@ -7543,11 +7549,12 @@ function ml({ labels: e, datasets: t, stacked: n = !0, yFormat: o = "currency",
 						family: "ui-monospace, monospace"
 					},
 					color: "#94A3B8",
-					callback: o === "currency" ? dl : void 0,
+					callback: o === "currency" ? dl : o === "percent" ? (e) => Number(e) > 100 ? "" : `${e}%` : void 0,
 					...o === "count" ? { stepSize: 1 } : {}
 				},
 				border: { display: !1 },
-				beginAtZero: !0
+				beginAtZero: !0,
+				...o === "percent" ? { max: 102 } : {}
 			}
 		}
 	}), [
@@ -7601,8 +7608,11 @@ function _l(e) {
 		maximumFractionDigits: 2
 	}).format(e);
 }
-function vl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3, maxTicksLimit: o, height: s = 220, className: c }) {
-	let l = r(() => ({
+function vl(e, t) {
+	return t === "currency" ? gl(e) : t === "percent" ? `${e.toFixed(0)}%` : e.toLocaleString();
+}
+function yl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3, maxTicksLimit: o, showPoints: s = !1, showValueLabels: c = !1, height: l = 220, className: u }) {
+	let d = r(() => ({
 		labels: e,
 		datasets: t.map((e) => ({
 			label: e.label,
@@ -7611,17 +7621,36 @@ function vl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3,
 			backgroundColor: e.fill ? `${e.color}33` : "transparent",
 			fill: e.fill ?? !1,
 			tension: i,
-			pointRadius: 0,
-			pointHoverRadius: 4,
+			pointRadius: s ? 3 : 0,
+			pointHoverRadius: s ? 5 : 4,
+			pointBackgroundColor: e.color,
+			pointBorderColor: "#FFFFFF",
+			pointBorderWidth: s ? 1.5 : 0,
 			borderWidth: 2
 		}))
 	}), [
 		e,
 		t,
-		i
-	]), u = r(() => ({
+		i,
+		s
+	]), f = r(() => ({
+		id: "lineValueLabels",
+		afterDatasetsDraw(e) {
+			if (!c) return;
+			let { ctx: t } = e;
+			t.save(), t.font = "600 10px ui-monospace, monospace", t.fillStyle = "#64748B", t.textAlign = "center", t.textBaseline = "bottom", e.data.datasets.forEach((r, i) => {
+				e.getDatasetMeta(i).data.forEach((i, a) => {
+					let o = r.data[a];
+					if (typeof o != "number") return;
+					let s = vl(o, n), c = t.measureText(s).width / 2, l = Math.min(Math.max(i.x, e.chartArea.left + c + 4), e.chartArea.right - c - 4);
+					t.fillText(s, l, i.y - 8);
+				});
+			}), t.restore();
+		}
+	}), [c, n]), p = r(() => ({
 		responsive: !0,
 		maintainAspectRatio: !1,
+		layout: c ? { padding: { top: 20 } } : void 0,
 		interaction: {
 			mode: "index",
 			intersect: !1
@@ -7668,23 +7697,28 @@ function vl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3,
 				...n === "percent" ? { max: 100 } : {}
 			}
 		}
-	}), [n, o]);
+	}), [
+		n,
+		o,
+		c
+	]);
 	return !e.length || !t.length ? null : /* @__PURE__ */ a("div", {
-		className: c,
-		style: { height: s },
+		className: u,
+		style: { height: l },
 		children: /* @__PURE__ */ a(al, {
-			data: l,
-			options: u
+			data: d,
+			options: p,
+			plugins: c ? [f] : []
 		})
 	});
 }
 //#endregion
 //#region ../../../atlas/src/shared/lib/chart-styles.ts
-var yl = {
+var bl = {
 	fontSize: 10,
 	fill: "#94A3B8",
 	fontFamily: "ui-monospace, monospace"
-}, bl = {
+}, xl = {
 	backgroundColor: "#fff",
 	titleColor: "#0F172A",
 	bodyColor: "#334155",
@@ -7709,28 +7743,28 @@ var yl = {
 	padding: 10,
 	cornerRadius: 8,
 	boxPadding: 4
-}, xl = {
+}, Sl = {
 	font: {
 		size: 10,
 		family: "ui-monospace, monospace"
 	},
 	color: "#94A3B8"
 };
-function Sl(e) {
+function Cl(e) {
 	let t = Number(e);
 	return t >= 1e9 ? `$${(t / 1e9).toFixed(t >= 1e10 ? 0 : 1)}B` : t >= 1e6 ? `$${(t / 1e6).toFixed(t >= 1e7 ? 0 : 1)}M` : t >= 1e3 ? `$${(t / 1e3).toFixed(t >= 1e4 ? 0 : 1)}k` : `$${t}`;
 }
-var Cl = {
-	borderRadius: 8,
+var wl = {
+	borderRadius: "var(--corner-surface-nested)",
 	border: "1px solid #E2E8F0",
-	boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
-	fontSize: 12,
+	boxShadow: "var(--elevation-popover)",
+	fontSize: "var(--type-caption)",
 	fontFamily: "ui-monospace, monospace"
-}, wl = {
+}, Tl = {
 	horizontal: !0,
 	vertical: !1,
 	strokeDasharray: "3 3",
 	stroke: "#E2E8F0"
 };
 //#endregion
-export { wl as CHART_GRID, xl as CHART_JS_SCALE_TICKS, bl as CHART_JS_TOOLTIP_STYLE, yl as CHART_TICK, Cl as CHART_TOOLTIP, s as ChartCard, c as ChartLegend, ll as DonutChart, ml as StackedBarChart, vl as TimeseriesLineChart, Sl as formatChartCurrencyTick };
+export { Tl as CHART_GRID, Sl as CHART_JS_SCALE_TICKS, xl as CHART_JS_TOOLTIP_STYLE, bl as CHART_TICK, wl as CHART_TOOLTIP, s as ChartCard, c as ChartLegend, ll as DonutChart, ml as StackedBarChart, yl as TimeseriesLineChart, Cl as formatChartCurrencyTick };