@optiaxiom/react 1.9.12 → 1.9.13

package/dist/cjs/ProteusChart-BXrxubXd.js

@@ -0,0 +1,192 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var globals = require('@optiaxiom/globals');
+var recharts = require('recharts');
+var Textarea = require('./Textarea-qHW4kUCl.js');
+require('./assets/src/layers/layers.css.ts.vanilla-DKObgrxp.css');
+require('./assets/src/proteus-document/ProteusChart.css.ts.vanilla-DqZUeY4l.css');
+require('./assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-Pn5jjCuE.css');
+require('react');
+require('@radix-ui/react-slot');
+require('./assets/src/badge/Badge.css.ts.vanilla-irBmG5Kb.css');
+require('./assets/src/link/Link.css.ts.vanilla-BWeMxUII.css');
+require('@radix-ui/react-use-controllable-state');
+require('@radix-ui/react-compose-refs');
+require('@radix-ui/react-context');
+require('clsx');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CLg-MXIt.css');
+require('downshift');
+require('./assets/src/command/CommandItem.css.ts.vanilla-Bt_Nlf-j.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-CWUqRINF.css');
+require('@radix-ui/react-id');
+require('react-remove-scroll');
+require('@radix-ui/react-dialog');
+require('use-sync-external-store/shim');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BTcdNUMi.css');
+require('@vanilla-extract/dynamic');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DBVBTdEF.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-bQN4Y7UC.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-CLxTtErc.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-BJVMRTsP.css');
+require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-PgXgESRY.css');
+require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DTdm02-4.css');
+require('./assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-L7xDlWuf.css');
+require('@tanstack/react-table');
+require('@tanstack/react-virtual');
+require('./assets/src/table/Table.css.ts.vanilla-D0jyDrNf.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BTcdNUMi.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-NUaraxA3.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-YN5liYQo.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-CY0OLm54.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-BxoDRDiH.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla--2ll0U0K.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-BHfOKjeH.css');
+require('./assets/src/data-table/DataTableBody.css.ts.vanilla-B8NGC82D.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DjQVw8C9.css');
+require('react-day-picker');
+require('@radix-ui/react-popper');
+require('@radix-ui/react-dismissable-layer');
+require('@radix-ui/react-focus-guards');
+require('@radix-ui/react-focus-scope');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-Cjcx2cQM.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-C-FzG9_j.css');
+require('./assets/src/calendar/CalendarGrid.css.ts.vanilla-DlG-iUv9.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-L4ESRaEk.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-_z6bre1Z.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-BQS95QCj.css');
+require('@radix-ui/react-collapsible');
+require('./assets/src/disclosure/DisclosureContent.css.ts.vanilla-DpP1Pn9C.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-BhoBwmoJ.css');
+require('./assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-Dzs0EEQb.css');
+require('@radix-ui/react-label');
+require('@radix-ui/react-tooltip');
+require('@optiaxiom/globals/fonts');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-U__o_aIU.css');
+require('./assets/src/box/Box.css.ts.vanilla-DeG-YHQA.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BTcdNUMi.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-Dyh-L9n4.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-Pv9GzQLf.css');
+require('./assets/src/text/Text.css.ts.vanilla-BYNeeVeO.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-a52fzPeR.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-n3QXPMxZ.css');
+require('./assets/src/alert/Alert.css.ts.vanilla-CT0QXSzy.css');
+require('@radix-ui/react-avatar');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BTcdNUMi.css');
+require('./assets/src/avatar/Avatar.css.ts.vanilla-CzFhl9nA.css');
+require('@radix-ui/react-popover');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BTcdNUMi.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BATjaGfv.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-C1I4Nbyk.css');
+require('@radix-ui/react-visually-hidden');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-C9XtT-gw.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BMYKl9PP.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-BdkmqySs.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-AHjhLnJs.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-DVhY0SQV.css');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-BX8Yow4C.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-Bk0LQCey.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-Ds5yXBJt.css');
+require('@radix-ui/react-portal');
+require('./assets/src/input/Input.css.ts.vanilla-D8GeAgO8.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-CxD1m9SG.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-Kd0VRxrR.css');
+require('./assets/src/textarea/Textarea.css.ts.vanilla-DJpw5t_2.css');
+require('./assets/src/textarea/TextareaAutosize.css.ts.vanilla-nCLwYnHe.css');
+
+var chart = Textarea.recipeRuntime({base:[{fontSize:'sm'},'n8lhtd']});
+
+var tooltip = Textarea.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'_1xmbct6']});
+var value = Textarea.recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'_17xvnb0']});
+
+function ProteusChartTooltipContent({
+  active,
+  label,
+  payload
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Box, { ...tooltip(), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { fontWeight: "500", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: payload.filter((item) => item.type !== "none").map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Textarea.Box,
+      {
+        alignItems: "center",
+        display: "flex",
+        gap: "8",
+        justifyContent: "space-between",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Group, { gap: "8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Textarea.Box,
+              {
+                flex: "none",
+                rounded: "xs",
+                size: "10",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { color: "fg.tertiary", children: item.name ?? item.dataKey })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { ...value(), children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+        ]
+      },
+      item.dataKey
+    )) })
+  ] });
+}
+
+const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
+const getColor = (series, index) => series.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+const ProteusChart = ({
+  data,
+  series,
+  xAxisKey
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { top: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.CartesianGrid,
+      {
+        stroke: "#E0E0E0",
+        strokeDasharray: "4 4",
+        vertical: false
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.XAxis,
+      {
+        axisLine: false,
+        dataKey: xAxisKey,
+        tick: { fill: globals.theme.colors["fg.secondary"] },
+        tickLine: false,
+        tickMargin: 10
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
+    series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Bar,
+      {
+        dataKey: s.dataKey,
+        fill: getColor(s, i),
+        name: s.name ?? s.dataKey,
+        radius: [4, 4, 0, 0],
+        children: s.labelKey && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.LabelList,
+          {
+            dataKey: s.labelKey,
+            fill: globals.theme.colors["fg.secondary"],
+            offset: 12,
+            position: "top"
+          }
+        )
+      },
+      s.dataKey
+    ))
+  ] }) }) });
+};
+ProteusChart.displayName = "@optiaxiom/react/ProteusChart";
+
+exports.ProteusChart = ProteusChart;