refactoring

client/src/components/circle/SimpleCircleDiagram.vue

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