Update comments, use MUI's capitalize

plugins/cost-insights/src/client.ts

@@ -100,8 +100,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
         aggregation: aggregation,
         change: changeOf(aggregation),
         trendline: trendlineOf(aggregation),
-        // Optional field on Cost which needs to be supplied in order to see
-        // the product breakdown view in the top panel.
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily cost grouped by cloud product OR by project / billing account.
         groupedCosts: {
           product: getGroupedProducts(intervals),
           project: getGroupedProjects(intervals),
@@ -121,8 +121,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
         aggregation: aggregation,
         change: changeOf(aggregation),
         trendline: trendlineOf(aggregation),
-        // Optional field on Cost which needs to be supplied in order to see
-        // the product breakdown view in the top panel.
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily project cost grouped by cloud product.
         groupedCosts: {
           product: getGroupedProducts(intervals),
         },

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx

@@ -17,6 +17,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   Box,
+  capitalize,
   Card,
   CardContent,
   Divider,
@@ -72,7 +73,7 @@ export const CostOverviewCard = ({
     key => ({
       id: key,
       label: `Breakdown by ${key}`,
-      title: `Cloud Cost By ${key.charAt(0).toUpperCase() + key.slice(1)}`,
+      title: `Cloud Cost By ${capitalize(key)}`,
     }),
   );
   const tabs = [