palette generation function

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "contribution-heatmap",
-	"version": "1.4.1",
+	"version": "1.4.2",
 	"description": "a github-inspired react contribution heatmap component",
 	"scripts": {
 		"test": "jest",
@@ -68,6 +68,7 @@
 		"typescript": "^4.5.5"
 	},
 	"dependencies": {
+		"hex-blender": "^0.0.3",
 		"nice-color-palettes": "^3.0.0",
 		"styled-components": "^5.3.3"
 	}

src/heatmap/Heatmap.stories.tsx

@@ -32,15 +32,6 @@ Default.args = {
 	},
 }
 
-export const PurpleTheme = Template.bind({})
-PurpleTheme.args = {
-	args: {
-		squareNumber: DAYS_IN_YEAR,
-		count: getRandomCount(DAYS_IN_YEAR),
-		colours: ['#ebedf0', '#e2dbe9', '#bcaecc', '#5a4565', '#3e204f'],
-	},
-}
-
 export const RandomColour = () => {
 	console.log(randomColours.length)
 	return (
@@ -50,3 +41,13 @@ export const RandomColour = () => {
 		/>
 	)
 }
+
+export const ColourGen = () => {
+	return (
+		<Heatmap
+			startColour="ff0000"
+			endColour="00ff00"
+			count={getRandomCount(DAYS_IN_YEAR)}
+		/>
+	)
+}

src/heatmap/Heatmap.tsx

@@ -10,7 +10,9 @@ import {
 	getRandomCount,
 	transformCount,
 	transformPixelsToNumber,
+	paletteGen,
 } from '../utils'
+// import hexBlend from 'hex-blender'
 import styled from 'styled-components'
 
 export interface IProps {
@@ -50,17 +52,28 @@ export interface IProps {
 	 * @default '${count[i]} contributions on this day'
 	 */
 	tooltipContent?: string
+	/**
+	 * @description the starting colour for random colour generation
+	 */
+	startColour?: string
+	/**
+	 * @description the ending colour for ranodm colour generation
+	 */
+	endColour?: string
 }
 
 const Heatmap: React.FC<IProps> = (props: IProps) => {
+	// random colours
 	// variables
-	let colour = props.colour || [
-		'#ebedf0',
-		'#c6e48b',
-		'#40c463',
-		'#30a14e',
-		'#216e39',
-	]
+	let colour =
+		props.colour || [
+			'#ebedf0',
+			'#c6e48b',
+			'#40c463',
+			'#30a14e',
+			'#216e39',
+		] ||
+		paletteGen(props.startColour, props.endColour)
 	let squareNumber: number = props.squareNumber || DAYS_IN_YEAR
 	let count: number[] = props.count || getRandomCount(squareNumber)
 	let level: number[] = count.map((i: number) => transformCount(i))

src/utils.ts

@@ -31,3 +31,57 @@ export const transformPixelsToNumber = (pixel: string) => {
 	let exp = /-?\d+/g
 	return parseInt(exp.exec(pixel.toString())[0])
 }
+
+export const hexBlend = (
+	colour1: string,
+	colour2: string,
+	res: number,
+	blend: number
+) => {
+	const wrongChar: RegExp = /[^0-9a-f]/i
+
+	if (
+		colour1.length !== 6 ||
+		colour2.length !== 6 ||
+		wrongChar.test(colour1) ||
+		wrongChar.test(colour2)
+	)
+		return -1
+
+	const getcolourFromRange = (range: number[], res: number, arg: number) =>
+		((range[1] - range[0]) / res) * arg + range[0]
+
+	const [RGB1, RGB2]: any = [colour1.match(/.{2}/g), colour2.match(/.{2}/g)]
+
+	return [
+		~~getcolourFromRange(
+			[parseInt(RGB1[0], 16), parseInt(RGB2[0], 16)],
+			res,
+			blend
+		),
+		~~getcolourFromRange(
+			[parseInt(RGB1[1], 16), parseInt(RGB2[1], 16)],
+			res,
+			blend
+		),
+		~~getcolourFromRange(
+			[parseInt(RGB1[2], 16), parseInt(RGB2[2], 16)],
+			res,
+			blend
+		),
+	]
+		.map((el) => el.toString(16).padStart(2, '0'))
+		.join('')
+}
+
+export const paletteGen = (startColour: string, endColour: string) => {
+	let arr: string[] = new Array(5)
+	let middleColour: string = `#${hexBlend(arr[0], arr[4], 4, 2)}`
+	let secondColour: string = `#${hexBlend(arr[0], middleColour, 4, 1)}`
+	let thirdColour: string = `#${hexBlend(middleColour, arr[4], 4, 3)}`
+	arr[0] = startColour
+	arr[1] = secondColour
+	arr[2] = middleColour
+	arr[3] = thirdColour
+	arr[4] = endColour
+}

tsconfig.json

@@ -75,7 +75,7 @@
 
 		/* Type Checking */
 		"strict": true /* Enable all strict type-checking options. */,
-		"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
+		"noImplicitAny": false /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
 		"strictNullChecks": false /* When type checking, take into account `null` and `undefined`. */,
 		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 		// "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */

yarn.lock

@@ -6321,6 +6321,11 @@ he@^1.2.0:
   resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hex-blender@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/hex-blender/-/hex-blender-0.0.3.tgz#37b526434887983bb7d7bbf897dd1e139d4bfdcf"
+  integrity sha512-7/6Dr33e3o9UPt7WSH247RAcDsX3BFvk6QP5CF+F0+1Hne4v2fVpecfK3yLa587iYCAb5jI7Eumesk3aJCcgrg==
+
 highlight.js@^10.1.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz"