@sequenceholdings/atlas-ui 0.1.2 → 0.1.5

package/dist/charts.d.ts

@@ -0,0 +1,160 @@
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+export declare interface BarDataset {
+    key: string;
+    label: string;
+    data: number[];
+    color: string;
+    borderColor?: string;
+}
+
+export declare const CHART_GRID: {
+    readonly horizontal: true;
+    readonly vertical: false;
+    readonly strokeDasharray: "3 3";
+    readonly stroke: "#E2E8F0";
+};
+
+/** Chart.js scale ticks — font size 10, ui-monospace, slate-400 */
+export declare const CHART_JS_SCALE_TICKS: {
+    readonly font: {
+        readonly size: 10;
+        readonly family: "ui-monospace, monospace";
+    };
+    readonly color: "#94A3B8";
+};
+
+/** Chart.js Tooltip plugin options — aligned with StackedBarChart / TimeseriesLineChart.
+ *  `footerColor` / `footerFont` / `footerMarginTop` are required for the tooltip's
+ *  footer slot ("Total: $X" callbacks on SpendTimeseriesChart, CreditsTab,
+ *  StackedBarChart) to render visibly — without them the footer string is emitted
+ *  but rendered with default body styling and visually blends into the line above. */
+export declare const CHART_JS_TOOLTIP_STYLE: {
+    readonly backgroundColor: "#fff";
+    readonly titleColor: "#0F172A";
+    readonly bodyColor: "#334155";
+    readonly footerColor: "#0F172A";
+    readonly footerFont: {
+        readonly weight: "bold";
+        readonly size: 12;
+        readonly family: "ui-monospace, monospace";
+    };
+    readonly footerMarginTop: 8;
+    readonly borderColor: "#E2E8F0";
+    readonly borderWidth: 1;
+    readonly titleFont: {
+        readonly weight: "bold";
+        readonly size: 12;
+        readonly family: "ui-monospace, monospace";
+    };
+    readonly bodyFont: {
+        readonly size: 12;
+        readonly family: "ui-monospace, monospace";
+    };
+    readonly padding: 10;
+    readonly cornerRadius: 8;
+    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";
+    readonly fontFamily: "ui-monospace, monospace";
+};
+
+export declare const CHART_TOOLTIP: {
+    readonly borderRadius: "var(--corner-surface-nested)";
+    readonly border: "1px solid #E2E8F0";
+    readonly boxShadow: "var(--elevation-popover)";
+    readonly fontSize: "var(--type-caption)";
+    readonly fontFamily: "ui-monospace, monospace";
+};
+
+export declare function ChartCard({ title, toolbar, legend, children, className }: ChartCardProps): JSX.Element;
+
+declare interface ChartCardProps {
+    title: string;
+    toolbar?: ReactNode;
+    legend?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare function ChartLegend({ items, className }: ChartLegendProps): JSX.Element;
+
+declare interface ChartLegendProps {
+    items: LegendItem[];
+    className?: string;
+}
+
+export declare function DonutChart({ segments, centerLabel, centerValue, size, className, }: DonutChartProps): JSX.Element | null;
+
+declare interface DonutChartProps {
+    segments: DonutSegment[];
+    centerLabel?: string;
+    centerValue?: string;
+    size?: number;
+    className?: string;
+}
+
+export declare interface DonutSegment {
+    key: string;
+    label: string;
+    value: number;
+    color: string;
+}
+
+export declare function formatChartCurrencyTick(v: number | string): string;
+
+declare interface LegendItem {
+    key: string;
+    label: string;
+    color: string;
+}
+
+export declare interface LineDataset {
+    key: string;
+    label: string;
+    data: number[];
+    color: string;
+    fill?: boolean;
+}
+
+export declare function StackedBarChart({ labels, datasets, stacked, yFormat, onClick, barTotals, maxTicksLimit, height, className, }: StackedBarChartProps): JSX.Element | null;
+
+declare interface StackedBarChartProps {
+    labels: string[];
+    datasets: BarDataset[];
+    stacked?: boolean;
+    yFormat?: 'currency' | 'count' | 'percent';
+    onClick?: (index: number) => void;
+    barTotals?: boolean;
+    maxTicksLimit?: number;
+    height?: number;
+    className?: string;
+}
+
+export declare function TimeseriesLineChart({ labels, datasets, yFormat, tension, maxTicksLimit, showPoints, showValueLabels, height, className, }: TimeseriesLineChartProps): JSX.Element | null;
+
+declare interface TimeseriesLineChartProps {
+    labels: string[];
+    datasets: LineDataset[];
+    yFormat?: 'currency' | 'percent' | 'number';
+    tension?: number;
+    maxTicksLimit?: number;
+    showPoints?: boolean;
+    showValueLabels?: boolean;
+    height?: number;
+    className?: string;
+}
+
+export { }
+
+
+declare module 'chart.js' {
+    interface TooltipPositionerMap {
+        cursor: TooltipPositionerFunction<ChartType>;
+    }
+}

package/dist/charts.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "./utils-Dhlckutd.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
@@ -840,12 +840,10 @@ var Et = (e) => e === 0 || e === 1, Dt = (e, t, n) => -(2 ** (10 * --e) * Math.s
 		return Et(e) ? e : e < .5 ? .5 * Dt(e * 2, t, n) : .5 + .5 * Ot(e * 2 - 1, t, n);
 	},
 	easeInBack(e) {
-		let t = 1.70158;
-		return e * e * ((t + 1) * e - t);
+		return e * e * (2.70158 * e - 1.70158);
 	},
 	easeOutBack(e) {
-		let t = 1.70158;
-		return --e * e * ((t + 1) * e + t) + 1;
+		return --e * e * (2.70158 * e + 1.70158) + 1;
 	},
 	easeInOutBack(e) {
 		let t = 1.70158;
@@ -1056,7 +1054,7 @@ function Kt(e, t) {
 function qt(e, t, n) {
 	return typeof t == "string" ? Me(Kt(e, t), n) : Me(Kt(e, ""), t);
 }
-var G = /* @__PURE__ */ new class {
+var G = /* #__PURE__ */ new class {
 	constructor(e, t) {
 		this.animation = void 0, this.backgroundColor = "rgba(0,0,0,0.1)", this.borderColor = "rgba(0,0,0,0.1)", this.color = "#666", this.datasets = {}, this.devicePixelRatio = (e) => e.chart.platform.getDevicePixelRatio(), this.elements = {}, this.events = [
 			"mousemove",
@@ -1879,7 +1877,7 @@ function Pr(e, t) {
 		bottom: n.bottom === !1 ? e.height : r.bottom + (n.bottom === !0 ? 0 : n.bottom)
 	};
 }
-var Y = /* @__PURE__ */ new class {
+var Y = /* #__PURE__ */ new class {
 	constructor() {
 		this._request = null, this._charts = /* @__PURE__ */ new Map(), this._running = !1, this._lastDate = void 0;
 	}
@@ -4315,7 +4313,7 @@ function Ka(e, t) {
 function qa(e) {
 	return "id" in e && "defaults" in e;
 }
-var X = /* @__PURE__ */ new class {
+var X = /* #__PURE__ */ new class {
 	constructor() {
 		this.controllers = new Wa(oi, "datasets", !0), this.elements = new Wa(Ca, "elements"), this.plugins = new Wa(Object, "plugins"), this.scales = new Wa(Ua, "scales"), this._typedRegistries = [
 			this.controllers,
@@ -7034,7 +7032,7 @@ var zc = {
 		common: !0,
 		size: 3154e7
 	}
-}, $ = /* @__PURE__ */ Object.keys(zc);
+}, $ = /* #__PURE__ */ Object.keys(zc);
 function Bc(e, t) {
 	return e - t;
 }
@@ -7332,7 +7330,7 @@ function nl(e, t) {
 		m
 	]), n(() => {
 		_.current && (y(), setTimeout(v));
-	}, [l]), n(() => (v(), () => y()), []), /* @__PURE__ */ a("canvas", {
+	}, [l]), n(() => (v(), () => y()), []), /*#__PURE__*/ a("canvas", {
 		ref: g,
 		role: "img",
 		height: r,
@@ -7341,18 +7339,16 @@ function nl(e, t) {
 		children: p
 	});
 }
-var rl = /* @__PURE__ */ t(nl);
+var rl = /*#__PURE__*/ t(nl);
 function il(e, n) {
-	return jo.register(n), /* @__PURE__ */ t((t, n) => /* @__PURE__ */ a(rl, {
+	return jo.register(n), /*#__PURE__*/ t((t, n) => /*#__PURE__*/ a(rl, {
 		...t,
 		ref: n,
 		type: e
 	}));
 }
-var al = /* @__PURE__ */ il("line", Ti), ol = /* @__PURE__ */ il("bar", Si), sl = /* @__PURE__ */ il("doughnut", wi);
-//#endregion
-//#region ../../../atlas/src/shared/components/ui/donut-chart.tsx
-jo.register(Vo, sc);
+var al = /* #__PURE__ */ il("line", Ti), ol = /* #__PURE__ */ il("bar", Si), sl = /* #__PURE__ */ il("doughnut", wi);
+jo.register(Vo, sc), sc.positioners.cursor = (e, t) => t;
 var cl = {
 	backgroundColor: "#fff",
 	titleColor: "#0F172A",
@@ -7390,9 +7386,10 @@ function ll({ segments: e, centerLabel: t, centerValue: n, size: s = 220, classN
 		plugins: {
 			tooltip: {
 				...cl,
+				position: "cursor",
 				callbacks: { label: (t) => {
-					let n = e.reduce((e, t) => e + t.value, 0), r = n > 0 ? (t.raw / n * 100).toFixed(1) : "0";
-					return `  ${t.label}: ${r}%`;
+					let n = e.reduce((e, t) => e + t.value, 0);
+					return `  ${n > 0 ? (t.raw / n * 100).toFixed(1) : "0"}%`;
 				} }
 			},
 			legend: { display: !1 }
@@ -7415,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-slate-400",
+				className: "text-xs font-medium uppercase tracking-wider text-muted-foreground",
 				children: t
 			})]
 		})]
@@ -7428,6 +7425,13 @@ var ul = {
 	backgroundColor: "#fff",
 	titleColor: "#0F172A",
 	bodyColor: "#334155",
+	footerColor: "#0F172A",
+	footerFont: {
+		weight: "bold",
+		size: 12,
+		family: "ui-monospace, monospace"
+	},
+	footerMarginTop: 8,
 	borderColor: "#E2E8F0",
 	borderWidth: 1,
 	titleFont: {
@@ -7487,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
@@ -7512,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 }
 		},
@@ -7539,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 } : {}
 			}
 		}
 	}), [
@@ -7597,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,
@@ -7607,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
@@ -7629,7 +7662,10 @@ function vl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3,
 				callbacks: n === "currency" ? {
 					label: (e) => `  ${e.dataset.label}: ${_l(e.raw)}`,
 					footer: (e) => `Total: ${_l(e.reduce((e, t) => e + t.raw, 0))}`
-				} : n === "percent" ? { label: (e) => `  ${e.dataset.label}: ${e.raw.toFixed(1)}%` } : void 0
+				} : n === "percent" ? { label: (e) => `  ${e.dataset.label}: ${e.raw.toFixed(1)}%` } : n === "number" ? {
+					label: (e) => `  ${e.dataset.label}: ${e.raw.toLocaleString()}`,
+					footer: (e) => `Total: ${e.reduce((e, t) => e + t.raw, 0).toLocaleString()}`
+				} : void 0
 			},
 			legend: { display: !1 }
 		},
@@ -7654,33 +7690,45 @@ function vl({ labels: e, datasets: t, yFormat: n = "currency", tension: i = .3,
 						family: "ui-monospace, monospace"
 					},
 					color: "#94A3B8",
-					callback: n === "currency" ? gl : n === "percent" ? (e) => `${e}%` : void 0
+					callback: n === "currency" ? gl : n === "percent" ? (e) => `${e}%` : n === "number" ? (e) => Number(e).toLocaleString() : void 0
 				},
 				border: { display: !1 },
 				beginAtZero: !0,
 				...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",
+	footerColor: "#0F172A",
+	footerFont: {
+		weight: "bold",
+		size: 12,
+		family: "ui-monospace, monospace"
+	},
+	footerMarginTop: 8,
 	borderColor: "#E2E8F0",
 	borderWidth: 1,
 	titleFont: {
@@ -7695,30 +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 };
-
-//# sourceMappingURL=charts.mjs.map
+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 };