feat(ui): Add tooltip to release marklines (#27307)

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

@@ -26,7 +26,7 @@ import {getAdoptionSeries, getCount} from 'app/utils/sessions';
 import {Theme} from 'app/utils/theme';
 
 import {getReleaseBounds, getReleaseParams} from '../../utils';
-import {generateReleaseMarkLines} from '../utils';
+import {generateReleaseMarkLines, releaseMarkLinesLabels} from '../utils';
 
 import {SectionHeading} from './styles';
 
@@ -178,7 +178,8 @@ function ReleaseComparisonChart({
     tooltip: {
       trigger: 'axis' as const,
       truncate: 80,
-      valueFormatter: (value: number) => `${value}%`,
+      valueFormatter: (value: number, label?: string) =>
+        label && Object.values(releaseMarkLinesLabels).includes(label) ? '' : `${value}%`,
     },
   };
 

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

@@ -15,7 +15,11 @@ import {defined} from 'app/utils';
 import {Theme} from 'app/utils/theme';
 import {displayCrashFreePercent} from 'app/views/releases/utils';
 
-import {releaseComparisonChartHelp, releaseComparisonChartLabels} from '../../utils';
+import {
+  releaseComparisonChartHelp,
+  releaseComparisonChartLabels,
+  releaseMarkLinesLabels,
+} from '../../utils';
 
 type Props = {
   theme: Theme;
@@ -32,7 +36,11 @@ type Props = {
 } & WithRouterProps;
 
 class SessionsChart extends React.Component<Props> {
-  formatTooltipValue = (value: string | number | null) => {
+  formatTooltipValue = (value: string | number | null, label?: string) => {
+    if (label && Object.values(releaseMarkLinesLabels).includes(label)) {
+      return '';
+    }
+
     const {chartType} = this.props;
     if (value === null) {
       return '\u2015';

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

@@ -173,9 +173,10 @@ function generateReleaseMarkLine(
   return {
     seriesName: title,
     type: 'line',
-    data: [],
+    data: [{name: position, value: 0}],
     yAxisIndex: axisIndex ?? undefined,
     xAxisIndex: axisIndex ?? undefined,
+    color: theme.gray300,
     markLine: MarkLine({
       silent: true,
       lineStyle: {color: theme.gray300, type: 'solid'},
@@ -194,6 +195,12 @@ function generateReleaseMarkLine(
   };
 }
 
+export const releaseMarkLinesLabels = {
+  created: t('Release Created'),
+  adopted: t('Adopted'),
+  unadopted: t('Unadopted'),
+};
+
 export function generateReleaseMarkLines(
   release: ReleaseWithHealth,
   projectSlug: string,
@@ -204,7 +211,7 @@ export function generateReleaseMarkLines(
 
   const markLines = [
     generateReleaseMarkLine(
-      t('Release Created'),
+      releaseMarkLinesLabels.created,
       moment(release.dateCreated).valueOf(),
       theme,
       options
@@ -214,7 +221,7 @@ export function generateReleaseMarkLines(
   if (adoptionStages?.adopted) {
     markLines.push(
       generateReleaseMarkLine(
-        t('Adopted'),
+        releaseMarkLinesLabels.adopted,
         moment(adoptionStages.adopted).valueOf(),
         theme,
         options
@@ -225,7 +232,7 @@ export function generateReleaseMarkLines(
   if (adoptionStages?.unadopted) {
     markLines.push(
       generateReleaseMarkLine(
-        t('Unadopted'),
+        releaseMarkLinesLabels.unadopted,
         moment(adoptionStages.unadopted).valueOf(),
         theme,
         options