feat: year charts

package.json

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

plugins/fetch-scrobbles/index.js

@@ -40,6 +40,8 @@ export const onPreBuild = async ({ constants }) => {
   const monthChartData = { data: [] }
   const threeMonthKeys = getKeys(3)
   const threeMonthChartData = { data: [] }
+  const yearKeys = getKeys(12)
+  const yearChartData = { data: [] }
   const scrobbles = getStore('scrobbles')
   const artists = getStore('artists')
   const albums = getStore('albums')
@@ -59,6 +61,11 @@ export const onPreBuild = async ({ constants }) => {
     threeMonthChartData['data'].push(...scrobbleData['data'])
   }
 
+  for (const key of yearKeys) {
+    const scrobbleData = await scrobbles.get(key, { type: 'json'})
+    yearChartData['data'].push(...scrobbleData['data'])
+  }
+
   fs.writeFileSync('./src/_data/json/weekly-top-artists-chart.json', JSON.stringify({...weeklyChartData, timestamp: `${lastWeek.set({ hour: 8, minute: 0, second: 0, millisecond: 0 }).toMillis()}` }))
   fs.writeFileSync('./src/_data/json/scrobbles-window.json', JSON.stringify(windowData))
   fs.writeFileSync('./src/_data/json/artists-map.json', JSON.stringify(artistsMap))
@@ -66,4 +73,5 @@ export const onPreBuild = async ({ constants }) => {
   fs.writeFileSync('./src/_data/json/now-playing.json', JSON.stringify(nowPlaying))
   fs.writeFileSync('./src/_data/json/scrobbles-month-chart.json', JSON.stringify({ data: filterOldScrobbles(monthChartData.data) }))
   fs.writeFileSync('./src/_data/json/scrobbles-three-month-chart.json', JSON.stringify({ data: filterOldScrobbles(threeMonthChartData.data, 3) }))
+  fs.writeFileSync('./src/_data/json/scrobbles-year-chart.json', JSON.stringify({ data: filterOldScrobbles(yearChartData.data, 12) }))
 }

src/_data/musicCharts.js

@@ -4,12 +4,14 @@ import { buildChart, buildTracksWithArt } from './helpers/music.js'
 export default async function () {
   const monthChart = JSON.parse(await readFile('./src/_data/json/scrobbles-month-chart.json', 'utf8'));
   const threeMonthChart = JSON.parse(await readFile('./src/_data/json/scrobbles-three-month-chart.json', 'utf8'));
+  const yearChart = JSON.parse(await readFile('./src/_data/json/scrobbles-year-chart.json', 'utf8'));
   const artists = JSON.parse(await readFile('./src/_data/json/artists-map.json', 'utf8'));
   const albums = JSON.parse(await readFile('./src/_data/json/albums-map.json', 'utf8'));
   const recent = JSON.parse(await readFile('./src/_data/json/scrobbles-window.json', 'utf8'))['data'].reverse().splice(0,10)
   return {
     recent: buildTracksWithArt(recent, artists, albums),
     month: buildChart(monthChart['data'], artists, albums),
-    threeMonthChart: buildChart(threeMonthChart['data'], artists, albums),
+    threeMonth: buildChart(threeMonthChart['data'], artists, albums),
+    year:  buildChart(yearChart['data'], artists, albums),
   }
 }

src/_includes/now.liquid

@@ -15,6 +15,7 @@ layout: default
     <button class="small active" data-toggle="artists-window">This week</button>
     <button class="small secondary" data-toggle="artists-month">This month</button>
     <button class="small secondary" data-toggle="artists-three-months">3 months</button>
+    <button class="small secondary" data-toggle="artists-year">This year</button>
   </div>
 </div>
 <div id="artists-window">
@@ -24,7 +25,10 @@ layout: default
   {% render "partials/now/media-grid.liquid", data:musicCharts.month.artists, shape: "square", count: 8 %}
 </div>
 <div class="hidden" id="artists-three-months">
-  {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.artists, shape: "square", count: 8 %}
+  {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonth.artists, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="artists-year">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.year.artists, shape: "square", count: 8 %}
 </div>
 <div class="now-header-wrapper">
   <h2 id="albums" class="now-header flex-centered">
@@ -35,6 +39,7 @@ layout: default
     <button class="small active" data-toggle="albums-window">This week</button>
     <button class="small secondary" data-toggle="albums-month">This month</button>
     <button class="small secondary" data-toggle="albums-three-months">3 months</button>
+    <button class="small secondary" data-toggle="albums-year">This year</button>
   </div>
 </div>
 <div id="albums-window">
@@ -44,7 +49,10 @@ layout: default
   {% render "partials/now/media-grid.liquid", data:musicCharts.month.albums, shape: "square", count: 8 %}
 </div>
 <div class="hidden" id="albums-three-months">
-  {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.albums, shape: "square", count: 8 %}
+  {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonth.albums, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="albums-year">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.year.albums, shape: "square", count: 8 %}
 </div>
 <div class="now-header-wrapper">
   <h2 id="tracks" class="now-header flex-centered">
@@ -56,6 +64,7 @@ layout: default
     <button class="small secondary" 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>
+    <button class="small secondary" data-toggle="tracks-year">This year</button>
   </div>
 </div>
 <div id="tracks-recent">
@@ -68,7 +77,10 @@ layout: default
   {% 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 %}
+  {% render "partials/now/track-chart.liquid", data:musicCharts.threeMonth.topTracks.data, mostPlayed:musicCharts.threeMonth.topTracks.mostPlayed %}
+</div>
+<div class="hidden" id="tracks-year">
+  {% render "partials/now/track-chart.liquid", data:musicCharts.year.topTracks.data, mostPlayed:musicCharts.year.topTracks.mostPlayed %}
 </div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
 <h2 id="books" class="now-header flex-centered">