properly coloured radar chart, adding hover effects
This commit is contained in:
parent
4952d6bb15
commit
b1c1a756df
@ -9,6 +9,12 @@
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
||||||
box-shadow: 4px 4px 2px #5e5e5e;
|
box-shadow: 4px 4px 2px #5e5e5e;
|
||||||
|
transition: box-shadow 0.5s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
offset: 4px 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.now-playing-card {
|
.now-playing-card {
|
||||||
|
@ -43,7 +43,6 @@ export let AudioFeatureCard: Vue.Component = {
|
|||||||
template:
|
template:
|
||||||
`
|
`
|
||||||
<div class="card info-card">
|
<div class="card info-card">
|
||||||
<h3>Info</h3>
|
|
||||||
<h5>{{ Key }} {{ Mode }}</h5>
|
<h5>{{ Key }} {{ Mode }}</h5>
|
||||||
<h5>{{ feature.tempo }} BPM</h5>
|
<h5>{{ feature.tempo }} BPM</h5>
|
||||||
<h5>{{ feature.timeSignature }}/4</h5>
|
<h5>{{ feature.timeSignature }}/4</h5>
|
||||||
@ -94,25 +93,31 @@ export let AudioFeatureChartCard: Vue.Component = {
|
|||||||
type: "radar",
|
type: "radar",
|
||||||
data: this.chartData,
|
data: this.chartData,
|
||||||
options: {
|
options: {
|
||||||
// plugins: {
|
|
||||||
// legend: {
|
|
||||||
// labels: {
|
|
||||||
// color: "white"
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
elements: {
|
elements: {
|
||||||
line: {
|
line: {
|
||||||
borderWidth: 4
|
borderWidth: 4,
|
||||||
|
borderColor: "#3a3a3a",
|
||||||
|
backgroundColor: "#727272",
|
||||||
|
borderCapStyle: "round",
|
||||||
|
borderJoinStyle: "round"
|
||||||
},
|
},
|
||||||
point: {
|
point: {
|
||||||
radius: 4
|
radius: 4,
|
||||||
|
pointStyle: "circle",
|
||||||
|
borderColor: "black",
|
||||||
|
backgroundColor: "white"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
r: {
|
r: {
|
||||||
angleLines: {
|
angleLines: {
|
||||||
display: false
|
display: true
|
||||||
|
},
|
||||||
|
pointLabels: {
|
||||||
|
color: 'white',
|
||||||
|
font: {
|
||||||
|
size: 12
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
suggestedMin: 0,
|
suggestedMin: 0,
|
||||||
|
Loading…
Reference in New Issue
Block a user