installing chart.js via npm

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 %}

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') }}
 

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
   )
 );
 

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",

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",