Stars and forks widgets

frontend/app/components/modules/project/components/popularity/forks.vue

@@ -3,15 +3,116 @@
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Forks
     </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 v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
+        <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
+        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+      </div>
+
+      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <div class="w-full h-[330px]">
+        <lfx-chart v-if="status !== 'pending'" :config="lineChartConfig" />
+        <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 { ref, computed, watch } from 'vue';
+import type { ForksData } from './types/popularity.types';
+import type { Summary } from '~/components/shared/types/summary.types';
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
+import LfxTabs from '~/components/uikit/tabs/tabs.vue';
+import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
+import type {
+  ChartData,
+  RawChartData,
+  ChartSeries
+} from '~/components/uikit/chart/types/ChartTypes';
+import LfxChart from '~/components/uikit/chart/chart.vue';
+import { getBarChartConfig } from '~/components/uikit/chart/configs/bar.chart';
+import { lfxColors } from '~/config/styles/colors';
+import { axisLabelFormatter } from '~/components/uikit/chart/helpers/formatters';
+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 { formatNumber } from '~/components/shared/utils/formatter';
+
+const props = withDefaults(
+  defineProps<{
+    timePeriod?: string;
+  }>(),
+  {
+    timePeriod: '90d'
+  }
+);
+
+const { showToast } = useToastService();
+
+const activeTab = ref('cumulative');
+const route = useRoute();
+
+const { data, status, error } = useFetch(
+  () => `/api/projects/popularity/forks?type=${activeTab.value}&project=${route.params.slug
+    }&repository=${route.params.name || ''}&time-period=${props.timePeriod}`
+);
+
+const forks = computed<ForksData>(() => data.value as ForksData);
+
+const summary = computed<Summary>(() => forks.value.summary);
+const chartData = computed<ChartData[]>(
+  // convert the data to chart data
+  () => convertToChartData(forks.value.data as RawChartData[], 'dateFrom', [
+    'forks'
+  ])
+);
+
+const tabs = [
+  { label: 'Cumulative', value: 'cumulative' },
+  { label: 'New', value: 'new' }
+];
+
+const chartSeries = ref<ChartSeries[]>([
+  {
+    name: 'Forks',
+    type: 'bar',
+    yAxisIndex: 0,
+    dataIndex: 0,
+    position: 'left',
+    color: lfxColors.brand[500]
+  }
+]);
+const configOverride = computed(() => ({
+  xAxis: {
+    axisLabel: {
+      formatter: axisLabelFormatter('MMM dd')
+    }
+  }
+}));
+const lineChartConfig = computed(() => getBarChartConfig(
+  chartData.value,
+  chartSeries.value,
+  configOverride.value
+));
+
+watch(error, (err) => {
+  if (err) {
+    showToast(
+      `Error fetching active contributors: ${error.value?.statusMessage}`,
+      ToastTypesEnum.negative,
+      undefined,
+      10000
+    );
+  }
+});
 </script>
 
 <script lang="ts">

frontend/app/components/modules/project/components/popularity/stars.vue

@@ -3,15 +3,116 @@
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Stars
     </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 v-if="status === 'success'" class="flex flex-row gap-4 items-center mb-6">
