ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed topics rendering

This commit is contained in:
Lorenz Padberg 2022-07-04 17:12:30 +02:00
parent 1753ce0de4
commit dcbef8efed
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/circle/LearningPathDiagram.vue
View File

@ -69,10 +69,14 @@ export default {
let pieGenerator = d3.pie() let pieGenerator = d3.pie()
let pieData = pieGenerator(pieWeights) let pieData = pieGenerator(pieWeights)
pieData.forEach((pie) => { pieData.forEach((pie) => {
pie.startAngle = pie.startAngle + Math.PI
pie.endAngle = pie.endAngle + Math.PI
const lp = circle.learningSequences[parseInt(pie.index)]; const lp = circle.learningSequences[parseInt(pie.index)];
pie.done = circle.someFinishedInLearningSequence(lp.translation_key); pie.done = circle.someFinishedInLearningSequence(lp.translation_key);
}); });
circle.pieData = pieData circle.pieData = pieData.reverse()
}); });
return internalCircles return internalCircles
} }
@ -97,6 +101,7 @@ export default {
sky500 = '#41B5FA' sky500 = '#41B5FA'
let vueRouter = this.$router let vueRouter = this.$router
console.log('this.learningpath', this.learningPathStore.learningPath)
// Create append pie charts to the main svg // Create append pie charts to the main svg
const circle_groups = this.svg const circle_groups = this.svg
@ -113,7 +118,7 @@ export default {
d3.select(this) d3.select(this)
.selectAll('.learningSegmentArc') .selectAll('.learningSegmentArc')
.transition() .transition()
.duration('200') .duration(200)
.attr('fill', (d) => { .attr('fill', (d) => {
return d.done ? sky400 : gray100 return d.done ? sky400 : gray100
}) })
@ -122,7 +127,7 @@ export default {
d3.select(this) d3.select(this)
.selectAll('.learningSegmentArc') .selectAll('.learningSegmentArc')
.transition() .transition()
.duration('200') .duration(200)
.attr('fill', (d) => { .attr('fill', (d) => {
return d.done ? sky500 : gray300 return d.done ? sky500 : gray300
}) })
@ -143,7 +148,7 @@ export default {
const arcs = this.svg const arcs = this.svg
.selectAll('g') .selectAll('g')
.selectAll('.learningSegmentArc') .selectAll('.learningSegmentArc')
.data((d) => { .data((d) => {console.log('DDDD', d)
return d.pieData return d.pieData
}) })
.enter() .enter()
@ -153,7 +158,7 @@ export default {
arcs arcs
.transition() .transition()
.duration('1000') .duration(1000)
.attr('fill', (d) => { .attr('fill', (d) => {
return d.done ? sky500 : gray300 return d.done ? sky500 : gray300
}) })
@ -175,7 +180,7 @@ export default {
const topicGroups = this.svg const topicGroups = this.svg
.selectAll('.topic') .selectAll('.topic')
.data(this.learningPathContents.topics) .data(this.learningPathStore.learningPath.topics)
.enter() .enter()
.append('g') .append('g')
.attr('transform', (d, i) => { .attr('transform', (d, i) => {