feat(ui): Add release marklines to adoption chart (#27232)

static/app/views/releases/detail/overview/index.tsx

@@ -551,6 +551,8 @@ class ReleaseOverview extends AsyncView<Props> {
                         loading={loading}
                         reloading={reloading}
                         errored={errored}
+                        release={release}
+                        project={project}
                       />
                     </Feature>
                     <ProjectReleaseDetails

static/app/views/releases/detail/overview/releaseAdoption.tsx

@@ -11,14 +11,23 @@ import Placeholder from 'app/components/placeholder';
 import QuestionTooltip from 'app/components/questionTooltip';
 import {IconWarning} from 'app/icons';
 import {t} from 'app/locale';
-import {SessionApiResponse, SessionField} from 'app/types';
+import {
+  ReleaseProject,
+  ReleaseWithHealth,
+  SessionApiResponse,
+  SessionField,
+} from 'app/types';
 import {percent} from 'app/utils';
 import {getAdoptionSeries, getCount} from 'app/utils/sessions';
 import {Theme} from 'app/utils/theme';
 
+import {generateReleaseMarkLines} from '../utils';
+
 import {SectionHeading} from './styles';
 
 type Props = {
+  release: ReleaseWithHealth;
+  project: ReleaseProject;
   releaseSessions: SessionApiResponse | null;
   allSessions: SessionApiResponse | null;
   loading: boolean;
@@ -28,6 +37,8 @@ type Props = {
 };
 
 function ReleaseComparisonChart({
+  release,
+  project,
   releaseSessions,
   allSessions,
   loading,
@@ -42,7 +53,13 @@ function ReleaseComparisonChart({
       return [];
     }
 
+    const sessionsMarkLines = generateReleaseMarkLines(release, project.slug, theme, {
+      hideLabel: true,
+      axisIndex: 0,
+    });
+
     const series = [
+      ...sessionsMarkLines,
       {
         seriesName: t('Sessions Adopted'),
         connectNulls: true,
@@ -58,6 +75,12 @@ function ReleaseComparisonChart({
     ];
 
     if (hasUsers) {
+      const usersMarkLines = generateReleaseMarkLines(release, project.slug, theme, {
+        hideLabel: true,
+        axisIndex: 1,
+      });
+
+      series.push(...usersMarkLines);
       series.push({
         seriesName: t('Users Adopted'),
         connectNulls: true,

static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx

@@ -4,7 +4,6 @@ import {withTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 import round from 'lodash/round';
-import moment from 'moment';
 
 import ErrorPanel from 'app/components/charts/errorPanel';
 import {ChartContainer} from 'app/components/charts/styles';
@@ -33,7 +32,7 @@ import {getCount, getCrashFreeRate, getCrashFreeSeries} from 'app/utils/sessions
 import {Color, Theme} from 'app/utils/theme';
 import {displayCrashFreePercent} from 'app/views/releases/utils';
 
-import {generateReleaseMarkLine, releaseComparisonChartLabels} from '../../utils';
+import {generateReleaseMarkLines, releaseComparisonChartLabels} from '../../utils';
 import {
   fillChartDataFromSessionsResponse,
   initSessionsBreakdownChartData,
@@ -195,35 +194,7 @@ function ReleaseComparisonChart({
       return {};
     }
 
-    const adoptionStages = release.adoptionStages?.[project.slug];
-
-    const markLines = [
-      generateReleaseMarkLine(
-        t('Release Created'),
-        moment(release.dateCreated).valueOf(),
-        theme
-      ),
-    ];
-
-    if (adoptionStages?.adopted) {
-      markLines.push(
-        generateReleaseMarkLine(
-          t('Adopted'),
-          moment(adoptionStages.adopted).valueOf(),
-          theme
-        )
-      );
-    }
-
-    if (adoptionStages?.unadopted) {
-      markLines.push(
-        generateReleaseMarkLine(
-          t('Unadopted'),
-          moment(adoptionStages.unadopted).valueOf(),
-          theme
-        )
-      );
-    }
+    const markLines = generateReleaseMarkLines(release, project.slug, theme);
 
     switch (chartType) {
       case ReleaseComparisonChartType.CRASH_FREE_SESSIONS:

static/app/views/releases/detail/utils.tsx

@@ -1,5 +1,6 @@
 import {Location} from 'history';
 import pick from 'lodash/pick';
+import moment from 'moment';
 
 import MarkLine from 'app/components/charts/components/markLine';
 import {URL_PARAM} from 'app/constants/globalSelectionHeader';
@@ -11,6 +12,7 @@ import {
   GlobalSelection,
   LightWeightOrganization,
   ReleaseComparisonChartType,
+  ReleaseWithHealth,
   Repository,
 } from 'app/types';
 import {getUtcDateString} from 'app/utils/dates';
@@ -155,17 +157,31 @@ export const releaseComparisonChartHelp = {
   [ReleaseComparisonChartType.USER_COUNT]: t('The number of users in a given period.'),
 };
 
-export function generateReleaseMarkLine(title: string, position: number, theme: Theme) {
+type GenerateReleaseMarklineOptions = {
+  hideLabel?: boolean;
+  axisIndex?: number;
+};
+
+function generateReleaseMarkLine(
+  title: string,
+  position: number,
+  theme: Theme,
+  options?: GenerateReleaseMarklineOptions
+) {
+  const {hideLabel, axisIndex} = options || {};
+
   return {
     seriesName: title,
     type: 'line',
     data: [],
+    yAxisIndex: axisIndex ?? undefined,
+    xAxisIndex: axisIndex ?? undefined,
     markLine: MarkLine({
       silent: true,
       lineStyle: {color: theme.gray300, type: 'solid'},
       label: {
         position: 'insideEndBottom',
-        formatter: title,
+        formatter: hideLabel ? '' : title,
         font: 'Rubik',
         fontSize: 11,
       } as any, // TODO(ts): weird echart types,
@@ -177,3 +193,45 @@ export function generateReleaseMarkLine(title: string, position: number, theme:
     }),
   };
 }
+
+export function generateReleaseMarkLines(
+  release: ReleaseWithHealth,
+  projectSlug: string,
+  theme: Theme,
+  options?: GenerateReleaseMarklineOptions
+) {
+  const adoptionStages = release.adoptionStages?.[projectSlug];
+
+  const markLines = [
+    generateReleaseMarkLine(
+      t('Release Created'),
+      moment(release.dateCreated).valueOf(),
+      theme,
+      options
+    ),
+  ];
+
+  if (adoptionStages?.adopted) {
+    markLines.push(
+      generateReleaseMarkLine(
+        t('Adopted'),
+        moment(adoptionStages.adopted).valueOf(),
+        theme,
+        options
+      )
+    );
+  }
+
+  if (adoptionStages?.unadopted) {
+    markLines.push(
+      generateReleaseMarkLine(
+        t('Unadopted'),
+        moment(adoptionStages.unadopted).valueOf(),
+        theme,
+        options
+      )
+    );
+  }
+
+  return markLines;
+}