Updated to chart.js v4 and fixed charts

.devcontainer/devcontainer.json

@@ -10,8 +10,8 @@
 	"extensions": [
 		"dbaeumer.vscode-eslint",
 		"mongodb.mongodb-vscode",
-		"octref.vetur",
-		"ms-python.python"
+		"ms-python.python",
+		"Vue.volar",
 	],
 	"postCreateCommand": "pip install -r ./pythonWorker/requirements.txt && npm install && cd webinterface && npm install && cd ..",
 	"remoteUser": "dev"

webinterface/.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser'
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

webinterface/package.json

@@ -11,7 +11,7 @@
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bootstrap-vue": "^2.23.1",
-    "chart.js": "*",
+    "chart.js": "^4.1.1",
     "core-js": "^3.33.2",
     "force-graph": "^1.43.4",
     "node-sass": "^9.0.0",

webinterface/public/index.html

@@ -20,7 +20,7 @@
     <div class="container footer-box">
       <div class="row">
         <div class="col-6">
-          <span class="text-muted">GitGudIssues 2021 v1.34</span>
+          <span class="text-muted">GitGudIssues 2021 v1.35</span>
         </div>
         <div class="col-6 footer-box-right">
           <a href="https://github.com/craigloewen-msft/GitGudIssues">Open Sourced at:

webinterface/src/components/RepoGraphs/BarLineGraphBase.vue

@@ -1,9 +1,16 @@
+<template>
+  <Bar v-if="!loading" :data="chartData" />
+</template>
+
 <script>
