<template>
<div v-if="trainChart" class="piechart">
    <Pie :data="trainData" :options="chartOptions" />
</div>
<div v-if="!trainChart" class="barchart">
    <Pie :data="stationData" :options="chartOptions" />
</div>

</template>
  
<script lang="ts">
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'
import { store } from '../store/store.js'
ChartJS.register(ArcElement, Tooltip, Legend)

export default {
    name: 'pieChart',

    components: { 
        Pie 
    },

    props: {
        trainChart: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return{
            trainData: {
                labels: ['Trains', 'Darts'],
                datasets: [{
                    backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
                    data: [store.insights["numTrains"], store.insights["numDarts"]],
                    borderColor: ['#000000', '#000000', '#00D8FF'],
                    borderWidth: .5
                }]
            },
            
            stationData: {
                labels: ['Train Stations', 'Dart Stations'],
                datasets: [{
                    backgroundColor: ['#ffdf9e', '#c3eefa', '#00D8FF'],
                    data: [store.insights["numTrainStations"], store.insights["numDartStations"]],
                    borderColor: ['#000000', '#000000', '#00D8FF'],
                    borderWidth: .5
                }]
            },

            chartOptions: {
                responsive: true,
                maintainAspectRatio: false,
                radius: 80,
                hoverOffset: 0
            }
        }
    }
}
</script>

<style scoped>
div {
    width: 70%;
}
</style>