Merge pull request #65 from maurodesouza/feature/github-activity-graph

✨ feat: add github activity graph
maurodesouza · Jan 4, 2024 · e49da3c · e49da3c · vercel · Jan 4, 2024
2 parents c054cdc + 2b1749f
commit e49da3c
Show file tree

Hide file tree

Showing 8 changed files with 287 additions and 3 deletions.
diff --git a/src/app/config/general/index.ts b/src/app/config/general/index.ts
@@ -18,6 +18,8 @@ const general = {
         imageBaseUrl: 'https://github-readme-stats.vercel.app/api',
         streakBaseUrl: 'https://streak-stats.demolab.com',
         trophiBaseUrl: 'https://github-profile-trophy.vercel.app',
+        activityGraphBaseUrl:
+          'https://github-readme-activity-graph.vercel.app/graph',
       },
 
       socials: {

diff --git a/src/features/stats/default-config.ts b/src/features/stats/default-config.ts
@@ -53,6 +53,15 @@ const defaultStatsSectionConfig = {
           show: false,
           order: 4,
         },
+
+        'activity-graph': {
+          height: 300,
+          radius: 16,
+          theme: 'react',
+          area: true,
+          order: 5,
+          show: false,
+        },
       },
     },
 

diff --git a/src/features/stats/panel/views/config/index.tsx b/src/features/stats/panel/views/config/index.tsx
@@ -30,7 +30,7 @@ const Config = () => {
         defaultValue={currentTab}
         onChange={setCurrentTab}
         options={viewNames.map(view => ({
-          label: capitalize(view),
+          label: view.split('-').map(capitalize).join(' '),
           value: view,
         }))}
       />

diff --git a/src/features/stats/panel/views/config/views/@shared/custom-title-field.ts b/src/features/stats/panel/views/config/views/@shared/custom-title-field.ts
@@ -1,6 +1,6 @@
 import { Inputs } from 'types';
 
-const customTitleField = (graph: 'stats' | 'languages') => ({
+const customTitleField = (graph: 'stats' | 'languages' | 'activity-graph') => ({
   type: Inputs.TEXT,
   path: `content.graphs.${graph}.custom_title`,
   label: 'Custom title',

diff --git a/src/features/stats/panel/views/config/views/activity-graph/fields.ts b/src/features/stats/panel/views/config/views/activity-graph/fields.ts
@@ -0,0 +1,251 @@
+import { customTitleField, showField } from '../@shared';
+import { Inputs } from 'types';
+
+const groups = [
+  {
+    id: 1,
+
+    fields: [showField('activity-graph'), customTitleField('activity-graph')],
+  },
+  {
+    id: 2,
+    label: 'Theme',
+    columns: 2,
+    fields: [
+      {
+        type: Inputs.SELECT,
+        path: 'content.graphs.activity-graph.theme',
+        label: 'Base theme',
+        props: {
+          column: '1 / 3',
+          clearable: true,
+          options: [
+            {
+              label: 'Cotton Candy',
+              value: 'cotton-candy',
+            },
+            {
+              label: 'Redical',
+              value: 'redical',
+            },
+            {
+              label: 'Coral',
+              value: 'coral',
+            },
+            {
+              label: 'Nord',
+              value: 'nord',
+            },
+            {
+              label: 'Lucent',
+              value: 'lucent',
+            },
+            {
+              label: 'Dracula',
+              value: 'dracula',
+            },
+            {
+              label: 'Gruvbox',
+              value: 'gruvbox',
+            },
+            {
+              label: 'Chartreuse Dark',
+              value: 'chartreuse-dark',
+            },
+            {
+              label: 'Github Light',
+              value: 'github-light',
+            },
+            {
+              label: 'Github Dark',
+              value: 'github-dark',
+            },
+            {
+              label: 'Github Dark Dimmed',
+              value: 'github-dark-dimmed',
+            },
+            {
+              label: 'Minimal',
+              value: 'minimal',
+            },
+            {
+              label: 'Material Palenight',
+              value: 'material-palenight',
+            },
+            {
+              label: 'Green',
+              value: 'green',
+            },
+            {
+              label: 'Gotham',
+              value: 'gotham',
+            },
+            {
+              label: 'Noctis Minimus',
+              value: 'noctis-minimus',
+            },
+            {
+              label: 'Monokai',
+              value: 'monokai',
+            },
+            {
+              label: 'One Dark',
+              value: 'one-dark',
+            },
+            {
+              label: 'Elegant',
+              value: 'elegant',
+            },
+            {
+              label: 'Aqua',
+              value: 'aqua',
+            },
+            {
+              label: 'Synthwave 84',
+              value: 'synthwave-84',
+            },
+            {
+              label: 'React',
+              value: 'react',
+            },
+            {
+              label: 'Merko',
+              value: 'merko',
+            },
+            {
+              label: 'Vue',
+              value: 'vue',
+            },
+            {
+              label: 'Tokyo Day',
+              value: 'tokyo-day',
+            },
+            {
+              label: 'Tokyo Night',
+              value: 'tokyo-night',
+            },
+            {
+              label: 'High Contrast',
+              value: 'high-contrast',
+            },
+            {
+              label: 'Cobalt',
+              value: 'cobalt',
+            },
+            {
+              label: 'Material',
+              value: 'material',
+            },
+            {
+              label: 'Nightowl',
+              value: 'nightowl',
+            },
+            {
+              label: 'Modern Lilac',
+              value: 'modern-lilac',
+            },
+            {
+              label: 'Arctic',
+              value: 'arctic',
+            },
+          ],
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.bg_color`,
+        label: 'Background color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.color`,
+        label: 'Text color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.title_color`,
+        label: 'Title color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.line`,
+        label: 'Line color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.point`,
+        label: 'Point color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.area_color`,
+        label: 'Area color',
+        props: {
+          placeholder: 'hex color (without #)',
+        },
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Layout',
+    columns: 2,
+    fields: [
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.height`,
+        label: 'Height',
+        props: {
+          type: 'number',
+          min: 200,
+          max: 600,
+        },
+      },
+      {
+        type: Inputs.TEXT,
+        path: `content.graphs.activity-graph.radius`,
+        label: 'Border radius',
+        props: {
+          type: 'number',
+          min: 0,
+          max: 16,
+        },
+      },
+      {
+        type: Inputs.SWITCH,
+        path: `content.graphs.activity-graph.area`,
+        label: 'Shows area under the graph',
+        props: {
+          column: '1 / 3',
+        },
+      },
+      {
+        type: Inputs.SWITCH,
+        path: `content.graphs.activity-graph.hide_border`,
+        label: 'Hide border',
+      },
+      {
+        type: Inputs.SWITCH,
+        path: `content.graphs.activity-graph.hide_title`,
+        label: 'Hide title',
+      },
+    ],
+  },
+];
+
+export { groups };
diff --git a/src/features/stats/panel/views/config/views/activity-graph/index.tsx b/src/features/stats/panel/views/config/views/activity-graph/index.tsx
@@ -0,0 +1,14 @@
+import { GroupFields } from 'components';
+import { groups } from './fields';
+
+const ActivityGraph = () => {
+  return (
+    <>
+      {groups.map(group => (
+        <GroupFields key={group.id} {...group} />
+      ))}
+    </>
+  );
+};
+
+export { ActivityGraph };
diff --git a/src/features/stats/panel/views/config/views/index.ts b/src/features/stats/panel/views/config/views/index.ts
@@ -29,6 +29,13 @@ const views: Record<string, ComponentType> = {
       () => () => null
     )
   ),
+
+  'activity-graph': dynamic(() =>
+    import('./activity-graph').then(
+      mod => mod.ActivityGraph,
+      () => () => null
+    )
+  ),
 };
 
 export { views };
diff --git a/src/utils/getStatsUrl/index.ts b/src/utils/getStatsUrl/index.ts
@@ -1,13 +1,14 @@
 import { general as generalConfig } from 'app/config/general';
 
-const { imageBaseUrl, streakBaseUrl, trophiBaseUrl } =
+const { imageBaseUrl, streakBaseUrl, trophiBaseUrl, activityGraphBaseUrl } =
   generalConfig.urls.sections.stats;
 
 const urls = (value: string) => ({
   stats: `${imageBaseUrl}?username=${value}`,
   languages: `${imageBaseUrl}/top-langs?username=${value}`,
   streak: `${streakBaseUrl}?user=${value}`,
   trophy: `${trophiBaseUrl}?username=${value}`,
+  'activity-graph': `${activityGraphBaseUrl}?username=${value}`,
 });
 
 const getStatsUrl = (type: keyof typeof urls, github: string) =>