From 9319aa2b1658f0863ff0873da66ab9618ae64b30 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 28 Jun 2022 14:34:09 +0200
Subject: [PATCH] add hover transition

---
 .../src/components/circle/CircleDiagram.vue   | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index badb01a2..a3f02fe7 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {onMounted} from "vue";
+import {computed,ref,  onMounted} from "vue";
 import * as _ from 'underscore'
 
 
@@ -66,20 +66,19 @@ function calculatePieData(circle) {
     pie.endAngle = pie.endAngle + Math.PI
     pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
     pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
-    pie.done = false
+    pie.done = true
   })
   pieData = pieData.reverse()
   return pieData
 }
 
 onMounted(async () => {
-
-
-    let pieData = calculatePieData(props.circleData)
-
-    const width = 500,
-      height = 500,
-      radius = Math.min(width, height) / 3
+    const root = ref(null)
+  console.log(root?.value)
+    let pieData = calculatePieData(props.circleData),
+      width = 450, //props.width,
+      height = 450, //props.height,
+      radius: number = Math.min(width, height) / 2.4
 
     const blue900 = '#00224D',
       blue700 = '#1A5197',
@@ -140,13 +139,31 @@ onMounted(async () => {
 
 
     //Generate groups
-    const wedgesGroup = g.selectAll('learningSegmentArc').data(pieData).enter().append('g')
-
+    const wedgesGroup = g.selectAll('.learningSegmentArc').data(pieData).enter().append('g')
       .attr('class', 'learningSegmentArc')
-        .attr('role', 'button')
-        .attr('fill', gray300)
+      .attr('role', 'button')
+      .attr('fill', gray300)
 
-  wedgesGroup
+
+      wedgesGroup
+      .on('mouseover', function (d, i) {
+        d3.select(this)
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky400 : gray100
+          })
+      })
+        .on('mouseout', function (d, i) {
+          d3.select(this)
+            .transition()
+            .duration('200')
+            .attr('fill', (d) => {
+              return d.done ? sky500 : gray300
+            })
+        })
+
+    wedgesGroup
       .transition()
       .duration('1000')
       .attr('fill', (d) => {
@@ -187,6 +204,7 @@ onMounted(async () => {
       })
 
 
+
     //Generate groups
     const arrows = g
       .selectAll('arrow')
@@ -201,16 +219,7 @@ onMounted(async () => {
 
     //Draw arrow paths
     arrows.append('path').attr('fill', gray500).attr('d', arrow)
-    //   .transition()
-    //   .duration(500)
-    //   .delay(function (d, i) {return i * 200;})
-    //   .attrTween('d', function (d) {
-    //   var i = d3.interpolate(d.arrowStartAngle, d.arrowEndAngle);
-    //   return function (t) {
-    //     d.arrowEndAngle = i(t);
-    //     return d;
-    //   }
-    // })
+
   }
 );