ref(discover): Change the colour of the others series to gray (#28929)

- This is so other doesn't look like any other existing series

static/app/components/charts/eventsChart.tsx

@@ -180,7 +180,8 @@ class Chart extends React.Component<ChartProps, State> {
 
     const releasesLegend = t('Releases');
 
-    if (topEvents && topEvents + 1 === timeseriesData.length) {
+    const hasOther = topEvents && topEvents + 1 === timeseriesData.length;
+    if (hasOther) {
       data.push('Other');
     }
 
@@ -223,12 +224,16 @@ class Chart extends React.Component<ChartProps, State> {
     if (previousSeriesTransformer) {
       previousSeries = previousSeriesTransformer(previousTimeseriesData);
     }
+    const chartColors = timeseriesData.length
+      ? colors?.slice(0, series.length) ?? [
+          ...theme.charts.getColorPalette(timeseriesData.length - 2 - (hasOther ? 1 : 0)),
+        ]
+      : undefined;
+    if (chartColors && chartColors.length && hasOther) {
+      chartColors.push(theme.chartOther);
+    }
     const chartOptions = {
-      colors: timeseriesData.length
-        ? colors?.slice(0, series.length) ?? [
-            ...theme.charts.getColorPalette(timeseriesData.length - 2),
-          ]
-        : undefined,
+      colors: chartColors,
       grid: {
         left: '24px',
         right: '24px',

static/app/utils/theme.tsx

@@ -190,6 +190,11 @@ const lightAliases = {
    */
   chartLabel: colors.gray200,
 
+  /**
+   * Color for the 'others' series in topEvent charts
+   */
+  chartOther: colors.gray200,
+
   /**
    * Default Progressbar color
    */
@@ -658,6 +663,7 @@ const darkAliases = {
   rowBackground: colors.gray500,
   chartLineColor: colors.gray500,
   chartLabel: colors.gray400,
+  chartOther: colors.gray300,
   progressBar: colors.purple200,
   progressBackground: colors.gray400,
   badgeBackground: colors.gray400,

static/app/views/dashboardsV2/widgetCardChart.tsx

@@ -304,6 +304,14 @@ class WidgetCardChart extends React.Component<WidgetCardChartProps> {
           const colors = timeseriesResults
             ? theme.charts.getColorPalette(timeseriesResults.length - 2)
             : [];
+          // TODO(wmak): Need to change this when updating dashboards to support variable topEvents
+          if (
+            widget.displayType === 'top_n' &&
+            timeseriesResults &&
+            timeseriesResults.length > 5
+          ) {
+            colors[colors.length - 1] = theme.chartOther;
+          }
 
           // Create a list of series based on the order of the fields,
           const series = timeseriesResults

static/app/views/eventsV2/miniGraph.tsx

@@ -184,10 +184,15 @@ class MiniGraph extends React.Component<Props> {
             smooth: true,
           }));
 
+          const hasOther = topEvents && topEvents + 1 === allSeries.length;
+          const chartColors = allSeries.length
+            ? [...theme.charts.getColorPalette(allSeries.length - 2 - (hasOther ? 1 : 0))]
+            : undefined;
+          if (chartColors && chartColors.length && hasOther) {
+            chartColors.push(theme.chartOther);
+          }
           const chartOptions = {
-            colors: allSeries.length
-              ? [...theme.charts.getColorPalette(allSeries.length - 2)]
-              : undefined,
+            colors: chartColors,
             height: 100,
             series: [...data],
             xAxis: {

static/app/views/eventsV2/table/tableView.tsx

@@ -249,10 +249,6 @@ class TableView extends React.Component<TableViewProps> {
 
     let cell = fieldRenderer(dataRow, {organization, location});
 
-    const hasOther =
-      organization.features.includes('discover-top-events') &&
-      (tableData?.data?.length ?? 0) > TOP_N;
-
     if (columnKey === 'id') {
       const eventSlug = generateEventSlug(dataRow);
 
@@ -313,7 +309,7 @@ class TableView extends React.Component<TableViewProps> {
       <React.Fragment>
         {isFirstPage && isTopEvents && rowIndex < topEvents && columnIndex === 0 ? (
           // Add one if we need to include Other in the series
-          <TopResultsIndicator count={count + (hasOther ? 1 : 0)} index={rowIndex} />
+          <TopResultsIndicator count={count} index={rowIndex} />
         ) : null}
         <CellAction
           column={column}