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