Custom progress bar colour

.github/workflows/main.yml

@@ -34,7 +34,7 @@ jobs:
           github_user_name: platane
           outputs: |
             dist/github-contribution-grid-snake.svg
-            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
+            dist/github-contribution-grid-snake-dark.svg?palette=github-dark&color_progress=#FF5733
             dist/github-contribution-grid-snake.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
       - name: ensure the generated file exists
@@ -72,7 +72,7 @@ jobs:
           github_user_name: platane
           outputs: |
             dist/github-contribution-grid-snake.svg
-            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
+            dist/github-contribution-grid-snake-dark.svg?palette=github-dark&color_progress=#FF5733
             dist/github-contribution-grid-snake-blue.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
       - name: ensure the generated file exists

.github/workflows/manual-run.yml

@@ -16,15 +16,15 @@ jobs:
           github_user_name: ${{ github.repository_owner }}
           outputs: |
             dist/only-svg/github-contribution-grid-snake.svg
-            dist/only-svg/github-contribution-grid-snake-dark.svg?palette=github-dark
+            dist/only-svg/github-contribution-grid-snake-dark.svg?palette=github-dark&color_progress=#FF5733
             dist/only-svg/github-contribution-grid-snake-blue.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
       - uses: Platane/snk@v3
         with:
           github_user_name: ${{ github.repository_owner }}
           outputs: |
             dist/docker/github-contribution-grid-snake.svg
-            dist/docker/github-contribution-grid-snake-dark.svg?palette=github-dark
+            dist/docker/github-contribution-grid-snake-dark.svg?palette=github-dark&color_progress=#FF5733
             dist/docker/github-contribution-grid-snake.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
       - name: ensure the generated file exists

README.md

@@ -47,9 +47,10 @@ Available as github action. It can automatically generate a new image each day.
     #  supported options:
     #  - palette:     A preset of color, one of [github, github-dark, github-light]
     #  - color_snake: Color of the snake
-    #  - color_dots:  Coma separated list of dots color.
+    #  - color_dots:  Comma separated list of dots color.
     #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
     #                 Exactly 5 colors are expected.
+    #  - color_progress: Color of the progress bar.
     outputs: |
       dist/github-snake.svg
       dist/github-snake-dark.svg?palette=github-dark

action.yml

@@ -20,13 +20,14 @@ inputs:
       list of files to generate.
       one file per line. Each output can be customized with options as query string.
 
-       supported query string options:
+      supported query string options:
 
       - palette:      A preset of color, one of [github, github-dark, github-light]
       - color_snake:  Color of the snake
-      - color_dots:   Coma separated list of dots color. 
+      - color_dots:   Comma separated list of dots color. 
                       The first one is 0 contribution, then it goes from the low contribution to the highest.
                       Exactly 5 colors are expected.
+      - color_progress: Color of the progress bar.
       example:
         outputs: |
           dark.svg?palette=github-dark&color_snake=blue

packages/action/__tests__/outputsOptions.spec.ts

@@ -22,6 +22,11 @@ it("should parse options as searchparams", () => {
     "yellow",
   );
 
+  expect(parseEntry(`/out.svg?color_progress=red`)?.drawOptions).toHaveProperty(
+    "colorProgress",
+    "red",
+  );
+
   expect(
     parseEntry(`/out.svg?color_dots=#000,#111,#222,#333,#444`)?.drawOptions
       .colorDots,

packages/action/outputsOptions.ts

@@ -53,6 +53,8 @@ export const parseEntry = (entry: string) => {
   }
 
   if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
+  if (sp.has("color_progress"))
+    drawOptions.colorProgress = sp.get("color_progress")!;
   if (sp.has("color_dots")) {
     const colors = sp.get("color_dots")!.split(/[,;]/);
     drawOptions.colorDots = colors;
@@ -76,6 +78,8 @@ export const parseEntry = (entry: string) => {
     drawOptions.dark.colorDotBorder = sp.get("color_dot_border")!;
   if (sp.has("dark_color_snake") && drawOptions.dark)
     drawOptions.dark.colorSnake = sp.get("color_snake")!;
+  if (sp.has("dark_color_progress") && drawOptions.dark)
+    drawOptions.dark.colorProgress = sp.get("dark_color_progress")!;
 
   return {
     filename,

packages/draw/drawWorld.ts

@@ -9,6 +9,7 @@ export type Options = {
   colorEmpty: string;
   colorDotBorder: string;
   colorSnake: string;
+  colorProgress?: string;
   sizeCell: number;
   sizeDot: number;
   sizeDotBorderRadius: number;
@@ -19,15 +20,16 @@ export const drawStack = (
   stack: Color[],
   max: number,
   width: number,
-  o: { colorDots: Record<Color, string> },
+  o: { colorDots: Record<Color, string>; colorProgress?: string },
 ) => {
   ctx.save();
 
   const m = width / max;
 
   for (let i = 0; i < stack.length; i++) {
+    // Use custom stack color if provided, otherwise use the color from colorDots
     // @ts-ignore
-    ctx.fillStyle = o.colorDots[stack[i]];
+    ctx.fillStyle = o.colorProgress || o.colorDots[stack[i]];
     ctx.fillRect(i * m, 0, m + width * 0.005, 10);
   }
   ctx.restore();

packages/svg-creator/index.ts

@@ -21,6 +21,7 @@ export type DrawOptions = {
   colorEmpty: string;
   colorDotBorder: string;
   colorSnake: string;
+  colorProgress?: string;
   sizeCell: number;
   sizeDot: number;
   sizeDotBorderRadius: number;
@@ -29,6 +30,7 @@ export type DrawOptions = {
     colorEmpty: string;
     colorDotBorder?: string;
     colorSnake?: string;
+    colorProgress?: string;
   };
 };
 
@@ -86,7 +88,10 @@ export const createSvg = (
     createGrid(livingCells, drawOptions, duration),
     createStack(
       livingCells,
-      drawOptions,
+      {
+        sizeDot: drawOptions.sizeDot,
+        colorProgress: drawOptions.colorProgress,
+      },
       grid.width * drawOptions.sizeCell,
       (grid.height + 2) * drawOptions.sizeCell,
       duration,

packages/svg-creator/stack.ts

@@ -4,11 +4,12 @@ import { h } from "./xml-utils";
 
 export type Options = {
   sizeDot: number;
+  colorProgress?: string;
 };
 
 export const createStack = (
   cells: { t: number | null; color: Color | Empty }[],
-  { sizeDot }: Options,
+  { sizeDot, colorProgress }: Options,
   width: number,
   y: number,
   duration: number,
@@ -72,7 +73,7 @@ export const createStack = (
       ),
 
       `.u.${id} {
-        fill: var(--c${color});
+        fill: ${colorProgress ? colorProgress : `var(--c${color})`};
         animation-name: ${animationName};
         transform-origin: ${x}px 0
       }