feat: improved distribution and auto complete

Author: DarkIntaqt

app/components/HomeSearch/SearchResults.tsx

@@ -19,6 +19,8 @@ export interface SearchResultSummoner extends RecentSummoner {
 
 export type SearchResult = SearchResultChallenge | SearchResultSummoner;
 
+const MAX_VISIBLE_RESULTS = 5;
+
 export default function SearchResults({
    results,
    visible,
@@ -41,8 +43,7 @@ export default function SearchResults({
       function handleSubmit() {
          if (pointer !== 0) {
             const result = document.querySelectorAll(`.${css.result}`)[pointer - 1] as
-               | HTMLAnchorElement
-               | undefined;
+               HTMLAnchorElement | undefined;
             if (!result) return;
 
             result.click();
@@ -107,21 +108,27 @@ export default function SearchResults({
          {results.recent.length > 0 && (
             <div className={css.group}>
                <span className={css.namespace}>Recent Pages</span>
-               {results.recent.map((result, i) => (
-                  <Result key={i} result={result} active={pointer === i + 1} />
-               ))}
+               {results.recent.map(
+                  (result, i) =>
+                     i < MAX_VISIBLE_RESULTS && (
+                        <Result key={i} result={result} active={pointer === i + 1} />
+                     ),
+               )}
             </div>
          )}
          {results.challenges.length > 0 && (
             <div className={css.group}>
                <span className={css.namespace}>Challenges</span>
-               {results.challenges.map((result, i) => (
-                  <Result
-                     key={i}
-                     result={result}
-                     active={pointer === i + 1 + results.recent.length}
-                  />
-               ))}
+               {results.challenges.map(
+                  (result, i) =>
+                     i < MAX_VISIBLE_RESULTS && (
+                        <Result
+                           key={i}
+                           result={result}
+                           active={pointer === i + 1 + results.recent.length}
+                        />
+                     ),
+               )}
             </div>
          )}
          {results.summoner.length > 0 && (

app/components/User/Statistics/Distribution.tsx

@@ -1,5 +1,6 @@
-import { LineChart } from "@mui/x-charts";
+import { BarChart } from "@mui/x-charts";
 import { useStaticData } from "@cgg/hooks/useStaticData";
+import cssVariables from "@cgg/styles/variables.module.scss";
 import { capitalize } from "@cgg/utils/capitalize";
 import type { IApiChallengeResponse } from "@cgg/utils/endpoints/types";
 import { getChallenge } from "@cgg/utils/getChallenge";
@@ -8,15 +9,75 @@ import type { Tier } from "@cgg/utils/tier";
 
 const tiers = ["UNRANKED" as Tier, ...tierList];
 
+const fallbackTierColors: Record<Tier, string> = {
+   NONE: "hsl(0, 0%, 41%)",
+   UNRANKED: "hsl(0, 0%, 41%)",
+   IRON: "hsl(0, 0%, 41%)",
+   BRONZE: "hsl(17, 42%, 39%)",
+   SILVER: "hsl(189, 12%, 56%)",
+   GOLD: "hsl(31, 60%, 52%)",
+   PLATINUM: "hsl(171, 65%, 36%)",
+   DIAMOND: "hsl(230, 55%, 57%)",
+   MASTER: "hsl(286, 64%, 55%)",
+   GRANDMASTER: "hsl(351, 65%, 66%)",
+   CHALLENGER: "hsl(40, 85%, 70%)",
+   NONCHALLENGE: "hsl(0, 0%, 41%)",
+};
+
+function getTierColor(tier: Tier): string {
+   if (typeof document === "undefined") {
+      return fallbackTierColors[tier];
+   }
+
+   const colorNode = document.createElement("div");
+   colorNode.className = cssVariables[tier];
+   colorNode.style.position = "absolute";
+   colorNode.style.visibility = "hidden";
+   colorNode.style.pointerEvents = "none";
+   colorNode.style.opacity = "0";
+   document.body.appendChild(colorNode);
+
+   const color = getComputedStyle(colorNode).getPropertyValue("--tier").trim();
+   colorNode.remove();
+
+   return color || fallbackTierColors[tier];
+}
+
 export default function Distribution({
    playerData,
 }: {
    playerData: IApiChallengeResponse;
 }) {
    const data = useStaticData();
+   const tierColors = tiers.reduce<Record<Tier, string>>(
+      (acc, tier) => {
+         acc[tier] = getTierColor(tier);
+         return acc;
+      },
+      {} as Record<Tier, string>,
+   );
+
+   const values = tiers.map((t) => {
+      let amount = playerData.challenges.filter((c) => {
+         const challenge = getChallenge(c.challengeId, data);
+         if (!challenge) return false;
+         if (challenge.retired) return false;
+
+         if (t === "UNRANKED") {
+            return (["UNRANKED", "NONCHALLENGE", "NONE"] as Tier[]).includes(c.tier);
+         }
+         return c.tier === t;
+      }).length;
+
+      if (t === "UNRANKED") {
+         amount += Object.keys(data.challenges).length - playerData.challenges.length;
+      }
+
+      return amount;
+   });
 
    return (
-      <LineChart
+      <BarChart
          xAxis={[
             {
                scaleType: "band",
@@ -25,33 +86,14 @@ export default function Distribution({
          ]}
          series={[
             {
-               data: tiers.map((t) => {
-                  let amount = playerData.challenges.filter((c) => {
-                     const challenge = getChallenge(c.challengeId, data);
-                     if (!challenge) return false;
-                     if (challenge.retired) return false;
-
-                     if (t === "UNRANKED") {
-                        return (["UNRANKED", "NONCHALLENGE", "NONE"] as Tier[]).includes(
-                           c.tier,
-                        );
-                     }
-                     return c.tier === t;
-                  }).length;
-                  if (t === "UNRANKED") {
-                     amount +=
-                        Object.keys(data.challenges).length -
-                        playerData.challenges.length;
-                  }
-
-                  return amount;
-               }),
+               data: values,
                label: "Challenges in tier",
-               color: "#0dbdff",
+               colorGetter: ({ dataIndex }) => tierColors[tiers[dataIndex]],
             },
          ]}
          hideLegend={true}
          height={300}
+         borderRadius={4}
          grid={{ vertical: true, horizontal: true }}
       />
    );

app/components/User/Statistics/UserStatistics.tsx

@@ -15,11 +15,11 @@ export default function UserStatistics({
       <ThemeProvider theme={darkTheme}>
          <div className={css.wrapper}>
             <div className={css.section} style={{ gridArea: "1 / 1 / 2 / 3" }}>
-               <Heading level={2}>Categories</Heading>
+               <Heading level={2}>categories</Heading>
                <Categories playerData={playerData} />
             </div>
             <div className={css.section} style={{ gridArea: "2 / 2 / 3 / 3" }}>
-               <Heading level={2}>Distribution</Heading>
+               <Heading level={2}>tier distribution</Heading>
                <Distribution playerData={playerData} />
             </div>
          </div>

app/components/User/Statistics/userStatistics.module.scss

@@ -17,6 +17,7 @@
 
       h2 {
          margin-bottom: 0.5rem;
+         text-transform: capitalize;
       }
    }
 }

app/utils/recents.ts

@@ -54,6 +54,8 @@ export function getRecentSearches(noEmptyResults = true): Recent[] {
    }
 }
 
+const MAX_RECENTS = 25;
+
 export function addRecentSearch(recent: Recent) {
    if (serverSide) return;
    const recents = getRecentSearches(false);
@@ -64,8 +66,8 @@ export function addRecentSearch(recent: Recent) {
    // add new recent to the front
    filteredRecents.unshift(recent);
 
-   if (filteredRecents.length > 5) {
-      filteredRecents.length = 5;
+   if (filteredRecents.length > 25) {
+      filteredRecents.length = 25;
    }
    localStorage.setItem(storageNames.recents, JSON.stringify(filteredRecents));
 }