fix(insights): fix setting markline to undefined (#72791)

Updates the insights chart component to remove `markLine` from the
incompleteSeries instead of setting it to `undefined`, which can lead to
bugs.

static/app/components/charts/areaChart.tsx

@@ -25,7 +25,7 @@ export function transformToAreaSeries({
     AreaSeries({
       stack: stacked ? 'area' : undefined,
       name: seriesName,
-      data: data?.map(({name, value}) => [name, value]),
+      data: data.map(({name, value}) => [name, value]),
       lineStyle: {
         color: colors?.[i],
         opacity: 1,

static/app/views/starfish/components/chart.spec.tsx

@@ -1,7 +1,20 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
+import BaseChart from 'sentry/components/charts/baseChart';
+import MarkLine from 'sentry/components/charts/components/markLine';
+import type {Series} from 'sentry/types/echarts';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 
+jest.mock('sentry/components/charts/baseChart', () => {
+  return jest.fn().mockImplementation(() => <div />);
+});
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useRef: jest.fn(),
+  };
+});
+
 describe('Chart', function () {
   test('it shows an error panel if an error prop is supplied', function () {
     const parsingError = new Error('Could not parse chart data');
@@ -12,4 +25,35 @@ describe('Chart', function () {
 
     expect(screen.getByTestId('chart-error-panel')).toBeInTheDocument();
   });
+
+  it('does not propagate mark line to the incomplete series', function () {
+    const start = Date.now();
+    const mockedSeries: Series[] = [
+      {
+        seriesName: 'series',
+        data: [
+          {name: start - 120_000, value: 5},
+          {name: start - 90_000, value: 4},
+          {name: start - 60_000, value: 3},
+          {name: start - 30_000, value: 2},
+          {name: start, value: 1},
+        ],
+        markLine: MarkLine({
+          data: [
+            {
+              type: 'average',
+              yAxis: 3,
+            },
+          ],
+        }),
+      },
+    ];
+    render(<Chart data={mockedSeries} loading={false} type={ChartType.LINE} />);
+    expect(jest.mocked(BaseChart).mock.calls[0][0].series?.[0]).toHaveProperty(
+      'markLine'
+    );
+    expect(jest.mocked(BaseChart).mock.calls[0][0].series?.[1]).not.toHaveProperty(
+      'markLine'
+    );
+  });
 });

static/app/views/starfish/components/chart.tsx

@@ -237,9 +237,13 @@ function Chart({
     [series, incompleteSeries] = seriesToShow.reduce(
       (acc, serie, index) => {
         const [trimmed, incomplete] = acc;
+        const {markLine: _, ...incompleteSerie} = serie[1] ?? {};
         return [
           [...trimmed, {...serie[0], color: colors[index]}],
-          [...incomplete, {...serie[1], markLine: undefined}],
+          [
+            ...incomplete,
+            ...(Object.keys(incompleteSerie).length > 0 ? [incompleteSerie] : []),
+          ],
         ];
       },
       [[], []] as [MetricSeries[], MetricSeries[]]