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

added basic grafics to topics

This commit is contained in:
Lorenz Padberg 2022-06-13 18:01:20 +02:00
parent 0e2a8cc2e2
commit ed5e409992
4 changed files with 305 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -16,6 +16,7 @@
"d3": "^7.4.4",
"loglevel": "^1.8.0",
"pinia": "^2.0.13",
"underscore": "^1.13.4",
"vue": "^3.2.31",
"vue-i18n": "^9.1.9",
"vue-router": "^4.0.14"

299
client/src/components/circle/LearningPathCircleDiagram.vue Normal file
View File

@ -0,0 +1,299 @@
<script>
import * as d3 from 'd3'
import * as _ from 'underscore'
export default {
props: {
learninglearningPathContents: {
default: {
topics: [
{
id: 4,
title: 'Basissdf',
slug: 'basissdf',
type: 'learnpath.Topic',
translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
is_visible: false,
circles: [
{
id: 5,
title: 'Basis',
slug: 'basis',
type: 'learnpath.Circle',
translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
learning_sequences: [],
},
],
},
{
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: 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: 10,
title: 'Analyse',
slug: 'analyse',
type: 'learnpath.Circle',
translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
learning_sequences: [
{
id: 11,
title: 'Starten',
},
{
id: 13,
title: 'Beobachten',
},
{
id: 18,
title: 'Anwenden',
},
{
id: 30,
title: 'Üben',
},
],
},
],
},
],
},
type: Object,
},
width: {
default: 1024,
type: Number,
},
height: {
default: 250,
type: Number,
},
},
computed: {
viewBox() {
return `0 0 ${this.width} ${this.height}`
},
circles() {
return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
},
svg() {
const width = this.width
const height = this.height
return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
}
},
mounted() {
function getPieDataForCircle(circle) {
const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
return newArray
}
const learningPathContents = []
const data = this.pieData
const circleWidth = 150
const radius = (circleWidth * 0.7) / 2
console.log(this.viewBox)
const cicles = this.svg
.selectAll('circle')
.data(this.circles)
.enter()
.append('circle')
.attr('cx', (d, i) => {
return (i + 1) * circleWidth - radius
})
.attr('cy', 150)
.attr('r', radius)
.attr('fill', '#99C7E7')
const circlesText = this.svg
.selectAll('.circlesText')
.data(this.circles)
.enter()
.append('text')
.attr('x', (d, i) => {
return (i + 1) * circleWidth - radius
})
.attr('y', 150 + radius + 30)
.attr('fill', '#00224D')
.style('font-size', 19)
.text((d) => d.title)
.attr('class', 'circlesText')
.style('text-anchor', 'middle')
const topicTitles = this.svg
.selectAll('.topicTitles')
.data(this.learninglearningPathContents.topics)
.enter()
.append('text')
.attr('x', (d, i) => {
return i * circleWidth * d.circles.length + 50
})
.attr('y', 50)
.attr('fill', '#00224D')
.style('font-size', 19)
.text((d) => d.title)
.attr('class', 'topicTitles')
const topicLines = this.svg
.selectAll('lines')
.data(this.learninglearningPathContents.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', 270)
.attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76)
const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
// Generate the pie
const pie = d3.pie()
// Generate the arcs
const arc = d3
.arc()
.innerRadius(radius / 2)
.padAngle(12 / 360)
.outerRadius(radius)
//Generate groups
const arcs = g.selectAll('arc')
.data(pie(d => getPieDataForCircle(d)))
.enter()
.append('g')
.attr('class', 'arc')
//Draw arc paths
arcs.append('path')
.attr('d', arc)
// Add the path using this helper function
// console.log(this.pieData)
// const data = this.pieData
//
// const width = this.width
// const height = this.height
// const radius = Math.min(width, height) / 2.5
// console.log(this.viewBox)
//
//
// const svg = d3.select(this.$el)
// .append('svg')
// .attr('width', width)
// .attr('height', height)
//
//
// const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
//
//
// // Generate the pie
// const pie = d3.pie()
//
// // Generate the arcs
// const arc = d3
// .arc()
// .innerRadius(radius / 2)
// .padAngle(12 / 360)
// .outerRadius(radius)
//
//
// //Generate groups
// const arcs = g.selectAll('arc')
// .data(pie(data))
// .enter()
// .append('g')
// .attr('class', 'arc')
//
//
// //Draw arc paths
// arcs.append('path')
// .attr('d', arc)
//
//
// }
//
},
}
</script>
<style scoped>
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
fill: rgb(65 181 250);
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
fill: rgb(65 181 250);
}
</style>
<template>
<div id="container" class="svg-container"></div>
</template>

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

@ -3,7 +3,7 @@ import axios from 'axios';
import * as log from 'loglevel';
import MainNavigationBar from '../components/MainNavigationBar.vue';
import SimpleCircleDiagram from '../components/circle/SimpleCircleDiagram.vue';
import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
export default {
components: {MainNavigationBar, SimpleCircleDiagram},
@ -52,6 +52,8 @@ export default {
}
});
learningPathContents.topics.push(topic)
console.log(learningPathContents)
console.log('oskadfjnmlasdmflkmsadlf')
this.learningPathContents = learningPathContents;
@ -70,23 +72,10 @@ export default {
<MainNavigationBar/>
<div class="learningpath flex flex-col">
<div class="flex flex-row justify-start bg-white">
<div class="m-8 p-4 topic border-l flex flex-col justify-start" v-for="topic in learningPathContents.topics">
<div class="font-bold text-blue-900 mb-4">{{topic.title}}</div>
<div class="flex flex-row">
<button class="circle mr-8" aria-label="circle.title" v-for="circle in topic.circles" @click="$router.push('/circle/'+circle.slug)">
<SimpleCircleDiagram class="w-48 h-48" :learning-sequences="circle.learning_sequences"></SimpleCircleDiagram>
<div class="text-center text-xl text-blue-900 font-bold mt-4">{{ circle.title }}</div>
</button>
<SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
</div>
</div>
</div>
<div class="flex flex-col h-max p-6">
<div class="text-blue-dark font-bold text-7xl m-12">
{{ learningPathData.title }}