@ammarkhalidfarooq/dashboard-package 0.6.11 → 0.6.12

package/dist/index.es.js

@@ -1181,6 +1181,14 @@ var MetricCard$1 = function MetricCard(_ref) {
     captionSx = _ref$captionSx === void 0 ? {} : _ref$captionSx,
     _ref$avatarSx = _ref.avatarSx,
     avatarSx = _ref$avatarSx === void 0 ? {} : _ref$avatarSx;
+  var captionText = String(caption !== null && caption !== void 0 ? caption : "");
+  var isPercentCaption = captionText.includes("%");
+  var firstNumberMatch = captionText.match(/-?\d+(\.\d+)?/);
+  var trendValue = firstNumberMatch ? Number(firstNumberMatch[0]) : null;
+  var isNegativeTrend = isPercentCaption && trendValue !== null && trendValue < 0;
+  var isPositiveTrend = isPercentCaption && trendValue !== null && trendValue > 0;
+  var trendPrefix = isNegativeTrend ? "▼ " : isPositiveTrend ? "▲ " : "";
+  var captionColor = captionText.includes("failed") ? "#4F46E5" : error || isNegativeTrend ? "#ef4444" : "#0B8F61";
   return /*#__PURE__*/jsxs(Box, {
     sx: _objectSpread2({
       bgcolor: "#fff",
@@ -1229,9 +1237,9 @@ var MetricCard$1 = function MetricCard(_ref) {
       sx: _objectSpread2({
         fontSize: 12,
         fontWeight: 500,
-        color: caption !== null && caption !== void 0 && caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+        color: captionColor
       }, captionSx),
-      children: caption
+      children: "".concat(trendPrefix).concat(captionText)
     })]
   });
 };