-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (136 loc) · 6.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!-- Written by Leo https://github.com/Hubbit200 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spotify History Analyzer</title>
<meta name="title" content="Spotify History Analyzer">
<meta name="description" content="View unique stats and graphs all about your Spotify listen history!">
<meta name="author" content="Leo">
<meta charset="utf-8">
<link rel="canonical" href="https://leohumnew.com/spotify/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Menu -->
<div id="header" class="center">
<h1>Spotify History Analyzer</h1>
<div class="headerSection" id="selectButtonDiv">
<label class="button" for="upload">Select Files</label>
<input id="upload" onchange="readFile(this)" type="file" multiple accept=".json">
</div>
<div class="headerSection" id="changeDateDiv">
<p id="dateRangeText"></p>
<button class="button" style="margin:0" onclick="changeDate()">Change Dates</button>
</div>
<div class="headerSection" id="dateTypeDiv">
<label for="dateType">Date range:</label>
<select id="dateType" autocomplete="off" onchange="chooseDateType(this.value)">
<option value="def" disabled selected>---</option>
<!--<option value="allTime">All Time</option>-->
<option value="pastYear">Past Year</option>
<option value="past2Months">Past 2 Months</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="headerSection" id="startDateDiv">
<label for="startDate">From:</label>
<input type="date" id="startDate" style="font-size:1.4em" onchange="setStartDate(this.value)">
</div>
<div class="headerSection" id="endDateDiv">
<label for="endDate">To:</label>
<input type="date" id="endDate" style="font-size:1.4em" onchange="setEndDate(this.value)">
</div>
</div>
<!-- No data error -->
<div class="section" id="noDataText">
<h3 class="warning">No data in this range</h3>
<h4>Please try a different date range!</h4>
</div>
<!-- Explanations -->
<div class="section" id="explanation1">
<h3>Select the <span style="color:rgb(30,215,96);">StreamingHistory_.json</span> files from your Spotify data download.</h3>
<h4>None of your data ever leaves your hands - everything's calculated directly on your device. Converts times to your local timezone.</h4>
</div>
<div class="section" id="explanation2">
<h4>If you have not yet downloaded the file:</h4>
<h4 style="margin-left:0.8rem;line-height:1.8">1. Go to the <a href="https://www.spotify.com/account/privacy/" target="_blank" rel="noopener noreferrer">Spotify Account Privacy website</a> and log in if necessary.<br>2. Follow the steps near the bottom of the website to download your data, making sure only <i>Account Data</i> is checked. It usually takes 2-5 days to arrive to your email.<br><img id="dataDownloadImg" src="images/dataDownload.png"></img><br>3. Once you receive the ZIP file, extract it.<br><br></h4>
<h5 style="color:red">Internet Explorer and other outdated browsers are not supported.</h5>
</div>
<!-- Analysed data view -->
<div id="fileResults">
<!-- Overview -->
<div class="section">
<h2 class="green">Overview</h2>
<div id="imageContainer">
<div class="itemBox">
<h3>Top Song</h3>
<img id="topSongImage" src="images/def_song.png" alt="" />
<h3 id="topSong"></h3>
</div>
<div class="itemBox">
<h3>Top Artist</h3>
<img id="topArtistImage" src="images/def_singer.png" alt="" />
<h3 id="topArtist"></h3>
</div>
</div>
</div>
<!-- Stats -->
<div class="container">
<div class="section">
<h2 class="green">Most Listened To</h2>
<ul id="songList"></ul>
</div>
<div class="section">
<h2 class="green">Stats</h2>
<h3 id="listenTime"></h3>
<h3 style="margin-bottom:4px;">Listen time distribution by month:</h3>
<div id="dateDistribution" class="lineChart"></div>
<div id="dateDistributionLabels" class="lineChart" style='text-align:center; --month-count:15'></div>
<h3 style="margin-bottom:4px;">Listen time distribution by hour:</h3>
<div id="timeDistribution" style="--columns:24" class="barChart"></div>
<div id="hours" class="barChart" style='text-align:center;--columns:24'></div>
</div>
</div>
<!-- Wikidata stats -->
<div class="container">
<div class="section">
<div class="wikidataDiv">
<h2 class="green">Artist Origins (top 50)</h2>
<p class="warning warningLowData">Low quality stats (lack of Wikidata information or short time range)</p>
<ul id="artistOriginList"></ul>
<p><i>Total could be over 50 if there are bands/groups included.</i></p>
</div>
<div class="loader wikidataLoader"></div>
</div>
<div class="section">
<div class="wikidataDiv">
<h2 class="green">Artist Ages (top 50)</h2>
<p class="warning warningLowData">Low quality stats (lack of Wikidata information or short time range)</p>
<div id="ageDistribution" style="--columns:5" class="barChart"></div>
<div class="barChart" style='text-align:center;--columns:5'>
<p><20</p><p>20-29</p><p>30-39</p><p>40-49</p><p>>49</p>
</div>
<h4 id="youngestText"></h4>
<h4 id="oldestText"></h4>
</div>
<div class="loader wikidataLoader"></div>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin:2rem;text-align:center">
<h5><a href="https://leohumnew.com" style="color:rgb(30,215,96)">Home - About Me</a></h5>
<div class="attribution">
<h5>Track covers by</h5>
<img src="images/spotifyLogo.png"></img>
</div>
<div class="attribution">
<h5>Artist information</h5>
<img src="images/wikidataLogo.png"></img>
</div>
</div>
<script src="main.js"></script>
</body>
</html>