feat(ddm): Limit tooltip results (#62333)

![CleanShot 2023-12-27 at 18 40
00](https://github.com/getsentry/sentry/assets/9060071/2ee0997a-2014-4fdb-a3ba-d0775c6959dc)

Closes https://github.com/getsentry/sentry/issues/62332

static/app/components/charts/components/tooltip.tsx

@@ -111,6 +111,10 @@ export type FormatterOptions = Pick<
      * If true seconds will be added to the Axis label time format
      */
     addSecondsToTimeFormat?: boolean;
+    /**
+     * Limit the number of series rendered in the tooltip and display "+X more".
+     */
+    limit?: number;
     /**
      * Array containing data that is used to display indented sublabels.
      */
@@ -130,6 +134,7 @@ export function getFormatter({
   markerFormatter = defaultMarkerFormatter,
   subLabels = [],
   addSecondsToTimeFormat = false,
+  limit,
 }: FormatterOptions): TooltipComponentFormatterCallback<any> {
   const getFilter = (seriesParam: any) => {
     // Series do not necessarily have `data` defined, e.g. releases don't have `data`, but rather
@@ -191,7 +196,7 @@ export function getFormatter({
       ].join('');
     }
 
-    const seriesParams = toArray(seriesParamsOrParam);
+    let seriesParams = toArray(seriesParamsOrParam);
 
     // If axis, timestamp comes from axis, otherwise for a single item it is defined in the data attribute.
     // The data attribute is usually a list of [name, value] but can also be an object of {name, value} when
@@ -212,6 +217,18 @@ export function getFormatter({
         seriesParamsOrParam
       );
 
+    if (limit) {
+      const originalLength = seriesParams.length;
+      seriesParams = seriesParams.sort((a, b) => b.value[1] - a.value[1]).slice(0, limit);
+      if (originalLength > limit) {
+        seriesParams.push({
+          seriesName: `+${originalLength - limit} more`,
+          value: '',
+          color: 'transparent',
+        });
+      }
+    }
+
     const {series, total} = seriesParams.filter(getFilter).reduce(
       (acc, serie) => {
         const formattedLabel = nameFormatter(

static/app/views/ddm/chart.tsx

@@ -77,6 +77,7 @@ export function MetricChart({
     bucketSize,
     showTimeInTooltip: true,
     addSecondsToTimeFormat: isSubMinuteBucket,
+    limit: 10,
   };
   const displayFogOfWar = operation && ['sum', 'count'].includes(operation);