top-langs: add hide_values option (#181)

based on https://github.com/anuraghazra/github-readme-stats/pull/4850 by
@claw-explorer

This PR adds a new hide_values query parameter for the Top Languages
card that hides the percentage/byte display values while keeping
progress bars and chart visualizations intact.

<img width="300" height="245" alt="top-langs5"
src="https://github.com/user-attachments/assets/6c7486c3-5611-41c0-95ff-0d9183cea320"
/>
<img width="300" height="350" alt="top-langs"
src="https://github.com/user-attachments/assets/a0cc5bed-3f8e-4934-9c30-3e7d5a240865"
/>
<img width="350" height="215" alt="top-langs2"
src="https://github.com/user-attachments/assets/9d9c06cc-aa0d-4e47-9cdd-bce298583742"
/>
<img width="300" height="350" alt="top-langs3"
src="https://github.com/user-attachments/assets/f4a51889-0b8f-4289-a082-e2107208a123"
/>
<img width="300" height="140" alt="top-langs4"
src="https://github.com/user-attachments/assets/d88c2ea2-0422-482b-aade-8cf5799f12cd"
/>

apps/frontend/src/pages/Home/Home.tsx

@@ -76,6 +76,7 @@ export function HomeScreen({ stage, setStage }: HomeScreenProps): JSX.Element {
   >();
   const [customTitle, setCustomTitle] = useState("");
   const [langsCount, setLangsCount] = useState<number | undefined>();
+  const [hideValues, setHideValues] = useState(false);
   const [showAllStats, setShowAllStats] = useState(false);
   const [showIcons, setShowIcons] = useState(false);
   const [includeAllCommits, setIncludeAllCommits] = useState(true);
@@ -121,6 +122,7 @@ export function HomeScreen({ stage, setStage }: HomeScreenProps): JSX.Element {
     descriptionLines,
     customTitle,
     langsCount,
+    hideValues,
     showAllStats,
     showIcons,
     includeAllCommits,
@@ -306,6 +308,8 @@ export function HomeScreen({ stage, setStage }: HomeScreenProps): JSX.Element {
               setCustomTitle={setCustomTitle}
               langsCount={langsCount}
               setLangsCount={setLangsCount}
+              hideValues={hideValues}
+              setHideValues={setHideValues}
               showAllStats={showAllStats}
               setShowAllStats={setShowAllStats}
               showIcons={showIcons}

apps/frontend/src/pages/Home/getFullSuffix.test.ts

@@ -22,6 +22,7 @@ const baseOptions = {
   descriptionLines: undefined,
   customTitle: "",
   langsCount: undefined,
+  hideValues: false,
   showAllStats: false,
   showIcons: false,
   includeAllCommits: false,

apps/frontend/src/pages/Home/getFullSuffix.ts

@@ -19,6 +19,7 @@ interface Options {
   descriptionLines: number | undefined;
   customTitle: string;
   langsCount: number | undefined;
+  hideValues: boolean;
   showAllStats: boolean;
   showIcons: boolean;
   includeAllCommits: boolean;
@@ -41,6 +42,7 @@ export function getFullSuffix({
   descriptionLines,
   customTitle,
   langsCount,
+  hideValues,
   showAllStats,
   showIcons,
   includeAllCommits,
@@ -138,6 +140,10 @@ export function getFullSuffix({
     fullSuffix += `&langs_count=${langsCount}`;
   }
 
+  if (hideValues && selectedCard === CardType.TOP_LANGS) {
+    fullSuffix += `&hide_values=true`;
+  }
+
   if (showAllStats && selectedCard === CardType.STATS) {
     fullSuffix += `&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_commented,prs_reviewed,issues_commented`;
   }

apps/frontend/src/pages/Home/stages/Customize.tsx

@@ -47,6 +47,8 @@ interface CustomizeStageProps {
   setCustomTitle: Updater<string>;
   langsCount: number | undefined;
   setLangsCount: Updater<number | undefined>;
+  hideValues: boolean;
+  setHideValues: Updater<boolean>;
   showIcons: boolean;
   setShowIcons: Updater<boolean>;
   showAllStats: boolean;
@@ -87,6 +89,8 @@ export function CustomizeStage({
   setCustomTitle,
   langsCount,
   setLangsCount,
+  hideValues,
+  setHideValues,
   showIcons,
   setShowIcons,
   showAllStats,
@@ -321,6 +325,15 @@ export function CustomizeStage({
             max={20}
           />
         )}
+        {cardType === CardType.TOP_LANGS && (
+          <CheckboxSection
+            title="Hide Values?"
+            text="Hide language percentages or bytes while keeping the selected layout visible."
+            question="Hide values?"
+            checked={hideValues}
+            onCheckedChange={setHideValues}
+          />
+        )}
         {cardType === CardType.WAKATIME && (
           <CheckboxSection
             title="Show Percentages?"