fix: usage display as NaN issue

aws-samples · Dec 15, 2024 · 82eee89 · 82eee89
1 parent 70972e4
commit 82eee89
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 17 deletions.
diff --git a/react-native/src/settings/ModelPrice.ts b/react-native/src/settings/ModelPrice.ts
@@ -294,11 +294,7 @@ export function getTotalCost(usage: Usage[]) {
 }
 
 export function getTotalInputTokens(usage: Usage[]) {
-  return Number(
-    usage
-      .reduce((sum, model) => sum + (model.inputTokens || 0), 0)
-      .toLocaleString()
-  );
+  return usage.reduce((sum, model) => sum + (model.inputTokens || 0), 0);
 }
 
 export function getTotalInputPrice(usage: Usage[]) {
@@ -310,11 +306,7 @@ export function getTotalInputPrice(usage: Usage[]) {
 }
 
 export function getTotalOutputTokens(usage: Usage[]) {
-  return Number(
-    usage
-      .reduce((sum, model) => sum + (model.outputTokens || 0), 0)
-      .toLocaleString()
-  );
+  return usage.reduce((sum, model) => sum + (model.outputTokens || 0), 0);
 }
 
 export function getTotalOutputPrice(usage: Usage[]) {

diff --git a/react-native/src/settings/TokenUsageScreen.tsx b/react-native/src/settings/TokenUsageScreen.tsx
@@ -167,31 +167,32 @@ function TokenUsageScreen(): React.JSX.Element {
             <View style={styles.totalHeader}>
               <Text style={styles.totalLabel}>Total Usage</Text>
               <Text style={styles.totalPrice}>
-                USD {getTotalCost(modelUsage)}
+                USD {getTotalCost(modelUsage).toString()}
               </Text>
             </View>
             <View style={styles.totalRow}>
               <Text style={styles.totalText}>
-                Input Tokens: {getTotalInputTokens(modelUsage)}
+                Input Tokens: {getTotalInputTokens(modelUsage).toLocaleString()}
               </Text>
               <Text style={styles.totalText}>
-                USD {getTotalInputPrice(modelUsage)}
+                USD {getTotalInputPrice(modelUsage).toString()}
               </Text>
             </View>
             <View style={styles.totalRow}>
               <Text style={styles.totalText}>
-                Output Tokens: {getTotalOutputTokens(modelUsage)}
+                Output Tokens:{' '}
+                {getTotalOutputTokens(modelUsage).toLocaleString()}
               </Text>
               <Text style={styles.totalText}>
-                USD {getTotalOutputPrice(modelUsage)}
+                USD {getTotalOutputPrice(modelUsage).toString()}
               </Text>
             </View>
             <View style={styles.totalRow}>
               <Text style={styles.totalText}>
-                Images: {getTotalImageCount(modelUsage)}
+                Images: {getTotalImageCount(modelUsage).toLocaleString()}
               </Text>
               <Text style={styles.totalText}>
-                USD {getTotalImagePrice(modelUsage)}
+                USD {getTotalImagePrice(modelUsage).toString()}
               </Text>
             </View>
           </View>