aded hover and done state
This commit is contained in:
Lorenz Padberg
parent
b24bbc3f62
commit
14b2ce0176
|
|
@ -21,7 +21,17 @@ export default {
|
|||
slug: 'basis',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
|
||||
learning_sequences: [],
|
||||
learning_sequences: [{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: false
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: false
|
||||
|
||||
}],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -39,7 +49,37 @@ export default {
|
|||
slug: 'gewinnen',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
|
||||
learning_sequences: [],
|
||||
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
|
||||
|
||||
},],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -57,7 +97,17 @@ export default {
|
|||
slug: 'einstieg',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
|
||||
learning_sequences: [],
|
||||
learning_sequences: [ {
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: false
|
||||
|
||||
},],
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
|
|
@ -69,18 +119,25 @@ export default {
|
|||
{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: true
|
||||
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Anwenden',
|
||||
done: true
|
||||
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
title: 'Üben',
|
||||
done: false
|
||||
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -92,11 +149,11 @@ export default {
|
|||
},
|
||||
|
||||
width: {
|
||||
default: 1024,
|
||||
default: 1200,
|
||||
type: Number,
|
||||
},
|
||||
height: {
|
||||
default: 250,
|
||||
default: 350,
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
|
|
@ -105,14 +162,26 @@ export default {
|
|||
return `0 0 ${this.width} ${this.height}`
|
||||
},
|
||||
circles() {
|
||||
|
||||
let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.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){
|
||||
let index = parseInt(pie.index)
|
||||
console.log(circle)
|
||||
if (circle.learning_sequences.length == 0) {
|
||||
pie.done = false
|
||||
}
|
||||
else {
|
||||
pie.done = circle.learning_sequences[parseInt(pie.index)].done
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
circle.pieData = pieData
|
||||
});
|
||||
})
|
||||
return internalCircles
|
||||
},
|
||||
svg() {
|
||||
|
|
@ -123,59 +192,78 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
|
||||
console.log(this.circles)
|
||||
|
||||
const circleWidth = 200
|
||||
const radius = (circleWidth * 0.7) / 2
|
||||
const blue900 = '#00224D',
|
||||
blue700 = '#1A5197',
|
||||
gray100 = '#EDF2F6',
|
||||
gray300 = '#E0E5EC',
|
||||
gray500 = '#B1C1CA',
|
||||
sky400 = '#72CAFF',
|
||||
sky500 = '#41B5FA'
|
||||
|
||||
|
||||
|
||||
// Create append pie charts to the main svg
|
||||
const circle_groups = this.svg.selectAll('.circle')
|
||||
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 + ', 150)'
|
||||
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})
|
||||
})
|
||||
|
||||
|
||||
|
||||
// Arc Generator
|
||||
const arc = d3
|
||||
const arcGenerator = d3
|
||||
.arc()
|
||||
.innerRadius(radius / 2)
|
||||
.padAngle(12 / 360)
|
||||
.outerRadius(radius)
|
||||
|
||||
|
||||
//Generate groups
|
||||
//Generate groups
|
||||
const arcs = this.svg
|
||||
.selectAll('g')
|
||||
.selectAll('.arc')
|
||||
.data(d => { return d.pieData})
|
||||
.selectAll('.learningSegmentArc')
|
||||
.attr('fill', (d) => {
|
||||
let color = 'red'
|
||||
return color
|
||||
} )
|
||||
.data((d) => {
|
||||
return d.pieData
|
||||
})
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'arc')
|
||||
.attr('class', 'learningSegmentArc')
|
||||
.attr('fill', gray300)
|
||||
|
||||
|
||||
//Draw arc paths
|
||||
arcs.append('path')
|
||||
.attr('d', arc)
|
||||
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', '#00224D')
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.text((d) => d.title)
|
||||
.attr('y', radius + 30)
|
||||
.attr('class', 'circlesText')
|
||||
.attr('class', 'circlesText text-xl font-bold')
|
||||
.style('text-anchor', 'middle')
|
||||
|
||||
|
||||
const topicTitles = this.svg
|
||||
.selectAll('.topicTitles')
|
||||
.data(this.learninglearningPathContents.topics)
|
||||
|
|
@ -185,13 +273,10 @@ export default {
|
|||
return i * circleWidth * d.circles.length + 50
|
||||
})
|
||||
.attr('y', 50)
|
||||
.attr('fill', '#00224D')
|
||||
|
||||
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.text((d) => d.title)
|
||||
.attr('class', 'topicTitles')
|
||||
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
|
||||
const topicLines = this.svg
|
||||
.selectAll('lines')
|
||||
|
|
@ -205,9 +290,11 @@ export default {
|
|||
.attr('x2', (d, i) => {
|
||||
return i * circleWidth * d.circles.length + 30
|
||||
})
|
||||
.attr('y2', 270)
|
||||
.attr('y2', 0)
|
||||
.attr('class', 'stroke-gray-500')
|
||||
.attr('stroke-width', 1.76)
|
||||
|
||||
topicLines.transition().duration('1000').attr('y2',350)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -220,7 +307,8 @@ export default {
|
|||
padding-bottom: 100%;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
fill: rgb(65 181 250);
|
||||
background: white;
|
||||
|
||||
}
|
||||
|
||||
.svg-content {
|
||||
|
|
@ -228,7 +316,8 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
fill: rgb(65 181 250);
|
||||
background: white;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue