some fixes
This commit is contained in:
Lorenz Padberg
parent
7ddcd13b10
commit
46275fe775
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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 {
|
|||
</style>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -65,16 +65,18 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-100 h-screen">
|
||||
<div class="bg-gray-300 h-screen">
|
||||
|
||||
<MainNavigationBar/>
|
||||
|
||||
<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="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">
|
||||
{{ learningPathData.title }}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue