Misc Update

Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>

.eslintrc.json

@@ -66,6 +66,8 @@
 		"padded-blocks": ["error", { "classes": "always" }],
 		"import/order": ["error"],
 		"import/no-named-as-default-member": "off",
-		"import/no-named-as-default": "off"
+		"import/no-named-as-default": "off",
+		"camelcase": "off",
+		"valid-jsdoc": "off"
 	}
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -22,20 +22,9 @@ Add any other context about the problem here.
 
 PLEASE READ THE FAQs!!!
 
-Q: How to hide jupyter Notebook?
-Ans: &hide=jupyter%20notebook
-
 Q: I could not figure out how to deploy on my own vercel instance
 Ans:
-  - docs: https://github.com/anuraghazra/github-readme-stats/#deploy-on-your-own-vercel-instance
+  - docs: https://github.com/aviortheking/codestats-readme/#deploy-on-your-own-vercel-instance
   - YT tutorial by codeSTACKr: https://www.youtube.com/watch?v=n6d4KHSKqGk&feature=youtu.be&t=107
 
-Q: Language Card is incorrect
-Ans: Please read all the issues / comments before opening any issues regarding language card stats:
-    - https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665164174
-    - https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665172181
-
-Q: How to count private stats?
-Ans: We can only count private commits & we cannot access any other private info of any users, so it's not possible. only way is to deploy on your own instance & use your own PAT (Personal Access Token)
-
 -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -22,20 +22,9 @@ Add any other context or screenshots about the feature request here.
 
 PLEASE READ THE FAQs!!!
 
-Q: How to hide jupyter Notebook?
-Ans: &hide=jupyter%20notebook
-
 Q: I could not figure out how to deploy on my own vercel instance
 Ans:
-  - docs: https://github.com/anuraghazra/github-readme-stats/#deploy-on-your-own-vercel-instance
+  - docs: https://github.com/aviortheking/codestats-readme/#deploy-on-your-own-vercel-instance
   - YT tutorial by codeSTACKr: https://www.youtube.com/watch?v=n6d4KHSKqGk&feature=youtu.be&t=107
 
-Q: Language Card is incorrect
-Ans: Please read all the issues / comments before opening any issues regarding language card stats:
-    - https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665164174
-    - https://github.com/anuraghazra/github-readme-stats/issues/136#issuecomment-665172181
-
-Q: How to count private stats?
-Ans: We can only count private commits & we cannot access any other private info of any users, so it's not possible. only way is to deploy on your own instance & use your own PAT (Personal Access Token)
-
 -->

.github/labeler.yml

