fix(chartcuterie): Added Visual Map Field for Endpoint Regression (#7…

…0477)

There is mismatch in the way we build the EChart Options object in our
FE code and how Chartcuterie handles it.

In our FE
[code,](https://github.com/getsentry/sentry/blob/master/static/app/components/events/eventStatisticalDetector/breakpointChartOptions.tsx#L89-L104),
we wrap the visualMap object in an extra option, which allows us to
maintain the hierarchy for styling. However, Chartcuterie cannot handle
the wrapped object, so when we pass the service the options, we unwrap
it.

I also created a modifier option to modify chart options specifically
for slack and removed the icon from the legend icon from there.


![example2](https://github.com/getsentry/sentry/assets/33237075/2ecdf0db-3abd-4245-a426-b371c6a2fd98)

static/app/chartcuterie/performance.tsx

@@ -1,3 +1,4 @@
+import type {LineChartProps} from 'sentry/components/charts/lineChart';
 import {transformToLineSeries} from 'sentry/components/charts/lineChart';
 import getBreakpointChartOptionsFromData, {
   type EventBreakpointChartData,
@@ -10,17 +11,31 @@ import {ChartType} from './types';
 
 export const performanceCharts: RenderDescriptor<ChartType>[] = [];
 
+function modifyOptionsForSlack(options: Omit<LineChartProps, 'series'>) {
+  options.legend = options.legend || {};
+  options.legend.icon = 'none';
+
+  return {
+    ...options,
+    grid: slackChartDefaults.grid,
+    visualMap: options.options?.visualMap,
+  };
+}
+
 performanceCharts.push({
   key: ChartType.SLACK_PERFORMANCE_ENDPOINT_REGRESSION,
   getOption: (data: EventBreakpointChartData) => {
     const {chartOptions, series} = getBreakpointChartOptionsFromData(data, theme);
     const transformedSeries = transformToLineSeries({series});
+    const modifiedOptions = modifyOptionsForSlack(chartOptions);
 
     return {
-      ...chartOptions,
+      ...modifiedOptions,
+
       backgroundColor: theme.background,
       series: transformedSeries,
       grid: slackChartDefaults.grid,
+      visualMap: modifiedOptions.options?.visualMap,
     };
   },
   ...slackChartSize,