+import 'chart.js/auto';
 import { Bar } from "vue-chartjs";
 
 export default {
-  extends: Bar,
   name: "BarLineGraphBase",
+  components: {
+    Bar,
+  },
   props: {
     inputQuery: Object,
     chartEndPoint: String,
@@ -13,14 +20,7 @@ export default {
   data() {
     return {
       loading: true,
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
-      datasets: [
-        {
-          label: "Data One",
-          backgroundColor: "#f87979",
-          data: [40, 39, 10, 40, 39, 80, 40],
-        },
-      ],
+      chartData: null,
     };
   },
   methods: {
@@ -84,8 +84,31 @@ export default {
       this.$http.post(this.chartEndPoint, this.inputQuery).then((response) => {
         if (response.data.success) {
           const graphData = response.data.graphData;
-          this.labels = graphData.labels;
-          this.datasets = graphData.datasets;
+
+          let newChartData = {};
+
+          newChartData.labels = graphData.labels;
+          newChartData.datasets = graphData.datasets;
+          newChartData.options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              yAxes: [
+                {
+                  stacked: true,
+                },
+                {
+                  id: "line-y-axis",
+                  display: false,
+                },
+              ],
+              xAxes: [
+                {
+                  stacked: true,
+                },
+              ],
+            },
+          };
 
           let shadeAmount = 50;
           // let repoCount = (this.datasets.length - 3) / 2;
@@ -95,8 +118,8 @@ export default {
             shadeAmount = 90 / repoCount;
           }
 
-          for (let i = 0; i < this.datasets.length; i++) {
-            let datasetItem = this.datasets[i];
+          for (let i = 0; i < newChartData.datasets.length; i++) {
+            let datasetItem = newChartData.datasets[i];
             // Magic number here: 3 datasets are already processed (opened, closed, net) and we divide it by 2 to account for open and closed
             // let repoNumber = Math.floor((i - 3) / 2);
             let repoNumber = Math.floor(i / 2);
@@ -126,8 +149,9 @@ export default {
             }
           }
 
+          this.chartData = newChartData;
+
           this.loading = false;
-          this.startRender();
         } else {
           // TODO Add in some error catching condition
           console.log(response);

webinterface/src/components/RepoGraphs/GraphBase.vue

@@ -1,9 +1,16 @@
+<template>
+  <LineChart  v-if="!loading" :data="chartData" />
+</template>
+
 <script>
-import { Line } from "vue-chartjs";
+import 'chart.js/auto';
+import { Line as LineChart } from "vue-chartjs";
 
 export default {
-  extends: Line,
   name: "GraphBase",
+  components: {
+    LineChart,
+  },
   props: {
     inputQuery: Object,
     chartEndPoint: String,
@@ -12,34 +19,10 @@ export default {
   data() {
     return {
       loading: true,
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
-      datasets: [
-        {
-          label: "Data One",
-          backgroundColor: "#f87979",
-          data: [40, 39, 10, 40, 39, 80, 40],
-        },
-      ],
-      options: {
-        // We always want responsive: true,maintainAspectRatio: false.
-        responsive: true,
-        maintainAspectRatio: false,
-        // If the user is looking at a milestone, we're gonna set the min value
-        // to 0, so the burndown is a bit clearer.
-        scales: null,
-      }
+      chartData: null,
     };
   },
   methods: {
-    startRender: function () {
-      this.renderChart(
-        {
-          labels: this.labels,
-          datasets: this.datasets,
-        },
-        this.options
-      );
-    },
     refreshData: function () {
       this.loading = true;
       this.labels = [];
@@ -49,32 +32,42 @@ export default {
         .then((response) => {
           if (response.data.success) {
             const graphData = response.data.graphData;
-            this.labels = graphData.labels;
-            this.datasets = graphData.datasets;
+
+            let newChartData = {};
+
+            newChartData.labels = graphData.labels;
+            newChartData.datasets = graphData.datasets;
+            newChartData.options = { responsive: true, maintainAspectRatio: false, scales: null }
 
             // If the user is looking at a milestone, we're gonna set the min
             // value to 0, so the burndown is a bit clearer. Otherwise, just
             // clear that out.
             if (this.inputQuery.milestones) {
-              this.options.scales = { "yAxes":[ { ticks: { "beginAtZero": true }} ] };
+              newChartData.options.scales = { "yAxes": [{ ticks: { "beginAtZero": true } }] };
             }
-            else{
-              this.options.scales = null;
+            else {
+              newChartData.options.scales = null;
             }
 
-            for (let i = 0; i < this.datasets.length; i++) {
-              let datasetItem = this.datasets[i];
-              datasetItem.backgroundColor = this.chartColors[i % this.chartColors.length];
-
+            for (let i = 0; i < newChartData.datasets.length; i++) {
+              let datasetItem = newChartData.datasets[i];
+              
+              // Set the line color
+              datasetItem.borderColor = this.chartColors[i % this.chartColors.length];
+              
+              // Set the fill color
+              datasetItem.backgroundColor = this.chartColors[i % this.chartColors.length] + '80'; // add transparency to the fill color
+              
               // If there's a ton of data, the points on the graph only add
               // noise. Setting this to line will remove the points altogether.
               if (datasetItem.data.length > 50) {
-                datasetItem.pointStyle='line';
+                datasetItem.pointStyle = 'line';
               }
             }
 
+            this.chartData = newChartData;
+
             this.loading = false;
-            this.startRender();
           } else {
             // TODO Add in some error catching condition
             console.log(response);

webinterface/src/components/RepoGraphs/PieGraphBase.vue

@@ -1,9 +1,16 @@
+<template>
+  <Doughnut v-if="!loading" :data="chartData" />
+</template>
+
 <script>
+import 'chart.js/auto';
 import { Doughnut } from "vue-chartjs";
 
 export default {
-  extends: Doughnut,
   name: "PieGraphBase",
+  components: {
+    Doughnut,
+  },
   props: {
     inputQuery: Object,
     chartEndPoint: String,
@@ -12,26 +19,10 @@ export default {
   data() {
     return {
       loading: true,
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
-      datasets: [
-        {
-          label: "Data One",
-          backgroundColor: "#f87979",
-          data: [40, 39, 10, 40, 39, 80, 40],
-        },
-      ],
+      chartData: null,
     };
   },
   methods: {
-    startRender: function () {
-      this.renderChart(
-        {
-          labels: this.labels,
-          datasets: this.datasets,
-        },
-        { responsive: true, maintainAspectRatio: false }
-      );
-    },
     shadeColor: function (color, percent) {
       // Credit to this Stack overflow https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
       // Thank you Pablo! :)
@@ -64,8 +55,11 @@ export default {
       this.$http.post(this.chartEndPoint, this.inputQuery).then((response) => {
         if (response.data.success) {
           const graphData = response.data.graphData;
-          this.labels = graphData.labels;
-          this.datasets = graphData.datasets;
+
+          let newChartData = {};
+
+          newChartData.labels = graphData.labels;
+          newChartData.datasets = graphData.datasets;
 
           let shadeAmount = 50;
           let repoCount = this.datasets.length;
@@ -74,8 +68,8 @@ export default {
             shadeAmount = 90 / repoCount;
           }
 
-          for (let i = 0; i < this.datasets.length; i++) {
-            let datasetItem = this.datasets[i];
+          for (let i = 0; i < newChartData.datasets.length; i++) {
+            let datasetItem = newChartData.datasets[i];
             let repoNumber = i;
             let backgroundColorArray = [];
 
@@ -88,8 +82,9 @@ export default {
             datasetItem.backgroundColor = backgroundColorArray;
           }
 
+          this.chartData = newChartData;
+
           this.loading = false;
-          this.startRender();
         } else {
           // TODO Add in some error catching condition
           console.log(response);