vbv/client/src/components/circle/LearningPathCircleDiagram.vue

<script>
import * as d3 from 'd3'
import * as _ from 'underscore'


export default {
  props: {
    learninglearningPathContents: {
      default: {
        topics: [
          {
            id: 4,
            title: 'Basissdf',
            slug: 'basissdf',
            type: 'learnpath.Topic',
            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
            is_visible: false,
            circles: [
              {
                id: 5,
                title: 'Basis',
                slug: 'basis',
                type: 'learnpath.Circle',
                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
                learning_sequences: [],
              },
            ],
          },
          {
            id: 6,
            title: 'Gewinnen von Kunden',
            slug: 'gewinnen-von-kunden',
            type: 'learnpath.Topic',
            translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
            is_visible: true,
            circles: [
              {
                id: 7,
                title: 'Gewinnen',
                slug: 'gewinnen',
                type: 'learnpath.Circle',
                translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
                learning_sequences: [],
              },
            ],
          },
          {
            id: 8,
            title: 'Beraten der Kunden',
            slug: 'beraten-der-kunden',
            type: 'learnpath.Topic',
            translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
            is_visible: true,
            circles: [
              {
                id: 9,
                title: 'Einstieg',
                slug: 'einstieg',
                type: 'learnpath.Circle',
                translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
                learning_sequences: [],
              },
              {
                id: 10,
                title: 'Analyse',
                slug: 'analyse',
                type: 'learnpath.Circle',
                translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
                learning_sequences: [
                  {
                    id: 11,
                    title: 'Starten',
                  },
                  {
                    id: 13,
                    title: 'Beobachten',
                  },
                  {
                    id: 18,
                    title: 'Anwenden',
                  },
                  {
                    id: 30,
                    title: 'Üben',
                  },
                ],
              },
            ],
          },
        ],
      },
      type: Object,
    },

    width: {
      default: 1024,
      type: Number,
    },
    height: {
      default: 250,
      type: Number,
    },
  },
  computed: {

    viewBox() {
      return `0 0 ${this.width} ${this.height}`
    },
    circles() {
      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
    },
    svg() {

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

  },

  mounted() {

    function getPieDataForCircle(circle) {
      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
      return newArray
    }

    const learningPathContents = []

    const data = this.pieData

    const circleWidth = 150


    const radius = (circleWidth * 0.7) / 2
    console.log(this.viewBox)


    const cicles = this.svg
      .selectAll('circle')
      .data(this.circles)
      .enter()
      .append('circle')
      .attr('cx', (d, i) => {
        return (i + 1) * circleWidth - radius
      })
      .attr('cy', 150)
      .attr('r', radius)
      .attr('fill', '#99C7E7')

    const circlesText = this.svg
      .selectAll('.circlesText')
      .data(this.circles)
      .enter()
      .append('text')
      .attr('x', (d, i) => {
        return (i + 1) * circleWidth - radius
      })
      .attr('y', 150 + radius + 30)
      .attr('fill', '#00224D')
      .style('font-size', 19)
      .text((d) => d.title)
      .attr('class', 'circlesText')
      .style('text-anchor', 'middle')


    const topicTitles = this.svg
      .selectAll('.topicTitles')
      .data(this.learninglearningPathContents.topics)
      .enter()
      .append('text')
      .attr('x', (d, i) => {
        return i * circleWidth * d.circles.length + 50
      })
      .attr('y', 50)
      .attr('fill', '#00224D')


      .style('font-size', 19)
      .text((d) => d.title)
      .attr('class', 'topicTitles')


    const topicLines = this.svg
      .selectAll('lines')
      .data(this.learninglearningPathContents.topics)
      .enter()
      .append('line')
      .attr('x1', (d, i) => {
        return i * circleWidth * d.circles.length + 30
      })
      .attr('y1', 10)
      .attr('x2', (d, i) => {
        return i * circleWidth * d.circles.length + 30
      })
      .attr('y2', 270)
      .attr('class', 'stroke-gray-500')
      .attr('stroke-width', 1.76)


    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.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(d => getPieDataForCircle(d)))
      .enter()
      .append('g')
      .attr('class', 'arc')


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

    // Add the path using this helper function

    //     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>