Merge pull request #16 from MingC98/MingTestbranch

Added the filter on the chart, find no issue
MingC98 · Dec 11, 2022 · 78f7de9 · 78f7de9
2 parents 57a002f + 95677c3
commit 78f7de9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/client/script.js b/client/script.js
@@ -7,7 +7,6 @@ const clientId = 'd9827efb2c79463b92becb457a635a04';
 const clientSecret = '6f2f0a36046f4f21980873a48c7bdab0';
 // --------------------- API dialogue functions ---------------------
 
-
 function getRandomIntInclusive(min, max) {
  const newMin = Math.ceil(min);
  const newMax = Math.floor(max);
@@ -70,7 +69,6 @@ async function getTracks(token, tracksEndPoint, limit) {
  return data;
 }
 
-
 // --------------------- Data handling functions ---------------------
 
 async function initSongs(plalylistSg, genre, token) {
@@ -81,7 +79,6 @@ async function initSongs(plalylistSg, genre, token) {
  return tracks.items.map((obj) => ({ ...obj, gen: genre }));
 }
 
-
 function songsToArray(songs) {
  console.log(songs);
  const array = [];
@@ -98,7 +95,6 @@ function songsToArray(songs) {
  // console.log(array)
 }
 
-
 function songLenArray(list) {
  const array = [];
  list.forEach((element) => {
@@ -163,11 +159,9 @@ function injectImages(list) {
  });
 }
 
-
 function initChart(songs, songlength) {
  const ctx = document.getElementById('myChart');
 
-
  // eslint-disable-next-line no-new
  const m_chart = new Chart(ctx, {
  type: 'bar',
@@ -176,7 +170,7 @@ function initChart(songs, songlength) {
  labels: songs,
  datasets: [
  {
- label: 'Length of the song',
+ label: 'Length of the song(ms)',
  data: songlength,
  borderWidth: 4
  }
@@ -229,7 +223,6 @@ async function init() {
  );
  const playlist = await getPlaylistsByGenre(token, genreId, 1);
 
-
  // store the track endpoint of the playlist
  playlistEndpoint = `${playlist[0].href}/tracks`;
  console.log(playlistEndpoint);
@@ -248,7 +241,6 @@ async function init() {
  const sample = getRandomTen(songArray);
  const sample_name = songNameArray(sample);
  const sample_len = songLenArray(sample);
- console.log(sample);
  injectHTML(sample);
  injectImages(sample);
  document.getElementById('GeneratedContents').style.display = 'flex';
@@ -257,7 +249,23 @@ async function init() {
 
  myChart.destroy();
  myChart = initChart(sample_name, sample_len);
+
+ filter.addEventListener('click', (z) => {
+ z.preventDefault();
+ const filterData = myChart.data.datasets[0].data.filter((value) => value > 180000);
+
+ const filterLabels = [];
+ let i = 0;
+ for (i; i < filterData.length; i += 1) {
+ const result = myChart.data.datasets[0].data.indexOf(filterData[i]);
+ const label = myChart.data.labels[result];
+ filterLabels.push(label);
+ }
+ myChart.data.datasets[0].data = filterData;
+ myChart.data.labels = filterLabels;
+ myChart.update();
+ });
  });
 }
 
-document.addEventListener('DOMContentLoaded', async () => init());
+document.addEventListener('DOMContentLoaded', async () => init());
diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@ <h1> New Horizons </h1>
  <div class="chart_container">
  <canvas id="myChart"></canvas>
  </div>
+ <button type="button", id="filter">Filter Length > 180000ms</button>
  </div>
 
  </div>