rolling calender

src/components/HistoryChart.tsx

@@ -30,27 +30,36 @@ export default function HistoryChart({
   };
 
   const activeDataKey = activeTab.toLowerCase();
-  const currentData = data[activeDataKey] || data[activeTab] || [];
+  const rawData = data[activeDataKey] || data[activeTab] || [];
+  const currentData = [...rawData].reverse();
 
-  const maxAmount = Math.max(...currentData.map((d) => d.amount), 1);
+  const maxAmount =
+    currentData.length > 0
+      ? Math.max(...currentData.map((d) => d.amount), 1)
+      : 1;
 
   // ✅ Formatter (₹ + adaptive units)
   const formatAmount = (amount: number) => {
     const tab = activeTab.toLowerCase();
 
+    if (amount === 0) return "";
+
     if (tab === "year") {
-      const lakhs = amount / 100000;
-      return `₹ ${lakhs.toFixed(2)} L`;
+      if (amount >= 100000) {
+        return `₹ ${(amount / 100000).toFixed(2)} L`;
+      }
+      return `₹ ${amount.toLocaleString("en-IN")}`;
     }
 
     if (tab === "month") {
-      const thousands = amount / 1000;
-      return `₹ ${thousands.toFixed(1)} K`;
+      if (amount >= 1000) {
+        return `₹ ${(amount / 1000).toFixed(1)} K`;
+      }
+      return `₹ ${amount.toLocaleString("en-IN")}`;
     }
 
     return `₹ ${amount.toLocaleString("en-IN")}`;
   };
-
   return (
     <Paper sx={{ p: { xs: 2, sm: 4 }, borderRadius: 4, width: "100%", boxShadow: 'none', border: '1px solid', borderColor: 'divider' }}>
       <Typography variant="h6" fontWeight={700} gutterBottom>
@@ -100,7 +109,11 @@ export default function HistoryChart({
             const heightPerc = (point.amount / maxAmount) * 100;
             return (
               <Box
-                key={point.id}
+                key={
+                  activeTab.toLowerCase() === "month"
+                  ? point.id.replace(" - ", "\n")
+                  : point.id
+                }
                 sx={{
                   flex: 1,
                   display: "flex",
@@ -110,7 +123,17 @@ export default function HistoryChart({
                   height: "100%",
                 }}
               >
-                <Typography variant="caption" sx={{ mb: 1, opacity: 0.7, fontSize: '0.65rem', display: { xs: 'none', sm: 'block' } }}>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  sx={{
+                    mt: 1,
+                    fontWeight: 500,
+                    fontSize: '0.7rem',
+                    textAlign: 'center',
+                    whiteSpace: 'pre-line'
+                  }}
+                >
                   {point.amount > 0 ? formatAmount(point.amount) : ""}
                 </Typography>