Improvement/review time pr

frontend/app/components/modules/project/components/development/review-time-by-pull-request-size.vue

@@ -3,15 +3,88 @@
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Review time by pull request size
     </h3>
-    <p class="text-body-2 text-neutral-500">
+    <p class="text-body-2 text-neutral-500 mb-6">
       Active contributor is an individual performing tasks such as commits,
       issues, or pull requests during the selected time period.
     </p>
+    <hr>
+    <section class="mt-5">
+      <div class="w-full min-h-[380px] my-5">
+        <div
+          v-if="status === 'success'"
+          class="flex flex-col gap-8 text-neutral-900 text-sm"
+        >
+          <div
+            v-for="item in reviewTimeByPr"
+            :key="item.sortId"
+            class="flex flex-col gap-2"
+          >
+            <div class="flex flex-row gap-2">
+              <span>{{ item.lines }} lines</span>
+              <span class="text-neutral-400">{{ item.prCount }} pull requests</span>
+            </div>
+            <div class="pr-4">
+              <lfx-progress-bar
+                :values="[item.averageReviewTime / maxValue * 100]"
+                :label="`${item.averageReviewTime} ${item.averageReviewTimeUnit}`"
+                hide-empty
+              />
+            </div>
+          </div>
+        </div>
+        <lfx-spinner v-else />
+      </div>
+    </section>
   </lfx-card>
 </template>
 
 <script setup lang="ts">
-import LfxCard from "~/components/uikit/card/card.vue";
+import { useFetch, useRoute } from 'nuxt/app';
+import { computed, watch } from 'vue';
+import type { ReviewTimeByPrItem } from './types/review-time-by-pr.types';
+import LfxCard from '~/components/uikit/card/card.vue';
+import useToastService from '~/components/uikit/toast/toast.service';
+import { ToastTypesEnum } from '~/components/uikit/toast/types/toast.types';
+import LfxSpinner from '~/components/uikit/spinner/spinner.vue';
+import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+
+const props = withDefaults(
+  defineProps<{
+    timePeriod?: string;
+  }>(),
+  {
+    timePeriod: '90d'
+  }
+);
+
+const { showToast } = useToastService();
+
+const route = useRoute();
+
+const { data, status, error } = useFetch(
+  `/api/project/${route.params.slug}/development/review-time-by-pr-size`,
+  {
+    params: {
+      project: route.params.slug,
+      repository: route.params.name || '',
+      'time-period': props.timePeriod
+    }
+  }
+);
+const reviewTimeByPr = computed<ReviewTimeByPrItem[]>(() => data.value as ReviewTimeByPrItem[]);
+const maxValue = computed(() => Math.max(...reviewTimeByPr.value.map((item) => item.averageReviewTime)));
+
+watch(error, (err) => {
+  if (err) {
+    showToast(
+      `Error fetching social mentions: ${error.value?.statusMessage}`,
+      ToastTypesEnum.negative,
+      undefined,
+      10000
+    );
+  }
+});
+
 </script>
 
 <script lang="ts">

frontend/app/components/modules/project/components/development/types/review-time-by-pr.types.ts

@@ -0,0 +1,7 @@
+export interface ReviewTimeByPrItem {
+  sortId: number;
+  lines: string;
+  prCount: number;
+  averageReviewTime: number;
+  averageReviewTimeUnit: string;
+}

frontend/app/components/uikit/chart/helpers/chart-helpers.ts

@@ -28,6 +28,9 @@ export const convertToChartData = (
       } as ChartData)
   ) ?? [];
 
+export const getMaxValue = (data: ChartData[]): number => data //
+    .reduce((max, item) => Math.max(max, item.values[0] ?? 0), 0);
+
 export const convertToCategoryData = (
   xData: ChartData[],
   yData: ChartData[]

frontend/app/components/uikit/progress-bar/progress-bar.scss

@@ -1,8 +1,12 @@
 .c-progress-bar {
-  @apply flex flex-row items-stretch justify-between gap-0.5 h-2 w-full;
+  @apply flex flex-row items-center gap-0.5 w-full;
 
   .c-progress-bar__value, .c-progress-bar__empty {
-    @apply rounded-xs transition-all;
+    @apply rounded-xs transition-all h-2;
+  }
+
+  .c-progress-bar__label {
+    @apply text-sm text-neutral-900 ml-2 whitespace-nowrap;
   }
 
   &--normal {

frontend/app/components/uikit/progress-bar/progress-bar.vue

@@ -7,7 +7,14 @@
       class="c-progress-bar__value"
       :style="{ width: `${value}%` }"
     />
-    <div class="c-progress-bar__empty" />
+    <div
+      v-if="props.label"
+      class="c-progress-bar__label"
+    >{{ props.label }}</div>
+    <div
+      v-if="!props.hideEmpty"
+      class="c-progress-bar__empty"
+    />
   </div>
 </template>
 
@@ -19,9 +26,13 @@ const props = withDefaults(
     values: number[];
     // TODO: change this once we have the correct types
     color?: ProgressBarType;
+    label?: string;
+    hideEmpty?: boolean;
   }>(),
   {
-    color: 'normal'
+    color: 'normal',
+    hideEmpty: false,
+    label: undefined
   }
 );
 </script>

frontend/server/api/project/[slug]/development/review-time-by-pr-size.get.ts

@@ -0,0 +1,21 @@
+import { reviewTimeByPr } from '~~/server/mocks/review-time-by-pr.mock';
+
+/**
+ * Frontend expects the data to be in the following format:
+ * [
+ *   {
+ *     sortId: number;
+ *     lines: string;
+ *     prCount: number;
+ *     averageReviewTime: number;
+ *     averageReviewTimeUnit: string;
+ *   }
+ * ]
+ */
+/**
+ * Query params:
+ * - project: string
+ * - repository: string
+ * - time-period: string // This is isn't defined yet, but we'll add '90d', '1y', '5y' for now
+ */
+export default defineEventHandler(async () => reviewTimeByPr);

frontend/server/mocks/review-time-by-pr.mock.ts

@@ -0,0 +1,37 @@
+export const reviewTimeByPr = [
+  {
+    sortId: 1,
+    lines: '1-9',
+    prCount: 1000,
+    averageReviewTime: 9.86,
+    averageReviewTimeUnit: 'days'
+  },
+  {
+    sortId: 2,
+    lines: '10-59',
+    prCount: 1200,
+    averageReviewTime: 20.96,
+    averageReviewTimeUnit: 'days'
+  },
+  {
+    sortId: 3,
+    lines: '60-99',
+    prCount: 1100,
+    averageReviewTime: 31.32,
+    averageReviewTimeUnit: 'days'
+  },
+  {
+    sortId: 4,
+    lines: '100-499',
+    prCount: 1300,
+    averageReviewTime: 42.07,
+    averageReviewTimeUnit: 'days'
+  },
+  {
+    sortId: 5,
+    lines: '500+',
+    prCount: 900,
+    averageReviewTime: 55.9,
+    averageReviewTimeUnit: 'days'
+  }
+];