feat: Developer Activity

packages/frontend/src/api/services/developerActivity/developerActivityEndpoints.ts

@@ -0,0 +1,68 @@
+import queryString from "query-string";
+import { TDeveloperActivitySnapshot } from "src/api/types";
+import { Logger } from "src/api/utils/logging";
+import CONFIG from "../../../config/config";
+import { alphadayApi } from "../alphadayApi";
+import {
+    TGetDeveloperActivityRequest,
+    TGetDeveloperActivityRawResponse,
+    TGetDeveloperActivityResponse,
+} from "./types";
+
+const { COINS } = CONFIG.API.DEFAULT.ROUTES;
+
+const developerActivityApi = alphadayApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getDeveloperActivity: builder.query<
+            TGetDeveloperActivityResponse,
+            TGetDeveloperActivityRequest
+        >({
+            query: ({ coin, limit }) => {
+                const params = queryString.stringify(
+                    { limit },
+                    { skipNull: true, skipEmptyString: true }
+                );
+                const path = `${String(COINS.BASE)}${String(
+                    COINS.DEVELOPER_ACTIVITY(coin)
+                )}${params ? `?${params}` : ""}`;
+                Logger.debug("getDeveloperActivity: querying", path);
+                return path;
+            },
+            transformResponse: (
+                r: TGetDeveloperActivityRawResponse
+            ): TGetDeveloperActivityResponse => {
+                try {
+                    const snapshots: TDeveloperActivitySnapshot[] = r
+                        .map((s) => ({
+                            id: s.id,
+                            coin: s.coin,
+                            commitsLast4Weeks: s.commits_last_4_weeks,
+                            contributorsCount: s.contributors_count,
+                            openIssues: s.open_issues,
+                            stars: s.stars,
+                            forks: s.forks,
+                            date: s.date,
+                        }))
+                        // The endpoint returns snapshots newest-first; sort
+                        // oldest-first so the data is ready to plot on a time
+                        // axis and the latest snapshot is the last element.
+                        .sort(
+                            (a, b) =>
+                                new Date(a.date).getTime() -
+                                new Date(b.date).getTime()
+                        );
+                    return { snapshots };
+                } catch (error) {
+                    Logger.error(
+                        "getDeveloperActivity::transformResponse: error while parsing response:",
+                        error
+                    );
+                    return { snapshots: [] };
+                }
+            },
+        }),
+    }),
+    overrideExisting: false,
+});
+
+export const { useGetDeveloperActivityQuery } = developerActivityApi;

packages/frontend/src/api/services/developerActivity/types.ts

@@ -0,0 +1,31 @@
+import { TDeveloperActivityData } from "src/api/types";
+
+/**
+ * Primitive types
+ */
+
+export type TRemoteDeveloperActivitySnapshot = {
+    id: number;
+    coin: string;
+    commits_last_4_weeks: number;
+    contributors_count: number;
+    open_issues: number;
+    stars: number;
+    forks: number;
+    date: string;
+};
+
+/**
+ * Queries
+ */
+
+export type TGetDeveloperActivityRequest = {
+    // coin slug (case insensitive) — required path param
+    coin: string;
+    limit?: number | undefined;
+};
+
+export type TGetDeveloperActivityRawResponse =
+    TRemoteDeveloperActivitySnapshot[];
+
+export type TGetDeveloperActivityResponse = TDeveloperActivityData;

packages/frontend/src/api/services/index.ts

@@ -44,6 +44,9 @@ export * from "./yields/types";
 export * from "./fees/feesEndpoints";
 export * from "./fees/types";
 
+export * from "./developerActivity/developerActivityEndpoints";
+export * from "./developerActivity/types";
+
 export * from "./projects/projectsEndpoints";
 export * from "./projects/types";
 

packages/frontend/src/api/types/developerActivity.ts

