feat(#30): Created query layer 🚀

README.md

@@ -60,4 +60,4 @@ npm run migrate:platform
 
 ## Versions and changelogs
 
-Please check the [releases page](https://github.com/sametcodes/devstats/releases) to see the versions and changelogs.
+Please check the [releases page](https://github.com/sametcodes/devstats/releases) to see the versions and changelogs.

components/svgs/github/index.tsx

@@ -1,4 +1,6 @@
 import * as Icons from "@/components/icons";
+import { Pie } from "@nivo/pie";
+import { PlatformQueryConfig } from "@prisma/client";
 import {
   Document,
   DocumentTitle,
@@ -88,3 +90,120 @@ export const getContributionsSummary = (result: any) => {
     </Document>
   );
 };
+
+export const getLanguageUsageSummary = (
+  result: any,
+  config: PlatformQueryConfig
+) => {
+  const resolveLanguages = (response: any) => {
+    let languages: any = {};
+    let total = 0;
+    response.data.viewer.repositories.edges.forEach((node: any) => {
+      node.node.languages.edges.forEach((edge: any) => {
+        const { id, color, name } = edge.node;
+        total += edge.size;
+        if (languages[name.toLowerCase()]) {
+          languages[name.toLowerCase()].value += edge.size;
+        } else {
+          languages[name.toLowerCase()] = {
+            id: name.toLowerCase(),
+            label: name,
+            value: edge.size,
+            color,
+          };
+        }
+      });
+    });
+    return Object.values(languages)
+      .map((language: any) => {
+        language.value = language.value / total;
+        return language;
+      })
+      .sort((a: any, b: any) => b.value - a.value)
+      .slice(0, 5);
+  };
+  const languages = resolveLanguages(result);
+
+  return (
+    <>
+      <Pie
+        innerRadius={0.8}
+        enableArcLabels={false}
+        arcLinkLabel={(d: any) => `${d.id} (${d.formattedValue})`}
+        layers={[
+          "arcs",
+          "arcLabels",
+          "arcLinkLabels",
+          "legends",
+          CenteredMetric,
+        ]}
+        data={languages}
+        width={600}
+        height={400}
+        valueFormat=".0%"
+        margin={{ top: 50, right: 100, bottom: 70, left: 100 }}
+        padAngle={0.7}
+        cornerRadius={3}
+        activeOuterRadiusOffset={8}
+        borderWidth={1}
+        colors={{ datum: "data.color" }}
+        borderColor={{
+          from: "color",
+          modifiers: [["darker", 0.2]],
+        }}
+        arcLinkLabelsSkipAngle={10}
+        arcLinkLabelsTextColor="#333333"
+        arcLinkLabelsThickness={2}
+        arcLinkLabelsColor={{ from: "color" }}
+        arcLabelsSkipAngle={10}
+        arcLabelsTextColor={{
+          from: "color",
+          modifiers: [["darker", 2]],
+        }}
+        legends={[
+          {
+            anchor: "bottom",
+            direction: "row",
+            justify: false,
+            translateX: 0,
+            translateY: 56,
+            itemsSpacing: 0,
+            itemWidth: 100,
+            itemHeight: 18,
+            itemTextColor: "#999",
+            itemDirection: "left-to-right",
+            itemOpacity: 1,
+            symbolSize: 18,
+            symbolShape: "square",
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+const CenteredMetric = ({
+  dataWithArc,
+  centerX,
+  centerY,
+}: {
+  dataWithArc: any;
+  centerX: number;
+  centerY: number;
+}) => {
+  return (
+    <text
+      x={centerX}
+      y={centerY}
+      textAnchor="middle"
+      dominantBaseline="central"
+      style={{
+        fontSize: "28px",
+        fontWeight: 600,
+        fontFamily: "sans-serif",
+      }}
+    >
+      Languages
+    </text>
+  );
+};

components/svgs/index.ts

@@ -0,0 +1,19 @@
+import * as codewars from "./codewars";
+import * as github from "./github";
+import * as stackoverflow from "./stackoverflow";
+import * as wakatime from "./wakatime";
+
+export const getPlatformTemplates = (platform: string) => {
+  switch (platform) {
+    case "github":
+      return github;
+    case "stackoverflow":
+      return stackoverflow;
+    case "wakatime":
+      return wakatime;
+    case "codewars":
+      return codewars;
+    default:
+      return null;
+  }
+};

components/svgs/wakatime/index.tsx

@@ -1,22 +1,3 @@
-import {
-  Document,
-  DocumentTitle,
-  List,
-  ListItem,
-} from "@/components/svgs/document";
-import * as Icons from "@/components/icons";
+import { Pie } from "@nivo/pie";
 
-export const getAllTimeSinceToday = (result: any, platform: any) => {
-  return (
-    <Document width={290} height={100}>
-      <DocumentTitle>Wakatime</DocumentTitle>
-      <List>
-        <ListItem
-          icon={<Icons.TimeIcon />}
-          text="All time since today"
-          value={result.text}
-        />
-      </List>
-    </Document>
-  );
-};
+export const getAllTimeSinceToday = (result: any, platform: any) => {};

index.d.ts

@@ -1,4 +1,23 @@
-import type { PrismaClient } from "@prisma/client";
+import type { Session } from "next-auth";
+import type { NextApiResponse, NextApiHandler } from "next";
+import type {
+  PrismaClient,
+  PlatformQueryConfig,
+  Connection,
+} from "@prisma/client";
+import type { ServerResponse } from "http";
+
+type ResponseLocals = {
+  locals: {
+    platformQueryConfig: PlatformQueryConfig & {
+      platformQuery: PlatformQuery;
+      platform: Platform;
+    };
+    connection: Connection;
+    services: any;
+    templates: any;
+  };
+};
 
 declare global {
   namespace globalThis {
@@ -20,8 +39,19 @@ declare module "next-auth" {
 
 // change unstable_getServerSession returning type
 declare module "next-auth/next" {
-  import type { Session } from "next-auth";
   export function unstable_getServerSession(
     ...args: Parameters<typeof getServerSession>
   ): Promise<Session | null>;
 }
+
+// wide NexApiResponse for res.locals
+// but don't override, wide
+declare module "next" {
+  type NextApiHandler<T = any> = (
+    req: NextApiRequest,
+    res: NextApiResponse<T> & ResponseLocals
+  ) => unknown | Promise<unknown>;
+  type NextApiResponse = NextApiResponse & ResponseLocals;
+}
+
+declare module "http" {}