added text wrapping
This commit is contained in:
Lorenz Padberg
parent
14b2ce0176
commit
7ddcd13b10
|
|
@ -22,10 +22,10 @@ export default {
|
|||
type: 'learnpath.Circle',
|
||||
translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
|
||||
learning_sequences: [{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: false
|
||||
},
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: false
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
|
|
@ -49,17 +49,17 @@ export default {
|
|||
slug: 'gewinnen',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
|
||||
learning_sequences: [ {
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
learning_sequences: [{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: false
|
||||
|
||||
},{
|
||||
}, {
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: false
|
||||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
title: 'Beobachten',
|
||||
done: false
|
||||
|
||||
},{
|
||||
}, {
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
|
|
@ -97,11 +97,11 @@ export default {
|
|||
slug: 'einstieg',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
|
||||
learning_sequences: [ {
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
learning_sequences: [{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Analyse',
|
||||
title: 'Analyse des letzten Falles',
|
||||
slug: 'analyse',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
|
||||
|
|
@ -167,19 +167,9 @@ export default {
|
|||
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
|
||||
}
|
||||
_.forEach(pieData, function (pie) {
|
||||
pie.done = circle.learning_sequences.length == 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
|
||||
})
|
||||
|
||||
|
||||
|
||||
circle.pieData = pieData
|
||||
})
|
||||
return internalCircles
|
||||
|
|
@ -192,8 +182,6 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
console.log(this.circles)
|
||||
|
||||
const circleWidth = 200
|
||||
const radius = (circleWidth * 0.7) / 2
|
||||
const blue900 = '#00224D',
|
||||
|
|
@ -202,8 +190,7 @@ export default {
|
|||
gray300 = '#E0E5EC',
|
||||
gray500 = '#B1C1CA',
|
||||
sky400 = '#72CAFF',
|
||||
sky500 = '#41B5FA'
|
||||
|
||||
sky500 = '#41B5FA'
|
||||
|
||||
|
||||
// Create append pie charts to the main svg
|
||||
|
|
@ -218,11 +205,16 @@ export default {
|
|||
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})
|
||||
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})
|
||||
d3.select(this).selectAll('.learningSegmentArc').transition().duration('200').attr('fill', d => {
|
||||
return d.done ? sky500 : gray300
|
||||
})
|
||||
})
|
||||
.attr('role', 'button')
|
||||
|
||||
const arcGenerator = d3
|
||||
.arc()
|
||||
|
|
@ -238,7 +230,7 @@ export default {
|
|||
.attr('fill', (d) => {
|
||||
let color = 'red'
|
||||
return color
|
||||
} )
|
||||
})
|
||||
.data((d) => {
|
||||
return d.pieData
|
||||
})
|
||||
|
|
@ -248,8 +240,9 @@ export default {
|
|||
.attr('fill', gray300)
|
||||
|
||||
|
||||
arcs.transition().duration('1000').attr('fill', d => {return d.done ? sky500 : gray300})
|
||||
|
||||
arcs.transition().duration('1000').attr('fill', d => {
|
||||
return d.done ? sky500 : gray300
|
||||
})
|
||||
|
||||
|
||||
//Draw arc paths
|
||||
|
|
@ -263,6 +256,7 @@ export default {
|
|||
.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')
|
||||
|
|
@ -294,7 +288,34 @@ export default {
|
|||
.attr('class', 'stroke-gray-500')
|
||||
.attr('stroke-width', 1.76)
|
||||
|
||||
topicLines.transition().duration('1000').attr('y2',350)
|
||||
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>
|
||||
|
|
@ -307,8 +328,7 @@ export default {
|
|||
padding-bottom: 100%;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
.svg-content {
|
||||
|
|
@ -316,8 +336,7 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: white;
|
||||
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue