feat: track charts

config/filters/index.js

@@ -188,6 +188,7 @@ export default {
       }
       return normalized
     }),
+  calculatePlayPercentage: (plays, mostPlayed) => `${plays/mostPlayed * 100}%`,
 
     // tags
   filterTags: (tags) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_data/helpers/music.js

@@ -16,9 +16,14 @@ export const buildChart = (tracks, artists, albums, nowPlaying = {}) => {
   tracks.forEach(track => {
     if (!tracksData[track['track']]) {
       tracksData[track['track']] = {
+        artist: artistCapitalization(track['artist']),
         title: track['track'],
         plays: 1,
-        type: 'track'
+        type: 'track',
+        url: (artists[artistSanitizedKey(track['artist'])]?.['mbid'] && artists[artistSanitizedKey(track['artist'])]?.['mbid'] !== '') ? `http://musicbrainz.org/artist/${artists[artistSanitizedKey(track['artist'])]?.['mbid']}` : `https://musicbrainz.org/search?query=${track['artist'].replace(
+            /\s+/g,
+            '+'
+          )}&type=artist`,
       }
     } else {
       tracksData[track['track']]['plays']++
@@ -56,10 +61,17 @@ export const buildChart = (tracks, artists, albums, nowPlaying = {}) => {
     }
   })
 
+  const topTracks = objectToArraySorted(tracksData).splice(0, 10)
+  const topTracksData = {
+    data: topTracks,
+    mostPlayed: Math.max(...topTracks.map(track => track.plays))
+  }
+
   return {
     artists: objectToArraySorted(artistsData),
     albums: objectToArraySorted(albumsData),
     tracks: objectToArraySorted(tracksData),
+    topTracks: topTracksData,
     nowPlaying
   }
 }

src/_includes/now.liquid

@@ -53,6 +53,26 @@ layout: default
 <div class="hidden" id="albums-three-months">
   {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.albums, shape: "square", count: 8 %}
 </div>
+<div class="now__section--header-wrapper">
+  <h2 id="tracks" class="now__section--header flex--centered">
+    {% tablericon "playlist" "Tracks" %}
+    Tracks
+  </h2>
+  <div class="now__section--header-buttons client-side">
+    <button class="small active" data-toggle="tracks-window">This week</button>
+    <button class="small secondary" data-toggle="tracks-month">This month</button>
+    <button class="small secondary" data-toggle="tracks-three-months">3 months</button>
+  </div>
+</div>
+<div id="tracks-window">
+  {% render "partials/now/track-chart.liquid", data:music.topTracks.data, mostPlayed:music.topTracks.mostPlayed %}
+</div>
+<div class="hidden" id="tracks-month">
+  {% render "partials/now/track-chart.liquid", data:musicCharts.month.topTracks.data, mostPlayed:musicCharts.month.topTracks.mostPlayed %}
+</div>
+<div class="hidden" id="tracks-three-months">
+  {% render "partials/now/track-chart.liquid", data:musicCharts.threeMonthChart.topTracks.data, mostPlayed:musicCharts.threeMonthChart.topTracks.mostPlayed %}
+</div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
 <h2 id="books" class="now__section--header flex--centered">
   {% tablericon "books" "Books" %}

src/_includes/partials/now/track-chart.liquid

@@ -0,0 +1,24 @@
+{% if data.size > 0 %}
+  {% capture css %}
+    {% render "../../../assets/styles/components/track-chart.css" %}
+    {% render "../../../assets/styles/components/progress-bar.css" %}
+  {% endcapture %}
+  <style>{{ css}}</style>
+{% endif %}
+<div class="track__chart">
+  {% for item in data limit: 10 %}
+  {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
+  <div class="track__chart--item">
+    <div class="track__chart--presentation">
+      <div class="track__chart--count">{{ forloop.index }}.</div>
+      <div class="track__chart--info">
+        <div class="track__chart--title">{{ item.title }}</div>
+        <div class="track__chart--artists">
+          <a href="{{ track.url }}">{{ item.artist }}</a> • {{ item.plays }} plays
+        </div>
+      </div>
+    </div>
+    {% render "partials/now/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>

src/assets/styles/components/track-chart.css

@@ -0,0 +1,40 @@
+.track__chart--item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.track__chart--item:not(:last-of-type) {
+  margin-bottom: var(--sizing-md);
+}
+
+.track__chart--item .progress-bar__wrapper {
+  max-width: 40%;
+  margin-left: var(--sizing-lg);
+}
+
+.track__chart--presentation {
+  display: flex;
+  flex-direction: row;
+  max-width: calc(60% - var(--sizing-lg));
+}
+
+.track__chart--count {
+  margin-right: var(--sizing-sm);
+}
+
+.track__chart--info {
+  max-width: calc(100% - var(--sizing-lg));
+}
+
+.track__chart--title {
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.track__chart--artists {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}