@@ -1,2 +0,0 @@
-themes: themes/index.js
-doc-translation: docs/*

.github/workflows/generate-theme-doc.yml

@@ -1,35 +0,0 @@
-name: Generate Theme Readme
-
-on:
-  push:
-    branches:
-      - master
-    paths:
-      - "themes/index.js"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v1
-      - name: setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: "12.x"
-
-      - name: npm install, generate readme
-        run: |
-          npm install
-          npm run theme-readme-gen
-        env:
-          CI: true
-
-      - name: Run Script
-        uses: skx/github-action-tester@master
-        with:
-          script: ./scripts/push-theme-readme.sh
-        env:
-          CI: true
-          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
-          GH_REPO: ${{ secrets.GH_REPO }}

.github/workflows/label-pr.yml

@@ -1,11 +0,0 @@
-name: "Pull Request Labeler"
-on:
-  - pull_request_target
-
-jobs:
-  triage:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/labeler@v2
-        with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/preview-theme.yml

@@ -1,28 +0,0 @@
-name: Theme preview
-
-on:
-  pull_request_target:
-    types: [opened, synchronize, reopened]
-    branches:
-      - master
-      - theme-preview-script
-      - "themes/index.js"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v1
-      - name: setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: "12.x"
-
-      - name: npm install, preview theme
-        run: |
-          npm install
-          npm run preview-theme
-        env:
-          CI: true
-          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}

.github/workflows/test.yml

@@ -1,39 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches:
-      - "*"
-  pull_request:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: "12.x"
-
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-cache-
-
-      - name: Install & Test
-        run: |
-          npm install
-          npm run test
-
-      - name: Code Coverage
-        uses: codecov/codecov-action@v1

.gitignore

@@ -1,8 +1,6 @@
 .vercel
 .env
 node_modules
-package-lock.json
-*.lock
 .vscode/
 coverage
 yarn-error.log

api/history.ts

@@ -1,16 +1,13 @@
-import { parseBoolean, prepareResponse, setCache, parseNumber, clampValue, parseArray} from '../src/common/utils'
-import { fetchHistory } from '../src/fetcher'
 import { Request, Response } from 'express'
 import ReactDOMServer from 'react-dom/server'
+import { parseBoolean, prepareResponse, setCache, parseNumber, clampValue, parseArray } from '../src/common/utils'
+import { fetchHistory } from '../src/fetcher'
 import Error from '../src/components/Error'
 import HistoryCard from '../src/cards/HistoryCard'
+import themes from '../themes/themes.json'
 
 export interface query {
 	username: string
-	hide_title?: string
-	hide_border?: string
-	title_color?: string
-	bg_color?: string
 	days_count?: string
 	cache_seconds?: string
 	width?: string
@@ -18,28 +15,43 @@ export interface query {
 	hide?: string
 	language_count?: string
 	layout?: 'horizontal'
+	reverse_order?: string
+	hide_legend?: string
+
+	// Mater
+	bg_color?: string
+	hide_border?: string
+	hide_title?: string
+	theme?: keyof typeof themes
+	title_color?: string
 }
 
 export default async (req: Request<unknown, unknown, unknown, query>, res: Response) => {
 	const {
 		username,
-		hide_title,
-		hide_border,
-		title_color,
-		bg_color,
 		days_count,
 		cache_seconds,
 		width,
 		height,
 		language_count,
 		hide,
-		layout
-	} = req.query;
+		layout,
+		reverse_order,
+		hide_legend,
+
+		// Master
+		bg_color,
+		hide_border,
+		hide_title,
+		theme,
+		title_color
+	} = req.query
 
 	prepareResponse(res)
+	console.log(theme)
 
 	try {
-		const data = await fetchHistory(username, clampValue(parseNumber(days_count) || 14, 1, 30));
+		const data = await fetchHistory(username, clampValue(parseNumber(days_count) || 14, 1, 30))
 
 		setCache(res, parseInt(cache_seconds || ''))
 
@@ -48,8 +60,11 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
 				hide_title: parseBoolean(hide_title),
 				hide_border: parseBoolean(hide_border),
 				title_color,
+				hide_legend: parseBoolean(hide_legend),
 				bg_color,
 				layout,
+				theme,
+				reverse_order: parseBoolean(reverse_order),
 				language_count: parseNumber(language_count),
 				width: parseNumber(width),
 				height: clampValue(parseNumber(height) || 300, 200),
@@ -59,6 +74,6 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
 	} catch (err) {
 		return res.send(
 			ReactDOMServer.renderToStaticMarkup(new Error(err).render())
-		);
+		)
 	}
-};
+}

api/index.ts

@@ -1,48 +1,53 @@
-import { parseBoolean, parseArray, prepareResponse, setCache} from '../src/common/utils'
-import { fetchProfile } from '../src/fetcher'
-import { Request, Response } from 'express';
+import { Request, Response } from 'express'
 import ReactDOMServer from 'react-dom/server'
-import themes from '../themes/themes.json';
-import ProfileCard from '../src/cards/ProfileCard';
-import Error from '../src/components/Error';
+import { parseBoolean, parseArray, prepareResponse, setCache, parseNumber } from '../src/common/utils'
+import { fetchProfile } from '../src/fetcher'
+import themes from '../themes/themes.json'
+import ProfileCard from '../src/cards/ProfileCard'
+import Error from '../src/components/Error'
 
 export interface query {
 	username: string
 	hide?: string
-	hide_title?: string
-	hide_border?: string
 	hide_rank?: string
 	show_icons?: string
 	line_height?: string
-	title_color?: string
 	icon_color?: string
 	text_color?: string
-	bg_color?: string
-	theme?: keyof typeof themes
 	cache_seconds?: string
+
+	// Mater
+	bg_color?: string
+	hide_border?: string
+	hide_title?: string
+	theme?: keyof typeof themes
+	title_color?: string
 }
 
 export default async (req: Request<unknown, unknown, unknown, query>, res: Response) => {
 	const {
 		username,
 		hide,
-		hide_title,
-		hide_border,
 		hide_rank,
 		show_icons,
 		line_height,
-		title_color,
 		icon_color,
 		text_color,
+		cache_seconds,
+
+		// Master
 		bg_color,
+		hide_border,
+		hide_title,
 		theme,
-		cache_seconds
-	} = req.query;
+		title_color
+
+	} = req.query
 
 	prepareResponse(res)
 
 	try {
-		const data = await fetchProfile(username);
+		const data = await fetchProfile(username)
 
 		setCache(res, parseInt(cache_seconds || ''))
 
@@ -53,17 +58,17 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
 				hide_title: parseBoolean(hide_title),
 				hide_border: parseBoolean(hide_border),
 				hide_rank: parseBoolean(hide_rank),
-				line_height: line_height ? parseInt(line_height , 10) : undefined,
+				line_height: parseNumber(line_height),
 				title_color,
 				icon_color,
 				text_color,
 				bg_color,
-				theme,
+				theme
 			}).render()
 		))
 	} catch (err) {
 		return res.send(
 			ReactDOMServer.renderToStaticMarkup(new Error(err).render())
-		);
+		)
 	}
-};
+}

api/top-langs.ts

@@ -1,10 +1,10 @@
-import { parseBoolean, parseArray, prepareResponse, setCache, parseNumber} from '../src/common/utils'
+import { Request, Response } from 'express'
+import ReactDOMServer from 'react-dom/server'
+import { parseBoolean, parseArray, prepareResponse, setCache, parseNumber } from '../src/common/utils'
 import { fetchTopLanguages } from '../src/fetcher'
 import TopLanguagesCard from '../src/cards/TopLanguagesCard'
-import { Request, Response } from 'express';
-import ReactDOMServer from 'react-dom/server'
-import themes from '../themes/themes.json';
-import Error from '../src/components/Error';
+import themes from '../themes/themes.json'
+import Error from '../src/components/Error'
 
 export interface query {
 	username: string
@@ -35,8 +35,8 @@ export default async (req: Request<unknown, unknown, unknown, query>, res: Respo
 		language_count,
 		theme,
 		cache_seconds,
-		layout,
-	} = req.query;
+		layout
+	} = req.query
 
 	prepareResponse(res)
 

package.json

@@ -10,31 +10,23 @@
 	"author": "Anurag Hazra",
 	"license": "MIT",
 	"devDependencies": {
-		"@actions/core": "^1.2.4",
-		"@actions/github": "^4.0.0",
-		"@testing-library/dom": "^7.20.0",
-		"@testing-library/jest-dom": "^5.11.0",
 		"@types/express": "^4.17.8",
 		"@types/node-fetch": "^2.5.7",
 		"@types/react": "^16.9.49",
 		"@types/react-dom": "^16.9.8",
-		"css-to-object": "^1.1.0",
+		"@typescript-eslint/eslint-plugin": "^4.1.1",
+		"@typescript-eslint/parser": "^4.1.1",
 		"eslint": "^7.9.0",
 		"eslint-config-google": "^0.14.0",
 		"eslint-import-resolver-typescript": "^2.3.0",
 		"eslint-plugin-import": "^2.22.0",
 		"eslint-plugin-react": "^7.20.6",
 		"eslint-plugin-sonarjs": "^0.5.0",
-		"husky": "^4.2.5",
 		"jest": "^26.1.0",
-		"parse-diff": "^0.7.0",
 		"ts-node": "^9.0.0",
 		"vercel": "^20.1.0"
 	},
 	"dependencies": {
-		"dotenv": "^8.2.0",
-		"emoji-name-map": "^1.2.8",
-		"github-username-regex": "^1.0.0",
 		"node-fetch": "^2.6.1",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",

scripts/generate-theme-doc.ts

@@ -1,12 +1,15 @@
 import fs from 'fs'
-import theme from '../themes'
+import theme from '../themes/themes.json'
 
-const TARGET_FILE = "./themes/README.md";
-const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
-const STAT_CARD_LINKS_FLAG = "<!-- STATS_CARD_LINKS -->";
+const BASE_URL = 'https://codestats-readme.vercel.app'
+// const BASE_URL = 'http://localhost:3000'
 
-const STAT_CARD_TABLE_FLAG = "<!-- STATS_CARD_TABLE -->";
-const REPO_CARD_TABLE_FLAG = "<!-- REPO_CARD_TABLE -->";
+const TARGET_FILE = './themes/README.md'
+const LINKS_FLAG = '<!-- LINKS_FLAG -->'
+
+const PROFILE_CARD_TABLE_FLAG = '<!-- PROFILE_TABLE -->'
+const TOP_LANGS_CARD_TABLE_FLAG = '<!-- TOP_LANGS_TABLE -->'
+const HISTORY_CARD_TABLE_FLAG = '<!-- HISTORY_TABLE -->'
 
 const THEME_TEMPLATE = `## Available Themes
 
@@ -17,99 +20,100 @@ With inbuilt themes you can customize the look of the card without doing any man
 Use \`?theme=THEME_NAME\` parameter like so :-
 
 \`\`\`md
-![Anurag's github stats](https://codestats-readme.vercel.app/api?username=aviortheking&theme=dark&show_icons=true)
+![Anurag's github stats](${BASE_URL}/api?username=aviortheking&theme=dark&show_icons=true)
 \`\`\`
 
-## Stats
-
-> These themes work both for the Stats Card and Repo Card.
+## Profile
 
 | | | |
 | :--: | :--: | :--: |
-${STAT_CARD_TABLE_FLAG}
+${PROFILE_CARD_TABLE_FLAG}
 
-## Repo Card
-
-> These themes work both for the Stats Card and Repo Card.
+## History Card
 
 | | | |
 | :--: | :--: | :--: |
-${REPO_CARD_TABLE_FLAG}
+${HISTORY_CARD_TABLE_FLAG}
 
-${STAT_CARD_LINKS_FLAG}
+## Top Langs Card
 
-${REPO_CARD_LINKS_FLAG}
+| | | |
+| :--: | :--: | :--: |
+${TOP_LANGS_CARD_TABLE_FLAG}
 
+${LINKS_FLAG}
 
 [add-theme]: https://github.com/aviortheking/codestats-readme/edit/master/themes/index.js
 
 Wanted to add a new theme? Consider reading the [contribution guidelines](../CONTRIBUTING.md#themes-contribution) :D
-`;
+`
 
-const createRepoMdLink = (theme: string) => {
-  return `\n[${theme}_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=${theme}`;
-};
-const createStatMdLink = (theme: string) => {
-  return `\n[${theme}]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=${theme}`;
-};
+const createTopLangsMdLink = (theme: string) => {
+	return `\n[top_langs_${theme}]: ${BASE_URL}/api/top-langs/?username=aviortheking&theme=${theme}`
+}
+const createProfileMdLink = (theme: string) => {
+	return `\n[profile_${theme}]: ${BASE_URL}/api?username=aviortheking&show_icons=true&theme=${theme}`
+}
 
-const generateLinks = (fn: Function) => {
-  return Object.keys(theme)
-    .map((name) => fn(name))
-    .join("");
-};
+const createHistoryMdLink = (theme: string) => {
+	return `\n[history_${theme}]: ${BASE_URL}/api/history?username=Aviortheking&layout=horizontal&theme=${theme}`
+}
 
-const createTableItem = ({ link, label, isRepoCard }: {link: string, label: string, isRepoCard?: boolean}) => {
-  if (!link || !label) return "";
-  return `\`${label}\` ![${link}][${link}${isRepoCard ? "_repo" : ""}]`;
-};
-const generateTable = ({ isRepoCard }: {isRepoCard?: boolean}) => {
-  const rows = [];
-  const themes = Object.keys(theme).filter(
-    (name) => name !== (!isRepoCard ? "default_repocard" : "default")
-  );
+const generateLinks = (fn: typeof createHistoryMdLink) => {
+	return Object.keys(theme)
+		.map((name) => fn(name))
+		.join('')
+}
 
-  for (let i = 0; i < themes.length; i += 3) {
-    const one = themes[i];
-    const two = themes[i + 1];
-    const three = themes[i + 2];
+const createTableItem = ({ link, label }: {link: string, label: string}) => {
+	if (!link || !label) return ''
+	return `\`${label}\` ![${link}][${link}]`
+}
+const generateTable = (prefix: string) => {
+	const rows = []
+	const themes = Object.keys(theme)
 
-    let tableItem1 = createTableItem({ link: one, label: one, isRepoCard });
-    let tableItem2 = createTableItem({ link: two, label: two, isRepoCard });
-    let tableItem3 = createTableItem({ link: three, label: three, isRepoCard });
+	for (let i = 0; i < themes.length; i += 3) {
+		const one = prefix + themes[i]
+		const two = prefix + themes[i + 1]
+		const three = prefix + themes[i + 2]
 
-    if (three === undefined) {
-      tableItem3 = `[Add your theme][add-theme]`;
-    }
-    rows.push(`| ${tableItem1} | ${tableItem2} | ${tableItem3} |`);
+		const tableItem1 = createTableItem({ link: one, label: themes[i] })
+		const tableItem2 = createTableItem({ link: two, label: themes[i + 1] })
+		let tableItem3 = createTableItem({ link: three, label: themes[i + 2] })
 
-    // if it's the last row & the row has no empty space push a new row
-    if (three && i + 3 === themes.length) {
-      rows.push(`| [Add your theme][add-theme] | | |`);
-    }
-  }
+		if (three === undefined) {
+			tableItem3 = '[Add your theme][add-theme]'
+		}
+		rows.push(`| ${tableItem1} | ${tableItem2} | ${tableItem3} |`)
 
-  return rows.join("\n");
-};
+		// if it's the last row & the row has no empty space push a new row
+		if (three && i + 3 === themes.length) {
+			rows.push('| [Add your theme][add-theme] | | |')
+		}
+	}
+
+	return rows.join('\n')
+}
 
 const buildReadme = () => {
-  return THEME_TEMPLATE.split("\n")
-    .map((line) => {
-      if (line.includes(REPO_CARD_LINKS_FLAG)) {
-        return generateLinks(createRepoMdLink);
-      }
-      if (line.includes(STAT_CARD_LINKS_FLAG)) {
-        return generateLinks(createStatMdLink);
-      }
-      if (line.includes(REPO_CARD_TABLE_FLAG)) {
-        return generateTable({ isRepoCard: true });
-      }
-      if (line.includes(STAT_CARD_TABLE_FLAG)) {
-        return generateTable({ isRepoCard: false });
-      }
-      return line;
-    })
-    .join("\n");
-};
+	return THEME_TEMPLATE.split('\n')
+		.map((line) => {
+			if (line.includes(LINKS_FLAG)) {
+				return generateLinks(createTopLangsMdLink) + generateLinks(createHistoryMdLink) + generateLinks(createProfileMdLink)
+			}
+			if (line.includes(PROFILE_CARD_TABLE_FLAG)) {
+				return generateTable('profile_')
+			}
+			if (line.includes(TOP_LANGS_CARD_TABLE_FLAG)) {
+				return generateTable('top_langs_')
+			}
+			if (line.includes(HISTORY_CARD_TABLE_FLAG)) {
+				return generateTable('history_')
+			}
+			return line
+		})
+		.join('\n')
+}
 
-fs.writeFileSync(TARGET_FILE, buildReadme());
+fs.writeFileSync(TARGET_FILE, buildReadme())

src/cards/HistoryCard.tsx

@@ -1,13 +1,16 @@
-import { formatDateNumber, getColorOfLanguage } from "../common/utils"
-import Card, { CardOptions } from '../common/Card'
 import React from 'react'
-import FlexLayout from "../components/FlexLayout"
+import { formatDateNumber, getColor, getColorOfLanguage } from '../common/utils'
+import Card, { CardOptions } from '../common/Card'
+import FlexLayout from '../components/FlexLayout'
 
 interface HistoryOptions extends CardOptions {
 	width?: number
 	height?: number
 	layout?: 'horizontal'
 	hide_legend?: boolean
+	text_color?: string
+	title?: string
+	reverse_order?: boolean
 
 	// Put language in Other
 	hide?: Array<string>
@@ -18,23 +21,19 @@ export default class HistoryCard extends Card {
 
 	private topLanguages: Array<string>
 
+	private legendMinWidth = 180
+
 	public constructor(
 		private username: string,
 		private days: Array<{day: string, total: number, data: Array<{xp: number, language: string}>}>,
 		private options: HistoryOptions
 	) {
 		super(options)
-
-		this.height = 45 + (this.days.length + 1) * 40
-		this.width = options.width ?? 500
-		if (options.layout === 'horizontal') {
-			this.width = 45 + (this.days.length + 1) * 40 + 100
-			this.height = options.height ?? 300
-		}
+		this.processOptions()
 
 		const languagesToHide = options.hide || []
 
-		let languageCount: Array<{language: string, xp: number}> = []
+		const languageCount: Array<{language: string, xp: number}> = []
 		for (const day of this.days) {
 			for (const data of day.data) {
 				let index = languageCount.findIndex((item) => item.language === data.language)
@@ -56,30 +55,57 @@ export default class HistoryCard extends Card {
 			this.topLanguages.push('Other')
 		}
 
+		this.hideLanguages(languagesToHide)
+	}
+
+	private hideLanguages(languagesToHide: Array<string>) {
 		for (const day of this.days) {
+			// Prepare array of indexes to remove
 			const toRemove: Array<number> = []
+
+			// Loop through data
 			for (let i = 0; i < day.data.length; i++) {
-				const element = day.data[i];
-				if (languagesToHide.includes(element.language)) {
-					const otherIndex = day.data.findIndex((el) => el.language === 'Other')
-					if (otherIndex === -1) {
-						day.data.push({
-							language: 'Other',
-							xp: element.xp
-						})
-					} else {
-						day.data[otherIndex].xp += element.xp
-					}
-					toRemove.push(i)
+				const element = day.data[i]
+
+				// If Language should not be hidden: goto next
+				if (!languagesToHide.includes(element.language)) {
+					continue
 				}
+
+				// Search indexOf 'Others'
+				const otherIndex = day.data.findIndex((el) => el.language === 'Others')
+				if (otherIndex === -1) {
+					day.data.push({
+						language: 'Others',
+						xp: element.xp
+					})
+				} else {
+					day.data[otherIndex].xp += element.xp
+				}
+				toRemove.push(i)
 			}
+
+			// Reverse array and remove each indexes
 			for (const index of toRemove.reverse()) {
 				day.data.splice(index, 1)
 			}
 		}
+	}
 
-		this.title = 'Code History Language breakdown'
-		this.css = ProgressNode.getCSS('#000')
+	private processOptions() {
+		this.height = 45 + (this.days.length + 1) * 40
+		this.width = this.options.width ?? 500
+		if (this.options.layout === 'horizontal') {
+			this.width = 45 + (this.days.length + 1) * 40 + (this.options.hide_legend ? 0 : this.legendMinWidth)
+			this.height = this.options.height ?? 300
+		}
+
+		this.title = this.options.title ?? `Last ${this.days.length} days XP history`
+		this.css = ProgressNode.getCSS(getColor('text_color', this.options.text_color, this.options.theme))
+
+		if (this.options.reverse_order) {
+			this.days = this.days.reverse()
+		}
 	}
 
 	public render() {
@@ -90,57 +116,71 @@ export default class HistoryCard extends Card {
 			return prvs
 		}, 0)
 
-		const legendWidth = Math.max(this.width * 20 / 100 + 60, 150)
+		const legendWidth = this.options.hide_legend ? 0 : Math.max(this.width * 20 / 100 + 60, this.legendMinWidth)
 		const historyWidth = this.width - legendWidth
-		return super.render(
-			<svg x="25">
-				<FlexLayout items={[(() => {
-					if (this.options.layout === 'horizontal') {
-						return (
-							<FlexLayout items={
-								this.days.reverse().map((el, index) => (
-									<VerticalProgressNode
-										{...el}
-										totalTotal={totalTotal} height={this.height - 120} />
-								))
-							}
-								gap={40}
-								// direction="column"
-							/>
-						)
-					} else {
-						return (
-							<FlexLayout items={
-								this.days.map((el, index) => (
-									<ProgressNode
-										{...el}
-										totalTotal={totalTotal} width={historyWidth - 30} />
-								))
-							}
-								gap={40}
-								direction="column"
-							/>
-						)
-					}
-				})(), (
-					<FlexLayout items={
+
+		const items: Array<JSX.Element> = []
+
+		// Format History bars
+		const history = this.options.layout === 'horizontal' ? (
+			<FlexLayout
+				key={0}
+				items={
+					this.days.reverse().map((el, index) => (
+						<VerticalProgressNode
+							key={index}
+							{...el}
+							totalTotal={totalTotal}
+							height={this.height - 120}
+						/>
+					))
+				}
+				gap={40}
+			/>
+		) : (
+			<FlexLayout
+				key={0}
+				items={
+					this.days.map((el, index) => (
+						<ProgressNode
+							key={index}
+							{...el}
+							totalTotal={totalTotal} width={historyWidth - 60} />
+					))
+				}
+				gap={40}
+				direction="column"
+			/>
+		)
+		items.push(history)
+
+		if (!this.options.hide_legend) {
+			items.push(
+				<FlexLayout
+					key={1}
+					items={
 						this.topLanguages.map((el, index) => (
-							<>
+							<React.Fragment key={index}>
 								<rect rx="5" x="2" y="7" height="12" width="12" fill={getColorOfLanguage(el)} />
 								<text x="18" y="18" className="lang-name" key={index}>{el}</text>
-							</>
+							</React.Fragment>
 						))
 					}
-						gap={20}
-						direction="column"
-					/>
-				)]}
-				gap={this.options.layout === 'horizontal' ? this.width - 180 : historyWidth - 20}
+					gap={20}
+					direction="column"
 				/>
+			)
+		}
 
+		return super.render(
+			<svg x="25">
+				<FlexLayout items={items}
+					gap={historyWidth}
+				/>
 			</svg>
 		)
 	}
+
 }
 
 
@@ -159,7 +199,7 @@ class ProgressNode extends React.Component<{
 	}
 	.xp-txt {
 		font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif;
-		fill: ${textColor};
+		fill: black;
 	}
 	.xp-txt-invert {
 		font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif;
@@ -197,27 +237,30 @@ class ProgressNode extends React.Component<{
 							/>
 						)
 					})}
-					{(() => {
-						let size = this.calcSize(offset) + 6
-						const txtSize = (this.props.total.toString().length + 3) * 8
-						let classes = 'xp-txt'
-						if (size + txtSize >= this.calcSize(this.props.totalTotal)) {
-							size -= txtSize
-							classes += ' xp-txt-invert'
-						}
-						return (
-							<text x={size} y="33" className={classes}>{this.props.total} XP</text>
-						)
-					})()}
+					{this.getXPText(offset)}
 
 				</svg>
 			</>
 		)
 	}
 
-	protected calcSize(number: number) {
+	private calcSize(number: number) {
 		return number * this.props.width / this.props.totalTotal
 	}
+
+	private getXPText(offset: number) {
+		let size = this.calcSize(offset) + 6
+		const txtSize = (this.props.total.toString().length + 3) * 8
+		let classes = 'xp-txt'
+		if (size + txtSize >= this.calcSize(this.props.totalTotal)) {
+			size -= txtSize
+			classes += ' xp-txt-invert'
+		}
+		return (
+			<text x={size} y="33" className={classes}>{this.props.total} XP</text>
+		)
+	}
+
 }
 
 
@@ -228,6 +271,7 @@ class VerticalProgressNode extends React.Component<{
 	data: Array<{xp: number, language: string}>
 	height: number
 }> {
+
 	public render() {
 		let offset = this.props.totalTotal
 		const maskId = `mask-${this.props.day}`
@@ -244,26 +288,26 @@ class VerticalProgressNode extends React.Component<{
 						offset -= el.xp
 						return (
 							<rect
-							key={index}
-							mask={`url(#${maskId})`}
-							width="16"
-							fill={color}
-							y={25 + this.calcSize(offset)}
-							x="0"
-							height={`${this.calcSize(el.xp)}px`}
+								key={index}
+								mask={`url(#${maskId})`}
+								width="16"
+								fill={color}
+								y={25 + this.calcSize(offset)}
+								x="0"
+								height={`${this.calcSize(el.xp)}px`}
 							/>
-							)
-						})}
+						)
+					})}
 					{this.getXPTxt()}
 
 				</svg>
 				<text x="2" y={this.props.height + 18} className="subtitle">{new Date(this.props.day).toDateString().substr(4, 3)}</text>
-				<text x="5" y={this.props.height + 34} className="subtitle">{formatDateNumber(new Date(this.props.day).getDate())}</text>
+				<text x="6" y={this.props.height + 34} className="subtitle">{formatDateNumber(new Date(this.props.day).getDate())}</text>
 			</>
 		)
 	}
 
-	protected calcSize(number: number) {
+	private calcSize(number: number) {
 		return number * this.props.height / this.props.totalTotal
 	}
 
@@ -279,4 +323,5 @@ class VerticalProgressNode extends React.Component<{
 			<text transform={`rotate(90, 4, ${position})`} letterSpacing="5" y={position} x="4" rotate="-90" className={classes}>{this.props.total} XP</text>
 		)
 	}
+
 }

src/cards/ProfileCard.tsx

@@ -1,7 +1,14 @@
-import { kFormatter, encodeHTML, getProgress, getLevel, parseBoolean, calculateCircleProgress, getColor } from '../common/utils'
+import React from 'react'
+import {
+	kFormatter,
+	encodeHTML,
+	getProgress,
+	getLevel,
+	calculateCircleProgress,
+	getColor
+} from '../common/utils'
 import icons from '../common/icons'
 import Card, { CardOptions } from '../common/Card'
-import React from 'react'
 import FlexLayout from '../components/FlexLayout'
 
 interface ProfileCardOptions extends CardOptions {
@@ -14,6 +21,7 @@ interface ProfileCardOptions extends CardOptions {
 }
 
 export default class ProfileCard extends Card {
+
 	private stats: Record<string, {
 		icon: JSX.Element
 		label: string
@@ -39,14 +47,14 @@ export default class ProfileCard extends Card {
 		this.stats = {
 			xp: {
 				icon: icons.star,
-				label: "XP",
-				value: xp,
+				label: 'XP',
+				value: xp
 			},
 			recent_xp: {
 				icon: icons.commits,
 				label: 'Recent xp',
-				value: this.recentXp,
-			},
+				value: this.recentXp
+			}
 		}
 
 		// Card Settings
@@ -57,7 +65,7 @@ export default class ProfileCard extends Card {
 		)
 
 		this.title = `${encodeHTML(this.username)}${
-			["x", "s"].includes(this.username.slice(-1)) ? "" : "s"
+			['x', 's'].includes(this.username.slice(-1)) ? '' : 's'
 		} Code::Stats Profile`
 
 		const textColor = getColor('text_color', options.text_color, options.theme)
@@ -67,7 +75,7 @@ export default class ProfileCard extends Card {
 			this.css += RankCircle.getCSS(textColor, iconColor, getProgress(xp))
 		}
 		if ((this.options.hide || []) < Object.keys(this.stats)) {
-			this.css += TextNode.getCSS(textColor, !!this.options.show_icons ? iconColor : undefined)
+			this.css += TextNode.getCSS(textColor, this.options.show_icons ? iconColor : undefined)
 		}
 	}
 
@@ -77,18 +85,23 @@ export default class ProfileCard extends Card {
 				<RankCircle xp={this.options.hide_rank ? undefined : this.xp} />
 				<svg x="0" y="0">
 					<FlexLayout
-						items={Object.keys(this.stats).filter((item) => !(this.options.hide || []).includes(item)).map((el, index) => {
-							const item = this.stats[el]
-							return (
-								<TextNode
-									{...item}
-									icon={!!this.options.show_icons ? item.icon : undefined}
-									key={index}
-									index={index}
+						items={
+							Object
+								.keys(this.stats)
+								.filter((item) => !(this.options.hide || []).includes(item))
+								.map((el, index) => {
+									const item = this.stats[el]
+									return (
+										<TextNode
+											{...item}
+											icon={this.options.show_icons ? item.icon : undefined}
+											key={index}
+											index={index}
 
-								/>
-							)
-						})}
+										/>
+									)
+								})
+						}
 						gap={this.options.line_height || this.defaults.line_height}
 						direction="column"
 					/>
@@ -96,6 +109,7 @@ export default class ProfileCard extends Card {
 			</>
 		)
 	}
+
 }
 
 class RankCircle extends React.Component<{
@@ -136,7 +150,7 @@ class RankCircle extends React.Component<{
 		}
 	`
 
-	public render () {
+	public render() {
 		if (!this.props.xp) {
 			return undefined
 		}
@@ -160,6 +174,7 @@ class RankCircle extends React.Component<{
 			</g>
 		)
 	}
+
 }
 
 class TextNode extends React.Component<{
@@ -200,7 +215,11 @@ class TextNode extends React.Component<{
 		) : undefined
 
 		return (
-			<g className="stagger" data-index={this.props.index} style={{animationDelay: `${delay}ms`}} transform="translate(25, 0)">
+			<g
+				className="stagger"
+				style={{ animationDelay: `${delay}ms` }}
+				transform="translate(25, 0)"
+			>
 				{icon}
 				<text className="stat bold" x={this.props.icon ? 25 : undefined} y="12.5">{this.props.label}:</text>
 				<text
@@ -211,4 +230,5 @@ class TextNode extends React.Component<{
 			</g>
 		)
 	}
+
 }

src/cards/TopLanguagesCard.tsx

@@ -1,8 +1,8 @@
-import { getColor, getProgress, trunc } from "../common/utils"
-import Card, { CardOptions } from '../common/Card'
 import React from 'react'
-import FlexLayout from "../components/FlexLayout";
-import { TopLanguage } from "../interfaces";
+import { getColor, getPercent, getProgress, trunc } from '../common/utils'
+import Card, { CardOptions } from '../common/Card'
+import FlexLayout from '../components/FlexLayout'
+import { TopLanguage } from '../interfaces'
 
 interface TopLanguagesOptions extends CardOptions {
 	hide?: Array<string>
@@ -34,22 +34,23 @@ export default class TopLanguagesCard extends Card {
 		}
 
 		const textColor = getColor('text_color', options.text_color, options.theme)
-		this.title = "Most Used Languages"
+		this.title = 'Most Used Languages'
 		this.css = CompactTextNode.getCSS(textColor as string)
 	}
 
 	public render() {
+		const total = this.langs.reduce((acc, curr) => acc + curr.xp, 0)
 		if (this.options.layout === 'compact') {
 			this.width = this.width + 50
 			this.height = 90 + Math.round(this.langs.length / 2) * 25
 			return super.render(
 				<svg x="25">
 					<mask id="rect-mask">
-					<rect x="0" y="0" width={this.width - 50} height="8" fill="white" rx="5" />
+						<rect x="0" y="0" width={this.width - 50} height="8" fill="white" rx="5" />
 					</mask>
-					<CompactProgressBar langs={this.langs} parentWidth={this.width} />
+					<CompactProgressBar langs={this.langs} total={total} parentWidth={this.width} />
 					{this.langs.map((el, index) => (
-						<CompactTextNode key={index} index={index} lang={el} />
+						<CompactTextNode key={index} index={index} total={total} lang={el} />
 					))}
 				</svg>
 			)
@@ -58,29 +59,31 @@ export default class TopLanguagesCard extends Card {
 				<svg x="25">
 					<FlexLayout items={
 						this.langs.map((el, index) => (
-							<ProgressNode lang={el} parentWidth={this.width} />
+							<ProgressNode key={index} lang={el} total={total} parentWidth={this.width} />
 						))
 					}
-						gap={40}
-						direction="column"
+					gap={40}
+					direction="column"
 					/>
 				</svg>
 			)
 		}
 	}
+
 }
 
 class CompactProgressBar extends React.Component<{
 	langs: Array<TopLanguage>
 	parentWidth: number
+	total: number
 }> {
+
 	public render() {
 
 		let offset = 0
-		const totalSize = this.props.langs.reduce((acc, curr) => acc + curr.xp, 0)
 
 		return this.props.langs.map((lang, index) => {
-			const percent = trunc((lang.xp / totalSize) * (this.props.parentWidth - 50), 2)
+			const percent = trunc((lang.xp / this.props.total) * (this.props.parentWidth - 50), 2)
 			const progress = percent < 10 ? percent + 10 : percent
 
 			const output = (
@@ -92,7 +95,7 @@ class CompactProgressBar extends React.Component<{
 					y="0"
 					width={progress}
 					height="8"
-					fill={lang.color || "#858585"}
+					fill={lang.color || '#858585'}
 				/>
 			)
 
@@ -100,11 +103,13 @@ class CompactProgressBar extends React.Component<{
 			return output
 		})
 	}
+
 }
 
 class CompactTextNode extends React.Component<{
 	index: number
 	lang: TopLanguage
+	total: number
 }> {
 
 	public static getCSS = (textColor: string) => `
@@ -128,17 +133,19 @@ class CompactTextNode extends React.Component<{
 			<g transform={`translate(${x}, ${y})`}>
 				<circle cx="5" cy="6" r="5" fill={this.props.lang.color} />
 				<text data-testid="lang-name" x="15" y="10" className='lang-name'>
-					{this.props.lang.name} {getProgress(this.props.lang.xp)}%
+					{this.props.lang.name} {getPercent(this.props.lang.xp, this.props.total)}%
 				</text>
 			</g>
 		)
 	}
+
 }
 
 
 class ProgressNode extends React.Component<{
 	lang: TopLanguage
 	parentWidth: number
+	total: number
 }> {
 
 	private paddingRight = 60
@@ -146,12 +153,18 @@ class ProgressNode extends React.Component<{
 
 	public render() {
 		const width = this.props.parentWidth - this.paddingRight
-		const progress1 = getProgress(this.props.lang.xp)
-		const progress2 = getProgress(this.props.lang.xp - this.props.lang.recentXp)
+		const progress1 = getPercent(this.props.lang.xp, this.props.total)
+		const progress2 = getPercent(this.props.lang.xp - this.props.lang.recentXp, this.props.total)
 
 		return (
 			<>
-				<text data-testid="lang-name" x="2" y="15" className="lang-name">{this.props.lang.name} {progress1}% {this.props.lang.recentXp >= 1 ? ' + ' + (trunc(progress1 - progress2, 2)) + '%' : ''}</text>
+				<text
+					x="2"
+					y="15"
+					className="lang-name"
+				>
+					{this.props.lang.name} {progress1}% {this.props.lang.recentXp >= 1 ? ` + ${trunc(progress1 - progress2, 2)}%` : ''}
+				</text>
 				<svg width={width}>
 					<rect rx="5" ry="5" x="0" y="25" width={width} height="8" fill="#ddd" />
 					{progress1 !== progress2 && (
@@ -176,4 +189,5 @@ class ProgressNode extends React.Component<{
 			</>
 		)
 	}
+
 }

src/common/Card.tsx

@@ -13,6 +13,7 @@ export interface CardOptions {
 }
 
 export default class Card {
+
 	public hideBorder = false
 	public hideTitle = false
 	public css = ''
@@ -34,7 +35,7 @@ export default class Card {
 			this.hideTitle = parseBoolean(options.hide_title)
 			this.colors = {
 				titleColor: getColor('title_color', options.title_color, options.theme),
-				bgColor: getColor('bg_color', options.bg_color, options.theme),
+				bgColor: getColor('bg_color', options.bg_color, options.theme)
 			}
 		}
 	}
@@ -75,24 +76,24 @@ export default class Card {
 	}
 
 	renderGradient() {
-		if (typeof this.colors.bgColor !== "object") return;
+		if (typeof this.colors.bgColor !== 'object') return
 
-		const gradients = this.colors.bgColor.slice(1);
-		return typeof this.colors.bgColor === "object"
-		? (
-			<defs>
-				<linearGradient
-					id="gradient"
-					gradientTransform={`rotate(${this.colors.bgColor[0]})`}
-				>
-					{gradients.map((grad, index) => {
-					let offset = (index * 100) / (gradients.length - 1);
-					return `<stop offset="${offset}%" stop-color="#${grad}" />`;
-					})}
-				</linearGradient>
-			</defs>
-		)
-		: "";
+		const gradients = this.colors.bgColor.slice(1)
+		return typeof this.colors.bgColor === 'object' ?
+			(
+				<defs>
+					<linearGradient
+						id="gradient"
+						gradientTransform={`rotate(${this.colors.bgColor[0]})`}
+					>
+						{gradients.map((grad, index) => {
+							const offset = (index * 100) / (gradients.length - 1)
+							return `<stop offset="${offset}%" stop-color="#${grad}" />`
+						})}
+					</linearGradient>
+				</defs>
+			) :
+			''
 	}
 
 	render(body: JSX.Element) {
@@ -141,14 +142,14 @@ export default class Card {
 					stroke="#E4E2E2"
 					width={this.width - 1}
 					fill={
-						typeof this.colors.bgColor === "object"
-						? "url(#gradient)"
-						: this.colors.bgColor
+						typeof this.colors.bgColor === 'object' ?
+							'url(#gradient)' :
+							this.colors.bgColor
 					}
 					strokeOpacity={this.hideBorder ? 0 : 1}
 				/>
 
-				{this.hideTitle ? "" : this.renderTitle()}
+				{this.hideTitle ? '' : this.renderTitle()}
 
 				<g
 					transform={`translate(0, ${
@@ -160,4 +161,5 @@ export default class Card {
 			</svg>
 		)
 	}
+
 }

src/common/icons.tsx

@@ -7,6 +7,6 @@ const icons = {
 	issues: <path fillRule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>,
 	icon: <path fillRule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>,
 	contribs: <path fillRule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>,
-	fork: <path fillRule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>,
-};
+	fork: <path fillRule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
+}
 export default icons

src/common/retryer.ts

@@ -1,5 +1,5 @@
+import { CodeStatsResponse } from '../interfaces'
 import { CustomError } from './utils'
-import { CodeStatsResponse } from '../interfaces';
 
 export default async function retryer<T = Promise<CodeStatsResponse>>(
 	fetcher: (username: string) => T,
@@ -8,7 +8,7 @@ export default async function retryer<T = Promise<CodeStatsResponse>>(
 	err?: any
 ): Promise<T> {
 	if (retries > 7) {
-		throw new CustomError("Maximum retries exceeded" + err, 'MAX_RETRY')
+		throw new CustomError('Maximum retries exceeded' + err, 'MAX_RETRY')
 	}
 	try {
 		return await fetcher(

src/common/utils.ts

@@ -2,7 +2,7 @@ import fetch from 'node-fetch'
 import { Response } from 'express'
 import wrap from 'word-wrap'
 import themes from '../../themes/themes.json'
-import { CodeStatsResponse } from '../interfaces';
+import { CodeStatsResponse } from '../interfaces'
 import languageColor from '../../themes/language-bar.json'
 
 /**
@@ -14,42 +14,38 @@ import languageColor from '../../themes/language-bar.json'
 export function encodeHTML(str: string) {
 	return str
 		.replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
-			return "&#" + i.charCodeAt(0) + ";";
+			return '&#' + i.charCodeAt(0) + ';'
 		})
-		.replace(/\u0008/gim, "");
 }
 
-export const kFormatter = (num: number) =>
-	Math.abs(num) > 999 ?
+export function kFormatter(num: number) {
+	return Math.abs(num) > 999 ?
 		trunc(num / 1000) + 'k' :
 		num
+}
 
 /**
- * Transform the `value` into a Boolean
+ * Transform the `value` query string into a Boolean
  * @param value the value to transform
  */
 export function parseBoolean(value: boolean | string | undefined) {
-	if (value === "true" || value === true) {
-		return true;
-	} else {
-		return false;
-	}
+	return value === 'true' || value === '' || value === true
 }
 
 export function parseArray(str: string | undefined) {
-	if (!str) return [];
-	return str.split(",");
+	if (!str) return []
+	return str.split(',')
 }
 
 export function clampValue(number: number, min: number, max?: number) {
-	return Math.max(min, max ? Math.min(number, max) : number);
+	return Math.max(min, max ? Math.min(number, max) : number)
 }
 
 export async function request(username: string): Promise<CodeStatsResponse> {
 	const resp = await fetch(
 		`https://codestats.net/api/users/${username}`
-	);
-	return resp.json();
+	)
+	return resp.json()
 }
 
 export async function profileGraphRequest<T>(body: string): Promise<T> {
@@ -63,25 +59,28 @@ export async function profileGraphRequest<T>(body: string): Promise<T> {
 	return resp.json()
 }
 
-export function getColor(color: keyof typeof themes.default, replacementColor?: string, theme: keyof typeof themes = 'default') {
+export function getColor(
+	color: keyof typeof themes.default,
+	replacementColor?: string,
+	theme: keyof typeof themes = 'default'
+) {
 	return '#' + (replacementColor ? replacementColor : themes[theme][color])
 }
 
 export function wrapTextMultiline(text: string, width = 60, maxLines = 3) {
 	const wrapped = wrap(encodeHTML(text), { width })
-		.split("\n") // Split wrapped lines to get an array of lines
-		.map((line) => line.trim()); // Remove leading and trailing whitespace of each line
+		.split('\n') // Split wrapped lines to get an array of lines
+		.map((line) => line.trim()) // Remove leading and trailing whitespace of each line
 
-	const lines = wrapped.slice(0, maxLines); // Only consider maxLines lines
+	const lines = wrapped.slice(0, maxLines) // Only consider maxLines lines
 
 	// Add "..." to the last line if the text exceeds maxLines
 	if (wrapped.length > maxLines) {
-		lines[maxLines - 1] += "...";
+		lines[maxLines - 1] += '...'
 	}
 
 	// Remove empty lines if text fits in less than maxLines lines
-	const multiLineText = lines.filter(Boolean);
-	return multiLineText;
+	return lines.filter(Boolean)
 }
 
 export const CONSTANTS = {
@@ -89,23 +88,25 @@ export const CONSTANTS = {
 	TWO_HOURS: 7200,
 	FOUR_HOURS: 14400,
 	ONE_DAY: 86400,
-	LEVEL_FACTOR: 0.025,
-};
+	LEVEL_FACTOR: 0.025
+}
 
 export const SECONDARY_ERROR_MESSAGES = {
-	MAX_RETRY: "Make sur your profile is not private"
-};
+	MAX_RETRY: 'Make sur your profile is not private'
+}
 
 export class CustomError extends Error {
+
 	public secondaryMessage: string
 
 	constructor(message: string, public type: keyof typeof SECONDARY_ERROR_MESSAGES) {
-		super(message);
-		this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || "adsad";
+		super(message)
+		this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || 'adsad'
 	}
 
-	static MAX_RETRY = "MAX_RETRY";
-	static USER_NOT_FOUND = "USER_NOT_FOUND";
+	static MAX_RETRY = 'MAX_RETRY'
+	static USER_NOT_FOUND = 'USER_NOT_FOUND'
+
 }
 
 /**
@@ -127,15 +128,19 @@ export function getProgress(xp: number): number {
 	return trunc((CONSTANTS.LEVEL_FACTOR * Math.sqrt(xp) - currentLvl) * 100, 2)
 }
 
+export function getPercent(number: number, total: number) {
+	return trunc(number * 100 / total, 2)
+}
+
 
 /**
- * Truncate a number without moving it to a string and reparsing it
+ * Round a number without moving it to a string and reparsing it
  *
  * https://stackoverflow.com/a/29494612/7335674
  * @param number the number to truncate
  * @param digits the number of digits after the dot
  */
-export function trunc(number: number, digits: number = 0) {
+export function trunc(number: number, digits = 0) {
 	const pow = Math.pow(10, digits)
 	return Math.round(number * pow) / pow
 }
@@ -152,14 +157,12 @@ export function parseNumber(number: string | number | undefined): number | undef
 }
 
 
-export function calculateCircleProgress(percent: number) {
-	let radius = 40;
-	let c = Math.PI * radius * 2
+export function calculateCircleProgress(percent: number, radius = 40) {
+	const c = Math.PI * radius * 2
 
 	percent = clampValue(percent, 0, 100)
 
-	let percentage = ((100 - percent) / 100) * c
-	return percentage;
+	return ((100 - percent) / 100) * c
 }
 
 /**
@@ -167,7 +170,7 @@ export function calculateCircleProgress(percent: number) {
  * @param res the response object
  */
 export function prepareResponse(res: Response) {
-	res.setHeader("Content-Type", "image/svg+xml")
+	res.setHeader('Content-Type', 'image/svg+xml')
 }
 
 /**
@@ -175,7 +178,7 @@ export function prepareResponse(res: Response) {
  * @param res the Response object
  * @param cache The cache time in seconds
  */
-export function setCache(res: Response, cache: number) {
+export function setCache(res: Response, cache = CONSTANTS.THIRTY_MINUTES) {
 	if (isNaN(cache)) {
 		cache = CONSTANTS.THIRTY_MINUTES
 	}
@@ -204,5 +207,5 @@ export function formatDate(date: Date): string {
 
 
 export function getColorOfLanguage(name: string): string {
-	return name in languageColor ? languageColor[name as keyof typeof languageColor].color || '#000' : '#000'
+	return name in languageColor ? languageColor[name as keyof typeof languageColor].color || '#3e4053' : '#3e4053'
 }

src/components/Error.tsx

@@ -16,9 +16,10 @@ export default class Error extends React.Component<{
 			<rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
 			<text x="25" y="45" className="text">Something went wrong! file an issue at https://dze.io/3nL29</text>
 			<text data-testid="message" x="25" y="55" className="text small">
-			<tspan x="25" dy="18">{encodeHTML(this.props.message)}</tspan>
-			<tspan x="25" dy="18" className="gray">{this.props.secondaryMessage}</tspan>
+				<tspan x="25" dy="18">{encodeHTML(this.props.message)}</tspan>
+				<tspan x="25" dy="18" className="gray">{this.props.secondaryMessage}</tspan>
 			</text>
 		</svg>
 	)
+
 }

src/components/FlexLayout.tsx

@@ -5,6 +5,7 @@ export default class FlexLayout extends React.Component<{
 	gap: number
 	direction?: 'column'
 }> {
+
 	public render() {
 		return this.props.items.filter(Boolean).map((item, index) => (
 			<g key={index} transform={this.getGap(index)}>{item}</g>
@@ -19,4 +20,5 @@ export default class FlexLayout extends React.Component<{
 		}
 		return transform
 	}
+
 }

src/fetcher/index.ts

@@ -1,4 +1,4 @@
-import { request, CONSTANTS, getLevel, profileGraphRequest, CustomError, formatDateNumber, formatDate, getColorOfLanguage } from '../common/utils'
+import { request, getLevel, profileGraphRequest, CustomError, formatDate, getColorOfLanguage } from '../common/utils'
 import retryer from '../common/retryer'
 import { CodeStatsHistoryGraph, TopLanguages } from '../interfaces'
 
@@ -28,6 +28,7 @@ export async function fetchHistory(username: string, days: number) {
 	}`
 
 	const response = await retryer<Promise<CodeStatsHistoryGraph>>(profileGraphRequest, body)
+
 	if (response.errors) {
 		throw new CustomError(response.errors[0].message, 'MAX_RETRY')
 	}
@@ -48,23 +49,19 @@ export async function fetchHistory(username: string, days: number) {
 			xp: data.xp,
 			language: data.language
 		})
-		if (data.language in languagesData) {
-			languagesData[data.language] += data.xp
-		} else {
-			languagesData[data.language] = data.xp
+		if (!(data.language in languagesData)) {
+			languagesData[data.language] = 0
 		}
 
+		languagesData[data.language] += data.xp
 		result[data.date] = day
 	}
 
-	for (const key of Object.keys(result)) {
-		const item = result[key]
-		result[key] = item.sort((a, b) => languagesData[b.language] - languagesData[a.language])
-	}
-
 	const keys = Object.keys(result)
 
 	for (const day of keys) {
+		const item = result[day]
+		result[day] = item.sort((a, b) => languagesData[b.language] - languagesData[a.language])
 		if (keys.indexOf(day) === 0 && day === formatDate(date)) {
 			continue
 		}
@@ -77,21 +74,19 @@ export async function fetchHistory(username: string, days: number) {
 
 	}
 
-	return Object.keys(result).map((el) => {
-		return {
-			data: result[el],
-			day: el,
-			total: result[el].reduce((prvs, crnt) => prvs + crnt.xp, 0)
-		}
-	}).sort((a, b) => a.day < b.day ? 1 : -1)
+	return Object.keys(result).map((el) => ({
+		data: result[el],
+		day: el,
+		total: result[el].reduce((prvs, crnt) => prvs + crnt.xp, 0)
+	})).sort((a, b) => a.day < b.day ? 1 : -1)
 
 
 }
 
 export async function fetchTopLanguages(username: string): Promise<TopLanguages> {
-	if (!username) throw Error("Invalid username")
+	if (!username) throw Error('Invalid username')
 
-	let res = await retryer(request, username)
+	const res = await retryer(request, username)
 
 	const langs = res.languages
 

themes/README.md

@@ -10,124 +10,169 @@ Use `?theme=THEME_NAME` parameter like so :-
 ![Anurag's github stats](https://codestats-readme.vercel.app/api?username=aviortheking&theme=dark&show_icons=true)
 ```
 
-## Stats
-
-> These themes work both for the Stats Card and Repo Card.
+## Profile
 
 | | | |
 | :--: | :--: | :--: |
-| `default` ![default][default] | `dark` ![dark][dark] | `radical` ![radical][radical] |
-| `merko` ![merko][merko] | `gruvbox` ![gruvbox][gruvbox] | `tokyonight` ![tokyonight][tokyonight] |
-| `onedark` ![onedark][onedark] | `cobalt` ![cobalt][cobalt] | `synthwave` ![synthwave][synthwave] |
-| `highcontrast` ![highcontrast][highcontrast] | `dracula` ![dracula][dracula] | `prussian` ![prussian][prussian] |
-| `monokai` ![monokai][monokai] | `vue` ![vue][vue] | `vue-dark` ![vue-dark][vue-dark] |
-| `shades-of-purple` ![shades-of-purple][shades-of-purple] | `nightowl` ![nightowl][nightowl] | `buefy` ![buefy][buefy] |
-| `blue-green` ![blue-green][blue-green] | `algolia` ![algolia][algolia] | `great-gatsby` ![great-gatsby][great-gatsby] |
-| `darcula` ![darcula][darcula] | `bear` ![bear][bear] | `solarized-dark` ![solarized-dark][solarized-dark] |
-| `solarized-light` ![solarized-light][solarized-light] | `chartreuse-dark` ![chartreuse-dark][chartreuse-dark] | `nord` ![nord][nord] |
-| `gotham` ![gotham][gotham] | `material-palenight` ![material-palenight][material-palenight] | `graywhite` ![graywhite][graywhite] |
-| `vision-friendly-dark` ![vision-friendly-dark][vision-friendly-dark] | `ayu-mirage` ![ayu-mirage][ayu-mirage] | `midnight-purple` ![midnight-purple][midnight-purple] |
-| `calm` ![calm][calm] | `omni` ![omni][omni] | `react` ![react][react] |
+| `default` ![profile_default][profile_default] | `dark` ![profile_dark][profile_dark] | `radical` ![profile_radical][profile_radical] |
+| `merko` ![profile_merko][profile_merko] | `gruvbox` ![profile_gruvbox][profile_gruvbox] | `tokyonight` ![profile_tokyonight][profile_tokyonight] |
+| `onedark` ![profile_onedark][profile_onedark] | `cobalt` ![profile_cobalt][profile_cobalt] | `synthwave` ![profile_synthwave][profile_synthwave] |
+| `highcontrast` ![profile_highcontrast][profile_highcontrast] | `dracula` ![profile_dracula][profile_dracula] | `prussian` ![profile_prussian][profile_prussian] |
+| `monokai` ![profile_monokai][profile_monokai] | `vue` ![profile_vue][profile_vue] | `vue-dark` ![profile_vue-dark][profile_vue-dark] |
+| `shades-of-purple` ![profile_shades-of-purple][profile_shades-of-purple] | `nightowl` ![profile_nightowl][profile_nightowl] | `buefy` ![profile_buefy][profile_buefy] |
+| `blue-green` ![profile_blue-green][profile_blue-green] | `algolia` ![profile_algolia][profile_algolia] | `great-gatsby` ![profile_great-gatsby][profile_great-gatsby] |
+| `darcula` ![profile_darcula][profile_darcula] | `bear` ![profile_bear][profile_bear] | `solarized-dark` ![profile_solarized-dark][profile_solarized-dark] |
+| `solarized-light` ![profile_solarized-light][profile_solarized-light] | `chartreuse-dark` ![profile_chartreuse-dark][profile_chartreuse-dark] | `nord` ![profile_nord][profile_nord] |
+| `gotham` ![profile_gotham][profile_gotham] | `material-palenight` ![profile_material-palenight][profile_material-palenight] | `graywhite` ![profile_graywhite][profile_graywhite] |
+| `vision-friendly-dark` ![profile_vision-friendly-dark][profile_vision-friendly-dark] | `ayu-mirage` ![profile_ayu-mirage][profile_ayu-mirage] | `midnight-purple` ![profile_midnight-purple][profile_midnight-purple] |
+| `calm` ![profile_calm][profile_calm] | `omni` ![profile_omni][profile_omni] | `react` ![profile_react][profile_react] |
 | [Add your theme][add-theme] | | |
 
-## Repo Card
-
-> These themes work both for the Stats Card and Repo Card.
+## History Card
 
 | | | |
 | :--: | :--: | :--: |
-| `default_repocard` ![default_repocard][default_repocard_repo] | `dark` ![dark][dark_repo] | `radical` ![radical][radical_repo] |
-| `merko` ![merko][merko_repo] | `gruvbox` ![gruvbox][gruvbox_repo] | `tokyonight` ![tokyonight][tokyonight_repo] |
-| `onedark` ![onedark][onedark_repo] | `cobalt` ![cobalt][cobalt_repo] | `synthwave` ![synthwave][synthwave_repo] |
-| `highcontrast` ![highcontrast][highcontrast_repo] | `dracula` ![dracula][dracula_repo] | `prussian` ![prussian][prussian_repo] |
-| `monokai` ![monokai][monokai_repo] | `vue` ![vue][vue_repo] | `vue-dark` ![vue-dark][vue-dark_repo] |
-| `shades-of-purple` ![shades-of-purple][shades-of-purple_repo] | `nightowl` ![nightowl][nightowl_repo] | `buefy` ![buefy][buefy_repo] |
-| `blue-green` ![blue-green][blue-green_repo] | `algolia` ![algolia][algolia_repo] | `great-gatsby` ![great-gatsby][great-gatsby_repo] |
-| `darcula` ![darcula][darcula_repo] | `bear` ![bear][bear_repo] | `solarized-dark` ![solarized-dark][solarized-dark_repo] |
-| `solarized-light` ![solarized-light][solarized-light_repo] | `chartreuse-dark` ![chartreuse-dark][chartreuse-dark_repo] | `nord` ![nord][nord_repo] |
-| `gotham` ![gotham][gotham_repo] | `material-palenight` ![material-palenight][material-palenight_repo] | `graywhite` ![graywhite][graywhite_repo] |
-| `vision-friendly-dark` ![vision-friendly-dark][vision-friendly-dark_repo] | `ayu-mirage` ![ayu-mirage][ayu-mirage_repo] | `midnight-purple` ![midnight-purple][midnight-purple_repo] |
-| `calm` ![calm][calm_repo] | `omni` ![omni][omni_repo] | `react` ![react][react_repo] |
+| `default` ![history_default][history_default] | `dark` ![history_dark][history_dark] | `radical` ![history_radical][history_radical] |
+| `merko` ![history_merko][history_merko] | `gruvbox` ![history_gruvbox][history_gruvbox] | `tokyonight` ![history_tokyonight][history_tokyonight] |
+| `onedark` ![history_onedark][history_onedark] | `cobalt` ![history_cobalt][history_cobalt] | `synthwave` ![history_synthwave][history_synthwave] |
+| `highcontrast` ![history_highcontrast][history_highcontrast] | `dracula` ![history_dracula][history_dracula] | `prussian` ![history_prussian][history_prussian] |
+| `monokai` ![history_monokai][history_monokai] | `vue` ![history_vue][history_vue] | `vue-dark` ![history_vue-dark][history_vue-dark] |
+| `shades-of-purple` ![history_shades-of-purple][history_shades-of-purple] | `nightowl` ![history_nightowl][history_nightowl] | `buefy` ![history_buefy][history_buefy] |
+| `blue-green` ![history_blue-green][history_blue-green] | `algolia` ![history_algolia][history_algolia] | `great-gatsby` ![history_great-gatsby][history_great-gatsby] |
+| `darcula` ![history_darcula][history_darcula] | `bear` ![history_bear][history_bear] | `solarized-dark` ![history_solarized-dark][history_solarized-dark] |
+| `solarized-light` ![history_solarized-light][history_solarized-light] | `chartreuse-dark` ![history_chartreuse-dark][history_chartreuse-dark] | `nord` ![history_nord][history_nord] |
+| `gotham` ![history_gotham][history_gotham] | `material-palenight` ![history_material-palenight][history_material-palenight] | `graywhite` ![history_graywhite][history_graywhite] |
+| `vision-friendly-dark` ![history_vision-friendly-dark][history_vision-friendly-dark] | `ayu-mirage` ![history_ayu-mirage][history_ayu-mirage] | `midnight-purple` ![history_midnight-purple][history_midnight-purple] |
+| `calm` ![history_calm][history_calm] | `omni` ![history_omni][history_omni] | `react` ![history_react][history_react] |
+| [Add your theme][add-theme] | | |
+
+## Top Langs Card
+
+| | | |
+| :--: | :--: | :--: |
+| `default` ![top_langs_default][top_langs_default] | `dark` ![top_langs_dark][top_langs_dark] | `radical` ![top_langs_radical][top_langs_radical] |
+| `merko` ![top_langs_merko][top_langs_merko] | `gruvbox` ![top_langs_gruvbox][top_langs_gruvbox] | `tokyonight` ![top_langs_tokyonight][top_langs_tokyonight] |
+| `onedark` ![top_langs_onedark][top_langs_onedark] | `cobalt` ![top_langs_cobalt][top_langs_cobalt] | `synthwave` ![top_langs_synthwave][top_langs_synthwave] |
+| `highcontrast` ![top_langs_highcontrast][top_langs_highcontrast] | `dracula` ![top_langs_dracula][top_langs_dracula] | `prussian` ![top_langs_prussian][top_langs_prussian] |
+| `monokai` ![top_langs_monokai][top_langs_monokai] | `vue` ![top_langs_vue][top_langs_vue] | `vue-dark` ![top_langs_vue-dark][top_langs_vue-dark] |
+| `shades-of-purple` ![top_langs_shades-of-purple][top_langs_shades-of-purple] | `nightowl` ![top_langs_nightowl][top_langs_nightowl] | `buefy` ![top_langs_buefy][top_langs_buefy] |
+| `blue-green` ![top_langs_blue-green][top_langs_blue-green] | `algolia` ![top_langs_algolia][top_langs_algolia] | `great-gatsby` ![top_langs_great-gatsby][top_langs_great-gatsby] |
+| `darcula` ![top_langs_darcula][top_langs_darcula] | `bear` ![top_langs_bear][top_langs_bear] | `solarized-dark` ![top_langs_solarized-dark][top_langs_solarized-dark] |
+| `solarized-light` ![top_langs_solarized-light][top_langs_solarized-light] | `chartreuse-dark` ![top_langs_chartreuse-dark][top_langs_chartreuse-dark] | `nord` ![top_langs_nord][top_langs_nord] |
+| `gotham` ![top_langs_gotham][top_langs_gotham] | `material-palenight` ![top_langs_material-palenight][top_langs_material-palenight] | `graywhite` ![top_langs_graywhite][top_langs_graywhite] |
+| `vision-friendly-dark` ![top_langs_vision-friendly-dark][top_langs_vision-friendly-dark] | `ayu-mirage` ![top_langs_ayu-mirage][top_langs_ayu-mirage] | `midnight-purple` ![top_langs_midnight-purple][top_langs_midnight-purple] |
+| `calm` ![top_langs_calm][top_langs_calm] | `omni` ![top_langs_omni][top_langs_omni] | `react` ![top_langs_react][top_langs_react] |
 | [Add your theme][add-theme] | | |
 
 
-[default]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=default
-[default_repocard]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=default_repocard
-[dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=dark
-[radical]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=radical
-[merko]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=merko
-[gruvbox]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=gruvbox
-[tokyonight]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=tokyonight
-[onedark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=onedark
-[cobalt]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=cobalt
-[synthwave]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=synthwave
-[highcontrast]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=highcontrast
-[dracula]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=dracula
-[prussian]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=prussian
-[monokai]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=monokai
-[vue]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vue
-[vue-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vue-dark
-[shades-of-purple]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=shades-of-purple
-[nightowl]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=nightowl
-[buefy]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=buefy
-[blue-green]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=blue-green
-[algolia]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=algolia
-[great-gatsby]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=great-gatsby
-[darcula]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=darcula
-[bear]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=bear
-[solarized-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=solarized-dark
-[solarized-light]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=solarized-light
-[chartreuse-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=chartreuse-dark
-[nord]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=nord
-[gotham]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=gotham
-[material-palenight]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=material-palenight
-[graywhite]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=graywhite
-[vision-friendly-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vision-friendly-dark
-[ayu-mirage]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=ayu-mirage
-[midnight-purple]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=midnight-purple
-[calm]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=calm
-[omni]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=omni
-[react]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=react
-
-
-[default_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=default
-[default_repocard_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=default_repocard
-[dark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=dark
-[radical_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=radical
-[merko_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=merko
-[gruvbox_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=gruvbox
-[tokyonight_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=tokyonight
-[onedark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=onedark
-[cobalt_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=cobalt
-[synthwave_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=synthwave
-[highcontrast_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=highcontrast
-[dracula_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=dracula
-[prussian_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=prussian
-[monokai_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=monokai
-[vue_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vue
-[vue-dark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vue-dark
-[shades-of-purple_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=shades-of-purple
-[nightowl_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=nightowl
-[buefy_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=buefy
-[blue-green_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=blue-green
-[algolia_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=algolia
-[great-gatsby_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=great-gatsby
-[darcula_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=darcula
-[bear_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=bear
-[solarized-dark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=solarized-dark
-[solarized-light_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=solarized-light
-[chartreuse-dark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=chartreuse-dark
-[nord_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=nord
-[gotham_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=gotham
-[material-palenight_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=material-palenight
-[graywhite_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=graywhite
-[vision-friendly-dark_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vision-friendly-dark
-[ayu-mirage_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=ayu-mirage
-[midnight-purple_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=midnight-purple
-[calm_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=calm
-[omni_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=omni
-[react_repo]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=react
-
+[top_langs_default]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=default
+[top_langs_dark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=dark
+[top_langs_radical]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=radical
+[top_langs_merko]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=merko
+[top_langs_gruvbox]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=gruvbox
+[top_langs_tokyonight]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=tokyonight
+[top_langs_onedark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=onedark
+[top_langs_cobalt]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=cobalt
+[top_langs_synthwave]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=synthwave
+[top_langs_highcontrast]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=highcontrast
+[top_langs_dracula]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=dracula
+[top_langs_prussian]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=prussian
+[top_langs_monokai]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=monokai
+[top_langs_vue]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vue
+[top_langs_vue-dark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vue-dark
+[top_langs_shades-of-purple]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=shades-of-purple
+[top_langs_nightowl]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=nightowl
+[top_langs_buefy]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=buefy
+[top_langs_blue-green]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=blue-green
+[top_langs_algolia]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=algolia
+[top_langs_great-gatsby]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=great-gatsby
+[top_langs_darcula]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=darcula
+[top_langs_bear]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=bear
+[top_langs_solarized-dark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=solarized-dark
+[top_langs_solarized-light]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=solarized-light
+[top_langs_chartreuse-dark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=chartreuse-dark
+[top_langs_nord]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=nord
+[top_langs_gotham]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=gotham
+[top_langs_material-palenight]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=material-palenight
+[top_langs_graywhite]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=graywhite
+[top_langs_vision-friendly-dark]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=vision-friendly-dark
+[top_langs_ayu-mirage]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=ayu-mirage
+[top_langs_midnight-purple]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=midnight-purple
+[top_langs_calm]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=calm
+[top_langs_omni]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=omni
+[top_langs_react]: https://codestats-readme.vercel.app/api/top-langs/?username=aviortheking&theme=react
+[history_default]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=default
+[history_dark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=dark
+[history_radical]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=radical
+[history_merko]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=merko
+[history_gruvbox]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=gruvbox
+[history_tokyonight]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=tokyonight
+[history_onedark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=onedark
+[history_cobalt]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=cobalt
+[history_synthwave]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=synthwave
+[history_highcontrast]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=highcontrast
+[history_dracula]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=dracula
+[history_prussian]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=prussian
+[history_monokai]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=monokai
+[history_vue]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=vue
+[history_vue-dark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=vue-dark
+[history_shades-of-purple]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=shades-of-purple
+[history_nightowl]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=nightowl
+[history_buefy]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=buefy
+[history_blue-green]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=blue-green
+[history_algolia]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=algolia
+[history_great-gatsby]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=great-gatsby
+[history_darcula]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=darcula
+[history_bear]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=bear
+[history_solarized-dark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=solarized-dark
+[history_solarized-light]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=solarized-light
+[history_chartreuse-dark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=chartreuse-dark
+[history_nord]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=nord
+[history_gotham]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=gotham
+[history_material-palenight]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=material-palenight
+[history_graywhite]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=graywhite
+[history_vision-friendly-dark]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=vision-friendly-dark
+[history_ayu-mirage]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=ayu-mirage
+[history_midnight-purple]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=midnight-purple
+[history_calm]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=calm
+[history_omni]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=omni
+[history_react]: https://codestats-readme.vercel.app/api/history?username=Aviortheking&layout=horizontal&theme=react
+[profile_default]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=default
+[profile_dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=dark
+[profile_radical]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=radical
+[profile_merko]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=merko
+[profile_gruvbox]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=gruvbox
+[profile_tokyonight]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=tokyonight
+[profile_onedark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=onedark
+[profile_cobalt]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=cobalt
+[profile_synthwave]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=synthwave
+[profile_highcontrast]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=highcontrast
+[profile_dracula]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=dracula
+[profile_prussian]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=prussian
+[profile_monokai]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=monokai
+[profile_vue]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vue
+[profile_vue-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vue-dark
+[profile_shades-of-purple]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=shades-of-purple
+[profile_nightowl]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=nightowl
+[profile_buefy]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=buefy
+[profile_blue-green]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=blue-green
+[profile_algolia]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=algolia
+[profile_great-gatsby]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=great-gatsby
+[profile_darcula]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=darcula
+[profile_bear]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=bear
+[profile_solarized-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=solarized-dark
+[profile_solarized-light]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=solarized-light
+[profile_chartreuse-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=chartreuse-dark
+[profile_nord]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=nord
+[profile_gotham]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=gotham
+[profile_material-palenight]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=material-palenight
+[profile_graywhite]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=graywhite
+[profile_vision-friendly-dark]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=vision-friendly-dark
+[profile_ayu-mirage]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=ayu-mirage
+[profile_midnight-purple]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=midnight-purple
+[profile_calm]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=calm
+[profile_omni]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=omni
+[profile_react]: https://codestats-readme.vercel.app/api?username=aviortheking&show_icons=true&theme=react
 
 [add-theme]: https://github.com/aviortheking/codestats-readme/edit/master/themes/index.js
 

themes/language-bar.json

@@ -1071,7 +1071,7 @@
 		"color": null,
 		"url": "https://github.com/trending?l=OpenSCAD"
 	},
-	"Other": {
+	"Others": {
 		"color": "#b276b2"
 	},
 	"Ox": {