Merge branch 'feature/learningPathVisu' into develop
This commit is contained in:
Lorenz Padberg
commit
4fe4f026ee
|
|
@ -1,75 +1,58 @@
|
||||||
<script>
|
<script>
|
||||||
import * as d3 from 'd3';
|
import * as d3 from 'd3'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
|
const data = [5, 5, 5, 5, 5]
|
||||||
|
|
||||||
var data = [5, 5, 5, 5, 5];
|
const width = 500,
|
||||||
|
height = 500,
|
||||||
|
radius = Math.min(width, height) / 2.5
|
||||||
|
|
||||||
var width = 500, height = 500, radius = Math.min(width, height) / 2.5
|
const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
|
||||||
|
|
||||||
|
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
|
||||||
|
|
||||||
var svg = d3.select(this.$el)
|
const color = '#99C7E7'
|
||||||
.append('svg')
|
|
||||||
.attr('width', 500)
|
|
||||||
.attr('height', 500)
|
|
||||||
|
|
||||||
|
|
||||||
var g = svg.append("g").attr('transform', "translate(" + width / 2 + "," + height / 2 + ")");
|
|
||||||
|
|
||||||
|
|
||||||
var color = '#99C7E7';
|
|
||||||
|
|
||||||
// Generate the pie
|
// Generate the pie
|
||||||
var pie = d3.pie();
|
const pie = d3.pie()
|
||||||
|
|
||||||
// Generate the arcs
|
// Generate the arcs
|
||||||
var arc = d3
|
const arc = d3
|
||||||
.arc()
|
.arc()
|
||||||
.innerRadius(radius / 2.5)
|
.innerRadius(radius / 2.5)
|
||||||
.padAngle(12 / 360)
|
.padAngle(12 / 360)
|
||||||
.outerRadius(radius);
|
.outerRadius(radius)
|
||||||
|
|
||||||
// Generate the arrows
|
// Generate the arrows
|
||||||
var arrow = d3.arc()
|
const arrow = d3
|
||||||
|
.arc()
|
||||||
.innerRadius(radius * 1.15)
|
.innerRadius(radius * 1.15)
|
||||||
.padAngle(30 / 360)
|
.padAngle(30 / 360)
|
||||||
.outerRadius(radius * 1.16);
|
.outerRadius(radius * 1.16)
|
||||||
|
|
||||||
|
//Generate groups
|
||||||
|
const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
|
||||||
|
|
||||||
//Generate groups
|
//Generate groups
|
||||||
var arcs = g.selectAll("arc")
|
const arrows = g
|
||||||
|
.selectAll('arrow')
|
||||||
.data(pie(data))
|
.data(pie(data))
|
||||||
.enter()
|
.enter()
|
||||||
.append("g")
|
.append('g')
|
||||||
.attr("class", "arc")
|
.attr('class', 'arrow')
|
||||||
|
.attr('marker-start', 'url(#triangle)')
|
||||||
|
|
||||||
|
const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
|
||||||
|
|
||||||
//Generate groups
|
//Draw arc paths
|
||||||
var arrows = g.selectAll("arrow")
|
arcs.append('path').attr('fill', color).attr('d', arc)
|
||||||
.data(pie(data))
|
|
||||||
.enter()
|
|
||||||
.append("g")
|
|
||||||
.attr("class", "arrow")
|
|
||||||
.attr("marker-start", "url(#triangle)")
|
|
||||||
|
|
||||||
var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
|
//Draw arrow paths
|
||||||
|
arrows.append('path').attr('fill', color).attr('d', arrow)
|
||||||
//Draw arc paths
|
},
|
||||||
arcs.append("path")
|
|
||||||
.attr("fill", color)
|
|
||||||
.attr("d", arc)
|
|
||||||
|
|
||||||
//Draw arrow paths
|
|
||||||
arrows.append("path")
|
|
||||||
.attr("fill", color)
|
|
||||||
.attr("d", arrow)
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -85,8 +68,6 @@ input {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="demo-chart" width="500" heigth="500"/>
|
<div class="demo-chart" width="500" heigth="500"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,299 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -0,0 +1,352 @@
|
||||||
|
<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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// 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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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')
|
||||||
|
.attr('fill', (d) => {
|
||||||
|
let color = 'red'
|
||||||
|
return color
|
||||||
|
})
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>$Title$</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
$END$
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -10,7 +10,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
|
||||||
<div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
|
<div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
|
||||||
<router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
|
<router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
|
||||||
<a class="link text-xl" href="/login/">Login</a>
|
<a class="link text-xl" href="/login/">Login</a>
|
||||||
<!-- <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>-->
|
<router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
|
||||||
<router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
|
<router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -3,16 +3,19 @@ import axios from 'axios';
|
||||||
import * as log from 'loglevel';
|
import * as log from 'loglevel';
|
||||||
|
|
||||||
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
||||||
import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
|
import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {MainNavigationBar, SimpleCircleDiagram},
|
|
||||||
|
|
||||||
|
components: {MainNavigationBar, LearningPathDiagram},
|
||||||
props: ['learningPathSlug',],
|
props: ['learningPathSlug',],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
count: 0,
|
count: 0,
|
||||||
learningPathData: {},
|
learningPathData: {},
|
||||||
learningPathContents: {},
|
learningPathContents: null,
|
||||||
circles: [],
|
circles: [],
|
||||||
learningSequences: [],
|
learningSequences: [],
|
||||||
}
|
}
|
||||||
|
|
@ -23,39 +26,32 @@ export default {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
|
url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
|
||||||
}).then((response) => {
|
}).then((response) => {
|
||||||
|
|
||||||
this.learningPathData = response.data
|
this.learningPathData = response.data
|
||||||
|
|
||||||
|
let learningPathContents = {topics: []}
|
||||||
let learningPathContents = { topics: [] }
|
|
||||||
let topic = {
|
let topic = {
|
||||||
id : 0,
|
id: 0,
|
||||||
title : '',
|
title: '',
|
||||||
slug : '',
|
slug: '',
|
||||||
type : 'learnpath.Topic',
|
type: 'learnpath.Topic',
|
||||||
translation_key : '',
|
translation_key: '',
|
||||||
is_visible : false,
|
is_visible: false,
|
||||||
cirlces : []
|
cirlces: []
|
||||||
}
|
}
|
||||||
|
|
||||||
response.data.children.forEach((child) => {
|
response.data.children.forEach((child) => {
|
||||||
if (child.type === 'learnpath.Topic') {
|
if (child.type === 'learnpath.Topic') {
|
||||||
if (topic.id != 0){
|
if (topic.id != 0) {
|
||||||
learningPathContents.topics.push(topic)
|
learningPathContents.topics.push(child)
|
||||||
}
|
}
|
||||||
|
|
||||||
topic = child
|
topic = child
|
||||||
topic.circles = []
|
topic.circles = []
|
||||||
}
|
}
|
||||||
if (child.type === 'learnpath.Circle') {
|
if (child.type === 'learnpath.Circle') {
|
||||||
console.log(child)
|
|
||||||
topic.circles.push(child)
|
topic.circles.push(child)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
learningPathContents.topics.push(topic)
|
learningPathContents.topics.push(topic)
|
||||||
console.log(learningPathContents)
|
|
||||||
console.log('oskadfjnmlasdmflkmsadlf')
|
|
||||||
|
|
||||||
|
|
||||||
this.learningPathContents = learningPathContents;
|
this.learningPathContents = learningPathContents;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -67,16 +63,17 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-gray-100 h-screen">
|
<div class="bg-gray-300 h-screen" v-if="learningPathContents">
|
||||||
|
|
||||||
|
|
||||||
<MainNavigationBar/>
|
<MainNavigationBar/>
|
||||||
|
|
||||||
<div class="learningpath flex flex-col">
|
<div class="learningpath flex flex-col">
|
||||||
|
<div class="flex flex-col h-max">
|
||||||
|
<div class="bg-white h-80 pt-8">
|
||||||
|
<LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
|
||||||
|
</div>
|
||||||
|
|
||||||
<SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col h-max p-6">
|
|
||||||
<div class="text-blue-dark font-bold text-7xl m-12">
|
<div class="text-blue-dark font-bold text-7xl m-12">
|
||||||
{{ learningPathData.title }}
|
{{ learningPathData.title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue