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

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

export default {
  props: {
    learningPathContents: {
      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: 11,
                    title: 'Starten',
                    done: false,
                  },
                  {
                    id: 13,
                    title: 'Beobachten',
                    done: false,
                  },
                ],
              },
            ],
          },

        ],
      },
      type: Object,
    },

    width: {
      default: 1440,
      type: Number,
    },
    height: {
      default: 256,
      type: Number,
    },
  },
  computed: {
    viewBox() {
      return `0 0 ${this.width} ${this.height * 1.5}`
    },
    circles() {

      let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
      _.forEach(internalCircles, function (circle) {
        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
        let pieGenerator = d3.pie()
        let pieData = pieGenerator(pieWeights)
        _.forEach(pieData, function (pie) {
          pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
        })
        circle.pieData = pieData
      })
      return internalCircles
    },
    svg() {
      return d3.select('.learning-path-visualization')

    },

  },

  mounted() {
    const circleWidth = 200
    const radius = (circleWidth * 0.8) / 2
    const blue900 = '#00224D',
      blue700 = '#1A5197',
      gray100 = '#EDF2F6',
      gray300 = '#E0E5EC',
      gray500 = '#B1C1CA',
      sky400 = '#72CAFF',
      sky500 = '#41B5FA'

    let vueRouter = this.$router

    // Create append pie charts to the main svg
    const circle_groups = this.svg
      .selectAll('.circle')
      .data(this.circles)
      .enter()
      .append('g')
      .attr('class', 'circle')
      .attr('transform', (d, i) => {
        let x_coord = (i + 1) * circleWidth - radius
        return 'translate(' + x_coord + ', 200)'
      })
      .on('mouseover', function (d, i) {
        d3.select(this)
          .selectAll('.learningSegmentArc')
          .transition()
          .duration('200')
          .attr('fill', (d) => {
            return d.done ? sky400 : gray100
          })
      })
      .on('mouseout', function (d, i) {
        d3.select(this)
          .selectAll('.learningSegmentArc')
          .transition()
          .duration('200')
          .attr('fill', (d) => {
            return d.done ? sky500 : gray300
          })
      })
      .on('click', function (d, i) {
        vueRouter.push('/circle/' + i.slug)
      })

      .attr('role', 'button')

    const arcGenerator = d3
      .arc()
      .innerRadius(radius / 2)
      .padAngle(12 / 360)
      .outerRadius(radius)

    //Generate groups
    const arcs = this.svg
      .selectAll('g')
      .selectAll('.learningSegmentArc')
      .data((d) => {
        return d.pieData
      })
      .enter()
      .append('g')
      .attr('class', 'learningSegmentArc')
      .attr('fill', gray300)

    arcs
      .transition()
      .duration('1000')
      .attr('fill', (d) => {
        return d.done ? sky500 : gray300
      })

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


    const circlesText = circle_groups
      .append('text')
      .attr('fill', blue900)
      .style('font-size', 19)
      .text((d) => d.title)
      .attr('y', radius + 30)
      .attr('class', 'circlesText text-xl font-bold')
      .style('text-anchor', 'middle')
      .call(wrap, circleWidth - 20)


    const topicGroups = this.svg
      .selectAll('.topic')
      .data(this.learningPathContents.topics)
      .enter()
      .append('g')
      .attr('transform', (d, i) => {
        console.log(d)
        return "translate(" + (i * circleWidth * d.circles.length + 30) + ",0)"
      })
      .style("visibility", d => d.is_visible ? "visible" : "hidden")
      .attr('class', 'topic')

    const topicLines = topicGroups
      .append('line')
      .attr('x1', -10)
      .attr('y1', 0)
      .attr('x2', -10)
      .attr('y2', 0)
      .attr('class', 'stroke-gray-500')
      .attr('stroke-width', 1.76)

    const topicTitles = topicGroups
      .append('text')
      .attr('y', 20)
      .attr('fill', blue900)
      .style('font-size', 19)
      .text((d) => d.title)
      .attr('class', 'topicTitles font-bold')
      .call(wrap, circleWidth)


    topicLines.transition().duration('1000').attr('y2', 350)

    function wrap(text, width) {
      text.each(function () {
        let text = d3.select(this),
          words = text.text().split(/\s+/).reverse(),
          word,
          line = [],
          lineNumber = 0,
          lineHeight = 1.1, // ems
          y = text.attr('y'),
          dy = 0, //parseFloat(text.attr('dy')),
          tspan = text
            .text(null)
            .append('tspan')
            .attr('x', 0)
            .attr('y', y)
            .attr('dy', dy + 'em')
        while ((word = words.pop())) {
          line.push(word)
          tspan.text(line.join(' '))
          if (tspan.node().getComputedTextLength() > width) {
            line.pop()
            tspan.text(line.join(' '))
            line = [word]

            tspan = text
              .append('tspan')
              .attr('x', 0)
              .attr('y', y)
              .attr('dy', ++lineNumber * lineHeight + dy + 'em')
              .text(word)
          }
        }
      })
    }
  },
}
</script>


<template>
  <div class="svg-container h-full content-start">
    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
    </svg>
  </div>

</template>