From 4b9cf14e11a57017244715405f03b8bb86354a53 Mon Sep 17 00:00:00 2001
From: Lucas  Song <lucas7song@gmail.com>
Date: Wed, 28 Feb 2024 15:59:35 -0800
Subject: [PATCH] formatting and remove unused packages

---
 package-lock.json                             | 308 +-----------------
 package.json                                  |   1 -
 .../reports/DistributionChartFacet.vue        |   9 +-
 .../reports/DistributionChartSupport.vue      |  61 ++--
 src/components/reports/tasks/TaskReport.vue   |  57 +++-
 src/pages/ScoreReport.vue                     | 138 +++++---
 6 files changed, 185 insertions(+), 389 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 732514d14..30d8c79c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,6 @@
         "emailjs-com": "^3.2.0",
         "firebase": "^9.14.0",
         "html2canvas": "^1.4.1",
-        "html2pdf.js": "^0.9.0",
         "jose": "^4.14.4",
         "jspdf": "^2.5.1",
         "list": "^2.0.19",
@@ -6542,12 +6541,6 @@
       "version": "4.2.2",
       "license": "Apache-2.0"
     },
-    "node_modules/abab": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
-      "integrity": "sha512-I+Wi+qiE2kUXyrRhNsWv6XsjUTBJjSoVSctKNBfLG5zG/Xe7Rjbxf13+vqYHNTwHaFU+FtSlVxOCTiMEVtPv0A==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead"
-    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "license": "ISC"
@@ -6573,25 +6566,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-globals": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
-      "integrity": "sha512-j3/4pkfih8W4NK22gxVSXcEonTpAHOHh0hu5BoZrKcOsW/4oBPxTi4Yk3SAj+FhC1f3+bRTkXdm4019gw1vg9g==",
-      "dependencies": {
-        "acorn": "^2.1.0"
-      }
-    },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
-      "integrity": "sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/acorn-import-assertions": {
       "version": "1.9.0",
       "license": "MIT",
@@ -6807,14 +6781,6 @@
       "dev": true,
       "license": "Python-2.0"
     },