@@ -0,0 +1,20 @@
+/**
+ * The `/coins/{coin}/developer-activity/` endpoint returns GitHub
+ * developer-activity snapshots for a coin, newest first. Each snapshot is a
+ * point-in-time reading of the coin's main repository.
+ */
+export type TDeveloperActivitySnapshot = {
+    id: number;
+    coin: string;
+    commitsLast4Weeks: number;
+    contributorsCount: number;
+    openIssues: number;
+    stars: number;
+    forks: number;
+    date: string;
+};
+
+export type TDeveloperActivityData = {
+    // snapshots ordered oldest -> newest (ready to plot on a time axis)
+    snapshots: TDeveloperActivitySnapshot[];
+};

packages/frontend/src/api/types/index.ts

@@ -3,6 +3,7 @@ export * from "./blog";
 export * from "./chat";
 export * from "./custom";
 export * from "./dao";
+export * from "./developerActivity";
 export * from "./discord";
 export * from "./event";
 export * from "./features";

packages/frontend/src/components/developerActivity/DeveloperActivityChart.tsx

@@ -0,0 +1,123 @@
+import { FC, useMemo } from "react";
+import { ApexAreaChart, themeColors } from "@alphaday/ui-kit";
+import { formatNumber, ENumberStyle } from "src/api/utils/format";
+
+interface IProps {
+    // [unix timestamp (seconds), value] pairs, oldest first
+    series: Array<[number, number]>;
+    height: number;
+}
+
+const DeveloperActivityChart: FC<IProps> = ({ series, height }) => {
+    const chartSeries = useMemo(
+        () => [
+            {
+                name: "value",
+                data:
+                    series.length > 0
+                        ? series
+                        : ([[0, 0]] as Array<[number, number]>),
+            },
+        ],
+        [series]
+    );
+
+    const isUptrend =
+        series.length > 1 && series[series.length - 1][1] >= series[0][1];
+    const lineColor = isUptrend
+        ? themeColors.success
+        : themeColors.secondaryOrangeSoda;
+
+    const chartOptions = useMemo(
+        () => ({
+            chart: {
+                sparkline: { enabled: false },
+                toolbar: { show: false },
+                zoom: { enabled: false },
+                animations: { enabled: false },
+            },
+            colors: [lineColor],
+            dataLabels: { enabled: false },
+            stroke: {
+                curve: "smooth",
+                width: 1.7,
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shade: "light",
+                    type: "vertical",
+                    shadeIntensity: 1,
+                    gradientToColors: [lineColor],
+                    inverseColors: false,
+                    opacityFrom: 0.4,
+                    opacityTo: 0.05,
+                },
+            },
+            legend: { show: false },
+            xaxis: {
+                type: "datetime",
+                axisBorder: { show: false },
+                axisTicks: { show: false },
+                tooltip: { enabled: false },
+                labels: {
+                    style: {
+                        colors: themeColors.primaryVariant100,
+                        fontSize: "10px",
+                        fontFamily: "Arial, sans-serif",
+                        fontWeight: 400,
+                    },
+                },
+            },
+            yaxis: {
+                show: true,
+                tickAmount: 3,
+                decimalsInFloat: false,
+                labels: {
+                    style: {
+                        colors: [themeColors.primaryVariant100],
+                        fontSize: "10px",
+                        fontFamily: "Arial, sans-serif",
+                        fontWeight: 400,
+                    },
+                    formatter: (value: number) =>
+                        formatNumber({
+                            value,
+                            style: ENumberStyle.Decimal,
+                        }).value,
+                },
+            },
+            grid: {
+                borderColor: themeColors.borderLine,
+                xaxis: { lines: { show: false } },
+                yaxis: { lines: { show: true } },
+                padding: { left: 4, right: 8, top: 0, bottom: 0 },
+            },
+            tooltip: {
+                enabled: true,
+                theme: "dark",
+                x: { format: "dd MMM yyyy" },
+                y: {
+                    formatter: (value: number) =>
+                        formatNumber({
+                            value,
+                            style: ENumberStyle.Decimal,
+                        }).value,
+                    title: { formatter: () => "" },
+                },
+            },
+        }),
+        [lineColor]
+    );
+
+    return (
+        <ApexAreaChart
+            options={chartOptions}
+            series={chartSeries}
+            width="100%"
+            height={height}
+        />
+    );
+};
+
+export default DeveloperActivityChart;