sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

added pie chart to maths

Browse Source
This commit is contained in:
aj 2019-10-29 12:25:49 +00:00
parent 0d00b48ec2
commit ac80e4b735
3 changed files with 207 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
music/db/part_generator.py
View File

@ -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 = []

187
src/js/Maths/Count.js
View File

@ -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 {
<table className="app-table max-width">
<thead>
<tr>
<th colSpan='2'>
<th colSpan='3'>
<h1 className="ui-text center-text text-no-select">scrobble counts</h1>
</th>
</tr>
</thead>
<tbody>
{this.state.playlists.map((entry) => <Row name={entry.name} count={entry.lastfm_stat_count} percent={entry.lastfm_stat_percent} key={entry.name}/>)}
{this.state.playlists.map((entry) => <Row name={entry.name} count={entry.lastfm_stat_count} percent={entry.lastfm_stat_percent} handler={this.handleCheckbox} key={entry.name}/>)}
</tbody>
</table>
<BarChart data={data} title='scrobbles'/>
<PieChart data={this.getPieChartTrackData()} title='genres'/>
<PieChart data={this.getPieChartAlbumData()} title='genres'/>
<PieChart data={this.getPieChartArtistData()} title='genres'/>
</div>;
const loadingMessage = <p className="center-text">loading...</p>;
@ -78,6 +258,7 @@ function Row(props){
return <tr>
<td className="ui-text center-text text-no-select" style={{width: '50%'}}>{props.name}</td>
<td className="ui-text center-text text-no-select"><b>{props.count.toLocaleString()} / {props.percent}%</b></td>
<td className="ui-text center-text text-no-select" style={{width: '20px'}}><input type="checkbox" name={props.name} onChange={props.handler} /></td>
</tr>;
}

23
src/js/Maths/PieChart.js
View File

@ -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)'
}