feat(stats): Display subseries in tooltip

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

@@ -118,7 +118,7 @@ export const CHART_OPTIONS_DATA_TRANSFORM: SelectValue<ChartDataTransform>[] = [
   },
 ];
 
-const enum SeriesTypes {
+export const enum SeriesTypes {
   ACCEPTED = 'Accepted',
   DROPPED = 'Dropped',
   PROJECTED = 'Projected',

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';
@@ -30,7 +32,11 @@ import {
 } from './usageChart/utils';
 import type {UsageSeries, UsageStat} from './types';
 import type {ChartStats, UsageChartProps} from './usageChart';
-import UsageChart, {CHART_OPTIONS_DATA_TRANSFORM, ChartDataTransform} from './usageChart';
+import UsageChart, {
+  CHART_OPTIONS_DATA_TRANSFORM,
+  ChartDataTransform,
+  SeriesTypes,
+} from './usageChart';
 import UsageStatsPerMin from './usageStatsPerMin';
 import {formatUsageWithUnits, getFormatUsageOptions, isDisplayUtc} from './utils';
 
@@ -115,7 +121,7 @@ class UsageStatsOrganization<
     return {
       ...queryDatetime,
       interval: getSeriesApiInterval(dataDatetime),
-      groupBy: ['category', 'outcome'],
+      groupBy: ['category', 'outcome', 'reason'],
       project: projectIds,
       field: ['sum(quantity)'],
     };
@@ -136,6 +142,7 @@ class UsageStatsOrganization<
     chartDateTimezoneDisplay: string;
     chartDateUtc: boolean;
     chartStats: ChartStats;
+    chartSubLabels: TooltipSubLabel[];
     chartTransform: ChartDataTransform;
     dataError?: Error;
   } {
@@ -232,6 +239,7 @@ class UsageStatsOrganization<
       chartDateEnd,
       chartDateUtc,
       chartTransform,
+      chartSubLabels,
     } = this.chartData;
 
     const hasError = error || !!dataError;
@@ -249,6 +257,9 @@ class UsageStatsOrganization<
       usageDateShowUtc: chartDateUtc,
       usageDateInterval: chartDateInterval,
       usageStats: chartStats,
+      chartTooltip: {
+        subLabels: chartSubLabels,
+      },
     } as UsageChartProps;
 
     return chartProps;
@@ -318,6 +329,7 @@ class UsageStatsOrganization<
       total?: string;
     };
     chartStats: ChartStats;
+    chartSubLabels: TooltipSubLabel[];
     dataError?: Error;
   } {
     const cardStats = {
@@ -332,9 +344,10 @@ class UsageStatsOrganization<
       projected: [],
       filtered: [],
     };
+    const chartSubLabels: TooltipSubLabel[] = [];
 
     if (!orgStats) {
-      return {cardStats, chartStats};
+      return {cardStats, chartStats, chartSubLabels};
     }
 
     try {
@@ -383,20 +396,63 @@ 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?
+          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 (existingSubLabel) {
+              existingSubLabel.data.push({
+                ...dataObject,
+                value: dataObject.value,
+              });
               return;
-            default:
+            }
+
+            chartSubLabels.push({
+              parentLabel: SeriesTypes.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: SeriesTypes.DROPPED,
+              label,
+              data: [dataObject],
+            });
           }
         });
       });
@@ -441,6 +497,7 @@ class UsageStatsOrganization<
           ),
         },
         chartStats,
+        chartSubLabels,
       };
     } catch (err) {
       Sentry.withScope(scope => {
@@ -452,6 +509,7 @@ class UsageStatsOrganization<
       return {
         cardStats,
         chartStats,
+        chartSubLabels,
         dataError: new Error('Failed to parse stats data'),
       };
     }