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

refactoring

This commit is contained in:
Lorenz Padberg 2022-06-09 16:16:28 +02:00
parent 2b4336c42f
commit 0e2a8cc2e2
1 changed files with 48 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
client/src/components/circle/SimpleCircleDiagram.vue
View File

@ -3,8 +3,10 @@ import * as d3 from 'd3';
export default { export default {
props: { props: {
learningSequences: {required: false, learningSequences: {
default: [{title: '', done: false}, {title: '', done: false}, {title: '', done: false}, {title: '', done: false}]}, required: false,
default: [{title: '', done: false}, {title: '', done: false}, {title: '', done: false}, {title: '', done: false}]
},
width: { width: {
default: 250, default: 250,
type: Number, type: Number,
@ -16,67 +18,89 @@ export default {
}, },
computed: { computed: {
pieData() { pieData() {
return new Array(Math.max(this.learningSequences.length, 1)).fill(1); return new Array(Math.max(this.learningSequences.length, 1)).fill(1)
}, },
viewBox() { viewBox() {
return `0 0 ${this.width} ${this.height}`; return `0 0 ${this.width} ${this.height}`
} },
}, },
mounted() { mounted() {
console.log(this.pieData) console.log(this.pieData)
var data = this.pieData; const data = this.pieData
const width = this.width const width = this.width
const height = this.height const height = this.height
const radius = Math.min(width, height) / 2.5 const radius = Math.min(width, height) / 2.5
console.log(this.viewBox)
var svg = d3.select(this.$el) const svg = d3.select(this.$el)
.append('svg') .append('svg')
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
var g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); const 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) .innerRadius(radius / 2)
.padAngle(12 / 360) .padAngle(12 / 360)
.outerRadius(radius); .outerRadius(radius)
//Generate groups //Generate groups
var arcs = g.selectAll("arc") const arcs = g.selectAll('arc')
.data(pie(data)) .data(pie(data))
.enter() .enter()
.append("g") .append('g')
.attr("class", "arc") .attr('class', 'arc')
//Draw arc paths //Draw arc paths
arcs.append("path") arcs.append('path')
.attr("d", arc) .attr('d', arc)
} }
} }
</script> </script>
<style scoped> <style scoped>
.demo-chart{ .svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
fill: rgb(65 181 250); fill: rgb(65 181 250);
} }
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
fill: rgb(65 181 250);
}
</style> </style>
<template> <template>
<svg class="demo-chart" :viewBox="viewBox" > </svg> <div id="container" class="svg-container">
</div>
</template> </template>