added charts to maths page and playlist count page
This commit is contained in:
parent
cc52d4a4f9
commit
c1f706a31b
41
package-lock.json
generated
41
package-lock.json
generated
@ -1789,6 +1789,39 @@
|
|||||||
"supports-color": "^5.3.0"
|
"supports-color": "^5.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"chart.js": {
|
||||||
|
"version": "2.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
|
||||||
|
"integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
|
||||||
|
"requires": {
|
||||||
|
"chartjs-color": "^2.1.0",
|
||||||
|
"moment": "^2.10.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chartjs-color": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
|
||||||
|
"requires": {
|
||||||
|
"chartjs-color-string": "^0.6.0",
|
||||||
|
"color-convert": "^0.5.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"color-convert": {
|
||||||
|
"version": "0.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
|
||||||
|
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chartjs-color-string": {
|
||||||
|
"version": "0.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||||
|
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||||
|
"requires": {
|
||||||
|
"color-name": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"chokidar": {
|
"chokidar": {
|
||||||
"version": "2.1.6",
|
"version": "2.1.6",
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.6.tgz",
|
||||||
@ -1900,8 +1933,7 @@
|
|||||||
"color-name": {
|
"color-name": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"commander": {
|
"commander": {
|
||||||
"version": "2.20.0",
|
"version": "2.20.0",
|
||||||
@ -4059,6 +4091,11 @@
|
|||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"moment": {
|
||||||
|
"version": "2.24.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
|
||||||
|
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
|
||||||
|
},
|
||||||
"move-concurrently": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||||
|
@ -20,6 +20,7 @@
|
|||||||
"homepage": "https://github.com/Sarsoo/spotify-web#readme",
|
"homepage": "https://github.com/Sarsoo/spotify-web#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
|
"chart.js": "^2.8.0",
|
||||||
"react": "^16.10.1",
|
"react": "^16.10.1",
|
||||||
"react-dom": "^16.10.1",
|
"react-dom": "^16.10.1",
|
||||||
"react-router-dom": "^5.1.1"
|
"react-router-dom": "^5.1.1"
|
||||||
|
57
src/js/Maths/BarChart.js
Normal file
57
src/js/Maths/BarChart.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
var Chart = require('chart.js');
|
||||||
|
|
||||||
|
class BarChart extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.chartRef = React.createRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.chart = new Chart(this.chartRef.current, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: this.props.data.map(d => d.label),
|
||||||
|
datasets: [{
|
||||||
|
label: this.props.title,
|
||||||
|
data: this.props.data.map(d => d.value),
|
||||||
|
backgroundColor: this.props.color
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
legend : {
|
||||||
|
display : false
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
rectangle : {
|
||||||
|
backgroundColor: 'rgb(255, 255, 255)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
ticks: {
|
||||||
|
min: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.chart.data.labels = this.props.data.map(d => d.label);
|
||||||
|
this.chart.data.datasets[0].data = this.props.data.map(d => d.value);
|
||||||
|
this.chart.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<canvas ref={this.chartRef} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BarChart;
|
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
|||||||
const axios = require('axios');
|
const axios = require('axios');
|
||||||
|
|
||||||
import showMessage from "../Toast.js";
|
import showMessage from "../Toast.js";
|
||||||
|
import BarChart from "./BarChart.js";
|
||||||
|
|
||||||
class Count extends Component {
|
class Count extends Component {
|
||||||
|
|
||||||
@ -44,7 +45,15 @@ class Count extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
var table = <table className="app-table max-width">
|
var data = this.state.playlists.map((entry) => {
|
||||||
|
return {
|
||||||
|
"label": entry.name,
|
||||||
|
"value": entry.lastfm_stat_count
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
|
var table = <div>
|
||||||
|
<table className="app-table max-width">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th colSpan='2'>
|
<th colSpan='2'>
|
||||||
@ -55,7 +64,9 @@ class Count extends Component {
|
|||||||
<tbody>
|
<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} key={entry.name}/>)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>;
|
</table>
|
||||||
|
<BarChart data={data} title='scrobbles'/>
|
||||||
|
</div>;
|
||||||
|
|
||||||
const loadingMessage = <p className="center-text">loading...</p>;
|
const loadingMessage = <p className="center-text">loading...</p>;
|
||||||
|
|
||||||
|
50
src/js/Maths/PieChart.js
Normal file
50
src/js/Maths/PieChart.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
var Chart = require('chart.js');
|
||||||
|
|
||||||
|
class PieChart extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.chartRef = React.createRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.chart = new Chart(this.chartRef.current, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
labels: this.props.data.map(d => d.label),
|
||||||
|
datasets: [{
|
||||||
|
label: this.props.title,
|
||||||
|
data: this.props.data.map(d => d.value),
|
||||||
|
backgroundColor: this.props.color
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
legend : {
|
||||||
|
display : false
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
arc : {
|
||||||
|
backgroundColor: ['rgb(55, 61, 255)', 'rgb(255, 55, 61)'],
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: 'rgb(0, 0, 0)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.chart.data.labels = this.props.data.map(d => d.label);
|
||||||
|
this.chart.data.datasets[0].data = this.props.data.map(d => d.value);
|
||||||
|
this.chart.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<canvas ref={this.chartRef} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PieChart;
|
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
|||||||
const axios = require('axios');
|
const axios = require('axios');
|
||||||
|
|
||||||
import showMessage from "../../Toast.js"
|
import showMessage from "../../Toast.js"
|
||||||
|
import PieChart from "../../Maths/PieChart.js";
|
||||||
|
|
||||||
class Count extends Component {
|
class Count extends Component {
|
||||||
|
|
||||||
@ -64,6 +65,18 @@ class Count extends Component {
|
|||||||
<tr>
|
<tr>
|
||||||
<td className="ui-text center-text text-no-select">last updated <b>{this.state.lastfm_refresh.toLocaleString()}</b></td>
|
<td className="ui-text center-text text-no-select">last updated <b>{this.state.lastfm_refresh.toLocaleString()}</b></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<PieChart data={[{
|
||||||
|
"label": this.state.name,
|
||||||
|
"value": this.state.lastfm_percent
|
||||||
|
},{
|
||||||
|
"label": 'other',
|
||||||
|
"value": 100 - this.state.lastfm_percent
|
||||||
|
}]}
|
||||||
|
title={this.state.name}/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan="2">
|
<td colSpan="2">
|
||||||
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>update</button>
|
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>update</button>
|
||||||
@ -74,6 +87,4 @@ class Count extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default Count;
|
export default Count;
|
Loading…
Reference in New Issue
Block a user