public/github-stats-extended
2
0
Fork 0
forked from mirrored/github-stats-extended
Code Issues Pull Requests Actions Packages Projects Wiki Activity

add several wakatime card options

Browse Source
This commit is contained in:
martin-mfg
2025-11-06 09:45:14 +01:00
parent 24057e29f4
commit ac74513a98
4 changed files with 107 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/readme.md
+1 -1
View File
@@ -693,7 +693,7 @@ You can customize the appearance and behavior of the WakaTime stats card using t
![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs)
![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs\&hide_progress=true)
![Harlok's WakaTime stats](https://github-readme-stats-phi-jet-58.vercel.app/api/wakatime?username=ffflabs\&card_width=315\&hide_progress=true)
* Compact layout
frontend/frontend/src/components/Home/WakatimeLayoutSection.js
+38
View File
@@ -0,0 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
import Section from './Section';
import { Input } from '../Generic';
export const DEFAULT_OPTION = {
id: 1,
label: 'Normal',
disabled: false,
value: 'default',
};
const WakatimeLayoutSection = ({ selectedOption, setSelectedOption }) => {
const options = [
DEFAULT_OPTION,
{ id: 2, label: 'Compact', disabled: false, value: 'compact' },
{ id: 3, label: 'Text Only', disabled: false, value: 'default=hide_progress=true&card_width=315' },
];
return (
<Section title="Card Layout">
<p>Select a card layout.</p>
<Input
options={options}
selectedOption={selectedOption || DEFAULT_OPTION}
setSelectedOption={setSelectedOption}
/>
</Section>
);
};
WakatimeLayoutSection.propTypes = {
selectedOption: PropTypes.object.isRequired,
setSelectedOption: PropTypes.func.isRequired,
};
export default WakatimeLayoutSection;
frontend/frontend/src/pages/Home/Home.js
+31 -6
View File
@@ -15,7 +15,8 @@ import { authenticate } from '../../api';
import { login as _login } from '../../redux/actions/userActions';
import { HOST } from '../../constants';
import { CardTypes } from '../../utils';
import { DEFAULT_OPTION as DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
import { DEFAULT_OPTION as WAKATIME_DEFAULT_LAYOUT } from '../../components/Home/WakatimeLayoutSection';
const HomeScreen = () => {
const [isLoading, setIsLoading] = useState(false);
@@ -37,7 +38,12 @@ const HomeScreen = () => {
const [imageSrc, setImageSrc] = useState(`?&username=${userId}`);
// for stage two
const [selectedLayout, setSelectedLayout] = useState(DEFAULT_LAYOUT);
const [selectedLanguagesLayout, setSelectedLanguagesLayout] = useState(
LANGUAGES_DEFAULT_LAYOUT,
);
const [selectedWakatimeLayout, setSelectedWakatimeLayout] = useState(
WAKATIME_DEFAULT_LAYOUT,
);
const [showTitle, setShowTitle] = useState(true);
const [showOwner, setShowOwner] = useState(false);
@@ -45,9 +51,16 @@ const HomeScreen = () => {
const [customTitle, setCustomTitle] = useState('');
const [langsCount, setLangsCount] = useState();
const [enableAnimations, setEnableAnimations] = useState(true);
const [usePercent, setUsePercent] = useState(false);
const resetCustomization = () => {
// setUsePercent(false);
if (cardTypes === CardTypes.TOP_LANGS) {
setSelectedWakatimeLayout(WAKATIME_DEFAULT_LAYOUT);
}
if (selectedCard === CardTypes.WAKATIME) {
setSelectedLanguagesLayout(LANGUAGES_DEFAULT_LAYOUT);
}
if (theme === 'default' || theme === 'default_repocard') {
if (selectedCard === CardTypes.PIN || selectedCard === CardTypes.GIST) {
setTheme('default_repocard');
@@ -67,8 +80,12 @@ const HomeScreen = () => {
let fullSuffix = `${imageSrc}`;
if (selectedLayout !== DEFAULT_LAYOUT) {
fullSuffix += `&layout=${selectedLayout.value}`;
if (selectedLanguagesLayout !== LANGUAGES_DEFAULT_LAYOUT) {
fullSuffix += `&layout=${selectedLanguagesLayout.value}`;
}
if (selectedWakatimeLayout !== WAKATIME_DEFAULT_LAYOUT) {
fullSuffix += `&layout=${selectedWakatimeLayout.value}`;
}
if (!showTitle) {
@@ -96,6 +113,10 @@ const HomeScreen = () => {
fullSuffix += `&disable_animations=${!enableAnimations}`;
}
if (usePercent) {
fullSuffix += `&display_format=percent`;
}
// for stage three
const [theme, setTheme] = useState('default');
const themeSuffix = `${fullSuffix}&theme=${theme}`;
@@ -193,8 +214,10 @@ const HomeScreen = () => {
<CustomizeStage
selectedCard={selectedCard || CardTypes.STATS}
imageSrc={imageSrc}
selectedLayout={selectedLayout}
setSelectedLayout={setSelectedLayout}
selectedLanguagesLayout={selectedLanguagesLayout}
setSelectedLanguagesLayout={setSelectedLanguagesLayout}
selectedWakatimeLayout={selectedWakatimeLayout}
setSelectedWakatimeLayout={setSelectedWakatimeLayout}
showTitle={showTitle}
setShowTitle={setShowTitle}
showOwner={showOwner}
@@ -207,6 +230,8 @@ const HomeScreen = () => {
setLangsCount={setLangsCount}
enableAnimations={enableAnimations}
setEnableAnimations={setEnableAnimations}
usePercent={usePercent}
setUsePercent={setUsePercent}
fullSuffix={fullSuffix}
/>
)}
frontend/frontend/src/pages/Home/stages/Customize.js
+37 -10
View File
@@ -6,11 +6,14 @@ import { CardTypes } from '../../../utils';
import TextSection from '../../../components/Home/TextSection';
import NumericSection from '../../../components/Home/NumericSection';
import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection';
import WakatimeLayoutSection from '../../../components/Home/WakatimeLayoutSection';
const CustomizeStage = ({
selectedCard,
selectedLayout,
setSelectedLayout,
selectedLanguagesLayout,
setSelectedLanguagesLayout,
selectedWakatimeLayout,
setSelectedWakatimeLayout,
showTitle,
setShowTitle,
showOwner,
@@ -23,13 +26,17 @@ const CustomizeStage = ({
setLangsCount,
enableAnimations,
setEnableAnimations,
usePercent,
setUsePercent,
fullSuffix,
}) => {
const cardType = selectedCard || CardTypes.STATS;
return (
<div className="w-full flex flex-wrap">
<div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
{(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && (
{(cardType === CardTypes.STATS ||
cardType === CardTypes.TOP_LANGS ||
cardType === CardTypes.WAKATIME) && (
<CheckboxSection
title="Show Title?"
text="Shows a title at the top of the card."
@@ -38,7 +45,7 @@ const CustomizeStage = ({
setVariable={setShowTitle}
/>
)}
{cardType === CardTypes.STATS && (
{(cardType === CardTypes.STATS || cardType === CardTypes.WAKATIME) && (
<TextSection
title="Custom Title"
text="Set a custom title for the card.<br>Leave empty for default title."
@@ -47,7 +54,8 @@ const CustomizeStage = ({
setValue={setCustomTitle}
/>
)}
{cardType === CardTypes.TOP_LANGS && (
{(cardType === CardTypes.TOP_LANGS ||
cardType === CardTypes.WAKATIME) && (
<NumericSection
title="Language Count"
text="Set the number of languages to be shown.<br>Leave empty for default count."
@@ -59,8 +67,14 @@ const CustomizeStage = ({
)}
{cardType === CardTypes.TOP_LANGS && (
<LanguagesLayoutSection
selectedOption={selectedLayout}
setSelectedOption={setSelectedLayout}
selectedOption={selectedLanguagesLayout}
setSelectedOption={setSelectedLanguagesLayout}
/>
)}
{cardType === CardTypes.WAKATIME && (
<WakatimeLayoutSection
selectedOption={selectedWakatimeLayout}
setSelectedOption={setSelectedWakatimeLayout}
/>
)}
{(cardType === CardTypes.STATS ||
@@ -74,7 +88,7 @@ const CustomizeStage = ({
setVariable={setEnableAnimations}
/>
)}
{cardType === CardTypes.PIN && (
{(cardType === CardTypes.PIN || cardType === CardTypes.GIST) && (
<CheckboxSection
title="Show Owner?"
text="Shows the repo owner's name next to the repo name."
@@ -93,6 +107,15 @@ const CustomizeStage = ({
max={3}
/>
)}
{cardType === CardTypes.WAKATIME && (
<CheckboxSection
title="Show Percentages"
text="Show time spent in hours or percentages."
question="Show percentages?"
variable={usePercent}
setVariable={setUsePercent}
/>
)}
</div>
<div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
<div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center">
@@ -105,8 +128,10 @@ const CustomizeStage = ({
CustomizeStage.propTypes = {
selectedCard: PropTypes.string.isRequired,
selectedLayout: PropTypes.object.isRequired,
setSelectedLayout: PropTypes.func.isRequired,
selectedLanguagesLayout: PropTypes.object.isRequired,
setSelectedLanguagesLayout: PropTypes.func.isRequired,
selectedWakatimeLayout: PropTypes.object.isRequired,
setSelectedWakatimeLayout: PropTypes.func.isRequired,
showTitle: PropTypes.bool.isRequired,
setShowTitle: PropTypes.func.isRequired,
descriptionLines: PropTypes.number.isRequired,
@@ -119,6 +144,8 @@ CustomizeStage.propTypes = {
setLangsCount: PropTypes.func.isRequired,
enableAnimations: PropTypes.bool.isRequired,
setEnableAnimations: PropTypes.func.isRequired,
usePercent: PropTypes.bool.isRequired,
setUsePercent: PropTypes.func.isRequired,
fullSuffix: PropTypes.string.isRequired,
};