+ {/* Total Infrastructure Cost Card */}
+
+
+ Total Infrastructure Cost
+
+
+ {toCurrency(totalCost, currency)}
+
+
+ {assetCount} {assetCount === 1 ? 'asset' : 'assets'}
+
+
+ {/* CPU Cost Card */}
+
+
+ CPU Cost
+
+
+ {toCurrency(cpuCost, currency)}
+
+
+ {totalCost > 0 ? ((cpuCost / totalCost) * 100).toFixed(1) : 0}% of total
+
+
+
+ {/* RAM Cost Card */}
+
+
+ RAM Cost
+
+
+ {toCurrency(ramCost, currency)}
+
+
+ {totalCost > 0 ? ((ramCost / totalCost) * 100).toFixed(1) : 0}% of total
+
+
+
+ {/* Storage Cost Card */}
+
+
+ Storage Cost
+
+
+ {toCurrency(storageCost, currency)}
+
+
+ {totalCost > 0 ? ((storageCost / totalCost) * 100).toFixed(1) : 0}% of total
+
+
+
+ {/* Donut Chart - Primary aggregation */}
+
+
Cost by {primaryLabel}
+
+
+
+ {primaryData.map((entry, index) => (
+ |
+ ))}
+
+ toCurrency(value, currency)} />
+
+
+
+ {primaryData.map((item, idx) => (
+
+
+
+
+ {toCurrency(item.value, currency)}
+
+
+ {item.percentage}%
+
+
+
+ ))}
+
+
+
+ {/* Bar Chart - Secondary aggregation */}
+
+
Cost by {secondaryLabel}
+
+
+
+
+
+ toCurrency(value, currency)}
+ contentStyle={{ background: "#fff", border: "1px solid #e0e0e0" }}
+ />
+
+
+
+
+