UI style
This commit is contained in:
parent
2f30dec315
commit
1ff04ef771
|
@ -175,30 +175,65 @@ export default class App extends Component {
|
||||||
counts.push(count.count)
|
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();
|
$("canvas#chartGenres").remove();
|
||||||
$("div.genresPercent").append('<canvas id="chartGenres"></canvas>');
|
$("div.genresPercent").append('<canvas id="chartGenres"></canvas>');
|
||||||
|
|
||||||
var ctx = document.getElementById("chartGenres");
|
var ctx = document.getElementById("chartGenres");
|
||||||
var myChart = new Chart(ctx, {
|
var myChart = new Chart(ctx, {
|
||||||
type: 'doughnut',
|
type: 'pie',
|
||||||
data: {
|
data: {
|
||||||
labels: labels,
|
labels: labels,
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: '# of Tomatoes',
|
label: '# of Tomatoes',
|
||||||
data: counts,
|
data: counts,
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
'#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
'#7b71ff', '#f9939b', '#3fe7bf', '#9bcafe', '#7c59ff'
|
||||||
],
|
],
|
||||||
borderWidth: 0,
|
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: {
|
options: {
|
||||||
cutout: '70%',
|
cutout: '50%',
|
||||||
responsive: true,
|
responsive: true,
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
|
position: 'top',
|
||||||
labels: {
|
labels: {
|
||||||
|
padding: 20,
|
||||||
|
usePointStyle: true,
|
||||||
// This more specific font property overrides the global property
|
// This more specific font property overrides the global property
|
||||||
color: "white",
|
color: "white",
|
||||||
font: {
|
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 genres = [];
|
||||||
|
|
||||||
var colors = [
|
var colors = [
|
||||||
'#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
// '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
||||||
|
'#7b71ff', '#f9939b', '#3fe7bf', '#9bcafe', '#7c59ff'
|
||||||
]
|
]
|
||||||
|
|
||||||
var dataSet = [];
|
var dataSet = [];
|
||||||
|
@ -276,6 +323,18 @@ export default class App extends Component {
|
||||||
$("canvas#chart").remove();
|
$("canvas#chart").remove();
|
||||||
$("div.books-per-month").append('<canvas id="chart"></canvas>');
|
$("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'), {
|
new Chart(document.getElementById('chart'), {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: {
|
data: {
|
||||||
|
@ -283,10 +342,14 @@ export default class App extends Component {
|
||||||
datasets: dataSet
|
datasets: dataSet
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
responsive: true,
|
responsive: true,
|
||||||
showTooltips: true,
|
showTooltips: true,
|
||||||
legend: {
|
legend: {
|
||||||
display: true,
|
display: true,
|
||||||
|
labels: {
|
||||||
|
usePointStyle: true,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
interaction: {
|
interaction: {
|
||||||
mode: 'index'
|
mode: 'index'
|
||||||
|
@ -312,11 +375,14 @@ export default class App extends Component {
|
||||||
},
|
},
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
|
position: 'top',
|
||||||
labels: {
|
labels: {
|
||||||
|
usePointStyle: true,
|
||||||
color: "white",
|
color: "white",
|
||||||
|
padding: 20,
|
||||||
font: {
|
font: {
|
||||||
size: 14,
|
size: 14,
|
||||||
family: 'Source Sans Pro'
|
family: 'Source Sans Pro',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -324,7 +390,8 @@ export default class App extends Component {
|
||||||
tooltips: {
|
tooltips: {
|
||||||
bodyFont: 'Source Sans Pro'
|
bodyFont: 'Source Sans Pro'
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
plugins: [legendMargin],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -460,18 +527,19 @@ export default class App extends Component {
|
||||||
|
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<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 className="books-per-month"><span className="block_name">Boeken per maand per genre</span><canvas id="chart"></canvas></div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<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"><canvas id="countryChart"></canvas></div> */}
|
||||||
<div className="books-per-country">
|
<div className="books-per-country">
|
||||||
<span className="block_name">Landen</span>
|
<span className="block_name">Landen</span>
|
||||||
|
@ -502,8 +570,16 @@ export default class App extends Component {
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -35,7 +35,7 @@
|
||||||
crossorigin=""></script>
|
crossorigin=""></script>
|
||||||
<style>
|
<style>
|
||||||
html, body{
|
html, body{
|
||||||
background:#141b2d;
|
background:#181c3f;
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
@ -47,9 +47,18 @@
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.books-per-month{
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.books-per-month canvas{
|
||||||
|
height:600px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.books-per-month, .genresPercent, .books-per-country{
|
.books-per-month, .genresPercent, .books-per-country{
|
||||||
background: #1f2940;
|
background: #2a2e56;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .menu-item-label-name {
|
.sidebar .menu-item-label-name {
|
||||||
|
@ -94,12 +103,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.books-stats .stat-block{
|
.books-stats .stat-block{
|
||||||
background: #1f2940;
|
background: #2a2e56;
|
||||||
|
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
color:#ffffff;
|
color:#ffffff;
|
||||||
text-align: center;
|
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{
|
.books-stats .stat-block i{
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
@ -110,7 +139,7 @@
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #696ffc;
|
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{
|
.books-stats .stat-block .stats-number{
|
||||||
|
@ -130,7 +159,7 @@
|
||||||
.yearselector{
|
.yearselector{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: #1f2940;
|
background: #2a2e56;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
Loading…
Reference in New Issue