@sequenceholdings/atlas-ui 0.1.2 → 0.1.3

package/dist/charts.d.ts

@@ -0,0 +1,157 @@
+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;
+};
+
+export declare const CHART_TICK: {
+    readonly fontSize: 10;
+    readonly fill: "#94A3B8";
+    readonly fontFamily: "ui-monospace, monospace";
+};
+
+export declare const CHART_TOOLTIP: {
+    readonly borderRadius: 8;
+    readonly border: "1px solid #E2E8F0";
+    readonly boxShadow: "0 2px 8px rgba(0,0,0,0.06)";
+    readonly fontSize: 12;
+    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';
+    onClick?: (index: number) => void;
+    barTotals?: boolean;
+    maxTicksLimit?: number;
+    height?: number;
+    className?: string;
+}
+
+export declare function TimeseriesLineChart({ labels, datasets, yFormat, tension, maxTicksLimit, height, className, }: TimeseriesLineChartProps): JSX.Element | null;
+
+declare interface TimeseriesLineChartProps {
+    labels: string[];
+    datasets: LineDataset[];
+    yFormat?: 'currency' | 'percent' | 'number';
+    tension?: number;
+    maxTicksLimit?: number;
+    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-BZS7Y02J.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-black-50",
 				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: {
@@ -7629,7 +7633,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,7 +7661,7 @@ 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,
@@ -7681,6 +7688,13 @@ var yl = {
 	backgroundColor: "#fff",
 	titleColor: "#0F172A",
 	bodyColor: "#334155",
+	footerColor: "#0F172A",
+	footerFont: {
+		weight: "bold",
+		size: 12,
+		family: "ui-monospace, monospace"
+	},
+	footerMarginTop: 8,
 	borderColor: "#E2E8F0",
 	borderWidth: 1,
 	titleFont: {
@@ -7720,5 +7734,3 @@ var Cl = {
 };
 //#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