with real data from store

client/src/components/circle/CircleDiagram.vue

@@ -2,6 +2,7 @@
 import * as d3 from "d3";
 import {useCircleStore} from '@/stores/circle';
 import {onMounted} from "vue";
+import * as _ from 'underscore'
 
 
 const props = defineProps<{
@@ -40,15 +41,35 @@ const props = defineProps<{
   width: {
     default: 500,
     type: number,
+        required: false
+
   },
   height: {
     default: 500,
     type: number,
+    required: false
   },
 }>()
 
+
+function calculatePieData(circle){
+        let learningSequences = _.filter(circle.children, (child) => { return child.type === 'learnpath.LearningSequence'; })
+        let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
+        let pieGenerator = d3.pie()
+        let pieData = pieGenerator(pieWeights)
+  console.log(pieData)
+        _.forEach(pieData, (pie) => {
+          pie.title = learningSequences[parseInt(pie.index)].title
+          pie.icon = learningSequences[parseInt(pie.index)].icon
+        })
+        return pieData
+}
+
 onMounted(async () => {
-  const data = [5, 5, 5, 5, 5]
+
+
+
+  let pieData = calculatePieData(props.circleData)
 
   const width = 500,
     height = 500,
@@ -89,15 +110,15 @@ onMounted(async () => {
     .outerRadius(radius * 1.16)
 
     //Generate groups
-    const wedgesGroup = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
+    const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc')
   wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
 
 
     const learningSequenceText = wedgesGroup
       .append('text')
       .attr('fill', blue900)
-      .style('font-size', 19)
-      .text((d) => {return 'segment'})
+      .style('font-size', 15)
+      .text((d) => {return d.title})
       .attr("transform", function(d) {
         let translate = wedge.centroid(d)
         translate = [translate[0], translate[1] + 20]
@@ -106,9 +127,9 @@ onMounted(async () => {
       .style('text-anchor', 'middle')
 
   const learningSequenceIcon = wedgesGroup.append("svg:image")
-        .attr("xlink:href", "/static/icons/icon-ls-network.svg")
-        .attr("width", 40)
-        .attr("height", 40)
+        .attr("xlink:href", (d) => {return "/static/icons/"+d.icon.replace("it-", "")+".svg"})
+        .attr("width", 30)
+        .attr("height", 30)
         .attr("transform", function(d) {
         let translate = wedge.centroid(d)
         translate = [translate[0]-20, translate[1] - 35]
@@ -118,7 +139,7 @@ onMounted(async () => {
   //Generate groups
   const arrows = g
     .selectAll('arrow')
-    .data(pie(data))
+    .data(pieData)
     .enter()
     .append('g')
     .attr('class', 'arrow')

client/src/views/CircleView.vue

@@ -45,8 +45,8 @@ onMounted(async () => {
               {{ circleStore.circleData.title }}
             </h1>
 
-            <div class="mt-8">
-              <CircleDiagram></CircleDiagram>
+            <div class="mt-8" v-if="circleStore.circleData.learningSequences">
+              <CircleDiagram :circle-data="circleStore.circleData"></CircleDiagram>
             </div>
 
             <div class="border-t-2 border-gray-500 mt-4 lg:hidden">