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

added done status

This commit is contained in:
Lorenz Padberg 2022-06-28 13:49:12 +02:00
parent a8a239e395
commit e8dcd231f2
1 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,8 +64,9 @@ function calculatePieData(circle) {
pie.icon = learningSequences[parseInt(pie.index)].icon pie.icon = learningSequences[parseInt(pie.index)].icon
pie.startAngle = pie.startAngle + Math.PI pie.startAngle = pie.startAngle + Math.PI
pie.endAngle = pie.endAngle + Math.PI pie.endAngle = pie.endAngle + Math.PI
pie.arrowStartAngle = pie.endAngle + (pie.startAngle- pie.endAngle) / 2 pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
pie.arrowEndAngle = pie.startAngle + (pie.startAngle- pie.endAngle) / 2 pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
pie.done = false
}) })
pieData = pieData.reverse() pieData = pieData.reverse()
return pieData return pieData
@ -121,6 +122,7 @@ onMounted(async () => {
.padAngle(12 / 360) .padAngle(12 / 360)
.outerRadius(radius) .outerRadius(radius)
// Generate the arrows // Generate the arrows
const arrowRadius = radius * 1.1 const arrowRadius = radius * 1.1
@ -128,15 +130,31 @@ onMounted(async () => {
.arc() .arc()
.innerRadius(arrowRadius) .innerRadius(arrowRadius)
.outerRadius(arrowRadius + arrowStrokeWidth) .outerRadius(arrowRadius + arrowStrokeWidth)
.padAngle(30 / 360) .padAngle(20 / 360)
.startAngle(d => {return d.arrowStartAngle}) .startAngle(d => {
.endAngle(d => {return d.arrowEndAngle}) return d.arrowStartAngle
})
.endAngle(d => {
return d.arrowEndAngle
})
//Generate groups //Generate groups
const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc') const wedgesGroup = g.selectAll('learningSegmentArc').data(pieData).enter().append('g')
wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge) .attr('class', 'learningSegmentArc')
.attr('role', 'button')
.attr('fill', gray300)
wedgesGroup
.transition()
.duration('1000')
.attr('fill', (d) => {
return d.done ? sky500 : gray300
})
wedgesGroup.append('path').attr('d', wedge)
const learningSequenceText = wedgesGroup const learningSequenceText = wedgesGroup
@ -164,7 +182,7 @@ onMounted(async () => {
.attr("height", iconWidth) .attr("height", iconWidth)
.attr("transform", function (d) { .attr("transform", function (d) {
let translate = wedge.centroid(d) let translate = wedge.centroid(d)
translate = [translate[0] - iconWidth/2, translate[1] - iconWidth] translate = [translate[0] - iconWidth / 2, translate[1] - iconWidth]
return "translate(" + translate + ")"; return "translate(" + translate + ")";
}) })