feat(workflow): Align xAxis dates on team stats bar graphs

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

@@ -9,7 +9,11 @@ import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
 
-import {convertDaySeriesToWeeks, convertDayValueObjectToSeries} from './utils';
+import {
+  barAxisLabel,
+  convertDaySeriesToWeeks,
+  convertDayValueObjectToSeries,
+} from './utils';
 
 type AlertsTriggered = Record<string, number>;
 
@@ -86,9 +90,7 @@ class TeamAlertsTriggered extends AsyncComponent<Props, State> {
             period="7d"
             legend={{right: 0, top: 0}}
             yAxis={{minInterval: 1}}
-            xAxis={{
-              type: 'time',
-            }}
+            xAxis={barAxisLabel(seriesData.length)}
             series={[
               {
                 seriesName: t('Alerts Triggered'),

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

@@ -14,7 +14,11 @@ import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
 import {formatPercentage} from 'app/utils/formatters';
 
-import {convertDaySeriesToWeeks, convertDayValueObjectToSeries} from './utils';
+import {
+  barAxisLabel,
+  convertDaySeriesToWeeks,
+  convertDayValueObjectToSeries,
+} from './utils';
 
 type IssuesBreakdown = Record<string, Record<string, {reviewed: number; total: number}>>;
 
@@ -110,8 +114,12 @@ class TeamIssuesReviewed extends AsyncComponent<Props, State> {
       }
     }
 
-    const reviewedSeries = convertDayValueObjectToSeries(allReviewedByDay);
-    const notReviewedSeries = convertDayValueObjectToSeries(allNotReviewedByDay);
+    const reviewedSeries = convertDaySeriesToWeeks(
+      convertDayValueObjectToSeries(allReviewedByDay)
+    );
+    const notReviewedSeries = convertDaySeriesToWeeks(
+      convertDayValueObjectToSeries(allNotReviewedByDay)
+    );
 
     return (
       <Fragment>
@@ -122,17 +130,20 @@ class TeamIssuesReviewed extends AsyncComponent<Props, State> {
               style={{height: 200}}
               stacked
               isGroupedByDate
+              useShortDate
               legend={{right: 0, top: 0}}
+              xAxis={barAxisLabel(reviewedSeries.length)}
+              yAxis={{minInterval: 1}}
               series={[
                 {
                   seriesName: t('Reviewed'),
-                  data: convertDaySeriesToWeeks(reviewedSeries),
+                  data: reviewedSeries,
                   silent: true,
                   // silent is not incldued in the type for BarSeries
                 } as any,
                 {
                   seriesName: t('Not Reviewed'),
-                  data: convertDaySeriesToWeeks(notReviewedSeries),
+                  data: notReviewedSeries,
                   silent: true,
                 },
               ]}

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

@@ -1,7 +1,6 @@
 import {ComponentType, Fragment} from 'react';
 import {withTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import chunk from 'lodash/chunk';
 import isEqual from 'lodash/isEqual';
 import round from 'lodash/round';
 import moment from 'moment';
@@ -20,6 +19,8 @@ import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
 import {Color, Theme} from 'app/utils/theme';
 
+import {barAxisLabel, convertDaySeriesToWeeks} from './utils';
+
 type Props = AsyncComponent['props'] & {
   theme: Theme;
   organization: Organization;
@@ -171,20 +172,13 @@ class TeamReleases extends AsyncComponent<Props, State> {
     const {projects, period, theme} = this.props;
     const {periodReleases} = this.state;
 
-    const data = Object.entries(periodReleases?.release_counts ?? {})
-      .map(([bucket, count]) => ({
+    const data = Object.entries(periodReleases?.release_counts ?? {}).map(
+      ([bucket, count]) => ({
         value: Math.ceil(count),
         name: new Date(bucket).getTime(),
-      }))
-      .sort((a, b) => a.name - b.name);
-
-    // Convert from days to 7 day groups
-    const seriesData = chunk(data, 7).map(week => {
-      return {
-        name: week[0].name,
-        value: week.reduce((total, currentData) => total + currentData.value, 0),
-      };
-    });
+      })
+    );
+    const seriesData = convertDaySeriesToWeeks(data);
 
     const averageValues = Object.values(periodReleases?.project_avgs ?? {});
     const projectAvgSum = averageValues.reduce(
@@ -203,20 +197,20 @@ class TeamReleases extends AsyncComponent<Props, State> {
             period="7d"
             legend={{right: 3, top: 0}}
             yAxis={{minInterval: 1}}
-            xAxis={{
-              type: 'time',
-            }}
+            xAxis={barAxisLabel(seriesData.length)}
             series={[
               {
                 seriesName: t('This Period'),
+                // @ts-expect-error silent missing from type
                 silent: true,
                 data: seriesData,
                 markLine: MarkLine({
                   silent: true,
                   lineStyle: {color: theme.gray200, type: 'dashed', width: 1},
-                  data: [{yAxis: totalPeriodAverage} as any],
+                  // @ts-expect-error yAxis type not correct
+                  data: [{yAxis: totalPeriodAverage}],
                 }),
-              } as any,
+              },
             ]}
             tooltip={{
               formatter: seriesParams => {

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

@@ -10,7 +10,7 @@ import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {getDuration} from 'app/utils/formatters';
 
-import {convertDaySeriesToWeeks} from './utils';
+import {barAxisLabel, convertDaySeriesToWeeks} from './utils';
 
 type TimeToResolution = Record<string, {count: number; avg: number}>;
 
@@ -90,9 +90,7 @@ class TeamResolutionTime extends AsyncComponent<Props, State> {
             },
           }}
           legend={{right: 0, top: 0}}
-          xAxis={{
-            type: 'time',
-          }}
+          xAxis={barAxisLabel(seriesData.length)}
           series={[
             {
               seriesName: t('Time to Resolution'),

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

@@ -1,5 +1,7 @@
 import chunk from 'lodash/chunk';
+import moment from 'moment';
 
+import BaseChart from 'app/components/charts/baseChart';
 import {SeriesDataUnit} from 'app/types/echarts';
 
 /**
@@ -28,3 +30,20 @@ export function convertDayValueObjectToSeries(
     name: new Date(bucket).getTime(),
   }));
 }
+
+export const barAxisLabel = (
+  dataEntries: number
+): React.ComponentProps<typeof BaseChart>['xAxis'] => {
+  return {
+    splitNumber: dataEntries,
+    type: 'category',
+    min: 0,
+    axisLabel: {
+      showMaxLabel: true,
+      showMinLabel: true,
+      formatter: (date: number) => {
+        return moment(new Date(date)).format('MMM D');
+      },
+    },
+  };
+};