made the piechart more responsive

Author: aulonm

package.json

@@ -11,14 +11,14 @@
   "dependencies": {
     "axios": "^0.19.0",
     "braces": "^3.0.2",
-    "core-js": "^3.4.5",
+    "core-js": "^3.4.7",
     "d3": "^5.14.2",
     "moment": "^2.24.0",
     "vue": "^2.6.10",
     "vue-moment": "^4.0.0",
     "vue-resize": "^0.4.5",
     "vue-router": "^3.1.3",
-    "vuetify": "^2.1.12",
+    "vuetify": "^2.1.13",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -34,7 +34,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "deepmerge": "^4.2.2",
-    "eslint": "^6.7.1",
+    "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.0.1",
     "eslint-plugin-vuetify": "^1.0.0-beta.3",
@@ -44,6 +44,6 @@
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "^2.0.2",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.4.2"
+    "vuetify-loader": "^1.4.3"
   }
 }

src/components/PieChart.vue

@@ -8,7 +8,6 @@
 
 <script>
 import * as d3 from 'd3';
-import debounce from '../util/debounce';
 
 export default {
   name: 'PieChart',
@@ -32,6 +31,8 @@ export default {
     },
     svg: null,
     svgSelection: null,
+    chartWidth: 0,
+    chartHeight: 0,
   }),
 
   watch: {
@@ -51,18 +52,22 @@ export default {
     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.chartWidth = this.width - (this.padding.left + this.padding.right);
+      this.chartHeight = this.height - (this.padding.top + this.padding.bottom);
 
-      this.chartLayer = this.svgSelection.append('g').attr('transform', `translate(${this.padding.left}, ${this.padding.top})`);
+      this.chartLayer = this.svgSelection
+        .append('g')
+        .attr('transform', `translate(${this.padding.left}, ${this.padding.top})`);
 
       this.arc = d3
         .arc()
-        .outerRadius(chartHeight / 2)
-        .innerRadius(chartHeight / 4)
+        .outerRadius(this.chartHeight / 2)
+        .innerRadius(this.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(${this.chartWidth / 2}, ${this.chartHeight / 2})`);
 
       this.updateChart(this.stats);
     },
@@ -83,16 +88,17 @@ export default {
         .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);
+      this.chartWidth = this.width - (this.padding.left + this.padding.right);
+      this.chartHeight = this.height - (this.padding.top + this.padding.bottom);
+      this.updateChart(this.stats);
     },
 
     updateChart(stats) {
-      d3.selectAll('path').remove();
-      console.log(this.parentWidth());
+      this.pieG = this.pieG.attr('transform', `translate(${this.chartWidth / 2}, ${this.chartHeight / 2})`);
 
-      const total = d3.sum(this.stats.map(stat => stat.value));
+      d3.selectAll('path').remove();
+      d3.selectAll('text').remove();
+      // const total = d3.sum(this.stats.map(stat => stat.value));
 
       const arcs = d3
         .pie()
@@ -103,13 +109,9 @@ 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 infoBlock = d3.select('#info');
 
       const newBlock = block.join('g').classed('arc', true);
 

src/util/debounce.js

@@ -2959,11 +2959,16 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
   integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
 
-core-js@^3.4.3, core-js@^3.4.5:
+core-js@^3.4.3:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
   integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
 
+core-js@^3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.7.tgz#57c35937da80fe494fbc3adcf9cf3dc00eb86b34"
+  integrity sha512-qaPVGw30J1wQ0GR3GvoPqlGf9GZfKKF4kFC7kiHlcsPTqH3txrs9crCp3ZiMAXuSenhz89Jnl4GZs/67S5VOSg==
+
 [email protected], core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4185,10 +4190,10 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.7.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.1.tgz#269ccccec3ef60ab32358a44d147ac209154b919"
-  integrity sha512-UWzBS79pNcsDSxgxbdjkmzn/B6BhsXMfUaOHnNwyE8nD+Q6pyT96ow2MccVayUTV4yMid4qLhMiQaywctRkBLA==
+eslint@^6.7.2:
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.2.tgz#c17707ca4ad7b2d8af986a33feba71e18a9fecd1"
+  integrity sha512-qMlSWJaCSxDFr8fBPvJM9kJwbazrhNcBU3+DszDW1OlEwKBBRWsJc7NJFelvwQpanHCR14cOLD41x8Eqvo3Nng==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
@@ -10589,17 +10594,17 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
-vuetify-loader@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.4.2.tgz#0fefbca906de29939cd74f707c6bbc70bf1fc866"
-  integrity sha512-lRB2niiiMOtkPyRbZRGl7GyDXAvBtHBDIV3LKwrgJwdMRvZEYmNTqMM4IxR+oGXHPGBBV/apu0XmCq7Mqomzng==
+vuetify-loader@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.4.3.tgz#df1323c558be09890877e5fbe817b3a71a6c538d"
+  integrity sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==
   dependencies:
     loader-utils "^1.2.0"
 
-vuetify@^2.1.12:
-  version "2.1.12"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.1.12.tgz#7b02de32d7a169db468576ea5d5e8f60c603069a"
-  integrity sha512-xMaEX9pz/9bdV0jecuvINk5FD43bUkzfeLKfvrwBu0qroLTpLCdc7mZ7AURAxR5mVmgjqR9BFc7qRtQHA1Lq0Q==
+vuetify@^2.1.13:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.1.13.tgz#58610027b8014c640510eb76e02c5a94e56bef04"
+  integrity sha512-wy7RfNmRW60sPNRxl0C7TwRcLRw2Yw+ofGlJTAcoQZnWDtDOriSq0p3Uk8X0jb6tzkeU5Ed0JY6zL0Rb0ZL3lw==
 
 vuex@^3.1.2:
   version "3.1.2"