feat(stats): Display subseries in tooltip

static/app/views/organizationStats/usageStatsOrg.tsx

@@ -4,9 +4,11 @@ import type {WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import isEqual from 'lodash/isEqual';
+import startCase from 'lodash/startCase';
 import moment from 'moment';
 
 import {navigateTo} from 'sentry/actionCreators/navigation';
+import type {TooltipSubLabel} from 'sentry/components/charts/components/tooltip';
 import OptionSelector from 'sentry/components/charts/optionSelector';
 import {InlineContainer, SectionHeading} from 'sentry/components/charts/styles';
 import type {DateTimeObject} from 'sentry/components/charts/utils';
@@ -115,7 +117,7 @@ class UsageStatsOrganization<
     return {
       ...queryDatetime,
       interval: getSeriesApiInterval(dataDatetime),
-      groupBy: ['category', 'outcome'],
+      groupBy: ['category', 'outcome', 'reason'],
       project: projectIds,
       field: ['sum(quantity)'],
     };
@@ -136,6 +138,7 @@ class UsageStatsOrganization<
     chartDateTimezoneDisplay: string;
     chartDateUtc: boolean;
     chartStats: ChartStats;
+    chartSubLabels: TooltipSubLabel[];
     chartTransform: ChartDataTransform;
     dataError?: Error;
   } {
@@ -232,6 +235,7 @@ class UsageStatsOrganization<
       chartDateEnd,
       chartDateUtc,
       chartTransform,
+      chartSubLabels,
     } = this.chartData;
 
     const hasError = error || !!dataError;
@@ -249,6 +253,9 @@ class UsageStatsOrganization<
       usageDateShowUtc: chartDateUtc,
       usageDateInterval: chartDateInterval,
       usageStats: chartStats,
+      chartTooltip: {
+        subLabels: chartSubLabels,
+      },
     } as UsageChartProps;
 
     return chartProps;
@@ -318,6 +325,7 @@ class UsageStatsOrganization<
       total?: string;
     };
     chartStats: ChartStats;
+    chartSubLabels: TooltipSubLabel[];
     dataError?: Error;
   } {
     const cardStats = {
@@ -332,9 +340,10 @@ class UsageStatsOrganization<
       projected: [],
       filtered: [],
     };
+    const chartSubLabels: TooltipSubLabel[] = [];
 
     if (!orgStats) {
-      return {cardStats, chartStats};
+      return {cardStats, chartStats, chartSubLabels};
     }
 
     try {
@@ -383,20 +392,64 @@ class UsageStatsOrganization<
         count[outcome] += group.totals['sum(quantity)'];
 
         group.series['sum(quantity)'].forEach((stat, i) => {
-          switch (outcome) {
-            case Outcome.ACCEPTED:
-            case Outcome.FILTERED:
-              usageStats[i][outcome] += stat;
-              return;
-            case Outcome.DROPPED:
-            case Outcome.RATE_LIMITED:
-            case Outcome.CARDINALITY_LIMITED:
-            case Outcome.INVALID:
-              usageStats[i].dropped.total += stat;
-              // TODO: add client discards to dropped?
-              return;
-            default:
+          const dataObject = {
+            name: orgStats.intervals[i],
+            value: stat,
+          };
+
+          const reason = String(group.by.reason ?? '');
+          const label = startCase(reason.replace(/-|_/g, ' '));
+          const existingSubLabel = chartSubLabels.find(
+            subLabel => subLabel.label === label
+          );
+
+          if (outcome === Outcome.FILTERED) {
+            usageStats[i][outcome] += stat;
+
+            if (group.by.outcome === Outcome.FILTERED) {
+              if (existingSubLabel) {
+                existingSubLabel.data.push({
+                  ...dataObject,
+                  value: dataObject.value,
+                });
+                return;
+              }
+
+              chartSubLabels.push({
+                parentLabel: t('Filtered'),
+                label,
+                data: [dataObject],
+              });
+            }
+            return;
+          }
+
+          if (outcome === Outcome.ACCEPTED) {
+            usageStats[i][outcome] += stat;
+            return;
+          }
+
+          if (
+            outcome === Outcome.DROPPED ||
+            outcome === Outcome.RATE_LIMITED ||
+            outcome === Outcome.CARDINALITY_LIMITED ||
+            outcome === Outcome.INVALID
+          ) {
+            usageStats[i].dropped.total += stat;
+
+            if (existingSubLabel) {
+              existingSubLabel.data.push({
+                ...dataObject,
+                value: dataObject.value,
+              });
               return;
+            }
+
+            chartSubLabels.push({
+              parentLabel: t('Dropped'),
+              label,
+              data: [dataObject],
+            });
           }
         });
       });
@@ -441,6 +494,7 @@ class UsageStatsOrganization<
           ),
         },
         chartStats,
+        chartSubLabels,
       };
     } catch (err) {
       Sentry.withScope(scope => {
@@ -452,6 +506,7 @@ class UsageStatsOrganization<
       return {
         cardStats,
         chartStats,
+        chartSubLabels,
         dataError: new Error('Failed to parse stats data'),
       };
     }