working on responsive design

Author: aulonm

src/components/PieChart.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <svg ref="svg" class="pie" width="300" height="300" />
+    <v-card-subtitle>Wins/Losses</v-card-subtitle>
+    <resize-observer @notify="handleResize" />
+    <svg ref="svg" class="pie" />
   </div>
 </template>
 
 <script>
 import * as d3 from 'd3';
+import debounce from '../util/debounce';
 
 export default {
   name: 'PieChart',
@@ -19,39 +22,77 @@ export default {
 
   data: () => ({
     pie: null,
+    width: 300,
+    height: 300,
+    padding: {
+      top: 20,
+      left: 0,
+      bottom: 20,
+      right: 0,
+    },
+    svg: null,
+    svgSelection: null,
   }),
 
   watch: {
     stats(newStats) {
-      this.drawChart(newStats);
+      this.updateChart(newStats);
     },
   },
 
   mounted() {
-    const svg = d3.select(this.$refs.svg);
-    const width = +svg.attr('width');
-    const height = +svg.attr('height');
+    this.width = this.parentWidth();
+    this.svg = this.$refs.svg;
 
-    const margin = { top: 20, left: 0, bottom: 20, right: 0 };
+    this.drawChart();
+  },
 
-    const chartWidth = width - (margin.left + margin.right);
-    const chartHeight = height - (margin.top + margin.bottom);
+  methods: {
+    drawChart() {
+      this.svgSelection = d3.select(this.svg);
+      this.svgSelection.attr('width', this.width).attr('height', this.height);
+      const chartWidth = this.width - (this.padding.left + this.padding.right);
+      const chartHeight = this.height - (this.padding.top + this.padding.bottom);
 
-    this.chartLayer = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
+      this.chartLayer = this.svgSelection.append('g').attr('transform', `translate(${this.padding.left}, ${this.padding.top})`);
 
-    this.arc = d3
-      .arc()
-      .outerRadius(0)
-      .innerRadius(chartHeight / 2);
+      this.arc = d3
+        .arc()
+        .outerRadius(chartHeight / 2)
+        .innerRadius(chartHeight / 4)
+        .padAngle(0.05);
 
-    this.pieG = this.chartLayer.append('g').attr('transform', `translate(${chartWidth / 2}, ${chartHeight / 2})`);
+      this.pieG = this.chartLayer.append('g').attr('transform', `translate(${chartWidth / 2}, ${chartHeight / 2})`);
 
-    this.drawChart(this.stats);
-  },
+      this.updateChart(this.stats);
+    },
 
-  methods: {
-    drawChart(stats) {
+    parentWidth() {
+      const { svg } = this.$refs;
+      const { width } = svg.parentNode.getBoundingClientRect();
+      const paddingLeft = +getComputedStyle(svg.parentNode).paddingLeft.split('px')[0];
+      const paddingRight = +getComputedStyle(svg.parentNode).paddingRight.split('px')[0];
+      const paddingSum = paddingLeft + paddingRight;
+      return width - paddingSum;
+    },
+
+    handleResize() {
+      this.width = this.parentWidth();
+      d3.select(this.svg)
+        .transition()
+        .attr('height', this.padding.top + this.height + this.padding.bottom)
+        .attr('width', this.padding.left + this.width + this.padding.right);
+
+      debounce(function () {
+        this.drawChart()
+      }, 250);
+    },
+
+    updateChart(stats) {
       d3.selectAll('path').remove();
+      console.log(this.parentWidth());
+
+      const total = d3.sum(this.stats.map(stat => stat.value));
 
       const arcs = d3
         .pie()
@@ -62,6 +103,14 @@ export default {
 
       block.select('path').attr('d', this.arc);
 
+      console.log(this.pieG.node());
+
+      this.pieG.append('span').attr('id', 'info');
+
+      const infoBlock = d3.select('#info');
+
+      console.log(infoBlock);
+
       const newBlock = block.join('g').classed('arc', true);
 
       newBlock

src/util/debounce.js

@@ -0,0 +1,19 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+export default function(func, wait, immediate) {
+  let timeout;
+  return function() {
+    const context = this;
+    const args = arguments;
+    const later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}