import * as Vue from "vue"; import { KeyString, ModeString } from "../Helper"; import { Chart, RadarController, RadialLinearScale, PointElement, LineElement } from "chart.js"; Chart.register(RadarController, RadialLinearScale, PointElement, LineElement); export let PopularityCard: Vue.Component = { props: ['track'], computed: { progressBarWidth() { return `width: ${this.track.popularity}%`; } }, template: `

Popularity

{{ track.popularity }}%
` } export let SpotifyLogoLink: Vue.Component = { props: ['link'], template: ` ` } export let AudioFeatureCard: Vue.Component = { props: ['feature'], computed: { Key(): string { return KeyString(this.feature.key); }, Mode(): string { return ModeString(this.feature.mode); } }, template: `
{{ Key }} {{ Mode }}
{{ feature.tempo }} BPM
{{ feature.timeSignature }}/4
{{ feature.loudness }} dB
` } export let AudioFeatureChartCard: Vue.Component = { props: ['feature'], data() { return { chartData: { labels: [ 'Energy', 'Dance', 'Speech', 'Live', 'Instrumental', 'Acoustic', 'Valence' ], datasets: [{ // label: '# of Votes', data: [ this.feature.energy, this.feature.danceability, this.feature.speechiness, this.feature.liveness, this.feature.instrumentalness, this.feature.acousticness, this.feature.valence ], }] } } }, template: `
`, mounted() { new Chart("feature-chart", { type: "radar", data: this.chartData, options: { elements: { line: { borderWidth: 4, borderColor: "#a34c77", backgroundColor: "#727272", borderCapStyle: "round", borderJoinStyle: "round" }, point: { radius: 4, pointStyle: "circle", borderColor: "black", backgroundColor: "white" } }, scales: { r: { angleLines: { display: true }, pointLabels: { color: 'white', font: { size: 12 } }, beginAtZero: true, suggestedMin: 0, suggestedMax: 1, ticks: { display: false } } } } }) } }