feat(org-stats): Final UI tweaks (#25687)

static/app/views/usageStats/index.tsx

@@ -239,7 +239,7 @@ class OrganizationStats extends React.Component<Props, State> {
             start={start ?? null}
             end={end ?? null}
             utc={utc ?? null}
-            label={<DropdownLabel>Date range:</DropdownLabel>}
+            label={<DropdownLabel>{t('Date Range:')}</DropdownLabel>}
             onChange={() => {}}
             onUpdate={this.handleUpdateDatetime}
             onToggleSelector={isOpen => this.setState({isCalendarOpen: isOpen})}
@@ -251,7 +251,7 @@ class OrganizationStats extends React.Component<Props, State> {
         <DropdownDataCategory
           label={
             <DropdownLabel>
-              <span>{t('Usage Metrics: ')}</span>
+              <span>{t('Event Type: ')}</span>
               <span>{this.dataCategoryName}</span>
             </DropdownLabel>
           }
@@ -284,7 +284,7 @@ class OrganizationStats extends React.Component<Props, State> {
 
           <p>
             {t(
-              'We collect usage metrics on three types of events: errors, transactions and attachments. The charts below reflect events that Sentry have received across your entire organization. You can also find them broken down by project in the table.'
+              'We collect usage metrics on three types of events: errors, transactions, and attachments. The charts below reflect events that Sentry has received across your entire organization. You can also find them broken down by project in the table.'
             )}
           </p>
 

static/app/views/usageStats/usageChart/index.tsx

@@ -27,13 +27,13 @@ import {formatUsageWithUnits, GIGABYTE} from '../utils';
 import {getTooltipFormatter, getXAxisDates, getXAxisLabelInterval} from './utils';
 
 const COLOR_ERRORS = ChartPalette[4][3];
-const COLOR_ERRORS_DROPPED = Color(COLOR_ERRORS).lighten(0.25).string();
+const COLOR_ERRORS_LIGHT = Color(COLOR_ERRORS).lighten(0.25).string();
 
 const COLOR_TRANSACTIONS = ChartPalette[4][2];
-const COLOR_TRANSACTIONS_DROPPED = Color(COLOR_TRANSACTIONS).lighten(0.25).string();
+const COLOR_TRANSACTIONS_LIGHT = Color(COLOR_TRANSACTIONS).lighten(0.25).string();
 
 const COLOR_ATTACHMENTS = ChartPalette[4][1];
-const COLOR_ATTACHMENTS_DROPPED = Color(COLOR_ATTACHMENTS).lighten(0.5).string();
+const COLOR_ATTACHMENTS_LIGHT = Color(COLOR_ATTACHMENTS).lighten(0.5).string();
 const COLOR_PROJECTED = commonTheme.gray200;
 
 export const CHART_OPTIONS_DATACATEGORY: SelectValue<DataCategory>[] = [
@@ -202,14 +202,14 @@ export class UsageChart extends React.Component<Props, State> {
     const {dataCategory} = this.props;
 
     if (dataCategory === DataCategory.ERRORS) {
-      return [COLOR_ERRORS, COLOR_ERRORS_DROPPED, COLOR_PROJECTED];
+      return [COLOR_ERRORS_LIGHT, COLOR_ERRORS, COLOR_PROJECTED];
     }
 
     if (dataCategory === DataCategory.ATTACHMENTS) {
-      return [COLOR_ATTACHMENTS, COLOR_ATTACHMENTS_DROPPED, COLOR_PROJECTED];
+      return [COLOR_ATTACHMENTS_LIGHT, COLOR_ATTACHMENTS, COLOR_PROJECTED];
     }
 
-    return [COLOR_TRANSACTIONS, COLOR_TRANSACTIONS_DROPPED, COLOR_PROJECTED];
+    return [COLOR_TRANSACTIONS_LIGHT, COLOR_TRANSACTIONS, COLOR_PROJECTED];
   }
 
   get chartMetadata(): {

static/app/views/usageStats/usageStatsOrg.tsx

@@ -236,13 +236,13 @@ class UsageStatsOrganization extends AsyncComponent<Props, State> {
       });
 
       // Tally totals for card data
-      const count: any = {
+      const count: Record<'total' | Outcome, number> = {
         total: 0,
-        accepted: 0,
-        dropped: 0,
-        invalid: 0,
-        filtered: 0,
-        rate_limited: 0,
+        [Outcome.ACCEPTED]: 0,
+        [Outcome.FILTERED]: 0,
+        [Outcome.DROPPED]: 0,
+        [Outcome.INVALID]: 0, // Combined with dropped later
+        [Outcome.RATE_LIMITED]: 0, // Combined with dropped later
       };
 
       orgStats.groups.forEach(group => {
@@ -256,19 +256,19 @@ class UsageStatsOrganization extends AsyncComponent<Props, State> {
         count[outcome] += group.totals['sum(quantity)'];
 
         group.series['sum(quantity)'].forEach((stat, i) => {
-          if (outcome === Outcome.RATE_LIMITED || outcome === Outcome.INVALID) {
-            usageStats[i].dropped.total += stat;
+          if (outcome === Outcome.ACCEPTED || outcome === Outcome.FILTERED) {
+            usageStats[i][outcome] += stat;
+            return;
           }
 
-          usageStats[i][outcome] += stat;
+          // Breaking down into reasons for dropped is not needed
+          usageStats[i].dropped.total += stat;
         });
       });
 
-      // Invalid and rate_limited data is dropped
-      count.dropped += count.invalid;
-      count.dropped += count.rate_limited;
-      delete count.invalid;
-      delete count.rate_limited;
+      // Invalid and rate_limited data is combined with dropped
+      count[Outcome.DROPPED] += count[Outcome.INVALID];
+      count[Outcome.DROPPED] += count[Outcome.RATE_LIMITED];
 
       usageStats.forEach(stat => {
         stat.total = stat.accepted + stat.filtered + stat.dropped.total;
@@ -286,17 +286,17 @@ class UsageStatsOrganization extends AsyncComponent<Props, State> {
             getFormatUsageOptions(dataCategory)
           ),
           accepted: formatUsageWithUnits(
-            count.accepted,
+            count[Outcome.ACCEPTED],
             dataCategory,
             getFormatUsageOptions(dataCategory)
           ),
           dropped: formatUsageWithUnits(
-            count.dropped,
+            count[Outcome.DROPPED],
             dataCategory,
             getFormatUsageOptions(dataCategory)
           ),
           filtered: formatUsageWithUnits(
-            count.filtered,
+            count[Outcome.FILTERED],
             dataCategory,
             getFormatUsageOptions(dataCategory)
           ),
@@ -417,7 +417,7 @@ class UsageStatsOrganization extends AsyncComponent<Props, State> {
       <Footer>
         <InlineContainer>
           <FooterDate>
-            <SectionHeading>{t('Date Range')}</SectionHeading>
+            <SectionHeading>{t('Date Range:')}</SectionHeading>
             <span>
               {loading || error ? (
                 <NotAvailable />