feat(ui): Change Alert chart from Line Chart to Area Chart [WIP] (#31546)

* feat(ui): Change Alert chart from Line Chart to Area Chart [WIP]

Change the Alert Chart on the Alert Details page from a Line Chart to an Area Chart. Also move the marklines to the top layer.

FIXES WOR-1560

* add disabling for area chart emphasis

* remove emphasis since alreay in LineSeries

static/app/views/alerts/rules/details/metricChart.tsx

@@ -10,11 +10,11 @@ import momentTimezone from 'moment-timezone';
 import {Client} from 'sentry/api';
 import Feature from 'sentry/components/acl/feature';
 import Button from 'sentry/components/button';
+import AreaChart, {AreaChartSeries} from 'sentry/components/charts/areaChart';
 import ChartZoom from 'sentry/components/charts/chartZoom';
 import MarkArea from 'sentry/components/charts/components/markArea';
 import MarkLine from 'sentry/components/charts/components/markLine';
 import EventsRequest from 'sentry/components/charts/eventsRequest';
-import LineChart, {LineChartSeries} from 'sentry/components/charts/lineChart';
 import LineSeries from 'sentry/components/charts/series/lineSeries';
 import SessionsRequest from 'sentry/components/charts/sessionsRequest';
 import {HeaderTitleLegend, SectionHeading} from 'sentry/components/charts/styles';
@@ -26,6 +26,7 @@ import {
 import {Panel, PanelBody, PanelFooter} from 'sentry/components/panels';
 import Placeholder from 'sentry/components/placeholder';
 import Truncate from 'sentry/components/truncate';
+import CHART_PALETTE from 'sentry/constants/chartPalette';
 import {IconCheckmark, IconFire, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
@@ -86,7 +87,7 @@ function formatTooltipDate(date: moment.MomentInput, format: string): string {
   return momentTimezone.tz(date, timezone).format(format);
 }
 
-function createThresholdSeries(lineColor: string, threshold: number): LineChartSeries {
+function createThresholdSeries(lineColor: string, threshold: number): AreaChartSeries {
   return {
     seriesName: 'Threshold Line',
     type: 'line',
@@ -107,7 +108,7 @@ function createStatusAreaSeries(
   startTime: number,
   endTime: number,
   yPosition: number
-): LineChartSeries {
+): AreaChartSeries {
   return {
     seriesName: '',
     type: 'line',
@@ -126,10 +127,10 @@ function createIncidentSeries(
   lineColor: string,
   incidentTimestamp: number,
   incident: Incident,
-  dataPoint?: LineChartSeries['data'][0],
+  dataPoint?: AreaChartSeries['data'][0],
   seriesName?: string,
   aggregate?: string
-): LineChartSeries {
+): AreaChartSeries {
   const formatter = ({value, marker}: any) => {
     const time = formatTooltipDate(moment(value), 'MMM D, YYYY LT');
     return [
@@ -231,7 +232,7 @@ class MetricChart extends React.PureComponent<Props, State> {
     }
   };
 
-  getRuleChangeSeries = (data: LineChartSeries[]): LineSeriesOption[] => {
+  getRuleChangeSeries = (data: AreaChartSeries[]): LineSeriesOption[] => {
     const {dateModified} = this.props.rule || {};
 
     if (!data.length || !data[0].data.length || !dateModified) {
@@ -349,10 +350,12 @@ class MetricChart extends React.PureComponent<Props, State> {
     const criticalTrigger = rule.triggers.find(({label}) => label === 'critical');
     const warningTrigger = rule.triggers.find(({label}) => label === 'warning');
 
-    const series: LineChartSeries[] = [...timeseriesData];
+    const series: AreaChartSeries[] = [...timeseriesData];
     const areaSeries: any[] = [];
-    // Ensure series data appears above incident lines
-    series[0].z = 100;
+    // Ensure series data appears below incident/mark lines
+    series[0].z = 1;
+    series[0].color = CHART_PALETTE[0][0];
+
     const dataArr = timeseriesData[0].data;
     const maxSeriesValue = dataArr.reduce(
       (currMax, coord) => Math.max(currMax, coord.value),
@@ -559,7 +562,7 @@ class MetricChart extends React.PureComponent<Props, State> {
                 onZoom={zoomArgs => handleZoom(zoomArgs.start, zoomArgs.end)}
               >
                 {zoomRenderProps => (
-                  <LineChart
+                  <AreaChart
                     {...zoomRenderProps}
                     isGroupedByDate
                     showTimeInTooltip