ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some fixes

This commit is contained in:
Lorenz Padberg 2022-06-27 11:07:35 +02:00
parent 7ddcd13b10
commit 46275fe775
2 changed files with 110 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
client/src/components/circle/LearningPathCircleDiagram.vue
View File

@ -21,17 +21,18 @@ export default {
slug: 'basis', slug: 'basis',
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, {
title: 'Starten', id: 11,
done: false title: 'Starten',
}, done: false,
},
{ {
id: 13, id: 13,
title: 'Beobachten', title: 'Beobachten',
done: false done: false,
},
}], ],
}, },
], ],
}, },
@ -49,37 +50,38 @@ 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,
title: 'Starten',
done: true
},
{ {
id: 13,
title: 'Beobachten',
done: false
}, {
id: 11, id: 11,
title: 'Starten', title: 'Starten',
done: false done: true,
}, },
{ {
id: 13, id: 13,
title: 'Beobachten', title: 'Beobachten',
done: false done: false,
},
}, { {
id: 11, id: 11,
title: 'Starten', title: 'Starten',
done: true done: false,
}, },
{ {
id: 13, id: 13,
title: 'Beobachten', 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', 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, {
title: 'Starten', id: 11,
done: true title: 'Starten',
}, done: true,
},
{ {
id: 13, id: 13,
title: 'Beobachten', title: 'Beobachten',
done: false done: false,
},
},], ],
}, },
{ {
id: 10, id: 10,
@ -119,25 +122,22 @@ export default {
{ {
id: 11, id: 11,
title: 'Starten', title: 'Starten',
done: true done: true,
}, },
{ {
id: 13, id: 13,
title: 'Beobachten', title: 'Beobachten',
done: true done: true,
}, },
{ {
id: 18, id: 18,
title: 'Anwenden', title: 'Anwenden',
done: true done: true,
}, },
{ {
id: 30, id: 30,
title: 'Üben', title: 'Üben',
done: false done: false,
}, },
], ],
}, },
@ -149,7 +149,7 @@ export default {
}, },
width: { width: {
default: 1200, default: 800,
type: Number, type: Number,
}, },
height: { height: {
@ -175,13 +175,24 @@ export default {
return internalCircles return internalCircles
}, },
svg() { svg() {
const width = this.width const width = '100%'
const height = this.height const height = 350
return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
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() { mounted() {
console.log(this.width, this.height)
const circleWidth = 200 const circleWidth = 200
const radius = (circleWidth * 0.7) / 2 const radius = (circleWidth * 0.7) / 2
const blue900 = '#00224D', const blue900 = '#00224D',
@ -192,7 +203,6 @@ export default {
sky400 = '#72CAFF', sky400 = '#72CAFF',
sky500 = '#41B5FA' sky500 = '#41B5FA'
// Create append pie charts to the main svg // Create append pie charts to the main svg
const circle_groups = this.svg const circle_groups = this.svg
.selectAll('.circle') .selectAll('.circle')
@ -205,14 +215,22 @@ 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 => { d3.select(this)
return d.done ? sky400 : gray100 .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 => { d3.select(this)
return d.done ? sky500 : gray300 .selectAll('.learningSegmentArc')
}) .transition()
.duration('200')
.attr('fill', (d) => {
return d.done ? sky500 : gray300
})
}) })
.attr('role', 'button') .attr('role', 'button')
@ -222,7 +240,6 @@ export default {
.padAngle(12 / 360) .padAngle(12 / 360)
.outerRadius(radius) .outerRadius(radius)
//Generate groups //Generate groups
const arcs = this.svg const arcs = this.svg
.selectAll('g') .selectAll('g')
@ -239,11 +256,12 @@ export default {
.attr('class', 'learningSegmentArc') .attr('class', 'learningSegmentArc')
.attr('fill', gray300) .attr('fill', gray300)
arcs
arcs.transition().duration('1000').attr('fill', d => { .transition()
return d.done ? sky500 : gray300 .duration('1000')
}) .attr('fill', (d) => {
return d.done ? sky500 : gray300
})
//Draw arc paths //Draw arc paths
arcs.append('path').attr('d', arcGenerator) arcs.append('path').attr('d', arcGenerator)
@ -256,7 +274,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); .call(wrap, 200 - 20)
const topicTitles = this.svg const topicTitles = this.svg
.selectAll('.topicTitles') .selectAll('.topicTitles')
@ -290,7 +308,6 @@ export default {
topicLines.transition().duration('1000').attr('y2', 350) topicLines.transition().duration('1000').attr('y2', 350)
function wrap(text, width) { function wrap(text, width) {
text.each(function () { text.each(function () {
let text = d3.select(this), let text = d3.select(this),
@ -300,22 +317,31 @@ export default {
lineNumber = 0, lineNumber = 0,
lineHeight = 1.1, // ems lineHeight = 1.1, // ems
y = text.attr('y'), y = text.attr('y'),
dy = 0,//parseFloat(text.attr('dy')), dy = 0, //parseFloat(text.attr('dy')),
tspan = text.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em'); tspan = text
while (word = words.pop()) { .text(null)
line.push(word); .append('tspan')
tspan.text(line.join(' ')); .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) { if (tspan.node().getComputedTextLength() > width) {
line.pop(); line.pop()
tspan.text(line.join(' ')); tspan.text(line.join(' '))
line = [word]; 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)
} }
} }
}); })
} }
}, },
} }
</script> </script>
@ -331,7 +357,7 @@ export default {
background: white; background: white;
} }
.svg-content { .learning-path-visualization {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
@ -341,5 +367,11 @@ export default {
</style> </style>
<template> <template>
<div id="container" class="svg-container"></div> <div class="svg-container">
<svg>
<rect style="fill: rgb(0, 170, 0); stroke-width: 1; stroke: rgb(0, 0, 0)" />
</svg>
</div>
<!-- <svg class="learning-path-visualization" width="10%" height="10%" viewBox="0 0 50 50">-->
<!-- </svg>-->
</template> </template>

8
client/src/views/LearningPathView.vue
View File

@ -65,16 +65,18 @@ export default {
</script> </script>
<template> <template>
<div class="bg-gray-100 h-screen"> <div class="bg-gray-300 h-screen">
<MainNavigationBar/> <MainNavigationBar/>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
<div class="flex flex-col h-max p-6"> <div class="flex flex-col h-max p-6">
<div class="bg-green-500 h-64">
<SimpleCircleDiagram class="object-scale-down" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
</div>
<div class="text-blue-dark font-bold text-7xl m-12"> <div class="text-blue-dark font-bold text-7xl m-12">
{{ learningPathData.title }} {{ learningPathData.title }}
</div> </div>