I'm a software developer based in Helsinki, Finland.
sallar / github-contributions-canvas Goto Github PK
View Code? Open in Web Editor NEWA tool for drawing a heat-map of Github contributions on HTML Canvas
License: MIT License
A tool for drawing a heat-map of Github contributions on HTML Canvas
License: MIT License
I'm a software developer based in Helsinki, Finland.
No matter what values I put for width
and height
on the canvas, it still tries to render the chart as large as possible
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).
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.
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!
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?
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.