LB-1737: Create top artists graph showing album details

frontend/js/src/user/stats/UserReports.tsx

@@ -16,6 +16,7 @@ import UserListeningActivity from "./components/UserListeningActivity";
 import UserTopEntity from "./components/UserTopEntity";
 import UserDailyActivity from "./components/UserDailyActivity";
 import UserArtistMap from "./components/UserArtistMap";
+import UserArtistActivity from "./components/UserArtistActivity";
 import { getAllStatRanges, isInvalidStatRange } from "./utils";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import StatsExplanationsModal from "../../common/stats/StatsExplanationsModal";
@@ -167,6 +168,10 @@ export default function UserReports() {
           <UserDailyActivity range={range} user={user} />
         </section>
       )}
+      <section id="artist-activity">
+        {statsExplanationModalButton}
+        <UserArtistActivity range={range} user={user} />
+      </section>
       <section id="artist-origin">
         {statsExplanationModalButton}
         <UserArtistMap range={range} user={user} />

frontend/js/src/user/stats/components/UserArtistActivity.tsx

@@ -0,0 +1,196 @@
+import { ResponsiveBar } from "@nivo/bar";
+import * as React from "react";
+import { faExclamationCircle, faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useQuery } from "@tanstack/react-query";
+import Card from "../../../components/Card";
+import Loader from "../../../components/Loader";
+import { COLOR_BLACK } from "../../../utils/constants";
+import GlobalAppContext from "../../../utils/GlobalAppContext";
+
+export type UserArtistActivityProps = {
+  range: UserStatsAPIRange;
+  user?: ListenBrainzUser;
+};
+
+export declare type ChartDataItem = {
+  label: string;
+  [albumName: string]: number | string;
+};
+
+export default function UserArtistActivity(props: UserArtistActivityProps) {
+  const { APIService } = React.useContext(GlobalAppContext);
+
+  // Props
+  const { user, range } = props;
+
+  const { data: loaderData, isLoading: loading } = useQuery({
+    queryKey: ["userArtistActivity", user?.name, range],
+    queryFn: async () => {
+      try {
+        const queryData = await APIService.getUserArtistActivity(
+          user?.name,
+          range
+        );
+        return { data: queryData, hasError: false, errorMessage: "" };
+      } catch (error) {
+        return {
+          data: { result: [] } as UserArtistActivityResponse,
+          hasError: true,
+          errorMessage: error.message,
+        };
+      }
+    },
+  });
+
+  const {
+    data: rawData = { result: [] } as UserArtistActivityResponse,
+    hasError = false,
+    errorMessage = "",
+  } = loaderData || {};
+
+  const processData = (data?: UserArtistActivityResponse) => {
+    if (!data || !data.result || data.result.length === 0) {
+      return [];
+    }
+    return data.result.map((artist) => {
+      let wrappedLabel = artist.name.replace(/(.{14})/g, "$1-\n");
+      if (wrappedLabel.endsWith("-\n")) {
+        wrappedLabel = wrappedLabel.slice(0, -2); // Remove the last hyphen and keep the newline
+      }
+      return {
+        label: wrappedLabel,
+        ...artist.albums.reduce(
+          (acc, album) => ({ ...acc, [album.name]: album.listen_count }),
+          {} as Record<string, number>
+        ),
+      };
+    }) as ChartDataItem[];
+  };
+  const [chartData, setChartData] = React.useState<ChartDataItem[]>([]);
+
+  const albumRedirectMapping = React.useMemo(() => {
+    const mapping: Record<string, string> = {};
+    if (rawData && rawData.result) {
+      rawData.result.forEach((artist) => {
+        artist.albums.forEach((album) => {
+          if (album.release_group_mbid) {
+            mapping[`${artist.name}-${album.name}`] = album.release_group_mbid;
+          }
+        });
+      });
+    }
+    return mapping;
+  }, [rawData]);
+
+  React.useEffect(() => {
+    if (rawData && rawData.result.length > 0) {
+      const processedData = processData(rawData);
+      setChartData(processedData);
+    }
+  }, [rawData]);
+
+  return (
+    <Card className="user-stats-card" data-testid="user-artist-activity">
+      <div className="row">
+        <div className="col-xs-10">
+          <h3 className="capitalize-bold" style={{ marginLeft: 20 }}>
+            Artist Activity
+          </h3>
+        </div>
+        <div className="col-xs-2 text-right">
+          <h4 style={{ marginTop: 20 }}>
+            <a href="#artist-activity">
+              <FontAwesomeIcon
+                icon={faLink as IconProp}
+                size="sm"
+                color={COLOR_BLACK}
+                style={{ marginRight: 20 }}
+              />
+            </a>
+          </h4>
+        </div>
+      </div>
+      <Loader isLoading={loading}>
+        {hasError ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: "inherit",
+            }}
+          >
+            <span style={{ fontSize: 24 }}>
+              <FontAwesomeIcon icon={faExclamationCircle as IconProp} />{" "}
+              {errorMessage}
+            </span>
+          </div>
+        ) : (
+          <div className="row">
+            <div className="col-xs-12">
+              <div
+                style={{ width: "100%", height: "600px", minHeight: "400px" }}
+              >
+                <ResponsiveBar
+                  data={chartData}
+                  keys={Array.from(
+                    new Set(
+                      chartData.flatMap((item) =>
+                        Object.keys(item).filter((key) => key !== "label")
+                      )
+                    )
+                  )}
+                  indexBy="label"
+                  margin={{ top: 20, right: 80, bottom: 80, left: 80 }}
+                  padding={0.2}
+                  layout="vertical"
+                  colors={{ scheme: "nivo" }}
+                  borderColor={{ from: "color", modifiers: [["darker", 1.6]] }}
+                  enableLabel={false}
+                  axisBottom={{
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: -45,
+                    renderTick: (tick) => (
+                      <g transform={`translate(${tick.x},${tick.y})`}>
+                        {tick.value
+                          .split("\n")
+                          .map((line: string, i: number) => (
+                            <text
+                              key={line}
+                              x={0}
+                              y={10 + i * 15}
+                              textAnchor="end"
+                              dominantBaseline="middle"
+                              style={{
+                                fontSize: 10,
+                                fill: "#000",
+                                transform: `rotate(-45deg)`,
+                              }}
+                            >
+                              {line}
+                            </text>
+                          ))}
+                      </g>
+                    ),
+                  }}
+                  onClick={(barData, event) => {
+                    const albumName = barData.id;
+                    const artistName = barData.indexValue;
+                    const releaseMbid =
+                      albumRedirectMapping[`${artistName}-${albumName}`];
+                    if (releaseMbid) {
+                      window.location.href = `/album/${releaseMbid}`;
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Loader>
+    </Card>
+  );
+}

frontend/js/src/utils/APIService.ts

@@ -574,6 +574,30 @@ export default class APIService {
     return response.json();
   };
 
+  getUserArtistActivity = async (
+    userName?: string,
+    range: UserStatsAPIRange = "all_time"
+  ): Promise<UserArtistActivityResponse> => {
+    let url;
+    if (userName) {
+      url = `${this.APIBaseURI}/stats/user/${userName}/artist-activity`;
+    } else {
+      url = `${this.APIBaseURI}/stats/sitewide/artist-activity`;
+    }
+    url += `?range=${range}`;
+    const response = await fetch(url);
+    await this.checkStatus(response);
+    if (response.status === 204) {
+      const error = new APIError(
+        "There are no statistics available for this user for this period"
+      );
+      error.status = response.statusText;
+      error.response = response;
+      throw error;
+    }
+    return response.json();
+  };
+
   getUserArtistMap = async (
     userName?: string,
     range: UserStatsAPIRange = "all_time",

frontend/js/src/utils/types.d.ts

@@ -288,6 +288,18 @@ declare type UserDailyActivityResponse = {
   };
 };
 
+declare type UserArtistActivityResponse = {
+  result: Array<{
+    name: string;
+    listen_count: number;
+    albums: Array<{
+      name: string;
+      listen_count: number;
+      release_group_mbid: string;
+    }>;
+  }>;
+};
+
 declare type UserArtistMapArtist = {
   artist_name: string;
   artist_mbid: string;

frontend/js/tests/__mocks__/userArtistActivity.json

@@ -0,0 +1,130 @@
+{
+  "result": [
+    {
+      "name": "Ed Sheeran",
+      "listen_count": 87,
+      "albums": [
+        { "listen_count": 17, "name": "=" },
+        { "listen_count": 12, "name": "÷" },
+        { "listen_count": 11, "name": "+" },
+        { "listen_count": 10, "name": "×" },
+        { "listen_count": 16, "name": "No.6 Collaborations Project" },
+        { "listen_count": 16, "name": "-" },
+        { "listen_count": 3, "name": "Autumn Variations" },
+        { "listen_count": 2, "name": "Under the tree" }
+      ]
+    },
+    {
+      "name": "AP Dhillon",
+      "listen_count": 46,
+      "albums": [
+        { "listen_count": 6, "name": "Two Hearts Never Break The Same" },
+        { "listen_count": 3, "name": "HIDDEN GEMS" },
+        { "listen_count": 8, "name": "Summer High" },
+        { "listen_count": 8, "name": "Ma Belle" },
+        { "listen_count": 8, "name": "Excuses" },
+        { "listen_count": 7, "name": "Insane" },
+        { "listen_count": 6, "name": "The Brownprint" }
+      ]
+    },
+    {
+      "name": "Diljit Dosanjh",
+      "listen_count": 27,
+      "albums": [
+        { "listen_count": 7, "name": "Ghost" },
+        { "listen_count": 5, "name": "G.O.A.T." },
+        { "listen_count": 3, "name": "Drive Thru" },
+        { "listen_count": 6, "name": "Love Ya" },
+        { "listen_count": 6, "name": "In Love With Diljit Dosanjh" }
+      ]
+    },
+    {
+      "name": "Honey Singh",
+      "listen_count": 21,
+      "albums": [
+        { "listen_count": 21, "name": "International Villager" }
+      ]
+    },
+    {
+      "name": "Yo Yo Honey Singh",
+      "listen_count": 14,
+      "albums": [
+        { "listen_count": 4, "name": "Desi Kalakaar" },
+        { "listen_count": 2, "name": "Zorawar" },
+        { "listen_count": 8, "name": "Glory" }
+      ]
+    },
+    {
+      "name": "Anuv Jain",
+      "listen_count": 12,
+      "albums": [
+        { "listen_count": 5, "name": "Ocean" },
+        { "listen_count": 7, "name": "Baarishein" }
+      ]
+    },
+    {
+      "name": "Avvy Sra & Karan Aujla",
+      "listen_count": 8,
+      "albums": [
+        { "listen_count": 8, "name": "White Brown Black" }
+      ]
+    },
+    {
+      "name": "Shubh",
+      "listen_count": 8,
+      "albums": [
+        { "listen_count": 2, "name": "We Rollin" },
+        { "listen_count": 6, "name": "Bandana" }
+      ]
+    },
+    {
+      "name": "Pav Dharia",
+      "listen_count": 8,
+      "albums": [
+        { "listen_count": 8, "name": "Na Ja" }
+      ]
+    },
+    {
+      "name": "Vishal Mishra",
+      "listen_count": 8,
+      "albums": [
+        { "listen_count": 8, "name": "Manjha" }
+      ]
+    },
+    {
+      "name": "Aditya Rikhari",
+      "listen_count": 8,
+      "albums": [
+        { "listen_count": 8, "name": "Jaana Samjho Na (From \"Bhool Bhulaiyaa 3\")" }
+      ]
+    },
+    {
+      "name": "Juss & MixSingh",
+      "listen_count": 7,
+      "albums": [
+        { "listen_count": 7, "name": "Suniyan Suniyan" }
+      ]
+    },
+    {
+      "name": "Diljit Dosanjh & Sia",
+      "listen_count": 7,
+      "albums": [
+        { "listen_count": 7, "name": "Hass Hass" }
+      ]
+    },
+    {
+      "name": "Jassa Dhillon",
+      "listen_count": 6,
+      "albums": [
+        { "listen_count": 6, "name": "VIBIN" }
+      ]
+    },
+    {
+      "name": "Jasleen Royal",
+      "listen_count": 6,
+      "albums": [
+        { "listen_count": 6, "name": "Sahiba" }
+      ]
+    }
+  ]
+}