@ttoss/react-dashboard 0.2.0 → 0.2.2

package/README.md

@@ -442,6 +442,56 @@ type DashboardCardType =
 type CardVariant = 'default' | 'dark' | 'light-green';
 ```
 
+### TrendIndicator
+
+Trend indicator that displays a percentage change with visual indicators.
+
+```tsx
+type TrendIndicator = {
+  value: number;
+  status?: 'positive' | 'negative' | 'neutral';
+  type?: 'higher' | 'lower';
+};
+```
+
+**Behavior:**
+
+- **Positive status**: Displays an up arrow icon and the percentage value (e.g., "10.5% vs. período anterior")
+- **Negative status**: Displays a down arrow icon and the percentage value (e.g., "5.2% vs. período anterior")
+- **Neutral status**: Displays no arrow icon, only the percentage value (e.g., "0.0% vs. período anterior")
+- The value is always formatted to 1 decimal place followed by "%"
+- Note: Positive values do not include a "+" sign prefix
+
+**Example:**
+
+```tsx
+trend={{
+  value: 15.5,
+  status: 'positive',
+  type: 'higher', // Optional: indicates if higher/lower is good
+}}
+```
+
+### StatusIndicator
+
+Status indicator that displays text with an optional icon.
+
+```tsx
+type StatusIndicator = {
+  text: string;
+  icon?: string;
+};
+```
+
+**Example:**
+
+```tsx
+status={{
+  text: 'Active',
+  icon: 'mdi:check-circle',
+}}
+```
+
 ## Complete Example
 
 ```tsx

package/dist/esm/index.js

@@ -45,7 +45,7 @@ var CardWrapper = /* @__PURE__ */__name(({
         return "feedback.text.positive.default";
       case "default":
       default:
-        return "display.text.primary.default";
+        return "input.background.muted.disabled";
     }
   }, "getTitleColor");
   return /* @__PURE__ */React.createElement(Flex, {
@@ -65,8 +65,9 @@ var CardWrapper = /* @__PURE__ */__name(({
       gap: "2"
     }
   }, /* @__PURE__ */React.createElement(Text, {
-    variant: "h5",
     sx: {
+      fontSize: "sm",
+      fontWeight: "bold",
       color: getTitleColor(),
       flex: 1,
       minWidth: 0
@@ -130,19 +131,28 @@ var getValueColor = /* @__PURE__ */__name((color, variant) => {
   }
   return "display.text.primary.default";
 }, "getValueColor");
-var getTrendColor = /* @__PURE__ */__name(status => {
-  if (status === "positive") {
-    return "feedback.text.positive.default";
+var getTrendColor = /* @__PURE__ */__name(trend => {
+  const colors = {
+    positive: "feedback.text.positive.default",
+    negative: "feedback.text.negative.default",
+    neutral: "display.text.primary.default"
+  };
+  if (!trend) {
+    return colors.neutral;
   }
-  if (status === "negative") {
-    return "feedback.text.negative.default";
+  const isGoodTrend = trend.type === "higher" && trend.status === "positive" || trend.type === "lower" && trend.status === "negative";
+  if (isGoodTrend) {
+    return colors.positive;
   }
-  return "display.text.primary.default";
+  const isBadTrend = trend.type === "higher" && trend.status === "negative" || trend.type === "lower" && trend.status === "positive";
+  if (isBadTrend) {
+    return colors.negative;
+  }
+  return colors.neutral;
 }, "getTrendColor");
 var BigNumber = /* @__PURE__ */__name(props => {
   const total = props.data.meta?.total ?? props.data.api?.total ?? void 0;
   const formattedValue = formatNumber(total, props.numberType, props.numberDecimalPlaces);
-  const displayValue = props.numberType === "number" && props.title.toLowerCase().includes("roas") ? `${formattedValue}x` : formattedValue;
   const valueColor = getValueColor(props.color, props.variant);
   const variant = props.variant || "default";
   return /* @__PURE__ */React.createElement(CardWrapper, {
@@ -161,14 +171,14 @@ var BigNumber = /* @__PURE__ */__name(props => {
       fontWeight: "bold",
       lineHeight: "1.2"
     }
-  }, displayValue), props.trend && /* @__PURE__ */React.createElement(Flex2, {
+  }, formattedValue), props.trend && /* @__PURE__ */React.createElement(Flex2, {
     sx: {
       alignItems: "center",
       gap: "1"
     }
   }, /* @__PURE__ */React.createElement(Box2, {
     sx: {
-      color: getTrendColor(props.trend.status),
+      color: getTrendColor(props.trend),
       display: "flex",
       alignItems: "center"
     }
@@ -178,13 +188,13 @@ var BigNumber = /* @__PURE__ */__name(props => {
   }) : props.trend.status === "negative" ? /* @__PURE__ */React.createElement(Icon, {
     icon: "mdi:arrow-down",
     width: 16
-  }) : null), ["positive", "negative"].includes(props.trend?.status || "") && /* @__PURE__ */React.createElement(Text2, {
+  }) : null), /* @__PURE__ */React.createElement(Text2, {
     sx: {
-      color: getTrendColor(props.trend.status),
+      color: getTrendColor(props.trend),
       fontSize: "sm",
       fontWeight: "medium"
     }
-  }, props.trend.status === "positive" ? "+" : "", props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
+  }, props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
     sx: {
       color: getValueColor(props.color, props.variant),
       fontSize: "sm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -28,9 +28,9 @@
     "react-grid-layout": "^1.5.2",
     "@ttoss/components": "^2.12.4",
     "@ttoss/forms": "^0.38.0",
-    "@ttoss/react-i18n": "^2.0.25",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.5.0"
+    "@ttoss/ui": "^6.5.0",
+    "@ttoss/react-i18n": "^2.0.25"
   },
   "peerDependencies": {
     "react": ">=16.8.0"