feat: more chart periods

package.json

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

plugins/fetch-scrobbles/index.js

@@ -2,9 +2,9 @@ import { getStore, setEnvironmentContext } from '@netlify/blobs'
 import { DateTime } from 'luxon'
 import fs from 'fs'
 
-const getKeys = () => {
+const getKeys = (months = 1) => {
   const currentDate = DateTime.now()
-  const weeks = Math.floor(currentDate.daysInMonth / 7)
+  const weeks = Math.floor((currentDate.daysInMonth * months) / 7)
   let count = 0
   const keys = []
 
@@ -24,8 +24,14 @@ export const onPreBuild = async ({ constants }) => {
     token: constants.NETLIFY_API_TOKEN,
   })
 
-  const keys = getKeys()
-  const chartData = { data: [] }
+  const monthKeys = getKeys()
+  const monthChartData = { data: [] }
+  const threeMonthKeys = getKeys(3)
+  const threeMonthChartData = { data: [] }
+  const sixMonthKeys = getKeys(6)
+  const sixMonthChartData = { data: [] }
+  const oneYearKeys = getKeys(12)
+  const oneYearChartData = { data: [] }
   const scrobbles = getStore('scrobbles')
   const artists = getStore('artists')
   const albums = getStore('albums')
@@ -34,14 +40,32 @@ export const onPreBuild = async ({ constants }) => {
   const albumsMap = await albums.get('albums-map', { type: 'json' })
   const nowPlaying = await scrobbles.get('now-playing', { type: 'json'})
 
-  for (const key of keys) {
+  for (const key of monthKeys) {
     const scrobbleData = await scrobbles.get(key, { type: 'json'})
-    chartData['data'].push(...scrobbleData['data'])
+    monthChartData['data'].push(...scrobbleData['data'])
+  }
+
+  for (const key of threeMonthKeys) {
+    const scrobbleData = await scrobbles.get(key, { type: 'json'})
+    threeMonthChartData['data'].push(...scrobbleData['data'])
+  }
+
+  for (const key of sixMonthKeys) {
+    const scrobbleData = await scrobbles.get(key, { type: 'json'})
+    sixMonthChartData['data'].push(...scrobbleData['data'])
+  }
+
+  for (const key of oneYearKeys) {
+    const scrobbleData = await scrobbles.get(key, { type: 'json'})
+    oneYearChartData['data'].push(...scrobbleData['data'])
   }
 
   fs.writeFileSync('./src/_data/json/scrobbles-window.json', JSON.stringify(windowData))
   fs.writeFileSync('./src/_data/json/artists-map.json', JSON.stringify(artistsMap))
   fs.writeFileSync('./src/_data/json/albums-map.json', JSON.stringify(albumsMap))
   fs.writeFileSync('./src/_data/json/now-playing.json', JSON.stringify(nowPlaying))
-  fs.writeFileSync('./src/_data/json/scrobbles-month-chart.json', JSON.stringify(chartData))
+  fs.writeFileSync('./src/_data/json/scrobbles-month-chart.json', JSON.stringify(monthChartData))
+  fs.writeFileSync('./src/_data/json/scrobbles-three-month-chart.json', JSON.stringify(threeMonthChartData))
+  fs.writeFileSync('./src/_data/json/scrobbles-six-month-chart.json', JSON.stringify(sixMonthChartData))
+  fs.writeFileSync('./src/_data/json/scrobbles-one-year-chart.json', JSON.stringify(oneYearChartData))
 }

src/_data/musicCharts.js

@@ -3,9 +3,15 @@ import { buildChart } 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 sixMonthChart = JSON.parse(await readFile('./src/_data/json/scrobbles-six-month-chart.json', 'utf8'));
+  const oneYearChart = JSON.parse(await readFile('./src/_data/json/scrobbles-one-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'));
   return {
-    month: buildChart(monthChart['data'], artists, albums)
+    month: buildChart(monthChart['data'], artists, albums),
+    threeMonthChart: buildChart(threeMonthChart['data'], artists, albums),
+    sixMonthChart: buildChart(sixMonthChart['data'], artists, albums),
+    oneYearChart: buildChart(sixMonthChart['data'], artists, albums),
   }
 }

src/_includes/now.liquid

@@ -21,6 +21,9 @@ layout: default
   <div class="now__section--header-buttons client-side">
     <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-six-months">6 months</button>
+    <button class="small secondary" data-toggle="artists-one-year">1 year</button>
   </div>
 </div>
 <div id="artists-window">
@@ -29,6 +32,15 @@ layout: default
 <div class="hidden" id="artists-month">
   {% 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 %}
+</div>
+<div class="hidden" id="artists-six-months">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.sixMonthChart.artists, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="artists-one-year">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.oneYearChart.artists, shape: "square", count: 8 %}
+</div>
 <div class="now__section--header-wrapper">
   <h2 id="albums" class="now__section--header flex--centered">
     {% tablericon "vinyl" "Albums" %}
@@ -37,6 +49,9 @@ layout: default
   <div class="now__section--header-buttons client-side">
     <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-six-months">6 months</button>
+    <button class="small secondary" data-toggle="albums-one-year">1 year</button>
   </div>
 </div>
 <div id="albums-window">
@@ -45,6 +60,15 @@ layout: default
 <div class="hidden" id="albums-month">
   {% 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 %}
+</div>
+<div class="hidden" id="albums-six-months">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.sixMonthChart.albums, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="albums-one-year">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.oneYearChart.albums, shape: "square", count: 8 %}
+</div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
 <h2 id="books" class="now__section--header flex--centered">
   {% tablericon "books" "Books" %}

src/assets/styles/components/media-grid.css

@@ -4,13 +4,17 @@
 }
 
 .now__section--header,
-.now__section--header-buttons,
 .recent__links-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
+.now__section--header-buttons {
+  margin: 0 0 var(--sizing-lg);
+}
+
 .now__section--header-wrapper {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
 }
 
@@ -108,4 +112,12 @@
     --grid-square: repeat(4,minmax(0,1fr));
     --grid-vertical: repeat(6,minmax(0,1fr));
   }
+
+  .now__section--header-wrapper {
+    flex-direction: row;
+  }
+
+  .now__section--header-buttons {
+    margin: var(--sizing-3xl) 0 var(--sizing-lg);
+  }
 }