@kaio-xyz/design-system 1.1.83 → 1.1.85

package/dist/index.cjs.js

@@ -692,6 +692,13 @@ var dateFormatOptions = {
     month: "2-digit",
     day: "2-digit"
 };
+function commaSeparateNumber(val, digits) {
+    if (digits === void 0) { digits = 2; }
+    var numberFormatOptions = {
+        minimumFractionDigits: digits,
+    };
+    return Number(val).toLocaleString("en-US", numberFormatOptions);
+}
 function getClientLocale() {
     var _a;
     if (!(typeof window !== "undefined"))
@@ -716,6 +723,39 @@ function formatDate(value, locale, format) {
     var date = value instanceof Date ? value : new Date(value);
     return date.toLocaleString(locale, format);
 }
+function formatLargeNumber(input, decimalPlaces) {
+    if (decimalPlaces === void 0) { decimalPlaces = 2; }
+    try {
+        if (!input)
+            return input;
+        var number = Number(input);
+        if (isNaN(number)) {
+            return input;
+        }
+        // Determine the suffix and reduce the number accordingly
+        var suffix = "";
+        if (number >= 1e9) {
+            suffix = "B";
+            number /= 1e9;
+        }
+        else if (number >= 1e6) {
+            suffix = "M";
+            number /= 1e6;
+            // If the number is above 10,000, round to the nearest thousand
+        }
+        else if (number >= 1e4) {
+            suffix = "K";
+            number /= 1e3;
+        }
+        // Round the number to decimal places and add comma separation
+        return suffix
+            ? "".concat(commaSeparateNumber(number, 2)).concat(suffix)
+            : commaSeparateNumber(number, decimalPlaces);
+    }
+    catch (_a) {
+        return input;
+    }
+}
 var formatNumber = function (amount, digits) {
     if (digits === void 0) { digits = 2; }
     return Number(amount).toLocaleString("en-US", {
@@ -783,26 +823,28 @@ var InvestmentGraph = function (_a) {
             case Timeframes.year: return filterByPeriod(12);
         }
     }, [timeFrame, filterByPeriod]);
+    var monthTicks = React.useMemo(function () {
+        if (!dataBasedOnPeriod || dataBasedOnPeriod.length === 0)
+            return [];
+        var seenMonths = [];
+        return dataBasedOnPeriod.reduce(function (ticks, point) {
+            var month = new Date(point.date).getMonth();
+            if (seenMonths.indexOf(month) === -1) {
+                seenMonths.push(month);
+                return __spreadArray(__spreadArray([], ticks, true), [point.date], false);
+            }
+            return ticks;
+        }, []);
+    }, [dataBasedOnPeriod]);
     var formatXAxis = function (timestamp) {
         var date = new Date(timestamp);
-        var monthlyDates = dataBasedOnPeriod === null || dataBasedOnPeriod === void 0 ? void 0 : dataBasedOnPeriod.reduce(function (acc, curr) {
-            var month = new Date(curr.date).getMonth();
-            if (!acc[month])
-                acc[month] = [];
-            acc[month].push(curr.date);
-            return acc;
-        }, {});
-        var month = date.getMonth();
-        var isFirstInMonth = (monthlyDates === null || monthlyDates === void 0 ? void 0 : monthlyDates[month]) && monthlyDates[month][0] === timestamp;
-        return isFirstInMonth
-            ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
-            : "";
+        return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()];
     };
     return (jsxRuntime.jsxs(Stack, { className: style$6.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$6.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$6.timeframeSelector, style$6.paddedWrapper), children: periodOptions.map(function (p) {
                                 return jsxRuntime.jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$6.timeFrameValue, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value ? "true" : "false", onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value);
                             }) }) })] }), jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", minHeight: 500, children: jsxRuntime.jsxs(recharts.AreaChart, { width: 500, height: 300, data: dataBasedOnPeriod, children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: "splitColor", x1: "0", y1: "0", x2: "0", y2: "1", children: hasPositiveAndNegativeValues
                                     ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-success)", stopOpacity: 1 }), jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-error)", stopOpacity: 1 })] }))
-                                    : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: "var(--primary-30)", stopOpacity: 0.8 }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: "var(--neutral-90)", stopOpacity: 0 })] })) }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", strokeWidth: 0, style: { fill: "var(--neutral-45)" }, tickFormatter: formatXAxis }), jsxRuntime.jsx(recharts.YAxis, { dataKey: "value", strokeWidth: 0, axisLine: false, tickLine: false, scale: "auto", domain: hasNegativeValues && hasPositiveValues ? ["auto", "auto"] : [dataMin, dataMax], tickCount: 6, tick: false, width: 10 }), jsxRuntime.jsx(recharts.Tooltip, { contentStyle: {
+                                    : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: "var(--primary-30)", stopOpacity: 0.8 }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: "var(--neutral-90)", stopOpacity: 0 })] })) }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", strokeWidth: 0, style: { fill: "var(--neutral-45)" }, tickFormatter: formatXAxis, ticks: monthTicks }), jsxRuntime.jsx(recharts.YAxis, { dataKey: "value", strokeWidth: 0, axisLine: false, tickLine: false, scale: "auto", domain: hasNegativeValues && hasPositiveValues ? ["auto", "auto"] : [dataMin, dataMax], tickCount: 6, tickFormatter: function (value) { return String(formatLargeNumber(value)); }, style: { fontSize: "var(--font-size-10-px)" } }), jsxRuntime.jsx(recharts.Tooltip, { contentStyle: {
                                 backgroundColor: "var(--neutral-90)",
                                 color: "var(--neutral-45)",
                                 borderRadius: "var(--radius-8-px)",