added basic grafics to topics
This commit is contained in:
Lorenz Padberg
parent
0e2a8cc2e2
commit
ed5e409992
|
|
@ -16,6 +16,7 @@
|
||||||
"d3": "^7.4.4",
|
"d3": "^7.4.4",
|
||||||
"loglevel": "^1.8.0",
|
"loglevel": "^1.8.0",
|
||||||
"pinia": "^2.0.13",
|
"pinia": "^2.0.13",
|
||||||
|
"underscore": "^1.13.4",
|
||||||
"vue": "^3.2.31",
|
"vue": "^3.2.31",
|
||||||
"vue-i18n": "^9.1.9",
|
"vue-i18n": "^9.1.9",
|
||||||
"vue-router": "^4.0.14"
|
"vue-router": "^4.0.14"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -3,7 +3,7 @@ import axios from 'axios';
|
||||||
import * as log from 'loglevel';
|
import * as log from 'loglevel';
|
||||||
|
|
||||||
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
||||||
import SimpleCircleDiagram from '../components/circle/SimpleCircleDiagram.vue';
|
import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {MainNavigationBar, SimpleCircleDiagram},
|
components: {MainNavigationBar, SimpleCircleDiagram},
|
||||||
|
|
@ -52,6 +52,8 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
learningPathContents.topics.push(topic)
|
learningPathContents.topics.push(topic)
|
||||||
|
console.log(learningPathContents)
|
||||||
|
console.log('oskadfjnmlasdmflkmsadlf')
|
||||||
|
|
||||||
|
|
||||||
this.learningPathContents = learningPathContents;
|
this.learningPathContents = learningPathContents;
|
||||||
|
|
@ -70,23 +72,10 @@ export default {
|
||||||
<MainNavigationBar/>
|
<MainNavigationBar/>
|
||||||
|
|
||||||
<div class="learningpath flex flex-col">
|
<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="flex flex-col h-max p-6">
|
||||||
<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 }}
|
||||||
|
|
|
||||||
|
|
@ -87,7 +87,7 @@ class Circle(Page):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def learning_sequences(self):
|
def learning_sequences(self):
|
||||||
return self.get_children().filter(content_type__model='learningsequence').values('id', 'title')
|
return self.get_children().filter(content_type__model='learningsequence').values('id', 'title')
|
||||||
|
|
||||||
@classmethod
|
@classmethod
|
||||||
def get_serializer_class(cls):
|
def get_serializer_class(cls):
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue