feat(releases): Add separate y-axis for release bubbles (#91813)

By default, release bubbles will use the default y-axis. This generally
works except when the chart does not start at "y=0" as the bubbles are
hard-coded to show below "y=0". With this change, the
`useReleaseBubbles` hook returns a yaxis object that the hook consumer
can use to pass to echarts -- you will also need to configure
`yaxisIndex` to tell the release bubbles series which yaxis to use. This
works by adding a new yaxis to decouple release bubbles series from the
default yaxis. This new yaxis is configured to be hidden.

This also works if you ignore the returned y-axis object and don't
specify a `yaxisIndex` since it will use the default yaxis (assuming it
starts at 0).

Unblocks #90247

Author: billyvg

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.stories.tsx

@@ -938,6 +938,19 @@ export default storyBook('TimeSeriesWidgetVisualization', (story, APIReference)
             />
           </MediumWidget>
         </SideBySide>
+        <SideBySide>
+          <MediumWidget>
+            <TimeSeriesWidgetVisualization
+              plottables={[
+                new Line(sampleThroughputTimeSeries),
+                new Line(sampleDurationTimeSeries),
+                new Line(sampleDurationTimeSeriesP50),
+              ]}
+              releases={releases}
+              showReleaseAs="bubble"
+            />
+          </MediumWidget>
+        </SideBySide>
       </Fragment>
     );
   });

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -133,82 +133,6 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
     organization.features.includes('release-bubbles-ui') &&
     props.showReleaseAs === 'bubble';
 
-  // find min/max timestamp of *all* timeSeries
-  const allBoundaries = props.plottables
-    .flatMap(plottable => [plottable.start, plottable.end])
-    .toSorted();
-  const earliestTimeStamp = allBoundaries.at(0);
-  const latestTimeStamp = allBoundaries.at(-1);
-
-  const {
-    connectReleaseBubbleChartRef,
-    releaseBubbleSeries,
-    releaseBubbleXAxis,
-    releaseBubbleGrid,
-  } = useReleaseBubbles({
-    chartId: props.id,
-    minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
-    maxTime: latestTimeStamp ? new Date(latestTimeStamp).getTime() : undefined,
-    releases: hasReleaseBubbles
-      ? props.releases?.map(({timestamp, version}) => ({date: timestamp, version}))
-      : [],
-  });
-
-  const releaseSeries = props.releases
-    ? hasReleaseBubbles
-      ? releaseBubbleSeries
-      : ReleaseSeries(
-          theme,
-          props.releases,
-          function onReleaseClick(release: Release) {
-            if (organization.features.includes('release-bubbles-ui')) {
-              navigate(
-                makeReleaseDrawerPathname({
-                  location,
-                  release: release.version,
-                  source: 'time-series-widget',
-                })
-              );
-              return;
-            }
-            navigate(
-              makeReleasesPathname({
-                organization,
-                path: `/${encodeURIComponent(release.version)}/`,
-              })
-            );
-          },
-          utc ?? false
-        )
-    : null;
-
-  const hasReleaseBubblesSeries = hasReleaseBubbles && releaseSeries;
-
-  const handleChartRef = useCallback(
-    (e: ReactEchartsRef | null) => {
-      if (!e?.getEchartsInstance) {
-        return;
-      }
-
-      for (const plottable of props.plottables) {
-        plottable.handleChartRef?.(e);
-      }
-
-      const echartsInstance = e.getEchartsInstance();
-      registerWithWidgetSyncContext(echartsInstance);
-
-      if (hasReleaseBubblesSeries) {
-        connectReleaseBubbleChartRef(e);
-      }
-    },
-    [
-      hasReleaseBubblesSeries,
-      connectReleaseBubbleChartRef,
-      registerWithWidgetSyncContext,
-      props.plottables,
-    ]
-  );
-
   const {onDataZoom, ...chartZoomProps} = useChartZoom({
     saveOnZoom: true,
   });
@@ -431,6 +355,88 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
 
   const yAxes: YAXisComponentOption[] = [leftYAxis, rightYAxis].filter(axis => !!axis);
 