-    "node_modules/array-equal": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.2.tgz",
-      "integrity": "sha512-gUHx76KtnhEgB3HOuFYiCm3FIdEs6ocM2asHvNTkfu/Y09qQVrrVVaOKENmS2KkSaGoxgXNqC+ZVtR/n0MOkSA==",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "license": "MIT"
@@ -9215,19 +9181,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
-    },
-    "node_modules/cssstyle": {
-      "version": "0.2.37",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
-      "integrity": "sha512-FUpKc+1FNBsHUr9IsfSGCovr8VuGOiiuzlgCyppKBjJi2jYTOFLN3oiiNRMIvYqbFzF38mqKj4BgcevzU5/kIA==",
-      "dependencies": {
-        "cssom": "0.3.x"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "license": "MIT"
@@ -9942,6 +9895,7 @@
     },
     "node_modules/deep-is": {
       "version": "0.1.4",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/default-browser": {
@@ -10554,11 +10508,6 @@
       "version": "1.4.1",
       "license": "MIT"
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
-    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "hasInstallScript": true,
@@ -10623,91 +10572,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/escodegen": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=4.0"
-      },
-      "optionalDependencies": {
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/escodegen/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/escodegen/node_modules/levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
-      "dependencies": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/escodegen/node_modules/optionator": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dependencies": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.6",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "word-wrap": "~1.2.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/escodegen/node_modules/prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/escodegen/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/escodegen/node_modules/type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
-      "dependencies": {
-        "prelude-ls": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/eslint": {
       "version": "8.55.0",
       "dev": true,
@@ -11380,6 +11244,7 @@
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-printf": {
@@ -11496,11 +11361,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/file-saver": {
-      "version": "1.3.8",
-      "resolved": "git+ssh://git@github.com/eligrey/FileSaver.js.git#e865e37af9f9947ddcced76b549e27dc45c1cb2e",
-      "license": "MIT"
-    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "license": "MIT",
@@ -12912,77 +12772,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/html2pdf.js": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.9.0.tgz",
-      "integrity": "sha512-IIhGjx0DJ2JBLSfhLn1hphJ4PWCQNnT8OnybPxEybA9+Qz3bbsrCaGXDX0rq5zLdKPCL82g2plMjgaAKUz41mw==",
-      "dependencies": {
-        "es6-promise": "^4.1.1",
-        "html2canvas": "^1.0.0-alpha.12",
-        "jspdf": "^1.3.5"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/base64-arraybuffer": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
-      "integrity": "sha512-437oANT9tP582zZMwSvZGy2nmSeAb8DW2me3y+Uv1Wp2Rulr8Mqlyrv3E7MLxmsiaPSMMDmiDVzgE+e8zlMx9g==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/canvg": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/canvg/-/canvg-1.5.3.tgz",
-      "integrity": "sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==",
-      "dependencies": {
-        "jsdom": "^8.1.0",
-        "rgbcolor": "^1.0.1",
-        "stackblur-canvas": "^1.4.1",
-        "xmldom": "^0.1.22"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/canvg/node_modules/stackblur-canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz",
-      "integrity": "sha512-TfbTympL5C1K+F/RizDkMBqH18EkUKU8V+4PphIXR+fWhZwwRi3bekP04gy2TOwOT3R6rJQJXAXFrbcZde7wow=="
-    },
-    "node_modules/html2pdf.js/node_modules/css-line-break": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
-      "integrity": "sha512-Y/Us0vILnzQj21UxqoZTLaHGrePQKXcZygQIoxNmpII06LJVCgB2sFKmD7PItNDHIAqHWjrmJPVohIywWYKAmQ==",
-      "dependencies": {
-        "base64-arraybuffer": "^0.1.5"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/html2canvas": {
-      "version": "1.0.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
-      "integrity": "sha512-+mr9jumxMQO9ZZwf7nUp3tonOIaI6tAAV0yciDMuX0tetV4wz/lFc2AxAYndxANe7/O67DKLgDLjT+ZcVUSQrw==",
-      "dependencies": {
-        "css-line-break": "1.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/jspdf": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-1.5.3.tgz",
-      "integrity": "sha512-J9X76xnncMw+wIqb15HeWfPMqPwYxSpPY8yWPJ7rAZN/ZDzFkjCSZObryCyUe8zbrVRNiuCnIeQteCzMn7GnWw==",
-      "dependencies": {
-        "canvg": "1.5.3",
-        "file-saver": "github:eligrey/FileSaver.js#1.3.8",
-        "html2canvas": "1.0.0-alpha.12",
-        "omggif": "1.0.7",
-        "promise-polyfill": "8.1.0",
-        "stackblur-canvas": "2.2.0"
-      }
-    },
-    "node_modules/html2pdf.js/node_modules/stackblur-canvas": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.2.0.tgz",
-      "integrity": "sha512-5Gf8dtlf8k6NbLzuly2NkGrkS/Ahh+I5VUjO7TnFizdJtgpfpLLEdQlLe9umbcnZlitU84kfYjXE67xlSXfhfQ=="
-    },
     "node_modules/htmlescape": {
       "version": "1.1.1",
       "license": "MIT",
@@ -13847,55 +13636,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jsdom": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-8.5.0.tgz",
-      "integrity": "sha512-rvWfcn2O8SrXPaX5fTYIfPVwvnbU8DnZkjAXK305wfP67csyaJBhgg0F2aU6imqJ+lZmj9EmrBAXy6rWHf2/9Q==",
-      "dependencies": {
-        "abab": "^1.0.0",
-        "acorn": "^2.4.0",
-        "acorn-globals": "^1.0.4",
-        "array-equal": "^1.0.0",
-        "cssom": ">= 0.3.0 < 0.4.0",
-        "cssstyle": ">= 0.2.34 < 0.3.0",
-        "escodegen": "^1.6.1",
-        "iconv-lite": "^0.4.13",
-        "nwmatcher": ">= 1.3.7 < 2.0.0",
-        "parse5": "^1.5.1",
-        "request": "^2.55.0",
-        "sax": "^1.1.4",
-        "symbol-tree": ">= 3.1.0 < 4.0.0",
-        "tough-cookie": "^2.2.0",
-        "webidl-conversions": "^3.0.1",
-        "whatwg-url": "^2.0.1",
-        "xml-name-validator": ">= 2.0.1 < 3.0.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/acorn": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
-      "integrity": "sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/whatwg-url": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz",
-      "integrity": "sha512-sX+FT4N6iR0ZiqGqyDEKklyfMGR99zvxZD+LQ8IGae5uVGswQ7DOeLPB5KgJY8FzkwSzwqOXLQeVQvtOTSQU9Q==",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/xml-name-validator": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
-      "integrity": "sha512-jRKe/iQYMyVJpzPH+3HL97Lgu5HrCfii+qSo+TfjKHtOnvbnvdVfMYrn9Q34YV81M2e5sviJlI6Ko9y+nByzvA=="
-    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "license": "MIT",
@@ -20331,11 +20071,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/nwmatcher": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
-      "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ=="
-    },
     "node_modules/oauth-sign": {
       "version": "0.9.0",
       "license": "Apache-2.0",
@@ -20398,11 +20133,6 @@
       "version": "1.1.2",
       "license": "MIT"
     },
-    "node_modules/omggif": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.7.tgz",
-      "integrity": "sha512-KVVUF85EHKUB9kxxT2D8CksGgfayZKxWtH/+i34zbyDdxFHvsqQs+O756usW7uri2YBD8jE/8GgAsA6wVA1tjg=="
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "license": "MIT",
@@ -20833,11 +20563,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/parse5": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
-      "integrity": "sha512-w2jx/0tJzvgKwZa58sj2vAYq/S/K1QJfIB3cWYea/Iu1scFPDQQ3IQiVZTHWtRBwAjv2Yd7S/xeZf3XqLDb3bA=="
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "license": "MIT",
@@ -21806,11 +21531,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/promise-polyfill": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.0.tgz",
-      "integrity": "sha512-OzSf6gcCUQ01byV4BgwyUCswlaQQ6gzXc23aLQWhicvfX9kfsUiUhgt3CCQej8jDnl8/PhGF31JdHX2/MzF3WA=="
-    },
     "node_modules/promise.series": {
       "version": "0.2.0",
       "license": "MIT",
@@ -22342,6 +22062,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
       "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
       "engines": {
         "node": ">= 0.8.15"
       }
@@ -22688,6 +22409,7 @@
     },
     "node_modules/sax": {
       "version": "1.3.0",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/schema-utils": {
@@ -23747,11 +23469,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-    },
     "node_modules/synckit": {
       "version": "0.8.6",
       "dev": true,
@@ -25721,14 +25438,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/word-wrap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/wordwrap": {
       "version": "0.0.3",
       "license": "MIT",
@@ -25868,15 +25577,6 @@
       "version": "1.0.2",
       "license": "Apache-2.0"
     },
-    "node_modules/xmldom": {
-      "version": "0.1.31",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
-      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==",
-      "deprecated": "Deprecated due to CVE-2021-21366 resolved in 0.5.0",
-      "engines": {
-        "node": ">=0.1"
-      }
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "license": "MIT",
diff --git a/package.json b/package.json
index f21bda58e..4880446f9 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "emailjs-com": "^3.2.0",
     "firebase": "^9.14.0",
     "html2canvas": "^1.4.1",
-    "html2pdf.js": "^0.9.0",
     "jose": "^4.14.4",
     "jspdf": "^2.5.1",
     "list": "^2.0.19",
diff --git a/src/components/reports/DistributionChartFacet.vue b/src/components/reports/DistributionChartFacet.vue
index d873ec435..ce99299ae 100644
--- a/src/components/reports/DistributionChartFacet.vue
+++ b/src/components/reports/DistributionChartFacet.vue
@@ -4,8 +4,13 @@
     <div v-if="minGradeByRuns < 6" class="view-by-wrapper my-2" data-html2canvas-ignore="true">
       <div class="flex uppercase text-xs font-light">view scores by</div>
       <PvSelectButton
-v-model="scoreMode" :allow-empty="false" class="flex flex-row my-2 select-button"
-        :options="scoreModes" option-label="name" @change="handleModeChange" />
+        v-model="scoreMode"
+        :allow-empty="false"
+        class="flex flex-row my-2 select-button"
+        :options="scoreModes"
+        option-label="name"
+        @change="handleModeChange"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/reports/DistributionChartSupport.vue b/src/components/reports/DistributionChartSupport.vue
index 014aa4b05..901f07cab 100644
--- a/src/components/reports/DistributionChartSupport.vue
+++ b/src/components/reports/DistributionChartSupport.vue
@@ -3,8 +3,13 @@
   <div class="view-by-wrapper my-2" data-html2canvas-ignore="true">
     <div class="flex uppercase text-xs font-light">view support levels by</div>
     <PvSelectButton
-v-model="xMode" class="flex flex-row my-2 select-button" :allow-empty="false" :options="xModes"
-      option-label="name" @change="handleXModeChange" />
+      v-model="xMode"
+      class="flex flex-row my-2 select-button"
+      :allow-empty="false"
+      :options="xModes"
+      option-label="name"
+      @change="handleXModeChange"
+    />
   </div>
 </template>
 
@@ -155,32 +160,32 @@ const distributionBySupport = computed(() => {
         sort:
           props.facetMode.name === 'Grade'
             ? [
-              'Kindergarten',
-              1,
-              '1',
-              2,
-              '2',
-              3,
-              '3',
-              4,
-              '4',
-              5,
-              '5',
-              6,
-              '6',
-              7,
-              '7',
-              8,
-              '8',
-              9,
-              '9',
-              10,
-              '10',
-              11,
-              '11',
-              12,
-              '12',
-            ]
+                'Kindergarten',
+                1,
+                '1',
+                2,
+                '2',
+                3,
+                '3',
+                4,
+                '4',
+                5,
+                '5',
+                6,
+                '6',
+                7,
+                '7',
+                8,
+                '8',
+                9,
+                '9',
+                10,
+                '10',
+                11,
+                '11',
+                12,
+                '12',
+              ]
             : 'ascending',
         axis: {
           labelAngle: 0,
diff --git a/src/components/reports/tasks/TaskReport.vue b/src/components/reports/tasks/TaskReport.vue
index 9a8f6dbde..41e7998b1 100644
--- a/src/components/reports/tasks/TaskReport.vue
+++ b/src/components/reports/tasks/TaskReport.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="'tab-view-description-'+taskId" class="flex flex-col items-center justify-center mx-2">
+  <div :id="'tab-view-description-' + taskId" class="flex flex-col items-center justify-center mx-2">
     <Accordion v-if="taskInfoById[taskId]" class="mb-5 w-full" :active-index="0">
       <AccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
         <div>
@@ -16,35 +16,64 @@
     </Accordion>
   </div>
   <!-- <div class="grid grid-cols-2 w-full space-around items-center p-3"> -->
-  <div v-if="tasksToDisplayGraphs.includes(taskId)" :id="'tab-view-chart-' + taskId" class='chart-toggle-wrapper'>
+  <div v-if="tasksToDisplayGraphs.includes(taskId)" :id="'tab-view-chart-' + taskId" class="chart-toggle-wrapper">
     <div v-if="orgType === 'district'" class="mb-3" data-html2canvas-ignore="true">
       <div class="flex uppercase text-xs font-light">view rows by</div>
       <PvSelectButton
-v-model="facetMode" class="flex flex-row my-2 select-button" :allow-empty="false"
-        :options="facetModes" option-label="name" />
+        v-model="facetMode"
+        class="flex flex-row my-2 select-button"
+        :allow-empty="false"
+        :options="facetModes"
+        option-label="name"
+      />
     </div>
     <div class="chart-wrapper align-items-center">
       <div class="h-full flex flex-column align-items-center">
         <DistributionChartSupport
-:initialized="initialized" :administration-id="administrationId" :org-type="orgType"
-          :org-id="orgId" :task-id="taskId" :runs="runs" :facet-mode="facetMode" />
+          :initialized="initialized"
+          :administration-id="administrationId"
+          :org-type="orgType"
+          :org-id="orgId"
+          :task-id="taskId"
+          :runs="runs"
+          :facet-mode="facetMode"
+        />
       </div>
       <div class="h-full flex">
         <DistributionChartFacet
-:initialized="initialized" :administration-id="administrationId" :org-type="orgType"
-          :org-id="orgId" :task-id="taskId" :runs="runs" :facet-mode="facetMode" :min-grade-by-runs="minGradeByRuns" />
+          :initialized="initialized"
+          :administration-id="administrationId"
+          :org-type="orgType"
+          :org-id="orgId"
+          :task-id="taskId"
+          :runs="runs"
+          :facet-mode="facetMode"
+          :min-grade-by-runs="minGradeByRuns"
+        />
       </div>
     </div>
   </div>
   <div class="my-2 mx-4">
     <SubscoreTable
-v-if="taskId === 'letter'" task-id="letter" :task-name="taskDisplayNames['letter'].name"
-      :administration-id="administrationId" :org-type="orgType" :org-id="orgId"
-      :administration-name="administrationInfo.name ?? undefined" :org-name="orgInfo.name ?? undefined" />
+      v-if="taskId === 'letter'"
+      task-id="letter"
+      :task-name="taskDisplayNames['letter'].name"
+      :administration-id="administrationId"
+      :org-type="orgType"
+      :org-id="orgId"
+      :administration-name="administrationInfo.name ?? undefined"
+      :org-name="orgInfo.name ?? undefined"
+    />
     <SubscoreTable
-v-if="taskId === 'pa'" task-id="pa" :task-name="taskDisplayNames['pa'].name"
-      :administration-id="administrationId" :org-type="orgType" :org-id="orgId"
-      :administration-name="administrationInfo.name ?? undefined" :org-name="orgInfo.name ?? undefined" />
+      v-if="taskId === 'pa'"
+      task-id="pa"
+      :task-name="taskDisplayNames['pa'].name"
+      :administration-id="administrationId"
+      :org-type="orgType"
+      :org-id="orgId"
+      :administration-name="administrationInfo.name ?? undefined"
+      :org-name="orgInfo.name ?? undefined"
+    />
   </div>
 </template>
 <script setup>
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 25ee84c1d..f5d0a3098 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -28,15 +28,25 @@
                 <div class="flex flex-row align-items-center gap-4" data-html2canvas-ignore="true">
                   <div class="uppercase text-sm text-gray-600">VIEW</div>
                   <PvSelectButton
-v-model="reportView" :options="reportViews" option-disabled="constant"
-                    :allow-empty="false" option-label="name" class="flex my-2 select-button" @change="handleViewChange">
+                    v-model="reportView"
+                    :options="reportViews"
+                    option-disabled="constant"
+                    :allow-empty="false"
+                    option-label="name"
+                    class="flex my-2 select-button"
+                    @change="handleViewChange"
+                  >
                   </PvSelectButton>
                 </div>
                 <div v-if="!isLoadingRunResults">
                   <PvButton
-class="flex flex-row" :icon="!exportLoading ? 'pi pi-download' : 'pi pi-spin pi-spinner'"
-                    :disabled="exportLoading" label="Export To Pdf" data-html2canvas-ignore="true"
-                    @click="handleExportToPdf" />
+                    class="flex flex-row"
+                    :icon="!exportLoading ? 'pi pi-download' : 'pi pi-spin pi-spinner'"
+                    :disabled="exportLoading"
+                    label="Export To Pdf"
+                    data-html2canvas-ignore="true"
+                    @click="handleExportToPdf"
+                  />
                 </div>
               </div>
             </div>
@@ -49,8 +59,13 @@ class="flex flex-row" :icon="!exportLoading ? 'pi pi-download' : 'pi pi-spin pi-
                 <div v-for="taskId of sortedAndFilteredTaskIds" :key="taskId" class="">
                   <div class="distribution-overview-wrapper">
                     <DistributionChartOverview
-:runs="runsByTaskId[taskId]" :initialized="initialized" :task-id="taskId"
-                      :org-type="props.orgType" :org-id="props.orgId" :administration-id="props.administrationId" />
+                      :runs="runsByTaskId[taskId]"
+                      :initialized="initialized"
+                      :task-id="taskId"
+                      :org-type="props.orgType"
+                      :org-id="props.orgId"
+                      :administration-id="props.administrationId"
+                    />
                     <div className="task-description mt-3">
                       <span class="font-bold">
                         {{ descriptionsByTaskId[taskId]?.header ? descriptionsByTaskId[taskId].header : '' }}
@@ -94,32 +109,57 @@ class="flex flex-row" :icon="!exportLoading ? 'pi pi-download' : 'pi pi-spin pi-
         <!-- Main table -->
         <div v-else-if="scoresCount === 0" class="no-scores-container">
           <h3>No scores found.</h3>
-          <span>The filters applied have no matching scores.
+          <span
+            >The filters applied have no matching scores.
             <PvButton text @click="resetFilters">Reset filters</PvButton>
           </span>
         </div>
         <div v-else-if="scoresDataQuery?.length ?? 0 > 0">
           <RoarDataTable
-:data="tableData" :columns="columns" :total-records="scoresCount" lazy :page-limit="pageLimit"
-            :loading="isLoadingScores || isFetchingScores" data-cy="roar-data-table" :lazy-pre-sorting="sortDisplay"
-            @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" @export-all="exportAll"
-            @export-selected="exportSelected">
+            :data="tableData"
+            :columns="columns"
+            :total-records="scoresCount"
+            lazy
+            :page-limit="pageLimit"
+            :loading="isLoadingScores || isFetchingScores"
+            data-cy="roar-data-table"
+            :lazy-pre-sorting="sortDisplay"
+            @page="onPage($event)"
+            @sort="onSort($event)"
+            @filter="onFilter($event)"
+            @export-all="exportAll"
+            @export-selected="exportSelected"
+          >
             <template #filterbar>
               <div v-if="schoolsInfo" class="flex flex-row gap-2">
                 <span class="p-float-label">
                   <PvMultiSelect
-id="ms-school-filter" v-model="filterSchools" style="width: 20rem; max-width: 25rem"
-                    :options="schoolsInfo" option-label="name" option-value="id" :show-toggle-all="false"
-                    selected-items-label="{0} schools selected" data-cy="filter-by-school" />
+                    id="ms-school-filter"
+                    v-model="filterSchools"
+                    style="width: 20rem; max-width: 25rem"
+                    :options="schoolsInfo"
+                    option-label="name"
+                    option-value="id"
+                    :show-toggle-all="false"
+                    selected-items-label="{0} schools selected"
+                    data-cy="filter-by-school"
+                  />
                   <label for="ms-school-filter">Filter by School</label>
                 </span>
               </div>
               <div class="flex flex-row gap-2">
                 <span class="p-float-label">
                   <PvMultiSelect
-id="ms-grade-filter" v-model="filterGrades" style="width: 20rem; max-width: 25rem"
-                    :options="gradeOptions" option-label="label" option-value="value" :show-toggle-all="false"
-                    selected-items-label="{0} grades selected" data-cy="filter-by-grade" />
+                    id="ms-grade-filter"
+                    v-model="filterGrades"
+                    style="width: 20rem; max-width: 25rem"
+                    :options="gradeOptions"
+                    option-label="label"
+                    option-value="value"
+                    :show-toggle-all="false"
+                    selected-items-label="{0} grades selected"
+                    data-cy="filter-by-grade"
+                  />
                   <label for="ms-school-filter">Filter by Grade</label>
                 </span>
               </div>
@@ -127,8 +167,13 @@ id="ms-grade-filter" v-model="filterGrades" style="width: 20rem; max-width: 25re
             <span>
               <label for="view-columns" class="view-label">View</label>
               <PvDropdown
-id="view-columns" v-model="viewMode" :options="viewOptions" option-label="label"
-                option-value="value" class="ml-2" />
+                id="view-columns"
+                v-model="viewMode"
+                :options="viewOptions"
+                option-label="label"
+                option-value="value"
+                class="ml-2"
+              />
             </span>
           </RoarDataTable>
         </div>
@@ -171,13 +216,22 @@ id="view-columns" v-model="viewMode" :options="viewOptions" option-label="label"
         </div>
         <PvTabView :active-index="activeTabIndex" @tab-change="onTabChange">
           <PvTabPanel
-v-for="taskId of sortedTaskIds" :key="taskId"
-            :header="taskDisplayNames[taskId]?.name ? ('ROAR-' + taskDisplayNames[taskId]?.name).toUpperCase() : ''">
+            v-for="taskId of sortedTaskIds"
+            :key="taskId"
+            :header="taskDisplayNames[taskId]?.name ? ('ROAR-' + taskDisplayNames[taskId]?.name).toUpperCase() : ''"
+          >
             <div :id="'tab-view-' + taskId">
               <TaskReport
-v-if="taskId" :task-id="taskId" :initialized="initialized" :administration-id="administrationId"
-                :runs="runsByTaskId[taskId]" :org-type="orgType" :org-id="orgId" :org-info="orgInfo"
-                :administration-info="administrationInfo" />
+                v-if="taskId"
+                :task-id="taskId"
+                :initialized="initialized"
+                :administration-id="administrationId"
+                :runs="runsByTaskId[taskId]"
+                :org-type="orgType"
+                :org-id="orgId"
+                :org-info="orgInfo"
+                :administration-info="administrationInfo"
+              />
             </div>
           </PvTabPanel>
         </PvTabView>
@@ -230,7 +284,7 @@ v-if="taskId" :task-id="taskId" :initialized="initialized" :administration-id="a
 <script setup>
 import { computed, ref, onMounted, watch, toRaw } from 'vue';
 import { storeToRefs } from 'pinia';
-import { jsPDF } from 'jspdf'
+import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
 import _toUpper from 'lodash/toUpper';
 import _round from 'lodash/round';
@@ -301,7 +355,7 @@ const handleViewChange = () => {
 
 const exportLoading = ref(false);
 
-const activeTabIndex = ref(0)
+const activeTabIndex = ref(0);
 
 function onTabChange(event) {
   event.preventDefault(); // Prevent the default scroll behavior
@@ -319,17 +373,16 @@ const addElementToPdf = async (element, document, yCounter, offset = 0) => {
     if (yCounter + scaledCanvasHeight + offset > 287) {
       document.addPage();
       yCounter = 10;
-    }
-    else {
+    } else {
       // Add Margin
-      yCounter += 5
+      yCounter += 5;
     }
 
-    document.addImage(imgData, 'JPEG', 10, yCounter, pageWidth, scaledCanvasHeight)
+    document.addImage(imgData, 'JPEG', 10, yCounter, pageWidth, scaledCanvasHeight);
     yCounter += scaledCanvasHeight;
   });
   return yCounter;
-}
+};
 
 const handleExportToPdf = async () => {
   exportLoading.value = true; // Set loading icon in button to prevent multiple clicks
@@ -337,7 +390,7 @@ const handleExportToPdf = async () => {
   let yCounter = 10; // yCounter tracks the y position in the PDF
 
   // Add At a Glance Charts and report header to the PDF
-  const atAGlanceCharts = document.getElementById('at-a-glance-charts')
+  const atAGlanceCharts = document.getElementById('at-a-glance-charts');
   if (atAGlanceCharts !== null) {
     yCounter = await addElementToPdf(atAGlanceCharts, doc, yCounter);
   }
@@ -347,12 +400,16 @@ const handleExportToPdf = async () => {
 
   for (const [i, taskId] of sortedTaskIds.value.entries()) {
     activeTabIndex.value = i;
-    await new Promise(resolve => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, 250));
 
     // Add Task Description and Task Chart to document
-    const tabViewDesc = document.getElementById('tab-view-description-' + taskId)
-    const tabViewChart = document.getElementById('tab-view-chart-' + taskId)
-    const chartHeight = tabViewChart && await html2canvas(document.getElementById('tab-view-chart-' + taskId)).then((canvas) => canvas.height * returnScaleFactor(canvas.width));
+    const tabViewDesc = document.getElementById('tab-view-description-' + taskId);
+    const tabViewChart = document.getElementById('tab-view-chart-' + taskId);
+    const chartHeight =
+      tabViewChart &&
+      (await html2canvas(document.getElementById('tab-view-chart-' + taskId)).then(
+        (canvas) => canvas.height * returnScaleFactor(canvas.width),
+      ));
 
     if (tabViewDesc !== null) {
       yCounter = await addElementToPdf(tabViewDesc, doc, yCounter, chartHeight);
@@ -362,17 +419,18 @@ const handleExportToPdf = async () => {
     }
   }
 
-  // Add Report Closing 
+  // Add Report Closing
   const closing = document.getElementById('score-report-closing');
   if (closing !== null) {
     yCounter = await addElementToPdf(closing, doc, yCounter);
   }
 
-  doc.save(`roar-scores-${_kebabCase(administrationInfo.value.name)}-${_kebabCase(orgInfo.value.name)}.pdf`)
+  doc.save(`roar-scores-${_kebabCase(administrationInfo.value.name)}-${_kebabCase(orgInfo.value.name)}.pdf`);
   exportLoading.value = false;
+  window.scrollTo(0, 0);
 
   return;
-}
+};
 
 // Queries for page
 const orderBy = ref([