Merge pull request #6 from donavon04/development

Tried to implement graph, no success

package-lock.json

@@ -9,7 +9,8 @@
       "dependencies": {
         "@unovis/svelte": "^1.4.1",
         "@unovis/ts": "^1.4.1",
-        "chart.js": "^4.4.3"
+        "chart.js": "^4.4.4",
+        "chartjs": "^0.3.24"
       },
       "devDependencies": {
         "@skeletonlabs/skeleton": "2.10.2",
@@ -2685,9 +2686,10 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
-      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2695,6 +2697,12 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/chartjs/-/chartjs-0.3.24.tgz",
+      "integrity": "sha512-h6G9qcDqmFYnSWqjWCzQMeOLiypS+pM6Fq2Rj7LPty8Kjx5yHonwwJ7oEHImZpQ2u9Pu36XGYfardvvBiQVrhg==",
+      "license": "MIT"
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@unovis/svelte": "^1.4.1",
     "@unovis/ts": "^1.4.1",
-    "chart.js": "^4.4.3"
+    "chart.js": "^4.4.4",
+    "chartjs": "^0.3.24"
   }
 }

src/lib/components/graph/graph.svelte

@@ -0,0 +1,31 @@
+<script>
+	import chartjs from 'chart.js/auto';
+	import { onMount } from 'svelte';
+
+	const chartValues = [20, 10, 5, 2, 20, 30, 45];
+	const chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+	let ctx;
+	let chartCanvas;
+	let chartData;
+
+	onMount(async (promise) => {
+		  ctx = chartCanvas.getContext('2d');
+			var chart = new chartjs(ctx, {
+				type: 'line',
+				data: {
+						labels: chartLabels,
+						datasets: [{
+								label: 'Revenue',
+								backgroundColor: 'rgb(255, 99, 132)',
+								borderColor: 'rgb(255, 99, 132)',
+								data: chartValues
+						}]
+				}
+		});
+
+	});
+</script>
+
+<div class="w-fill m-auto px-60  mt-10">
+	<canvas class="w-1/2" bind:this={chartCanvas} id="myChart"></canvas>
+</div>

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
+	import Chart from '$lib/components/graph/graph.svelte'
 
 	let homeBase = "https://apilicenses.mpe.ca";
 
@@ -82,6 +83,7 @@
 	onMount(() => {
 		fetchLicenses();
 		getCounts()
+
 	});
 
 	// Utility function to determine availability
@@ -215,7 +217,4 @@
 			</div>
 		</div>
 	{/each}
-</div>
-
-<div>This is where we will add a pretty graph</div>
-
+</div>