From 6855a6ebe496a0592deb0a13ff1b6ed9e3a7bd4a Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Wed, 15 May 2024 15:35:39 -0700
Subject: [PATCH] installing chart.js via npm

---
 app/templates/admin_template.html            |  2 ++
 app/templates/views/dashboard/dashboard.html |  4 +++-
 gulpfile.js                                  |  5 -----
 package-lock.json                            | 17 +++++++++++++++++
 package.json                                 |  1 +
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index c243b9f0d..1cc33c90e 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -25,6 +25,8 @@
   {% endblock %}
   <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
   <script type="text/javascript" src="{{ asset_url('js/chart.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/chart.umd.js') }}"></script>
+
 {% endblock %}
 
 {% block pageTitle %}
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index f70980ca8..7a6c2e51f 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -21,7 +21,9 @@
     <h2 class="font-body-2xl line-height-sans-2 margin-0">
       Messages sent
     </h2>
-    <canvas id="myChart" width="900" height="400"></canvas>
+    <div class="chart-container">
+      <canvas id="myChart"></canvas>
+    </div>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
diff --git a/gulpfile.js b/gulpfile.js
index 4b9e39240..b23978ede 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -56,10 +56,6 @@ const copy = {
   gtm: () => {
     return src(paths.src + 'js/gtm_head.js')
       .pipe(dest(paths.dist + 'js/'));
-  },
-  chart: () => {
-    return src(paths.src + 'js/chart.js')
-      .pipe(dest(paths.dist + 'js/'));
   }
 };
 
@@ -206,7 +202,6 @@ const defaultTask = parallel(
     uswds.compile,
     uswds.copyAssets,
     copy.gtm,
-    copy.chart
   )
 );
 
diff --git a/package-lock.json b/package-lock.json
index e8be05aa4..c96f68f8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@uswds/uswds": "^3.4.1",
         "cbor-js": "0.1.0",
+        "chart.js": "^4.4.2",
         "govuk_frontend_toolkit": "8.1.0",
         "govuk-frontend": "2.13.0",
         "hogan": "1.0.2",
@@ -2527,6 +2528,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3946,6 +3952,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+      "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/cheerio": {
       "version": "1.0.0-rc.12",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
diff --git a/package.json b/package.json
index f0bbc97f4..b60893b57 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@uswds/uswds": "^3.4.1",
     "cbor-js": "0.1.0",
+    "chart.js": "^4.4.2",
     "govuk_frontend_toolkit": "8.1.0",
     "govuk-frontend": "2.13.0",
     "hogan": "1.0.2",