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

f

This commit is contained in:
Lorenz Padberg 2022-06-14 17:46:30 +02:00
parent 47f7461375
commit 1ba30fd663
5 changed files with 121 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
client/src/components/circle/CircleDiagram.vue
View File

@ -1,75 +1,58 @@
<script> <script>
import * as d3 from 'd3'; import * as d3 from 'd3'
export default { export default {
mounted() { mounted() {
const data = [5, 5, 5, 5, 5]
var data = [5, 5, 5, 5, 5]; const width = 500,
height = 500,
radius = Math.min(width, height) / 2.5
var width = 500, height = 500, radius = Math.min(width, height) / 2.5 const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
var svg = d3.select(this.$el) const color = '#99C7E7'
.append('svg')
.attr('width', 500)
.attr('height', 500)
var g = svg.append("g").attr('transform', "translate(" + width / 2 + "," + height / 2 + ")");
var color = '#99C7E7';
// Generate the pie // Generate the pie
var pie = d3.pie(); const pie = d3.pie()
// Generate the arcs // Generate the arcs
var arc = d3 const arc = d3
.arc() .arc()
.innerRadius(radius / 2.5) .innerRadius(radius / 2.5)
.padAngle(12 / 360) .padAngle(12 / 360)
.outerRadius(radius); .outerRadius(radius)
// Generate the arrows // Generate the arrows
var arrow = d3.arc() const arrow = d3
.arc()
.innerRadius(radius * 1.15) .innerRadius(radius * 1.15)
.padAngle(30 / 360) .padAngle(30 / 360)
.outerRadius(radius * 1.16); .outerRadius(radius * 1.16)
//Generate groups
const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
//Generate groups //Generate groups
var arcs = g.selectAll("arc") const arrows = g
.selectAll('arrow')
.data(pie(data)) .data(pie(data))
.enter() .enter()
.append("g") .append('g')
.attr("class", "arc") .attr('class', 'arrow')
.attr('marker-start', 'url(#triangle)')
const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
//Generate groups //Draw arc paths
var arrows = g.selectAll("arrow") arcs.append('path').attr('fill', color).attr('d', arc)
.data(pie(data))
.enter()
.append("g")
.attr("class", "arrow")
.attr("marker-start", "url(#triangle)")
var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)") //Draw arrow paths
arrows.append('path').attr('fill', color).attr('d', arrow)
//Draw arc paths },
arcs.append("path")
.attr("fill", color)
.attr("d", arc)
//Draw arrow paths
arrows.append("path")
.attr("fill", color)
.attr("d", arrow)
}
} }
</script> </script>
<style> <style>
@ -85,8 +68,6 @@ input {
} }
</style> </style>
<template> <template>
<div class="demo-chart" width="500" heigth="500"/> <div class="demo-chart" width="500" heigth="500"/>
</template> </template>

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

@ -2,7 +2,6 @@
import * as d3 from 'd3' import * as d3 from 'd3'
import * as _ from 'underscore' import * as _ from 'underscore'
export default { export default {
props: { props: {
learninglearningPathContents: { learninglearningPathContents: {
@ -102,51 +101,115 @@ export default {
}, },
}, },
computed: { computed: {
viewBox() { viewBox() {
return `0 0 ${this.width} ${this.height}` return `0 0 ${this.width} ${this.height}`
}, },
circles() { circles() {
return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
_.forEach(internalCircles, function (circle) {
let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
let pieGenerator = d3.pie()
let pieData = pieGenerator(pieWeights)
circle.pieData = pieData
});
return internalCircles
}, },
svg() { svg() {
const width = this.width const width = this.width
const height = this.height const height = this.height
return d3.select(this.$el).append('svg').attr('width', width).attr('height', height) return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
} },
}, },
mounted() { mounted() {
function getPieDataForCircle(circle) { function getPieDataForCircle(circle) {
const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1) return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
return newArray
} }
const learningPathContents = [] console.log(this.circles)
const data = this.pieData
const circleWidth = 150 const circleWidth = 150
const radius = (circleWidth * 0.7) / 2 const radius = (circleWidth * 0.7) / 2
console.log(this.viewBox)
const cicles = this.svg // Create append pie charts to the main svg
.selectAll('circle') const pie = this.svg.selectAll('.pie')
.data(this.circles)
pie
.enter()
.append('g')
.attr('class', 'pie')
.attr('fill', 'red')
.attr('transform', (d, i) => {
let x_coord = (i + 1) * circleWidth - radius + 100
return 'translate(' + x_coord + ', 40)'
})
let g = this.svg.selectAll('.pie')
// .append('circle')
// .attr('r', d => {
// return 30
// })
// .attr('fill', 'green')
// .attr('class', 'test')
//
// let g = this.svg.selectAll('g').data(d => {
// if (d) {
// console.log(d.pieData + 'sdfklm');
// return d.pieData
// } else {
// console.log('sdf')
// return []
// }
// })
g.enter().append('g').attr('class', 'arc')
const arc = d3.arc()
.outerRadius(300)
.innerRadius(0);
g.append('path').attr('fill', 'red').attr('d', arc)
// //Generate groups
// const arcs = g
// .selectAll('arc')
// .data(pie([5, 5, 5, 5]))
// .enter()
// .append('path')
// .attr('d', arc)
// const pies = g.selectAll('arcs')
// .data([1, 2, 3])
// .enter()
// .append('g')
// .attr('cx', (d, i) => {
// return (i + 1) * circleWidth - radius
// })
// .attr('cy', 150)
// .attr('d', arcs)
const circles = this.svg
.selectAll('.blunt_circles')
.data(this.circles) .data(this.circles)
.enter() .enter()
.append('circle') .append('circle')
.attr('class', 'blunt_circles')
.attr('cx', (d, i) => { .attr('cx', (d, i) => {
return (i + 1) * circleWidth - radius return (i + 1) * circleWidth - radius
}) })
.attr('cy', 150) .attr('cy', 150)
.attr('r', radius) .attr('r', radius)
.attr('fill', '#99C7E7') .attr('stroke', 'black')
const circlesText = this.svg const circlesText = this.svg
.selectAll('.circlesText') .selectAll('.circlesText')
@ -196,80 +259,6 @@ export default {
.attr('y2', 270) .attr('y2', 270)
.attr('class', 'stroke-gray-500') .attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76) .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> </script>

0
client/src/components/circle/italy.json Normal file
View File

10
client/src/components/circle/map.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
$END$
</body>
</html>

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

@ -47,13 +47,11 @@ export default {
topic.circles = [] topic.circles = []
} }
if (child.type === 'learnpath.Circle') { if (child.type === 'learnpath.Circle') {
console.log(child)
topic.circles.push(child) topic.circles.push(child)
} }
}); });
learningPathContents.topics.push(topic) learningPathContents.topics.push(topic)
console.log(learningPathContents)
console.log('oskadfjnmlasdmflkmsadlf')
this.learningPathContents = learningPathContents; this.learningPathContents = learningPathContents;