fix(stat-detectors): Improve chart highlighting (#57729)

Uses the fixed height to hardcode where to lay the baselines and uses
visualMap to separate the line into segments

static/app/components/charts/baseChart.tsx

@@ -350,6 +350,7 @@ function BaseChartUnwrapped({
   transformSinglePointToLine = false,
   onChartReady = () => {},
   'data-test-id': dataTestId,
+  visualMap,
 }: BaseChartProps) {
   const theme = useTheme();
 
@@ -512,6 +513,7 @@ function BaseChartUnwrapped({
     dataZoom,
     graphic,
     aria,
+    visualMap,
   };
 
   const chartStyles = {

static/app/components/events/eventStatisticalDetector/lineChart.tsx

@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 
 import ChartZoom from 'sentry/components/charts/chartZoom';
+import VisualMap from 'sentry/components/charts/components/visualMap';
 import {
   LineChart as EchartsLineChart,
   LineChartProps,
@@ -15,14 +16,8 @@ import {
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
 import useRouter from 'sentry/utils/useRouter';
 import {transformEventStats} from 'sentry/views/performance/trends/chart';
-import {
-  NormalizedTrendsTransaction,
-  TrendChangeType,
-} from 'sentry/views/performance/trends/types';
-import {
-  transformEventStatsSmoothed,
-  trendToColor,
-} from 'sentry/views/performance/trends/utils';
+import {NormalizedTrendsTransaction} from 'sentry/views/performance/trends/types';
+import {transformEventStatsSmoothed} from 'sentry/views/performance/trends/utils';
 import {getIntervalLine} from 'sentry/views/performance/utils';
 
 interface ChartProps {
@@ -58,7 +53,6 @@ function LineChart({statsData, evidenceData, start, end, chartLabel}: ChartProps
     ? smoothedResults.map(values => {
         return {
           ...values,
-          color: trendToColor[TrendChangeType.REGRESSION].default,
           lineStyle: {
             opacity: 1,
           },
@@ -120,6 +114,26 @@ function LineChart({statsData, evidenceData, start, end, chartLabel}: ChartProps
               top: '40px',
               bottom: '0px',
             }}
+            visualMap={VisualMap({
+              show: false,
+              type: 'piecewise',
+              selectedMode: false,
+              dimension: 0,
+              pieces: [
+                {
+                  gte: 0,
+                  lt: evidenceData?.breakpoint ? evidenceData.breakpoint * 1000 : 0,
+                  color: theme.gray500,
+                },
+                {
+                  gte: evidenceData?.breakpoint ? evidenceData.breakpoint * 1000 : 0,
+                  color: theme.red300,
+                },
+              ],
+            })}
+            xAxis={{
+              type: 'time',
+            }}
           />
         );
       }}

static/app/views/performance/utils.tsx

@@ -3,6 +3,7 @@ import {Theme} from '@emotion/react';
 import {Location} from 'history';
 
 import MarkArea from 'sentry/components/charts/components/markArea';
+import MarkLine from 'sentry/components/charts/components/markLine';
 import {LineChartSeries} from 'sentry/components/charts/lineChart';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {backend, frontend, mobile} from 'sentry/data/platformCategories';
@@ -48,6 +49,9 @@ const UNPARAMETRIZED_TRANSACTION = '<< unparametrized >>'; // Old spelling. Can
 export const EXCLUDE_METRICS_UNPARAM_CONDITIONS = `(!transaction:"${UNPARAMETERIZED_TRANSACTION}" AND !transaction:"${UNPARAMETRIZED_TRANSACTION}")`;
 const SHOW_UNPARAM_BANNER = 'showUnparameterizedBanner';
 
+const DEFAULT_CHART_HEIGHT = 200;
+const X_AXIS_MARGIN_OFFSET = 23;
+
 export enum DiscoverQueryPageSource {
   PERFORMANCE = 'performance',
   DISCOVER = 'discover',
@@ -581,6 +585,50 @@ export function getIntervalLine(
       }),
       data: [],
     });
+
+    additionalLineSeries.push({
+      seriesName: 'Baseline Axis Line',
+      type: 'line',
+      markLine:
+        MarkLine({
+          silent: true,
+          label: {
+            show: false,
+          },
+          lineStyle: {color: theme.green400, type: 'solid', width: 4},
+          data: [
+            // The line needs to be hard-coded to a pixel coordinate because
+            // the lowest y-value is dynamic and 'min' doesn't work here
+            [
+              {xAxis: 'min', y: DEFAULT_CHART_HEIGHT - X_AXIS_MARGIN_OFFSET},
+              {xAxis: breakpoint, y: DEFAULT_CHART_HEIGHT - X_AXIS_MARGIN_OFFSET},
+            ],
+          ],
+        }) ?? {},
+      data: [],
+    });
+
+    additionalLineSeries.push({
+      seriesName: 'Regression Axis Line',
+      type: 'line',
+      markLine:
+        MarkLine({
+          silent: true,
+          label: {
+            show: false,
+          },
+          lineStyle: {color: theme.red300, type: 'solid', width: 4},
+          data: [
+            // The line needs to be hard-coded to a pixel coordinate because
+            // the lowest y-value is dynamic and 'min' doesn't work here
+            [
+              {xAxis: breakpoint, y: DEFAULT_CHART_HEIGHT - X_AXIS_MARGIN_OFFSET},
+              {xAxis: 'max', y: DEFAULT_CHART_HEIGHT - X_AXIS_MARGIN_OFFSET},
+            ],
+          ],
+        }) ?? {},
+      data: [],
+    });
   }
 
   return additionalLineSeries;