+  // find min/max timestamp of *all* timeSeries
+  const allBoundaries = props.plottables
+    .flatMap(plottable => [plottable.start, plottable.end])
+    .toSorted();
+  const earliestTimeStamp = allBoundaries.at(0);
+  const latestTimeStamp = allBoundaries.at(-1);
+
+  const {
+    connectReleaseBubbleChartRef,
+    releaseBubbleSeries,
+    releaseBubbleXAxis,
+    releaseBubbleGrid,
+    releaseBubbleYAxis,
+  } = useReleaseBubbles({
+    chartId: props.id,
+    minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
+    maxTime: latestTimeStamp ? new Date(latestTimeStamp).getTime() : undefined,
+    releases: hasReleaseBubbles
+      ? props.releases?.map(({timestamp, version}) => ({date: timestamp, version}))
+      : [],
+    yAxisIndex: yAxes.length,
+  });
+
+  if (releaseBubbleYAxis) {
+    yAxes.push(releaseBubbleYAxis);
+  }
+
+  const releaseSeries = props.releases
+    ? hasReleaseBubbles
+      ? releaseBubbleSeries
+      : ReleaseSeries(
+          theme,
+          props.releases,
+          function onReleaseClick(release: Release) {
+            if (organization.features.includes('release-bubbles-ui')) {
+              navigate(
+                makeReleaseDrawerPathname({
+                  location,
+                  release: release.version,
+                  source: 'time-series-widget',
+                })
+              );
+              return;
+            }
+            navigate(
+              makeReleasesPathname({
+                organization,
+                path: `/${encodeURIComponent(release.version)}/`,
+              })
+            );
+          },
+          utc ?? false
+        )
+    : null;
+
+  const hasReleaseBubblesSeries = hasReleaseBubbles && releaseSeries;
+
+  const handleChartRef = useCallback(
+    (e: ReactEchartsRef | null) => {
+      if (!e?.getEchartsInstance) {
+        return;
+      }
+
+      for (const plottable of props.plottables) {
+        plottable.handleChartRef?.(e);
+      }
+
+      const echartsInstance = e.getEchartsInstance();
+      registerWithWidgetSyncContext(echartsInstance);
+
+      if (hasReleaseBubblesSeries) {
+        connectReleaseBubbleChartRef(e);
+      }
+    },
+    [
+      hasReleaseBubblesSeries,
+      connectReleaseBubbleChartRef,
+      registerWithWidgetSyncContext,
+      props.plottables,
+    ]
+  );
+
   const showXAxisProp = props.showXAxis ?? 'auto';
   const showXAxis = showXAxisProp === 'auto';
 

static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx

@@ -69,6 +69,7 @@ interface ReleaseBubbleSeriesProps {
   };
   releases: ReleaseMetaBasic[];
   theme: Theme;
+  yAxisIndex?: number;
 }
 
 /**
@@ -82,6 +83,7 @@ function ReleaseBubbleSeries({
   bubblePadding,
   dateFormatOptions,
   alignInMiddle,
+  yAxisIndex,
 }: ReleaseBubbleSeriesProps): CustomSeriesOption | null {
   const totalReleases = buckets.reduce((acc, {releases}) => acc + releases.length, 0);
   const avgReleases = totalReleases / buckets.length;
@@ -190,6 +192,7 @@ function ReleaseBubbleSeries({
   return {
     id: BUBBLE_SERIES_ID,
     type: 'custom',
+    yAxisIndex,
     renderItem: renderReleaseBubble,
     name: t('Releases'),
     data,
@@ -286,6 +289,10 @@ interface UseReleaseBubblesParams {
    * List of releases that will be grouped
    */
   releases?: ReleaseMetaBasic[];
+  /**
+   * The index of the y-axis to use for the release bubbles
+   */
+  yAxisIndex?: number;
 }
 
 export function useReleaseBubbles({
@@ -297,6 +304,7 @@ export function useReleaseBubbles({
   environments,
   projects,
   legendSelected,
+  yAxisIndex,
   alignInMiddle = false,
   bubbleSize = 4,
   bubblePadding = 2,
@@ -342,6 +350,17 @@ export function useReleaseBubbles({
     }),
     [bubbleSize, totalBubblePaddingY]
   );
+
+  const releaseBubbleYAxis = useMemo(
+    () => ({
+      type: 'value' as const,
+      min: 0,
+      max: 100,
+      show: false,
+    }),
+    []
+  );
+
   const releaseBubbleGrid = useMemo(
     () => ({
       // Moves bottom of grid "up" `bubbleSize` pixels so that bubbles are
@@ -600,6 +619,7 @@ export function useReleaseBubbles({
       ReleaseBubbleSeries: null,
       releaseBubbleXAxis: {},
       releaseBubbleGrid: {},
+      releaseBubbleYAxis: null,
     };
   }
 
@@ -610,6 +630,7 @@ export function useReleaseBubbles({
      * Series to append to a chart's existing `series`
      */
     releaseBubbleSeries: ReleaseBubbleSeries({
+      yAxisIndex,
       alignInMiddle,
       buckets,
       bubbleSize,
@@ -622,6 +643,8 @@ export function useReleaseBubbles({
       },
     }),
 
+    releaseBubbleYAxis,
+
     /**
      * ECharts xAxis configuration. Spread/override charts `xAxis` prop.
      *