+        <div class="text-data-display-1">{{ formatNumber(summary.current) }}</div>
+        <lfx-delta-display :summary="summary" icon="circle-arrow-up-right" icon-type="solid" />
+      </div>
+
+      <lfx-tabs :tabs="tabs" :model-value="activeTab" @update:model-value="activeTab = $event" />
+      <div class="w-full h-[330px] mt-4">
+        <lfx-chart v-if="status !== 'pending'" :config="lineChartConfig" />
+        <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 { ref, computed, watch } from 'vue';
+import type { StarsData } from './types/popularity.types';
+import type { Summary } from '~/components/shared/types/summary.types';
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';
+import LfxTabs from '~/components/uikit/tabs/tabs.vue';
+import { convertToChartData } from '~/components/uikit/chart/helpers/chart-helpers';
+import type {
+  ChartData,
+  RawChartData,
+  ChartSeries
+} from '~/components/uikit/chart/types/ChartTypes';
+import LfxChart from '~/components/uikit/chart/chart.vue';
+import { getLineAreaChartConfig } from '~/components/uikit/chart/configs/line.area.chart';
+import { lfxColors } from '~/config/styles/colors';
+import { axisLabelFormatter } from '~/components/uikit/chart/helpers/formatters';
+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 { formatNumber } from '~/components/shared/utils/formatter';
+
+const props = withDefaults(
+  defineProps<{
+    timePeriod?: string;
+  }>(),
+  {
+    timePeriod: '90d'
+  }
+);
+
+const { showToast } = useToastService();
+
+const activeTab = ref('cumulative');
+const route = useRoute();
+
+const { data, status, error } = useFetch(
+  () => `/api/projects/popularity/stars?type=${activeTab.value}&project=${route.params.slug
+    }&repository=${route.params.name || ''}&time-period=${props.timePeriod}`
+);
+
+const stars = computed<StarsData>(() => data.value as StarsData);
+
+const summary = computed<Summary>(() => stars.value.summary);
+const chartData = computed<ChartData[]>(
+  // convert the data to chart data
+  () => convertToChartData(stars.value.data as RawChartData[], 'dateFrom', [
+    'stars'
+  ])
+);
+
+const tabs = [
+  { label: 'Cumulative', value: 'cumulative' },
+  { label: 'New', value: 'new' }
+];
+
+const chartSeries = ref<ChartSeries[]>([
+  {
+    name: 'Stars',
+    type: 'line',
+    yAxisIndex: 0,
+    dataIndex: 0,
+    position: 'left',
+    color: lfxColors.brand[500]
+  }
+]);
+const configOverride = computed(() => ({
+  xAxis: {
+    axisLabel: {
+      formatter: axisLabelFormatter('MMM dd')
+    }
+  }
+}));
+const lineChartConfig = computed(() => getLineAreaChartConfig(
+  chartData.value,
+  chartSeries.value,
+  configOverride.value
+));
+
+watch(error, (err) => {
+  if (err) {
+    showToast(
+      `Error fetching active contributors: ${error.value?.statusMessage}`,
+      ToastTypesEnum.negative,
+      undefined,
+      10000
+    );
+  }
+});
 </script>
 
 <script lang="ts">

frontend/app/components/modules/project/components/popularity/types/popularity.types.ts

@@ -0,0 +1,19 @@
+import type { Summary } from '~/components/shared/types/summary.types';
+
+export interface StarsData {
+  summary: Summary;
+  data: {
+    dateFrom: string;
+    dateTo: string;
+    stars: number;
+  }[];
+}
+
+export interface ForksData {
+  summary: Summary;
+  data: {
+    dateFrom: string;
+    dateTo: string;
+    forks: number;
+  }[];
+}

frontend/app/components/uikit/chart/configs/line.area.chart.ts

@@ -18,7 +18,8 @@ const defaultLineOption: ECOption = {
   grid: {
     top: '5%',
     left: '8%',
-    right: '1%'
+    right: '1%',
+    bottom: '15%'
   },
   xAxis: {
     ...defaultOption.xAxis,

frontend/server/api/projects/popularity/forks.get.ts

@@ -0,0 +1,39 @@
+import { cumulative, newStars } from '~~/server/mocks/forks.mock';
+
+/**
+ * Frontend expects the data to be in the following format:
+ * {
+ *   summary: {
+ *     current: number; // current value
+ *     previous: number; // previous value
+ *     percentageChange: number; // percentage change (return as actual percentage ex: 2.3 percent)
+ *     changeValue: number; // change value
+ *     periodFrom: string; // period from
+ *     periodTo: string; // period to
+ *   },
+ *   data: {
+ *     dateFrom: string; // ISO 8601 date string - start of the bucket. Based on the interval
+ *     dateTo: string; // ISO 8601 date string - end of the bucket. Based on the interval
+ *     forks: number; // count of forks
+ *   }[];
+ * }
+ */
+/**
+ * Query params:
+ * - type: 'cumulative' | 'new'
+ * - 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 (event) => {
+  const query = getQuery(event);
+  let data;
+
+  if (query.type === 'cumulative') {
+    data = cumulative;
+  } else {
+    data = newStars;
+  }
+
+  return data;
+});

frontend/server/api/projects/popularity/stars.get.ts

@@ -0,0 +1,39 @@
+import { cumulative, newStars } from '~~/server/mocks/stars.mock';
+
+/**
+ * Frontend expects the data to be in the following format:
+ * {
+ *   summary: {
+ *     current: number; // current value
+ *     previous: number; // previous value
+ *     percentageChange: number; // percentage change (return as actual percentage ex: 2.3 percent)
+ *     changeValue: number; // change value
+ *     periodFrom: string; // period from
+ *     periodTo: string; // period to
+ *   },
+ *   data: {
+ *     dateFrom: string; // ISO 8601 date string - start of the bucket. Based on the interval
+ *     dateTo: string; // ISO 8601 date string - end of the bucket. Based on the interval
+ *     stars: number; // count of stars
+ *   }[];
+ * }
+ */
+/**
+ * Query params:
+ * - type: 'cumulative' | 'new'
+ * - 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 (event) => {
+  const query = getQuery(event);
+  let data;
+
+  if (query.type === 'cumulative') {
+    data = cumulative;
+  } else {
+    data = newStars;
+  }
+
+  return data;
+});