From 46275fe775b1cdd14bb19aedb06b19cbd77604e4 Mon Sep 17 00:00:00 2001 From: Lorenz Padberg Date: Mon, 27 Jun 2022 11:07:35 +0200 Subject: [PATCH] some fixes --- .../circle/LearningPathCircleDiagram.vue | 178 +++++++++++------- client/src/views/LearningPathView.vue | 8 +- 2 files changed, 110 insertions(+), 76 deletions(-) diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue index 7e65ac56..5ff3451a 100644 --- a/client/src/components/circle/LearningPathCircleDiagram.vue +++ b/client/src/components/circle/LearningPathCircleDiagram.vue @@ -21,17 +21,18 @@ export default { slug: 'basis', type: 'learnpath.Circle', translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106', - learning_sequences: [{ - id: 11, - title: 'Starten', - done: false - }, + learning_sequences: [ + { + id: 11, + title: 'Starten', + done: false, + }, { id: 13, title: 'Beobachten', - done: false - - }], + done: false, + }, + ], }, ], }, @@ -49,37 +50,38 @@ 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: 13, - title: 'Beobachten', - done: false - - }, { id: 11, title: 'Starten', - done: false + done: true, }, { id: 13, title: 'Beobachten', - done: false - - }, { + done: false, + }, + { id: 11, title: 'Starten', - done: true + done: false, }, { id: 13, title: 'Beobachten', - done: false - - },], + done: false, + }, + { + id: 11, + title: 'Starten', + done: true, + }, + { + id: 13, + title: 'Beobachten', + done: false, + }, + ], }, ], }, @@ -97,17 +99,18 @@ 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', - done: false - - },], + done: false, + }, + ], }, { id: 10, @@ -119,25 +122,22 @@ export default { { id: 11, title: 'Starten', - done: true + done: true, }, { id: 13, title: 'Beobachten', - done: true - + done: true, }, { id: 18, title: 'Anwenden', - done: true - + done: true, }, { id: 30, title: 'Üben', - done: false - + done: false, }, ], }, @@ -149,7 +149,7 @@ export default { }, width: { - default: 1200, + default: 800, type: Number, }, height: { @@ -175,13 +175,24 @@ export default { return internalCircles }, svg() { - const width = this.width - const height = this.height - return d3.select(this.$el).append('svg').attr('width', width).attr('height', height) + const width = '100%' + const height = 350 + + const div_w = d3.select('.svg-container').style('width').split('px').shift() + const div_h = d3.select('.svg-container').style('height').split('px').shift() + console.log("my height", div_h, div_w) + return d3 + .select('.learning-path-visualization') + .attr('viewBox', '0 0 ' + div_w + ' ' + div_h) + .attr('preserveAspectRatio', 'xMinYMin meet') //.attr('width', width).attr('height', height) + }, + render() { + console.log('skljdnfksldnjf' + this.width) }, }, mounted() { + console.log(this.width, this.height) const circleWidth = 200 const radius = (circleWidth * 0.7) / 2 const blue900 = '#00224D', @@ -192,7 +203,6 @@ export default { sky400 = '#72CAFF', sky500 = '#41B5FA' - // Create append pie charts to the main svg const circle_groups = this.svg .selectAll('.circle') @@ -205,14 +215,22 @@ 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') @@ -222,7 +240,6 @@ export default { .padAngle(12 / 360) .outerRadius(radius) - //Generate groups const arcs = this.svg .selectAll('g') @@ -239,11 +256,12 @@ export default { .attr('class', 'learningSegmentArc') .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 arcs.append('path').attr('d', arcGenerator) @@ -256,7 +274,7 @@ export default { .attr('y', radius + 30) .attr('class', 'circlesText text-xl font-bold') .style('text-anchor', 'middle') - .call(wrap, 200-20); + .call(wrap, 200 - 20) const topicTitles = this.svg .selectAll('.topicTitles') @@ -290,7 +308,6 @@ export default { topicLines.transition().duration('1000').attr('y2', 350) - function wrap(text, width) { text.each(function () { let text = d3.select(this), @@ -300,22 +317,31 @@ export default { 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(' ')); + 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]; + 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); + tspan = text + .append('tspan') + .attr('x', 0) + .attr('y', y) + .attr('dy', ++lineNumber * lineHeight + dy + 'em') + .text(word) } } - }); + }) } - }, } @@ -331,7 +357,7 @@ export default { background: white; } -.svg-content { +.learning-path-visualization { display: inline-block; position: absolute; top: 0; @@ -341,5 +367,11 @@ export default { diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue index 7fbca5dd..90568c77 100644 --- a/client/src/views/LearningPathView.vue +++ b/client/src/views/LearningPathView.vue @@ -65,16 +65,18 @@ export default {