@wealthx/shadcn 1.1.0 → 1.2.1

package/dist/chunk-VPBN3WOO.mjs

@@ -0,0 +1,164 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  DoughnutLegendRow,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+  formatAbbrev
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/property-cashflow-doughnut-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  DoughnutController,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(ArcElement, DoughnutController, Tooltip);
+function PropertyCashflowDoughnutChart({
+  income,
+  expenses,
+  title = "Property Cashflow",
+  showLegend = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const incomeVal = Math.max(0, income != null ? income : 0);
+  const expensesVal = Math.max(0, expenses != null ? expenses : 0);
+  const total = incomeVal + expensesVal;
+  const netCashflow = incomeVal - expensesVal;
+  const hasData = total > 0;
+  const chartData = useMemo(
+    () => ({
+      labels: ["Income", "Expenses"],
+      datasets: [
+        {
+          data: [incomeVal, expensesVal],
+          backgroundColor: [brandPrimary, brandSecondary],
+          borderWidth: 0,
+          hoverOffset: 4
+        }
+      ]
+    }),
+    [incomeVal, expensesVal, brandPrimary, brandSecondary]
+  );
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: "68%",
+      animation: { duration: 600, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          padding: 10,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            label: (ctx) => {
+              const val = ctx.raw;
+              const pct = total > 0 ? `${(val / total * 100).toFixed(1)}%` : "0%";
+              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+            }
+          }
+        }
+      }
+    }),
+    [total]
+  );
+  const incomePct = total > 0 ? `${(incomeVal / total * 100).toFixed(1)}%` : "0%";
+  const expensesPct = total > 0 ? `${(expensesVal / total * 100).toFixed(1)}%` : "0%";
+  const netLabel = netCashflow >= 0 ? "Surplus" : "Deficit";
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full py-4 sm:py-6 gap-2", className),
+      style: { maxWidth: width, fontFamily },
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base", children: title }) }),
+        /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !hasData ? /* @__PURE__ */ jsx(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ jsx(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { style: { height, width: "100%", position: "relative" }, children: [
+            /* @__PURE__ */ jsx(
+              Chart,
+              {
+                type: "doughnut",
+                data: chartData,
+                options,
+                "aria-label": title
+              },
+              `${brandPrimary}__${brandSecondary}`
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  textAlign: "center",
+                  pointerEvents: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatAbbrev(Math.abs(netCashflow)) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: netLabel })
+                ]
+              }
+            )
+          ] }),
+          showLegend && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Income",
+                color: brandPrimary,
+                value: incomeVal,
+                percent: incomePct
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Expenses",
+                color: brandSecondary,
+                value: expensesVal,
+                percent: expensesPct
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  PropertyCashflowDoughnutChart
+};