Function ArtistSummary

  • ArtistSummary(props: ArtistSummaryProps): Element

    Artist skip pattern visualization component

    Displays a ranked list of artists whose tracks are most frequently skipped, with visual representation of skip percentages and counts. The component provides insights into which artists might be less preferred in the user's music library.

    The display includes:

    • Ranking position (1-N) for quick reference
    • Artist name with truncation for long names
    • Skip count relative to total play count
    • Visual progress bar representing skip percentage
    • Numeric skip percentage for precise comparison
    • Link to full artist statistics when applicable

    Parameters

    • props: ArtistSummaryProps

      Component properties

      Props for the ArtistSummary component

      • OptionalisLoading?: boolean

        Optional flag indicating if artist data is being loaded

      • Optionalartists?: ArtistData[]

        Array of artist data objects with skip statistics

      • OptionalmaxItems?: number

        Maximum number of artists to display (default: 5)

    Returns Element

    React component with artist skip pattern analysis

    Source

    export function ArtistSummary({
      isLoading = false,
      artists = [],
      maxItems = 5,
    }: ArtistSummaryProps) {
      return (
        <Card className="h-full">
          <CardHeader>
            <CardTitle className="flex items-center text-xl">
              <Users className="mr-2 h-5 w-5" />
              Most Skipped Artists
            </CardTitle>
            <CardDescription>
              Artists whose tracks you skip most frequently
            </CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-4">
                {Array(maxItems)
                  .fill(0)
                  .map((_, i) => (
                    <div key={i} className="flex items-center space-x-4">
                      <Skeleton className="h-8 w-8 rounded-full" />
                      <div className="flex-1 space-y-2">
                        <Skeleton className="h-4 w-24" />
                        <Skeleton className="h-2 w-full" />
                      </div>
                      <Skeleton className="h-4 w-12" />
                    </div>
                  ))}
              </div>
            ) : artists.length === 0 ? (
              <div className="text-muted-foreground flex h-48 flex-col items-center justify-center">
                <Users className="mb-2 h-8 w-8 opacity-50" />
                <p>No artist data available yet</p>
                <p className="mt-1 text-xs">
                  As you listen to more music, artist statistics will appear here
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                {artists.slice(0, maxItems).map((artist, index) => (
                  <div key={artist.id} className="flex items-center">
                    <div className="mr-4 w-5 flex-shrink-0 text-center text-sm font-medium">
                      {index + 1}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="mb-1 flex justify-between">
                        <p className="truncate text-sm font-medium">
                          {artist.name}
                        </p>
                        <span className="text-muted-foreground text-sm">
                          {artist.skipCount} / {artist.trackCount}
                        </span>
                      </div>
                      <Progress value={artist.skipPercentage} className="h-2" />
                    </div>
                    <div className="ml-4 text-sm font-medium">
                      {artist.skipPercentage}%
                    </div>
                  </div>
                ))}

                {artists.length > maxItems && (
                  <div className="mt-2 flex justify-center">
                    <a
                      href="/statistics?tab=artists"
                      className="text-primary text-xs hover:underline"
                    >
                      View all artists
                    </a>
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      );
    }

Settings

Member Visibility