sallar/github-contributions-canvas

A tool for drawing a heat-map of Github contributions on HTML Canvas

Github Contributions on Canvas

A tool for drawing a heat-map of Github contributions on HTML Canvas.

This module is used for drawing user contributions in this project.

Install

$ npm install github-contributions-canvas

Usage

import { drawContributions } from "github-contributions-canvas";

drawContributions(canvasEl, {
  data: contributionData,
  username: "myusername",
  themeName: "standard",
  footerText: "Made by @sallar - github-contributions.now.sh"
});

Available Themes

The themes are defined in the src/themes.js file. Currently the available themes are:

• standard
• halloween
• teal
• leftPad
• dracula
• blue
• panda
• sunny
• pink
• YlGnBu
• solarizedDark
• solarizedLight

Data Format

This module accepts the output from sallar/github-contributions-api API. Check that project for more info.

License

Sallar Kaboli © MIT License

github-contributions-canvas's Issues

Chart does not render according to set size

No matter what values I put for width and height on the canvas, it still tries to render the chart as large as possible

start on the correct day of the week

is there any chance to start the yearly charts on the correct day of the week? currently they all start at the same day, and it would be great to have the end of one year to match with the start of the following year. thanks!

Feature Request: Add option to render image for the last XX month instead of a year

How about making the year parameter optional, if no year is defined, you can render the last twelve month (like it is shown on github)

years: [{
	range: {
		start: '2018-02-12',
		end: '2019-02-12'
	}
}]

Or is there already such an option I am missing?

year count is always 0

The total count of all time is correct, but the count per year is always 0

[Security] Workflow size.yml is using vulnerable action actions/checkout

The workflow size.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

Allow specifying custom themes

The drawContributions method currently only allows using one of the predefined themes. The drawing mechanism would be much more flexible if it would be possible to define the theme colors in the method call (while of course still being able to use the standard themes).

[FR] Export to PNG on Node.js

I tried doing this myself (using https://github.com/Automattic/node-canvas), but I couldn't get it to work:

#!/usr/bin/env node

const fs = require('fs')
const { createCanvas, loadImage } = require('canvas')

const width = 1200
const height = 630

const canvas = createCanvas(width, height)

const { drawContributions } = require("github-contributions-canvas")

contributionData = {
  "years": [
    {
      "year": "2018",
      "total": 11,
      "range": {
        "start": "2018-01-01",
        "end": "2018-12-31"
      }
    }
  ],
  "contributions": [
      {
      "date": "2018-01-05",
      "count": 0,
      "color": "#ebedf0",
      "intensity": "0"
    },
    {
      "date": "2018-01-04",
      "count": 2,
      "color": "#9be9a8",
      "intensity": "1"
    },
    {
      "date": "2018-01-03",
      "count": 0,
      "color": "#ebedf0",
      "intensity": "0"
    },
    {
      "date": "2018-01-02",
      "count": 9,
      "color": "#216e39",
      "intensity": "4"
    },
    {
      "date": "2018-01-01",
      "count": 0,
      "color": "#ebedf0",
      "intensity": "0"
    }
  ]
}


drawContributions(canvas, {
  data: contributionData,
  username: "myusername",
  themeName: "standard",
  footerText: "Made by @sallar - github-contributions.now.sh"
});

const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./test.png', buffer)

/usr/local/lib/node_modules/github-contributions-canvas/dist/index.js:65
var scaleFactor = window.devicePixelRatio || 1;
                  ^

ReferenceError: window is not defined
    at Object.<anonymous> (/usr/local/lib/node_modules/github-contributions-canvas/dist/index.js:65:19)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/evar/scripts/javascript/activityChart.js:11:31)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)