357 lines
9.8 KiB
Vue
357 lines
9.8 KiB
Vue
<script>
|
|
import * as d3 from 'd3';
|
|
import { useLearningPathStore } from '../../stores/learningPath';
|
|
|
|
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,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
// {
|
|
// 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: 11,
|
|
// title: 'Starten',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Beobachten',
|
|
// done: false,
|
|
// },
|
|
// {
|
|
// id: 11,
|
|
// title: 'Starten',
|
|
// done: false,
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Beobachten',
|
|
// done: false,
|
|
// },
|
|
// {
|
|
// id: 11,
|
|
// title: 'Starten',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Beobachten',
|
|
// done: false,
|
|
// },
|
|
// ],
|
|
// },
|
|
// ],
|
|
// },
|
|
// {
|
|
// 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: 11,
|
|
// title: 'Starten',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Beobachten',
|
|
// done: false,
|
|
// },
|
|
// ],
|
|
// },
|
|
// {
|
|
// id: 10,
|
|
// title: 'Analyse des letzten Falles',
|
|
// slug: 'analyse',
|
|
// type: 'learnpath.Circle',
|
|
// translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
|
|
// learning_sequences: [
|
|
// {
|
|
// id: 11,
|
|
// title: 'Starten',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 13,
|
|
// title: 'Beobachten',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 18,
|
|
// title: 'Anwenden',
|
|
// done: true,
|
|
// },
|
|
// {
|
|
// id: 30,
|
|
// title: 'Üben',
|
|
// done: false,
|
|
// },
|
|
// ],
|
|
// },
|
|
// ],
|
|
// },
|
|
],
|
|
},
|
|
type: Object,
|
|
},
|
|
|
|
width: {
|
|
default: 1440,
|
|
type: Number,
|
|
},
|
|
height: {
|
|
default: 256,
|
|
type: Number,
|
|
},
|
|
},
|
|
setup() {
|
|
const learningPathStore = useLearningPathStore()
|
|
|
|
return { learningPathStore }
|
|
},
|
|
computed: {
|
|
viewBox() {
|
|
return `0 0 ${this.width} ${this.height* 1.5}`
|
|
},
|
|
circles() {
|
|
if (this.learningPathStore.learningPath) {
|
|
let internalCircles = this.learningPathStore.learningPath.topics.flatMap(topic => topic.circles);
|
|
// console.log(internalCircles);
|
|
internalCircles.forEach((circle) => {
|
|
let pieWeights = new Array(Math.max(circle.learningSequences.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
|
|
}
|
|
return [];
|
|
},
|
|
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, 200 - 20)
|
|
|
|
const topicTitles = this.svg
|
|
.selectAll('.topicTitles')
|
|
.data(this.learningPathContents.topics)
|
|
.enter()
|
|
.append('text')
|
|
.attr('x', (d, i) => {
|
|
return i * circleWidth * d.circles.length + 50
|
|
})
|
|
.attr('y', 50)
|
|
.attr('fill', blue900)
|
|
.style('font-size', 19)
|
|
.text((d) => d.title)
|
|
.attr('class', 'topicTitles font-bold')
|
|
|
|
const topicLines = this.svg
|
|
.selectAll('lines')
|
|
.data(this.learningPathContents.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', 0)
|
|
.attr('class', 'stroke-gray-500')
|
|
.attr('stroke-width', 1.76)
|
|
|
|
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>
|