From ac80e4b73573200c183857c7f3fdf16b4bff1301 Mon Sep 17 00:00:00 2001 From: aj Date: Tue, 29 Oct 2019 12:25:49 +0000 Subject: [PATCH] added pie chart to maths --- music/db/part_generator.py | 2 +- src/js/Maths/Count.js | 187 ++++++++++++++++++++++++++++++++++++- src/js/Maths/PieChart.js | 23 ++++- 3 files changed, 207 insertions(+), 5 deletions(-) diff --git a/music/db/part_generator.py b/music/db/part_generator.py index 0bb5766..a3437af 100644 --- a/music/db/part_generator.py +++ b/music/db/part_generator.py @@ -9,7 +9,7 @@ logger = logging.getLogger(__name__) class PartGenerator: - def __init__(self, user: User, username=None): + def __init__(self, user: User = None, username: str = None): self.queried_playlists = [] self.parts = [] diff --git a/src/js/Maths/Count.js b/src/js/Maths/Count.js index c38318b..f3118d0 100644 --- a/src/js/Maths/Count.js +++ b/src/js/Maths/Count.js @@ -3,6 +3,7 @@ const axios = require('axios'); import showMessage from "../Toast.js"; import BarChart from "./BarChart.js"; +import PieChart from "./PieChart.js"; class Count extends Component { @@ -10,9 +11,13 @@ class Count extends Component { super(props); this.state = { playlists: [], - isLoading: true + isLoading: true, + + chartPlaylists: [] } this.getPlaylists(); + + this.handleCheckbox = this.handleCheckbox.bind(this); } getPlaylists(){ @@ -43,6 +48,176 @@ class Count extends Component { }); } + handleCheckbox(event) { + if(event.target.checked == true){ + var playlists = this.state.chartPlaylists.slice(); + playlists.push(event.target.name); + + this.setState({chartPlaylists: playlists}); + }else{ + var playlists = this.state.chartPlaylists.slice(); + playlists.splice(playlists.indexOf(event.target.name), 1); + + this.setState({chartPlaylists: playlists}); + } + } + + getPieChartTrackData(){ + var playlists = this.state.chartPlaylists; + + if(playlists.length > 0){ + + var data = playlists.map((entry) => { + + var i; + for(i = 0; i < this.state.playlists.length; i++){ + var playlist = this.state.playlists[i]; + if(playlist.name == entry){ + + return { + "label": playlist.name, + "value": playlist.lastfm_stat_percent + } + } + } + + console.log(`${entry} not found`); + }); + + var total = data.reduce((total, value) => { + return total + value.value; + }, 0); + + data.sort((a, b) => { + if(a.value > b.value) { return -1; } + if(a.value < b.value) { return 1; } + return 0; + }) + + if(total > 100){ + return [{ + 'label': 'over 100%', + 'value': 100 + }]; + }else{ + data.push({ + 'label': 'other', + 'value': 100 - total + }) + } + return data; + }else{ + return [{ + 'label': 'no selection', + 'value': 100 + }]; + } + } + + getPieChartAlbumData(){ + var playlists = this.state.chartPlaylists; + + if(playlists.length > 0){ + + var data = playlists.map((entry) => { + + var i; + for(i = 0; i < this.state.playlists.length; i++){ + var playlist = this.state.playlists[i]; + if(playlist.name == entry){ + + return { + "label": playlist.name, + "value": playlist.lastfm_stat_album_percent + } + } + } + + console.log(`${entry} not found`); + }); + + var total = data.reduce((total, value) => { + return total + value.value; + }, 0); + + data.sort((a, b) => { + if(a.value > b.value) { return -1; } + if(a.value < b.value) { return 1; } + return 0; + }) + + if(total > 100){ + return [{ + 'label': 'over 100%', + 'value': 100 + }]; + }else{ + data.push({ + 'label': 'other', + 'value': 100 - total + }) + } + return data; + }else{ + return [{ + 'label': 'no selection', + 'value': 100 + }]; + } + } + + getPieChartArtistData(){ + var playlists = this.state.chartPlaylists; + + if(playlists.length > 0){ + + var data = playlists.map((entry) => { + + var i; + for(i = 0; i < this.state.playlists.length; i++){ + var playlist = this.state.playlists[i]; + if(playlist.name == entry){ + + return { + "label": playlist.name, + "value": playlist.lastfm_stat_artist_percent + } + } + } + + console.log(`${entry} not found`); + }); + + var total = data.reduce((total, value) => { + return total + value.value; + }, 0); + + data.sort((a, b) => { + if(a.value > b.value) { return -1; } + if(a.value < b.value) { return 1; } + return 0; + }) + + if(total > 100){ + return [{ + 'label': 'over 100%', + 'value': 100 + }]; + }else{ + data.push({ + 'label': 'other', + 'value': 100 - total + }) + } + return data; + }else{ + return [{ + 'label': 'no selection', + 'value': 100 + }]; + } + } + render() { var data = this.state.playlists.map((entry) => { @@ -56,16 +231,21 @@ class Count extends Component { - - {this.state.playlists.map((entry) => )} + {this.state.playlists.map((entry) => )}
+

scrobble counts
+ + + + + ; const loadingMessage =

loading...

; @@ -78,6 +258,7 @@ function Row(props){ return {props.name} {props.count.toLocaleString()} / {props.percent}% + ; } diff --git a/src/js/Maths/PieChart.js b/src/js/Maths/PieChart.js index d123037..2cf18b1 100644 --- a/src/js/Maths/PieChart.js +++ b/src/js/Maths/PieChart.js @@ -25,7 +25,28 @@ class PieChart extends Component { }, elements: { arc : { - backgroundColor: ['rgb(55, 61, 255)', 'rgb(255, 55, 61)'], + backgroundColor: ['rgb(55, 61, 255)', //blue + 'rgb(255, 55, 61)', //red + 'rgb(7, 211, 4)', //green + 'rgb(228, 242, 31)', //yellow + 'rgb(31, 242, 221)', //light blue + 'rgb(242, 31, 235)', //pink + 'rgb(242, 164, 31)', //orange + 'rgb(55, 61, 255)', //blue + 'rgb(255, 55, 61)', //red + 'rgb(7, 211, 4)', //green + 'rgb(228, 242, 31)', //yellow + 'rgb(31, 242, 221)', //light blue + 'rgb(242, 31, 235)', //pink + 'rgb(242, 164, 31)', //orange + 'rgb(55, 61, 255)', //blue + 'rgb(255, 55, 61)', //red + 'rgb(7, 211, 4)', //green + 'rgb(228, 242, 31)', //yellow + 'rgb(31, 242, 221)', //light blue + 'rgb(242, 31, 235)', //pink + 'rgb(242, 164, 31)' //orange + ], borderWidth: 2, borderColor: 'rgb(0, 0, 0)' }