feat(teamStats): Add animation delay to stacked bar charts (#30914)

static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
 import AsyncComponent from 'sentry/components/asyncComponent';
-import BarChart from 'sentry/components/charts/barChart';
+import BarChart, {BarChartSeries} from 'sentry/components/charts/barChart';
 import {DateTimeObject} from 'sentry/components/charts/utils';
 import IdBadge from 'sentry/components/idBadge';
 import {getParams} from 'sentry/components/organizations/pageFilters/getParams';
@@ -140,13 +140,17 @@ class TeamIssuesBreakdown extends AsyncComponent<Props, State> {
       .map(([projectId, {total}]) => ({projectId, total}))
       .sort((a, b) => b.total - a.total);
 
-    const allSeries = Object.keys(allReviewedByDay).map(projectId => ({
-      seriesName: ProjectsStore.getById(projectId)?.slug ?? projectId,
-      data: convertDaySeriesToWeeks(
-        convertDayValueObjectToSeries(allReviewedByDay[projectId])
-      ),
-      silent: true,
-    }));
+    const allSeries = Object.keys(allReviewedByDay).map(
+      (projectId, idx): BarChartSeries => ({
+        seriesName: ProjectsStore.getById(projectId)?.slug ?? projectId,
+        data: convertDaySeriesToWeeks(
+          convertDayValueObjectToSeries(allReviewedByDay[projectId])
+        ),
+        animationDuration: 500,
+        animationDelay: idx * 500,
+        silent: true,
+      })
+    );
 
     return (
       <Fragment>

static/app/views/organizationStats/teamInsights/teamIssuesReviewed.tsx

@@ -140,11 +140,15 @@ class TeamIssuesReviewed extends AsyncComponent<Props, State> {
                   seriesName: t('Reviewed'),
                   data: reviewedSeries,
                   silent: true,
+                  animationDuration: 500,
+                  animationDelay: 0,
                 },
                 {
                   seriesName: t('Not Reviewed'),
                   data: notReviewedSeries,
                   silent: true,
+                  animationDuration: 500,
+                  animationDelay: 500,
                 },
               ]}
             />

static/app/views/organizationStats/teamInsights/teamUnresolvedIssues.tsx

@@ -161,7 +161,6 @@ class TeamUnresolvedIssues extends AsyncComponent<Props, State> {
           {!loading && (
             <BarChart
               style={{height: 190}}
-              stacked
               isGroupedByDate
               useShortDate
               period="7d"