diff --git a/api/top-langs.js b/api/top-langs.js
index 19cccb894e33a..d183d3b455ca0 100644
--- a/api/top-langs.js
+++ b/api/top-langs.js
@@ -29,7 +29,6 @@ export default async (req, res) => {
locale,
border_radius,
border_color,
- disable_animations,
} = req.query;
res.setHeader("Content-Type", "image/svg+xml");
@@ -76,7 +75,6 @@ export default async (req, res) => {
border_radius,
border_color,
locale: locale ? locale.toLowerCase() : null,
- disable_animations: parseBoolean(disable_animations),
}),
);
} catch (err) {
diff --git a/readme.md b/readme.md
index 716bda22758c6..bfe042fcc2032 100644
--- a/readme.md
+++ b/readme.md
@@ -304,7 +304,6 @@ You can provide multiple comma-separated values in the bg_color option to render
- `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
- `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
- `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
-- `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
> **Warning**
> Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding)
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
index 9396ff8e73d5e..602d1b811b5df 100644
--- a/src/cards/top-languages-card.js
+++ b/src/cards/top-languages-card.js
@@ -39,53 +39,46 @@ const getLongestLang = (arr) =>
* Creates a node to display usage of a programming language in percentage
* using text and a horizontal progress bar.
*
- * @param {object} props Function properties.
+ * @param {object[]} props Function properties.
* @param {number} props.width The card width
* @param {string} props.name Name of the programming language.
* @param {string} props.color Color of the programming language.
* @param {string} props.progress Usage of the programming language in percentage.
- * @param {number} props.index Index of the programming language.
* @returns {string} Programming language SVG node.
*/
-const createProgressTextNode = ({ width, color, name, progress, index }) => {
- const staggerDelay = (index + 3) * 150;
+const createProgressTextNode = ({ width, color, name, progress }) => {
const paddingRight = 95;
const progressTextX = width - paddingRight + 10;
const progressWidth = width - paddingRight;
return `
-
- ${name}
- ${progress}%
- ${createProgressNode({
- x: 0,
- y: 25,
- color,
- width: progressWidth,
- progress,
- progressBarBackgroundColor: "#ddd",
- delay: staggerDelay + 300,
- })}
-
+ ${name}
+ ${progress}%
+ ${createProgressNode({
+ x: 0,
+ y: 25,
+ color,
+ width: progressWidth,
+ progress,
+ progressBarBackgroundColor: "#ddd",
+ })}
`;
};
/**
* Creates a text only node to display usage of a programming language in percentage.
*
- * @param {object} props Function properties.
+ * @param {object[]} props Function properties.
* @param {Lang} props.lang Programming language object.
* @param {number} props.totalSize Total size of all languages.
- * @param {number} props.index Index of the programming language.
* @returns {string} Compact layout programming language SVG node.
*/
-const createCompactLangNode = ({ lang, totalSize, index }) => {
+const createCompactLangNode = ({ lang, totalSize }) => {
const percentage = ((lang.size / totalSize) * 100).toFixed(2);
- const staggerDelay = (index + 3) * 150;
const color = lang.color || "#858585";
return `
-
+
${lang.name} ${percentage}%
@@ -111,6 +104,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
createCompactLangNode({
lang,
totalSize,
+ // @ts-ignore
index,
}),
);
@@ -140,13 +134,12 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
*/
const renderNormalLayout = (langs, width, totalLanguageSize) => {
return flexLayout({
- items: langs.map((lang, index) => {
+ items: langs.map((lang) => {
return createProgressTextNode({
- width,
+ width: width,
name: lang.name,
color: lang.color || DEFAULT_LANG_COLOR,
progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
- index,
});
}),
gap: 40,
@@ -194,7 +187,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => {
return `
-
+
${compactProgressBar}
@@ -283,7 +276,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
langs_count = DEFAULT_LANGS_COUNT,
border_radius,
border_color,
- disable_animations,
} = options;
const i18n = new I18n({
@@ -332,43 +324,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
colors,
});
- if (disable_animations) card.disableAnimations();
-
+ card.disableAnimations();
card.setHideBorder(hide_border);
card.setHideTitle(hide_title);
card.setCSS(
- `
- @keyframes slideInAnimation {
- from {
- width: 0;
- }
- to {
- width: calc(100%-100px);
- }
- }
- @keyframes growWidthAnimation {
- from {
- width: 0;
- }
- to {
- width: 100%;
- }
- }
- .lang-name {
- font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
- fill: ${colors.textColor};
- }
- .stagger {
- opacity: 0;
- animation: fadeInAnimation 0.3s ease-in-out forwards;
- }
- #rect-mask rect{
- animation: slideInAnimation 1s ease-in-out forwards;
- }
- .lang-progress{
- animation: growWidthAnimation 0.6s ease-in-out forwards;
- }
- `,
+ `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`,
);
return card.render(`
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
index c5945d48be71e..502314c41fa92 100644
--- a/src/cards/types.d.ts
+++ b/src/cards/types.d.ts
@@ -37,7 +37,6 @@ export type TopLangOptions = CommonOptions & {
layout: "compact" | "normal";
custom_title: string;
langs_count: number;
- disable_animations: boolean;
};
type WakaTimeOptions = CommonOptions & {
diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js
index 2825583c7406a..c36818b193b2f 100644
--- a/src/common/createProgressNode.js
+++ b/src/common/createProgressNode.js
@@ -10,7 +10,6 @@ import { clampValue } from "./utils.js";
* @param {string} createProgressNodeParams.color Progress color.
* @param {string} createProgressNodeParams.progress Progress value.
* @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
- * @param {number} createProgressNodeParams.delay Delay before animation starts.
* @returns {string} Progress node.
*/
const createProgressNode = ({
@@ -20,22 +19,20 @@ const createProgressNode = ({
color,
progress,
progressBarBackgroundColor,
- delay,
}) => {
const progressPercentage = clampValue(progress, 2, 100);
return `
`;
};