fix(chart-unfurl): Suport empty series for top 5 charts (#27991)

The data structure was different than expected when there
were no series for a top 5 type chart, which resulted in a 500.
Updated to handle empty state.

src/sentry/web/frontend/debug/debug_chart_renderer.py

@@ -127,14 +127,25 @@ discover_top5 = {
     }
 }
 
+discover_empty = {
+    "seriesName": "Discover empty",
+    "stats": {
+        "data": [],
+    },
+}
+
 
 class DebugChartRendererView(View):
     def get(self, request):
         charts = []
 
         charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOTAL_PERIOD, discover_total_period))
+        charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOTAL_PERIOD, discover_empty))
         charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOTAL_DAILY, discover_total_daily))
+        charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOTAL_DAILY, discover_empty))
         charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOP5_PERIOD, discover_top5))
+        charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOP5_PERIOD, discover_empty))
         charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOP5_DAILY, discover_top5))
+        charts.append(generate_chart(ChartType.SLACK_DISCOVER_TOP5_DAILY, discover_empty))
 
         return render_to_response("sentry/debug/chart-renderer.html", context={"charts": charts})

static/app/chartcuterie/discover.tsx

@@ -1,3 +1,5 @@
+import isArray from 'lodash/isArray';
+
 import XAxis from 'app/components/charts/components/xAxis';
 import AreaSeries from 'app/components/charts/series/areaSeries';
 import BarSeries from 'app/components/charts/series/barSeries';
@@ -71,7 +73,17 @@ discoverCharts.push({
 
 discoverCharts.push({
   key: ChartType.SLACK_DISCOVER_TOP5_PERIOD,
-  getOption: (data: {stats: Record<string, EventsStats>}) => {
+  getOption: (
+    data: {stats: Record<string, EventsStats>} | {seriesName?: string; stats: EventsStats}
+  ) => {
+    if (isArray(data.stats.data) && data.stats.data.length === 0) {
+      return {
+        ...slackChartDefaults,
+        useUTC: true,
+        series: [],
+      };
+    }
+
     const stats = Object.values(data.stats);
     const color = theme.charts.getColorPalette(stats.length - 2);
 
@@ -102,7 +114,17 @@ discoverCharts.push({
 
 discoverCharts.push({
   key: ChartType.SLACK_DISCOVER_TOP5_DAILY,
-  getOption: (data: {stats: Record<string, EventsStats>}) => {
+  getOption: (
+    data: {stats: Record<string, EventsStats>} | {seriesName?: string; stats: EventsStats}
+  ) => {
+    if (isArray(data.stats.data) && data.stats.data.length === 0) {
+      return {
+        ...slackChartDefaults,
+        useUTC: true,
+        series: [],
+      };
+    }
+
     const stats = Object.values(data.stats);
     const color = theme.charts.getColorPalette(stats.length - 2);