mirror of
https://github.com/System-End/github-readme-stats.git
synced 2026-04-19 16:38:23 +00:00
refactor: resolve vscode type errors in wakatime card render and remove redundant css (#3232)
* refactor: resolve vscode type errors in wakatime card render and remove redundant css * dev
This commit is contained in:
Alexandr Garbuzov
GitHub
parent
00394cf45d
commit
ac749b75e3
6 changed files with 170 additions and 216 deletions
|
|
@ -10,7 +10,6 @@ import {
|
|||
kFormatter,
|
||||
measureText,
|
||||
} from "../common/utils.js";
|
||||
import { getStyles } from "../getStyles.js";
|
||||
import { statCardLocales } from "../translations.js";
|
||||
|
||||
const CARD_MIN_WIDTH = 287;
|
||||
|
|
@ -76,6 +75,118 @@ const createTextNode = ({
|
|||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates progress along the boundary of the circle i.e it's circumference.
|
||||
*
|
||||
* @param {number} value The rank value to calculate progress for.
|
||||
* @returns {number} Progress value.
|
||||
*/
|
||||
const calculateCircleProgress = (value) => {
|
||||
const radius = 40;
|
||||
const c = Math.PI * (radius * 2);
|
||||
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
if (value > 100) {
|
||||
value = 100;
|
||||
}
|
||||
|
||||
return ((100 - value) / 100) * c;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves the animation to display progress along the circumference of circle
|
||||
* from the beginning to the given value in a clockwise direction.
|
||||
*
|
||||
* @param {{progress: number}} progress The progress value to animate to.
|
||||
* @returns {string} Progress animation css.
|
||||
*/
|
||||
const getProgressAnimation = ({ progress }) => {
|
||||
return `
|
||||
@keyframes rankAnimation {
|
||||
from {
|
||||
stroke-dashoffset: ${calculateCircleProgress(0)};
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: ${calculateCircleProgress(progress)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves CSS styles for a card.
|
||||
*
|
||||
* @param {Object} colors The colors to use for the card.
|
||||
* @param {string} colors.titleColor The title color.
|
||||
* @param {string} colors.textColor The text color.
|
||||
* @param {string} colors.iconColor The icon color.
|
||||
* @param {string} colors.ringColor The ring color.
|
||||
* @param {boolean} colors.show_icons Whether to show icons.
|
||||
* @param {number} colors.progress The progress value to animate to.
|
||||
* @returns {string} Card CSS styles.
|
||||
*/
|
||||
const getStyles = ({
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
titleColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
ringColor,
|
||||
show_icons,
|
||||
progress,
|
||||
}) => {
|
||||
return `
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
|
||||
}
|
||||
@supports(-moz-appearance: auto) {
|
||||
/* Selector detects Firefox */
|
||||
.stat { font-size:12px; }
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-percentile-header {
|
||||
font-size: 14px;
|
||||
}
|
||||
.rank-percentile-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.not_bold { font-weight: 400 }
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: ${iconColor};
|
||||
display: ${!!show_icons ? "block" : "none"};
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: ${ringColor};
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: ${ringColor};
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef {import('../fetchers/types').StatsData} StatsData
|
||||
* @typedef {import('./types').StatCardOptions} StatCardOptions
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
getCardColors,
|
||||
lowercaseTrim,
|
||||
} from "../common/utils.js";
|
||||
import { getStyles } from "../getStyles.js";
|
||||
import { wakatimeCardLocales } from "../translations.js";
|
||||
|
||||
/** Import language colors.
|
||||
|
|
@ -158,6 +157,36 @@ const recalculatePercentages = (languages) => {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves CSS styles for a card.
|
||||
*
|
||||
* @param {Object} colors The colors to use for the card.
|
||||
* @param {string} colors.titleColor The title color.
|
||||
* @param {string} colors.textColor The text color.
|
||||
* @returns {string} Card CSS styles.
|
||||
*/
|
||||
const getStyles = ({
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
titleColor,
|
||||
textColor,
|
||||
}) => {
|
||||
return `
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
|
||||
}
|
||||
@supports(-moz-appearance: auto) {
|
||||
/* Selector detects Firefox */
|
||||
.stat { font-size:12px; }
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.not_bold { font-weight: 400 }
|
||||
.bold { font-weight: 700 }
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef {import('../fetchers/types').WakaTimeData} WakaTimeData
|
||||
* @typedef {import('./types').WakaTimeOptions} WakaTimeOptions
|
||||
|
|
@ -235,7 +264,6 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
|
|||
const cssStyles = getStyles({
|
||||
titleColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
});
|
||||
|
||||
let finalLayout = "";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { getAnimations } from "../getStyles.js";
|
||||
import { encodeHTML, flexLayout } from "./utils.js";
|
||||
|
||||
class Card {
|
||||
|
|
@ -173,6 +172,33 @@ class Card {
|
|||
: "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves css animations for a card.
|
||||
*
|
||||
* @returns {string} Animation css.
|
||||
*/
|
||||
getAnimations = () => {
|
||||
return `
|
||||
/* Animations */
|
||||
@keyframes scaleInAnimation {
|
||||
from {
|
||||
transform: translate(-5px, 5px) scale(0);
|
||||
}
|
||||
to {
|
||||
transform: translate(-5px, 5px) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} body The inner body of the card.
|
||||
* @returns {string} The rendered card.
|
||||
|
|
@ -202,7 +228,7 @@ class Card {
|
|||
}
|
||||
${this.css}
|
||||
|
||||
${process.env.NODE_ENV === "test" ? "" : getAnimations()}
|
||||
${process.env.NODE_ENV === "test" ? "" : this.getAnimations()}
|
||||
${
|
||||
this.animations === false
|
||||
? `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
|
||||
|
|
|
|||
142
src/getStyles.js
142
src/getStyles.js
|
|
@ -1,142 +0,0 @@
|
|||
// @ts-check
|
||||
|
||||
/**
|
||||
* Calculates progress along the boundary of the circle i.e it's circumference.
|
||||
*
|
||||
* @param {number} value The rank value to calculate progress for.
|
||||
* @returns {number} Progress value.
|
||||
*/
|
||||
const calculateCircleProgress = (value) => {
|
||||
const radius = 40;
|
||||
const c = Math.PI * (radius * 2);
|
||||
|
||||
if (value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
if (value > 100) {
|
||||
value = 100;
|
||||
}
|
||||
|
||||
return ((100 - value) / 100) * c;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves the animation to display progress along the circumference of circle
|
||||
* from the beginning to the given value in a clockwise direction.
|
||||
*
|
||||
* @param {{progress: number}} progress The progress value to animate to.
|
||||
* @returns {string} Progress animation css.
|
||||
*/
|
||||
const getProgressAnimation = ({ progress }) => {
|
||||
return `
|
||||
@keyframes rankAnimation {
|
||||
from {
|
||||
stroke-dashoffset: ${calculateCircleProgress(0)};
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: ${calculateCircleProgress(progress)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves css animations for a card.
|
||||
*
|
||||
* @returns {string} Animation css.
|
||||
*/
|
||||
const getAnimations = () => {
|
||||
return `
|
||||
/* Animations */
|
||||
@keyframes scaleInAnimation {
|
||||
from {
|
||||
transform: translate(-5px, 5px) scale(0);
|
||||
}
|
||||
to {
|
||||
transform: translate(-5px, 5px) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieves CSS styles for a card.
|
||||
*
|
||||
* @param {Object} colors The colors to use for the card.
|
||||
* @param {string} colors.titleColor The title color.
|
||||
* @param {string} colors.textColor The text color.
|
||||
* @param {string} colors.iconColor The icon color.
|
||||
* @param {string} colors.ringColor The ring color.
|
||||
* @param {boolean} colors.show_icons Whether to show icons.
|
||||
* @param {number} colors.progress The progress value to animate to.
|
||||
* @returns {string} Card CSS styles.
|
||||
*/
|
||||
const getStyles = ({
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
titleColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
ringColor,
|
||||
show_icons,
|
||||
progress,
|
||||
}) => {
|
||||
return `
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
|
||||
}
|
||||
@supports(-moz-appearance: auto) {
|
||||
/* Selector detects Firefox */
|
||||
.stat { font-size:12px; }
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-percentile-header {
|
||||
font-size: 14px;
|
||||
}
|
||||
.rank-percentile-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.not_bold { font-weight: 400 }
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: ${iconColor};
|
||||
display: ${!!show_icons ? "block" : "none"};
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: ${ringColor};
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: ${ringColor};
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
|
||||
`;
|
||||
};
|
||||
|
||||
export { getAnimations, getStyles };
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
export * from "./common/index.js";
|
||||
export * from "./cards/index.js";
|
||||
export { getStyles, getAnimations } from "./getStyles.js";
|
||||
|
|
|
|||
|
|
@ -38,42 +38,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
|
|||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-percentile-header {
|
||||
font-size: 14px;
|
||||
}
|
||||
.rank-percentile-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.not_bold { font-weight: 400 }
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: #4c71f2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: undefined;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: undefined;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideInAnimation {
|
||||
from {
|
||||
|
|
@ -224,42 +190,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
|
|||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-percentile-header {
|
||||
font-size: 14px;
|
||||
}
|
||||
.rank-percentile-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.not_bold { font-weight: 400 }
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: #4c71f2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: undefined;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: undefined;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideInAnimation {
|
||||
from {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue