Make vertical alignment of diagram
This commit is contained in:
Lorenz Padberg
parent
3ef4564434
commit
c7622f7ed6
|
|
@ -47,9 +47,13 @@ export default {
|
|||
type: Number,
|
||||
},
|
||||
height: {
|
||||
default: 256,
|
||||
default: 256 * 3,
|
||||
type: Number,
|
||||
},
|
||||
vertical: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore()
|
||||
|
|
@ -89,7 +93,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
const circleWidth = 200
|
||||
const circleWidth = this.vertical ? 100 : 200
|
||||
const radius = (circleWidth * 0.8) / 2
|
||||
const blue900 = '#00224D',
|
||||
blue700 = '#1A5197',
|
||||
|
|
@ -108,10 +112,6 @@ export default {
|
|||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'circle')
|
||||
.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius
|
||||
return 'translate(' + x_coord + ', 200)'
|
||||
})
|
||||
.on('mouseover', function (d, i) {
|
||||
d3.select(this)
|
||||
.selectAll('.learningSegmentArc')
|
||||
|
|
@ -170,18 +170,46 @@ export default {
|
|||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.text((d) => d.title)
|
||||
.attr('y', radius + 30)
|
||||
.attr('class', 'circlesText text-xl font-bold hidden lg:block')
|
||||
.style('text-anchor', 'middle')
|
||||
.call(wrap, circleWidth - 20)
|
||||
|
||||
const topicHeigtOffset = 20
|
||||
const topicHeight = 35
|
||||
const circleHeigth = circleWidth + 20
|
||||
|
||||
function getTopicPosition(i, d, topics) {
|
||||
let x = 0
|
||||
let pos = topicHeigtOffset
|
||||
|
||||
for (let index = 0; index < i; index++) {
|
||||
x += circleWidth * topics[index].circles.length
|
||||
let topic = topics[index]
|
||||
if (topic.is_visible) {
|
||||
pos += topicHeight
|
||||
}
|
||||
pos += circleHeigth * topic.circles.length
|
||||
}
|
||||
return pos + 20
|
||||
}
|
||||
|
||||
|
||||
function getCircleVerticalPostion(i, d, topics) {
|
||||
let y = circleHeigth / 2 + topicHeigtOffset
|
||||
for (let topic_index = 0; topic_index < topics.length; topic_index++) {
|
||||
const topic = topics[topic_index]
|
||||
console.log(topic.title)
|
||||
if (topic.is_visible) {
|
||||
y += topicHeight
|
||||
|
||||
}
|
||||
for (let circle_index = 0; circle_index < topic.circles.length; circle_index++) {
|
||||
let circle = topic.circles[circle_index]
|
||||
console.log('- ' + circle.title)
|
||||
if (circle.id === d.id) {
|
||||
console.log('found')
|
||||
return y
|
||||
}
|
||||
y += circleHeigth
|
||||
|
||||
}
|
||||
}
|
||||
return x + 30
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -190,33 +218,109 @@ export default {
|
|||
.data(this.learningPathStore.learningPath.topics)
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
})
|
||||
.attr('class', (d) => {
|
||||
return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
|
||||
})
|
||||
|
||||
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
|
||||
const ç = 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)
|
||||
|
||||
|
||||
topicLines.transition().duration('1000').attr('y2', 350)
|
||||
// Calculate positions of objects
|
||||
|
||||
if (this.vertical) {
|
||||
circle_groups
|
||||
.attr('transform', (d, i) => {
|
||||
return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPathStore.learningPath.topics) + ')'
|
||||
})
|
||||
|
||||
circlesText
|
||||
.attr('y', 7)
|
||||
.attr('x', radius + 40)
|
||||
|
||||
const Topics_X = 100 - radius
|
||||
|
||||
topicGroups.attr('transform', (d, i) => {
|
||||
return "translate(" + Topics_X + ", " + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
|
||||
})
|
||||
.attr('class', 'topicTitles')
|
||||
|
||||
|
||||
topicLines.attr('x1', 0)
|
||||
.attr('y1', -20)
|
||||
.attr('x2', 0)
|
||||
.attr('y2', -20)
|
||||
.transition().duration('1000').attr('x2', this.width * 0.8)
|
||||
|
||||
|
||||
} else {
|
||||
circle_groups.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius
|
||||
return 'translate(' + x_coord + ', 200)'
|
||||
})
|
||||
|
||||
circlesText.attr('y', radius + 30)
|
||||
.style('text-anchor', 'middle')
|
||||
.call(wrap, circleWidth - 20)
|
||||
|
||||
topicGroups.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
})
|
||||
|
||||
topicLines.attr('x1', -10)
|
||||
.attr('y1', 0)
|
||||
.attr('x2', -10)
|
||||
.attr('y2', 0)
|
||||
.transition().duration('1000').attr('y2', 350)
|
||||
|
||||
topicGroups.attr('y', 20)
|
||||
.call(wrap, circleWidth)
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function flipToVertical() {
|
||||
|
||||
this.height = 2000
|
||||
|
||||
const animationTime = 1000
|
||||
circle_groups
|
||||
.transition().duration(animationTime).attr('transform', (d, i) => {
|
||||
let y_coord = ((i + 1) * circleWidth - radius) * 0.5
|
||||
return 'translate(200, ' + y_coord + ') scale(0.5)'
|
||||
}).on("end", d => {
|
||||
addTexts()
|
||||
})
|
||||
circle_groups.selectAll('.circlesText').attr('class', 'hidden')
|
||||
topicGroups.attr('class', 'hidden')
|
||||
|
||||
|
||||
function addTexts() {
|
||||
|
||||
|
||||
circle_groups
|
||||
.append('text')
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 45)
|
||||
.text((d) => d.title)
|
||||
.attr('y', 0)
|
||||
.attr('x', radius + 30)
|
||||
.attr('class', 'circlesText text-xl font-bold')
|
||||
.style('text-anchor', 'left')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function wrap(text, width) {
|
||||
text.each(function () {
|
||||
|
|
@ -258,9 +362,15 @@ export default {
|
|||
|
||||
|
||||
<template>
|
||||
<div class="svg-container h-full content-start">
|
||||
<svg class="learning-path-visualization h-full" :viewBox="viewBox">
|
||||
</svg>
|
||||
<div class="flex flex-col">
|
||||
<button class="content-center">
|
||||
<it-icon-list/>
|
||||
Listen ansicht anzeigen
|
||||
</button>
|
||||
<div class="svg-container h-full content-start">
|
||||
<svg class="learning-path-visualization h-full" :viewBox="viewBox">
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -36,9 +36,10 @@ onMounted(async () => {
|
|||
|
||||
<h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
|
||||
<div class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
|
||||
<div
|
||||
class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
|
||||
<div class="p-8 flex-auto">
|
||||
<h2>Willkommmen zurück, {{userStore.first_name}}</h2>
|
||||
<h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
||||
<p class="mt-4 text-xl">
|
||||
Du hast bereits drei circles bearbeitet, mach weiter so!
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue