From 5f39cfb2e96980689168471a6435872707c684bd Mon Sep 17 00:00:00 2001 From: Lorenz Padberg Date: Mon, 4 Jul 2022 12:22:38 +0200 Subject: [PATCH] fixed learning path text wrapping --- .../components/circle/LearningPathDiagram.vue | 161 ++++-------------- .../tests/create_default_learning_path.py | 10 +- 2 files changed, 34 insertions(+), 137 deletions(-) diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue index b1762468..5a9222f0 100644 --- a/client/src/components/circle/LearningPathDiagram.vue +++ b/client/src/components/circle/LearningPathDiagram.vue @@ -36,113 +36,7 @@ export default { }, ], }, - // { - // id: 6, - // title: 'Gewinnen von Kunden', - // slug: 'gewinnen-von-kunden', - // type: 'learnpath.Topic', - // translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466', - // is_visible: true, - // circles: [ - // { - // id: 7, - // title: 'Gewinnen', - // slug: 'gewinnen', - // type: 'learnpath.Circle', - // translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1', - // 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, - // }, - // ], - // }, - // ], - // }, - // { - // id: 8, - // title: 'Beraten der Kunden', - // slug: 'beraten-der-kunden', - // type: 'learnpath.Topic', - // translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4', - // is_visible: true, - // circles: [ - // { - // id: 9, - // title: 'Einstieg', - // slug: 'einstieg', - // type: 'learnpath.Circle', - // translation_key: 'a608ce8c-1482-491d-becd-2280787285b3', - // learning_sequences: [ - // { - // id: 11, - // title: 'Starten', - // done: true, - // }, - // { - // id: 13, - // title: 'Beobachten', - // done: false, - // }, - // ], - // }, - // { - // id: 10, - // title: 'Analyse des letzten Falles', - // slug: 'analyse', - // type: 'learnpath.Circle', - // translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d', - // learning_sequences: [ - // { - // id: 11, - // title: 'Starten', - // done: true, - // }, - // { - // id: 13, - // title: 'Beobachten', - // done: true, - // }, - // { - // id: 18, - // title: 'Anwenden', - // done: true, - // }, - // { - // id: 30, - // title: 'Üben', - // done: false, - // }, - // ], - // }, - // ], - // }, + ], }, type: Object, @@ -159,7 +53,7 @@ export default { }, computed: { viewBox() { - return `0 0 ${this.width} ${this.height* 1.5}` + return `0 0 ${this.width} ${this.height * 1.5}` }, circles() { @@ -193,7 +87,7 @@ export default { sky400 = '#72CAFF', sky500 = '#41B5FA' - let vueRouter = this.$router + let vueRouter = this.$router // Create append pie charts to the main svg const circle_groups = this.svg @@ -225,7 +119,7 @@ export default { }) }) .on('click', function (d, i) { - vueRouter.push('/circle/'+i.slug) + vueRouter.push('/circle/' + i.slug) }) .attr('role', 'button') @@ -258,6 +152,7 @@ export default { //Draw arc paths arcs.append('path').attr('d', arcGenerator) + const circlesText = circle_groups .append('text') .attr('fill', blue900) @@ -266,37 +161,39 @@ export default { .attr('y', radius + 30) .attr('class', 'circlesText text-xl font-bold') .style('text-anchor', 'middle') - .call(wrap, 200 - 20) + .call(wrap, circleWidth - 20) - const topicTitles = this.svg - .selectAll('.topicTitles') + + const topicGroups = this.svg + .selectAll('.topic') .data(this.learningPathContents.topics) .enter() - .append('text') - .attr('x', (d, i) => { - return i * circleWidth * d.circles.length + 50 + .append('g') + .attr('transform', (d, i) => { + console.log(d) + return "translate(" + (i * circleWidth * d.circles.length + 30) + ",0)" }) - .attr('y', 50) + .style("visibility", d => d.is_visible ? "visible" : "hidden") + .attr('class', 'topic') + + const topicLines = topicGroups + .append('line') + .attr('x1', -10) + .attr('y1', 0) + .attr('x2', -10) + .attr('y2', 0) + .attr('class', 'stroke-gray-500') + .attr('stroke-width', 1.76) + + const topicTitles = topicGroups + .append('text') + .attr('y', 20) .attr('fill', blue900) .style('font-size', 19) .text((d) => d.title) .attr('class', 'topicTitles font-bold') + .call(wrap, circleWidth) - const topicLines = this.svg - .selectAll('lines') - .data(this.learningPathContents.topics) - .enter() - .append('line') - .attr('x1', (d, i) => { - return i * circleWidth * d.circles.length + 30 - }) - .attr('y1', 10) - .attr('x2', (d, i) => { - return i * circleWidth * d.circles.length + 30 - }) - .attr('y2', 0) - .attr('class', 'stroke-gray-500') - .attr('stroke-width', 1.76) topicLines.transition().duration('1000').attr('y2', 350) diff --git a/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py b/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py index 258978bb..89cba14e 100644 --- a/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py +++ b/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py @@ -387,12 +387,12 @@ Neukundinnen und -kunden.""", TopicFactory(title="Betreuen und Ausbauen des Kundenstamms", parent=lp) - circle_analyse = create_circle('Betreueun', lp) - create_circle_children(circle_analyse, 'Betreueun') + circle_analyse = create_circle('Betreuen', lp) + create_circle_children(circle_analyse, 'Betreuen') - TopicFactory(title="Prüfungsvorbereitung", is_visible=False, parent=lp) - circle_analyse = create_circle('Prüfungsvorbereitung', lp) - create_circle_children(circle_analyse, 'Prüfungsvorbereitung') + TopicFactory(title="Prüfungs- vorbereitung", is_visible=False, parent=lp) + circle_analyse = create_circle('Prüfungs- vorbereitung', lp) + create_circle_children(circle_analyse, 'Prüfungs- vorbereitung') # locales