jordyvanzeeland/novelmetrix-python
jordyvanzeeland
/
novelmetrix-python
1
1
Fork 0
Code Issues 9 Activity

UI style

This commit is contained in:
Jordy van Zeeland 2022-10-05 16:43:05 +02:00
parent 2f30dec315
commit 1ff04ef771
3 changed files with 127 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ras/frontend/src/App.js
View File

@ -175,30 +175,65 @@ export default class App extends Component {
counts.push(count.count)
})
const legendMargin = {
id: 'legendMargin',
beforeInit(chart, legend, options){
const fitValue = chart.legend.fit;
chart.legend.fit = function fit(){
fitValue.bind(chart.legend)();
return this.height += 30;
}
}
};
$("canvas#chartGenres").remove();
$("div.genresPercent").append('<canvas id="chartGenres"></canvas>');
var ctx = document.getElementById("chartGenres");
var myChart = new Chart(ctx, {
type: 'doughnut',
type: 'pie',
data: {
labels: labels,
datasets: [{
label: '# of Tomatoes',
data: counts,
backgroundColor: [
'#696ffc', '#7596fa', '#92adfe', '#abc0ff'
'#7b71ff', '#f9939b', '#3fe7bf', '#9bcafe', '#7c59ff'
],
borderWidth: 0,
borderColor: '#1f2940'
borderColor: '#1f2940',
tooltip: {
callbacks: {
label: function(context) {
let label = context.label;
let value = context.formattedValue;
if (!label)
label = 'Unknown'
let sum = 0;
let dataArr = context.chart.data.datasets[0].data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (value * 100 / sum).toFixed(1) + '%';
return label + ": " + percentage;
}
}
}
}]
},
options: {
cutout: '70%',
cutout: '50%',
responsive: true,
plugins: {
legend: {
position: 'top',
labels: {
padding: 20,
usePointStyle: true,
// This more specific font property overrides the global property
color: "white",
font: {
@ -208,7 +243,18 @@ export default class App extends Component {
}
}
}
}
},
plugins: [{
id: 'legendMargin',
beforeInit(chart, legend, options){
const fitValue = chart.legend.fit;
chart.legend.fit = function fit(){
fitValue.bind(chart.legend)();
return this.height += 30;
}
}
}],
});
}
@ -223,7 +269,8 @@ export default class App extends Component {
var genres = [];
var colors = [
'#696ffc', '#7596fa', '#92adfe', '#abc0ff'
// '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
'#7b71ff', '#f9939b', '#3fe7bf', '#9bcafe', '#7c59ff'
]
var dataSet = [];
@ -276,6 +323,18 @@ export default class App extends Component {
$("canvas#chart").remove();
$("div.books-per-month").append('<canvas id="chart"></canvas>');
const legendMargin = {
id: 'legendMargin',
beforeInit(chart, legend, options){
const fitValue = chart.legend.fit;
chart.legend.fit = function fit(){
fitValue.bind(chart.legend)();
return this.height += 30;
}
}
};
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
@ -283,10 +342,14 @@ export default class App extends Component {
datasets: dataSet
},
options: {
maintainAspectRatio: false,
responsive: true,
showTooltips: true,
legend: {
display: true,
labels: {
usePointStyle: true,
}
},
interaction: {
mode: 'index'
@ -312,11 +375,14 @@ export default class App extends Component {
},
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
color: "white",
padding: 20,
font: {
size: 14,
family: 'Source Sans Pro'
family: 'Source Sans Pro',
}
}
}
@ -324,7 +390,8 @@ export default class App extends Component {
tooltips: {
bodyFont: 'Source Sans Pro'
}
}
},
plugins: [legendMargin],
});
}
@ -460,18 +527,19 @@ export default class App extends Component {
<div className="container-fluid">
<div className="row">
<div className="col-md-8">
<div className="col-md-12">
<div className="books-per-month"><span className="block_name">Boeken per maand per genre</span><canvas id="chart"></canvas></div>
</div>
<div className="col-md-4">
<div className="genresPercent"><span className="block_name">Genres</span><canvas id="chartGenres"></canvas></div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-2">
<div className="col-md-3">
<div className="genresPercent"><span className="block_name">Genres</span><canvas id="chartGenres"></canvas></div>
</div>
<div className="col-md-3">
{/* <div className="books-per-country"><canvas id="countryChart"></canvas></div> */}
<div className="books-per-country">
<span className="block_name">Landen</span>
@ -502,8 +570,16 @@ export default class App extends Component {
</table>
</div>
</div>
<div className="col-md-6">
<div className="col-md-3">
<div className="books-per-country">
<span className="block_name">Schrijvers</span>
</div>
</div>
<div className="col-md-3">
<div className="books-per-country">
<span className="block_name">Favorieten (5 sterren)</span>
</div>
</div>
</div>
</div>

2
ras/frontend/static/js/main.js
View File

File diff suppressed because one or more lines are too long

41
ras/frontend/templates/index.html
View File

@ -35,7 +35,7 @@
crossorigin=""></script>
<style>
html, body{
background:#141b2d;
background:#181c3f;
margin:0;
padding:0;
font-family: 'Source Sans Pro', sans-serif;
@ -47,9 +47,18 @@
padding: 20px 0;
}
.books-per-month{
height:700px;
}
.books-per-month canvas{
height:600px !important;
}
.books-per-month, .genresPercent, .books-per-country{
background: #1f2940;
padding:20px;
background: #2a2e56;
padding: 20px;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
}
.sidebar .menu-item-label-name {
@ -94,12 +103,32 @@
}
.books-stats .stat-block{
background: #1f2940;
background: #2a2e56;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
padding: 10px 5px;
color:#ffffff;
text-align: center;
}
.books-stats .col-md-2:nth-child(1) i{
background: linear-gradient(60deg,#5848cc,#796eff) !important;
}
.books-stats .col-md-2:nth-child(2) i{
background: linear-gradient(60deg,#c7767c,#fb9a9a) !important;
}
.books-stats .col-md-2:nth-child(3) i{
background: linear-gradient(60deg,#32b69c,#3cedb2) !important;
}
.books-stats .col-md-2:nth-child(4) i{
background: linear-gradient(60deg,#7c9dcb,#9dd0fe) !important;
}
.books-stats .col-md-2:nth-child(5) i{
background: linear-gradient(60deg,#663bc3,#9263f9) !important;
}
.books-stats .col-md-2:nth-child(6) i{
background: linear-gradient(60deg,#7b1fa2,#913f9e) !important;
}
.books-stats .stat-block i{
font-weight: 900;
font-size: 25px;
@ -110,7 +139,7 @@
line-height: 30px;
text-align: center;
background: #696ffc;
box-shadow: 7px 7px 10px rgba(20,27,45,0.5);
/* box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.3); */
}
.books-stats .stat-block .stats-number{
@ -130,7 +159,7 @@
.yearselector{
display: inline-block;
width: auto;
background: #1f2940;
background: #2a2e56;
border: none;
color: #fff;
font-weight: bold;