feat: hide grid by setting it to false; closes: #212

Author: Ashutosh00710

README.md

@@ -104,6 +104,7 @@ Customize the appearance of your Activity Graph however you want with URL params
 |     `days`     |      number of to days display on graph       | number between (1 - 90) [Recommended below 40] |
 |     `from`     |       date from which the graph starts        |              format `YYYY-MM-DD`               |
 |      `to`      |         date where the graph will end         |              format `YYYY-MM-DD`               |
+|     `grid`     |                   show grid                   |           boolean (default: `true`)            |
 
 ⚠ **For `custom_title` please make sure that you are using %20 for spaces**
 

src/GraphCards.ts

@@ -9,7 +9,8 @@ export class Card {
         private readonly radius: number,
         private readonly colors: Colors,
         private readonly title = '',
-        private readonly area = false
+        private readonly area = false,
+        private readonly showGrid = true
     ) {}
 
     private getOptions() {
@@ -24,13 +25,15 @@ export class Card {
                     y: 4.5,
                 },
                 low: 0,
+                showGrid: this.showGrid,
             },
             axisX: {
                 title: 'Days',
                 offset: 50,
                 labelOffset: {
                     x: -4.5,
                 },
+                showGrid: this.showGrid,
             },
             chartPadding: {
                 top: 80,

src/interfaces/interface.ts

@@ -21,6 +21,7 @@ export class QueryOption {
     custom_title?: string;
     from?: string;
     to?: string;
+    grid: boolean;
     colors: Colors;
     area: boolean;
     radius: number;
@@ -46,6 +47,7 @@ export class ParsedQs {
     days?: string;
     from?: string;
     to?: string;
+    grid?: string;
 }
 
 export class GraphArgs {

src/utils.ts

@@ -119,6 +119,7 @@ export class Utilities {
                 ? Math.min(Math.max(this.queryString.height, 200), 600)
                 : 420, // Custom height implementation from range [200, 600], if not specified use default value - 420
             days: isFromValid && isToValid ? days : this.validateDays(this.queryString.days),
+            grid: this.queryString.grid === 'false' ? false : true,
             from,
             to,
         };
@@ -150,7 +151,8 @@ export class Utilities {
                 options.radius,
                 options.colors,
                 title,
-                options.area
+                options.area,
+                options.grid
             );
             const getChart = await graph.buildGraph(fetchCalendarData.contributions);
             return {