<script>
import * as d3 from 'd3';

export default {
  props: {
    learningSequences: {
      required: false,
      default: [{title: '', done: false}, {title: '', done: false}, {title: '', done: false}, {title: '', done: false}]
    },
    width: {
      default: 250,
      type: Number,
    },
    height: {
      default: 250,
      type: Number,
    }
  },
  computed: {
    pieData() {
      return new Array(Math.max(this.learningSequences.length, 1)).fill(1)
    },
    viewBox() {
      return `0 0 ${this.width} ${this.height}`
    },
  },

  mounted() {
    console.log(this.pieData)
    const data = this.pieData

    const width = this.width
    const height = this.height
    const radius = Math.min(width, height) / 2.5
    console.log(this.viewBox)


    const svg = d3.select(this.$el)
      .append('svg')
      .attr('width', width)
      .attr('height', height)


    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')


    // Generate the pie
    const pie = d3.pie()

// Generate the arcs
    const arc = d3
      .arc()
      .innerRadius(radius / 2)
      .padAngle(12 / 360)
      .outerRadius(radius)


//Generate groups
    const arcs = g.selectAll('arc')
      .data(pie(data))
      .enter()
      .append('g')
      .attr('class', 'arc')


//Draw arc paths
    arcs.append('path')
      .attr('d', arc)


  }
}

</script>

<style scoped>
.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: top;
  overflow: hidden;
  fill: rgb(65 181 250);

}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  fill: rgb(65 181 250);

}


</style>


<template>
  <div id="container" class="svg-container">

  </div>
</template>

