Clean up sider and add custom tooltip

bryceglarsen · Oct 5, 2022 · e9e11cc · e9e11cc
1 parent 554fa47
commit e9e11cc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git a/components/AlbumCovers.tsx b/components/AlbumCovers.tsx
@@ -1,7 +1,15 @@
 import { Image } from 'antd';
 import { spotifyStyle } from 'styles'
 
-export const AlbumCover = ({ album, selectedAlbum, setSelectedAlbum, setSelectedTrack, audioFeatures, setSelectedFeatures }) => {
+export const AlbumCover = ({ 
+    album,
+    selectedAlbum,
+    setSelectedAlbum,
+    setSelectedTrack,
+    audioFeatures,
+    setSelectedFeatures,
+    numAlbums
+  }) => {
   let selected = album.id === selectedAlbum.id
   let albumCover = album.images[1]
   let firstTrack = album.tracks.items[0]
@@ -23,11 +31,9 @@ export const AlbumCover = ({ album, selectedAlbum, setSelectedAlbum, setSelected
   }
 
   return (
-    <div key={album.name} style={{ height: '20vh' }}>
+    <div key={album.name} >
       <Image
         src={albumCover.url}
-        height={125}
-        width={125}
         preview={false}
         style={{ cursor: 'pointer', ...albumStyle }}
         onClick={() => handleClick()}

diff --git a/components/FeaturesChart.tsx b/components/FeaturesChart.tsx
@@ -2,6 +2,19 @@ import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Refe
 import { spotifyStyle } from 'styles'
 import { Card } from 'antd';
 
+const CustomTooltip = ({ active, payload, label, data }) => {
+  if (active && payload && payload.length) {
+    let currentTrack = data.filter((track: {[key:string]: any}) => track.track_number === label)[0]
+    console.log(currentTrack)
+    return (
+      <Card size="small" title={currentTrack.key} style={{ opacity: 0.75 }}>
+        {payload[0].name}: {payload[0].value}
+      </Card>
+    )
+  }
+  return null;
+};
+
 export const FeaturesChart = ({ data, feature, selectedAlbum, selectedTrack, setSelectedTrack }) => {
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -14,7 +27,6 @@ export const FeaturesChart = ({ data, feature, selectedAlbum, selectedTrack, set
           bottom: 25
         }}
         onClick={(e: any) => {
-          console.log(data.reduce((acc, cur) => acc + cur[feature], 0))
           if (e) {
             let selectedTrackHref = e.activePayload[0].payload.track_href
             let selectedAlbumTracks = selectedAlbum.tracks.items
@@ -28,9 +40,9 @@ export const FeaturesChart = ({ data, feature, selectedAlbum, selectedTrack, set
             <Cell fill={entry.id === selectedTrack.id ? spotifyStyle.active.color : spotifyStyle.inactive.color} />
           ))}
         </Bar>
-        <ReferenceLine y={(data.reduce((acc, cur) => acc + cur[feature], 0) / data.length)} stroke={spotifyStyle.accent.color} strokeDasharray="4" />
+        <ReferenceLine y={(data.reduce((acc, cur) => acc + cur[feature], 0) / data.length)} stroke={spotifyStyle.inactive.color} strokeDasharray="4" />
         <XAxis dataKey="track_number"/>
-        <Tooltip cursor={{fill: '#212121', opacity: 0.5}} />
+        <Tooltip cursor={{fill: '#212121', opacity: 0.5}} content={<CustomTooltip data={data} />} />
       </BarChart>
     </ResponsiveContainer>
   )

diff --git a/components/TrackFeatures.tsx b/components/TrackFeatures.tsx
@@ -37,7 +37,7 @@ export const TrackFeatures = ({ featuresData, selectedAlbum, selectedTrack, setS
     );
     return [...res, newObj]
   }, [])
-  console.log(updatedData)
+  console.log('updated', updatedData)
   let rowCharts = []
   for (const [rowIndex, features] of Object.entries(layout)) {
     let featureCharts = features.map((feature) => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -62,7 +62,19 @@ export async function getStaticProps() {
     {
       headers: { ...fetchHeaders }
     }).then(response => response.json()
-  ).then(data => data.albums)
+     ).then(data => data.albums)
+  const track_id_to_name = albums.reduce((track_map: {[key: string]: string}, album: Album) => {
+    let tracks = album.tracks.items.reduce((tracks: {[key: string]: string}, track: {[key: string]: any}) => {
+      return {
+        ...tracks,
+        [track.id]: track.name
+      }
+    }, {})
+    return {
+      ...track_map,
+      ...tracks
+    }
+  }, {})
   // FETCH TRACK FEATURES
     // https://developer.spotify.com/console/get-audio-features-several-tracks/
     // https://developer.spotify.com/documentation/web-api/reference/#/operations/get-several-audio-features
@@ -74,11 +86,13 @@ export async function getStaticProps() {
       }
     ).then(response => response.json()
     ).then((data) => {
-      return data.audio_features
+      let features = data.audio_features
+      return features.map((track: {[key: string]: any}) => ({ ...track, key: track_id_to_name[track.id] }))
     })
   const audioFeatures = await Promise.all(albums.map((album: Album) => fetcher(album.tracks.items.map((track: Track) => track.id).join(',')))
   )
 
+
   return {
     props: {
       albums: albums,
@@ -93,7 +107,7 @@ export default function Home({ albums, features, token }) {
   const [selectedAlbum, setSelectedAlbum] = useState<any>(albums[0])
   const [selectedTrack, setSelectedTrack] = useState<any>(albums[0].tracks.items[0])
   const [selectedFeatures, setSelectedFeatures] = useState<any>(features[0])
-
+  console.log(selectedFeatures)
   const albumCovers = albums.map((album, index) =>
     <AlbumCover
       album={album}
@@ -102,11 +116,10 @@ export default function Home({ albums, features, token }) {
       setSelectedTrack={setSelectedTrack}
       audioFeatures={features[index]}
       setSelectedFeatures={setSelectedFeatures}
+      numAlbums={albums.length}
     />
   )
-  const featuresData = Object.assign(...Object.keys(selectedFeatures[0]).map( key =>
-    ({ [key]: selectedFeatures.map( o => o[key] ) })
-  ))
+
   const featuresCharts = <TrackFeatures featuresData={selectedFeatures} selectedAlbum={selectedAlbum} selectedTrack={selectedTrack} setSelectedTrack={setSelectedTrack} />
 
   const trackList = (
@@ -139,11 +152,9 @@ export default function Home({ albums, features, token }) {
         bottom: 0,
       }}
     >
-      <div style={{display: 'flex', justifyContent:'center', alignItems:'center', height: '100vh', margin: '30px'}}>
-      <Space direction="vertical" >
+      <Space direction="vertical" style={{ height: '100vh', justifyContent: 'space-evenly', marginLeft: '30px',  marginRight: '30px' }} >
         {albumCovers}
       </Space>
-      </div>
     </Sider>
     <Layout className="site-layout" style={{ height: '100vh', marginLeft: 200 }}>
       <Row align='middle' wrap={false}>