From 7ddcd13b1009936667f2ba81ed63f8892f8acd2a Mon Sep 17 00:00:00 2001 From: Lorenz Padberg Date: Wed, 15 Jun 2022 16:45:06 +0200 Subject: [PATCH] added text wrapping --- .../circle/LearningPathCircleDiagram.vue | 105 +++++++++++------- 1 file changed, 62 insertions(+), 43 deletions(-) diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue index b3ef788c..7e65ac56 100644 --- a/client/src/components/circle/LearningPathCircleDiagram.vue +++ b/client/src/components/circle/LearningPathCircleDiagram.vue @@ -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); + } + } + }); + } + }, } @@ -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; }