added pie chart to maths

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

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 {
             <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>;
 }
 

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