feat(border_color): add border_color customization option and update examples (closes #238)

Author: Ashutosh00710

README.md

@@ -20,25 +20,25 @@ Please refer to the updated link [here](#how-to-use)
 
 ## Table of contents
 
--   [Table of contents](#table-of-contents)
--   [How to Use](#how-to-use)
-    -   [Attention ⚠](#attention-)
--   [Use themes](#use-themes)
--   [Available Themes](#available-themes)
--   [Customization](#customization)
-    -   [Common Options](#common-options)
--   [Deploy on your own Replit instance](#deploy-on-your-own-replit-instance)
-    -   [Follow the steps](#follow-the-steps)
--   [Deploy on your own Vercel instance](#deploy-on-your-own-vercel-instance)
-    -   [First Method](#first-method)
-    -   [Second Method](#second-method)
-    -   [Finally](#finally)
--   [Contributing](#contributing)
--   [Core Team 💻](#core-team-)
--   [Contributors ✨](#contributors-)
--   [Resources Used to build this project](#resources-used-to-build-this-project)
--   [Star History](#star-history)
-    -   [Made with ❤ and TypeScript ](#made-with--and-typescript-)
+- [Table of contents](#table-of-contents)
+- [How to Use](#how-to-use)
+    - [Attention ⚠](#attention-)
+- [Use themes](#use-themes)
+- [Available Themes](#available-themes)
+- [Customization](#customization)
+    - [Common Options](#common-options)
+- [Deploy on your own Replit instance](#deploy-on-your-own-replit-instance)
+    - [Follow the steps](#follow-the-steps)
+- [Deploy on your own Vercel instance](#deploy-on-your-own-vercel-instance)
+    - [First Method](#first-method)
+    - [Second Method](#second-method)
+    - [Finally](#finally)
+- [Contributing](#contributing)
+- [Core Team 💻](#core-team-)
+- [Contributors ✨](#contributors-)
+- [Resources Used to build this project](#resources-used-to-build-this-project)
+- [Star History](#star-history)
+    - [Made with ❤ and TypeScript ](#made-with--and-typescript-)
 
 ## How to Use
 
@@ -89,6 +89,7 @@ Customize the appearance of your Activity Graph however you want with URL params
 |   Arguments    |                  Description                  |                 Type of Value                  |
 | :------------: | :-------------------------------------------: | :--------------------------------------------: |
 |   `bg_color`   |            card's background color            |             hex code (without `#`)             |
+| `border_color` |              card's border color              |             hex code (without `#`)             |
 |    `color`     |            graph card's text color            |             hex code (without `#`)             |
 | `title_color`  |           graph card's title color            |             hex code (without `#`)             |
 |     `line`     |              graph's line color               |             hex code (without `#`)             |
@@ -119,7 +120,7 @@ Example:
 **Example:**
 
 ```md
-[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=ashutosh00710&bg_color=fffff0&color=708090&line=24292e&point=24292e&area=true&hide_border=true)](https://github.com/ashutosh00710/github-readme-activity-graph)
+[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=ashutosh00710&bg_color=fffff0&color=708090&line=24292e&point=24292e&area=true&border_color=ff0000)](https://github.com/ashutosh00710/github-readme-activity-graph)
 ```
 
 ## Deploy on your own Replit instance

__test__/fakeInputs.ts

@@ -85,6 +85,17 @@ export let fakeQueryString = [
         hide_border: true,
         custom_title: 'some title',
     },
+    {
+        username: 'githubusername',
+        bg_color: '44475a',
+        border_color: 'ff0000',
+        color: 'f8f8f2',
+        line: 'ff79c6',
+        point: 'bd93f9',
+        area: true,
+        hide_title: false,
+        custom_title: undefined,
+    },
 ];
 
 export let fakeQueryStringRes = [
@@ -269,6 +280,26 @@ export let fakeQueryStringRes = [
         to: '',
         grid: true,
     },
+    {
+        username: 'githubusername',
+        radius: 0,
+        height: 420,
+        colors: {
+            areaColor: '9e4c98',
+            bgColor: '44475a',
+            borderColor: 'ff0000',
+            color: 'f8f8f2',
+            titleColor: 'f8f8f2',
+            lineColor: 'ff79c6',
+            pointColor: 'bd93f9',
+        },
+        area: true,
+        hide_title: false,
+        days: 31,
+        from: '',
+        to: '',
+        grid: true,
+    },
 ];
 
 export let fakeGraphArgs: GraphArgs = {

__test__/mockFunctions.ts

@@ -25,7 +25,7 @@ export const mockFetchCorrect = jest.fn().mockReturnValue(
                 },
             },
         },
-    })
+    }),
 );
 
 //For invalid username

__test__/svgs.test.ts

@@ -23,7 +23,7 @@ describe('SVG Testing', () => {
                 fakeQueryStringRes[0].radius,
                 fakeQueryStringRes[0].colors,
                 "xyz's Contribution Graph",
-                fakeQueryStringRes[0].area
+                fakeQueryStringRes[0].area,
             ).buildGraph([
                 {
                     contributionCount: 2,
@@ -45,7 +45,7 @@ describe('SVG Testing', () => {
                     contributionCount: 14,
                     date: '1',
                 },
-            ])
+            ]),
         ).toMatchSnapshot();
     });
 });

src/GraphCards.ts

@@ -10,7 +10,7 @@ export class Card {
         private readonly colors: Colors,
         private readonly title = '',
         private readonly area = false,
-        private readonly showGrid = true
+        private readonly showGrid = true,
     ) {}
 
     private getOptions() {

src/handlers.ts

@@ -18,7 +18,7 @@ export class Handlers {
             const fetchCalendarData = await fetcher.fetchContributions(
                 utils.queryOptions().days,
                 queryOptions.from,
-                queryOptions.to
+                queryOptions.to,
             );
 
             const { finalGraph, header } = await utils.buildGraph(fetchCalendarData);
@@ -38,7 +38,7 @@ export class Handlers {
 
             const fetcher = new Fetcher(utils.username);
             const fetchCalendarData: UserDetails | string = await fetcher.fetchContributions(
-                utils.queryOptions().days
+                utils.queryOptions().days,
             );
 
             if (typeof fetchCalendarData === 'object') {

src/interfaces/interface.ts

@@ -34,6 +34,7 @@ export class ParsedQs {
     hide_title?: boolean;
     custom_title?: string;
     bg_color?: string;
+    border_color?: string;
     hide_border?: boolean;
     area_color?: string;
     color?: string;

src/svgs.ts

@@ -12,8 +12,8 @@ export const graphSvg = (props: GraphArgs) => `
             <rect xmlns="http://www.w3.org/2000/svg" data-testid="card_bg" id="cardBg"
             x="0" y="0" rx="${props.radius}" height="100%" stroke="#E4E2E2" fill-opacity="1"
             width="100%" fill="#${props.colors.bgColor}" stroke-opacity="1" style="stroke:#${
-    props.colors.borderColor
-}; stroke-width:1;"/>
+                props.colors.borderColor
+            }; stroke-width:1;"/>
 
             <style>
                 body {
@@ -33,7 +33,7 @@ export const graphSvg = (props: GraphArgs) => `
                     props.colors.color,
                     props.colors.lineColor,
                     props.colors.pointColor,
-                    props.colors.areaColor
+                    props.colors.areaColor,
                 )}
                 ${pointAnimation()}
                 ${lineAnimation()}

src/utils.ts

@@ -20,16 +20,17 @@ export class Utilities {
             bgColor: this.queryString.bg_color
                 ? this.queryString.bg_color
                 : selectColors(theme).bgColor,
-            borderColor:
-                String(this.queryString.hide_border) === 'true'
-                    ? '0000' // transparent
-                    : selectColors(theme).borderColor,
+            borderColor: this.queryString.border_color
+                ? this.queryString.border_color
+                : String(this.queryString.hide_border) === 'true'
+                  ? '0000' // transparent
+                  : selectColors(theme).borderColor,
             color: this.queryString.color ? this.queryString.color : selectColors(theme).color,
             titleColor: this.queryString.title_color
                 ? this.queryString.title_color
                 : this.queryString.color
-                ? this.queryString.color
-                : selectColors(theme).titleColor,
+                  ? this.queryString.color
+                  : selectColors(theme).titleColor,
             lineColor: this.queryString.line
                 ? this.queryString.line
                 : selectColors(theme).lineColor,
@@ -152,7 +153,7 @@ export class Utilities {
                 options.colors,
                 title,
                 options.area,
-                options.grid
+                options.grid,
             );
             const getChart = await graph.buildGraph(fetchCalendarData.contributions);
             return {