feat(issues): Add markline for total/matching chart (#90708)

this pr adds a markline to the chart for if there's a search so the
chart shows total/matching events. will make it easier to parse the
charts in sections like Related Issues

before: 
<img width="173" alt="Screenshot 2025-04-30 at 3 31 18 PM"
src="https://github.com/user-attachments/assets/e1a40cde-a2a0-47c1-8dd0-fef362eff9d8"
/>


after: 
<img width="186" alt="Screenshot 2025-04-30 at 3 31 32 PM"
src="https://github.com/user-attachments/assets/84167775-3ad5-41a7-9338-e9dae955efb2"
/>

Author: roggenkemper

static/app/components/charts/groupStatusChart.tsx

@@ -55,11 +55,45 @@ function GroupStatusChart({
 
     const formattedMarkLine = formatAbbreviatedNumber(max);
 
+    const marklineColor = isChonkTheme(theme)
+      ? theme.colors.content.muted
+      : theme.gray200;
+    const marklineLabelColor = isChonkTheme(theme)
+      ? theme.colors.content.primary
+      : theme.gray300;
+    const chartColor = isChonkTheme(theme) ? theme.colors.content.primary : theme.gray300;
+
+    const markLine = MarkLine({
+      silent: true,
+      lineStyle: {
+        color: marklineColor,
+        type: [4, 3], // Sets line type to "dashed" with 4 length and 3 gap
+        opacity: 0.6,
+        cap: 'round', // Rounded edges for the dashes
+      },
+      data: [
+        {
+          type: 'max',
+        },
+      ],
+      animation: false,
+      label: {
+        show: true,
+        position: 'end',
+        opacity: 1,
+        color: marklineLabelColor,
+        fontFamily: 'Rubik',
+        fontSize: 10,
+        formatter: `${formattedMarkLine}`,
+      },
+    });
+
     if (showSecondaryPoints && secondaryStats?.length) {
       const series: Series[] = [
         {
           seriesName: t('Total Events'),
           data: secondaryStats.map(asChartPoint),
+          markLine: showMarkLine && max > 0 ? markLine : undefined,
         },
         {
           seriesName: t('Matching Events'),
@@ -70,45 +104,11 @@ function GroupStatusChart({
       return {colors: undefined, emphasisColors: undefined, series};
     }
 
-    const marklineColor = isChonkTheme(theme)
-      ? theme.colors.content.muted
-      : theme.gray200;
-    const marklineLabelColor = isChonkTheme(theme)
-      ? theme.colors.content.primary
-      : theme.gray300;
-    const chartColor = isChonkTheme(theme) ? theme.colors.content.primary : theme.gray300;
-
     const series: Series[] = [
       {
         seriesName: t('Events'),
         data: stats.map(asChartPoint),
-        markLine:
-          showMarkLine && max > 0
-            ? MarkLine({
-                silent: true,
-                lineStyle: {
-                  color: marklineColor,
-                  type: [4, 3], // Sets line type to "dashed" with 4 length and 3 gap
-                  opacity: 0.6,
-                  cap: 'round', // Rounded edges for the dashes
-                },
-                data: [
-                  {
-                    type: 'max',
-                  },
-                ],
-                animation: false,
-                label: {
-                  show: true,
-                  position: 'end',
-                  opacity: 1,
-                  color: marklineLabelColor,
-                  fontFamily: 'Rubik',
-                  fontSize: 10,
-                  formatter: `${formattedMarkLine}`,
-                },
-              })
-            : undefined,
+        markLine: showMarkLine && max > 0 ? markLine : undefined,
       },
     ];