fix search regexp escape,

wrap chartjs with custom element

account.html

@@ -9,6 +9,7 @@
 		<link rel="stylesheet" href="css/style.css">
 		<link rel="stylesheet" href="css/nav.css">
 		<script src="scripts/account.js" type="module"></script>
+		<script src="scripts/chart.js" type="module"></script>
 		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 		<style>
 			@media screen and (width >= 1264px){
@@ -18,12 +19,6 @@
 					grid-gap: 0px;
 					justify-content: space-between;
 				}
-				#resource-container > * {
-					position: relative;
-					min-width: 200px;
-					max-width: 400px;
-					aspect-ratio: 1 / 1;
-				}
 			}
 			@media screen and (width <= 1264px) and (width >= 480px) {
 				#resource-container {

scripts/account.js

@@ -43,68 +43,61 @@ function populateResources (containerID, meta, resources) {
 			if (meta[resourceType].display) {
 				if (meta[resourceType].type === "list") {
 					resources[resourceType].forEach((listResource) => {
-						const chart = createResourceUsageChart(listResource.name, listResource.avail, listResource.used, listResource.max, null);
+						createResourceUsageChart(container, listResource.name, listResource.avail, listResource.used, listResource.max, null);
-						container.append(chart);
 					});
 				}
 				else {
-					const chart = createResourceUsageChart(meta[resourceType].name, resources[resourceType].avail, resources[resourceType].used, resources[resourceType].max, meta[resourceType]);
+					createResourceUsageChart(container, meta[resourceType].name, resources[resourceType].avail, resources[resourceType].used, resources[resourceType].max, meta[resourceType]);
-					container.append(chart);
 				}
 			}
 		});
 	}
 }
 
-function createResourceUsageChart (resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
+function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
-	const container = document.createElement("div");
+	const chart = document.createElement("custom-chart");
-	const canvas = document.createElement("canvas");
+	container.append(chart);
-	container.append(canvas);
 	const maxStr = parseNumber(resourceMax, resourceUnitData);
 	const usedStr = parseNumber(resourceUsed, resourceUnitData);
 	const usedRatio = resourceUsed / resourceMax;
 	const R = Math.min(usedRatio * 510, 255);
 	const G = Math.min((1 - usedRatio) * 510, 255);
 	const usedColor = `rgb(${R}, ${G}, 0)`;
-	createChart(canvas, {
+	chart.data = {
-		type: "pie",
+		chart: {
-		data: {
+			type: "pie",
-			labels: [
+			data: {
-				"Used",
+				labels: [
-				"Available"
+					"Used",
-			],
+					"Available"
-			datasets: [{
-				label: resourceName,
-				data: [resourceUsed, resourceAvail],
-				backgroundColor: [
-					usedColor,
-					"rgb(140, 140, 140)"
 				],
-				borderWidth: 0,
+				datasets: [{
-				hoverOffset: 4
+					label: resourceName,
-			}]
+					data: [resourceUsed, resourceAvail],
-		},
+					backgroundColor: [
-		options: {
+						usedColor,
-			plugins: {
+						"rgb(140, 140, 140)"
-				title: {
+					],
-					display: true,
+					borderWidth: 0,
-					position: "bottom",
+					hoverOffset: 4
-					text: [resourceName, `Used ${usedStr} of ${maxStr}`],
+				}]
-					color: "white"
+			},
-				},
+			options: {
-				legend: {
+				plugins: {
-					display: false
+					title: {
+						display: true,
+						position: "bottom",
+						text: [resourceName, `Used ${usedStr} of ${maxStr}`],
+						color: "white"
+					},
+					legend: {
+						display: false
+					}
 				}
 			}
-		}
+		},
-	});
+		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
-	canvas.role = "img";
+	};
-	canvas.ariaLabel = `${resourceName} used ${usedStr} of ${maxStr}`;
-	return container;
-}
-
-function createChart (ctx, data) {
-	return new window.Chart(ctx, data);
 }
 
 function parseNumber (value, unitData) {

scripts/chart.js

@@ -0,0 +1,35 @@
+class CustomChart extends HTMLElement {
+	constructor (data) {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
+            <style>
+                div {
+					min-width: 200px;
+					max-width: 400px;
+					aspect-ratio: 1 / 1;
+                }
+            </style>
+            <div>
+                <canvas>
+            </div>
+        `;
+        this.canvas = this.shadowRoot.querySelector("canvas");
+	}
+
+	set data (data) {
+		this.canvas.role = "img";
+		this.canvas.ariaLabel = data.ariaLabel;
+		createChart(this.canvas, data.chart);
+	}
+
+	get data () {
+		return null;
+	}
+}
+
+function createChart (ctx, data) {
+	return new Chart(ctx, data);
+}
+
+customElements.define("custom-chart", CustomChart);

scripts/draggable.js

@@ -5,7 +5,7 @@ const draggableItemUUIDs = {};
  * Get the data transfer source object by parsing its types. Valid draggable-item events have one type of the format `application/json/${uuid}`.
  * The function takes the entire type list from event.dataTransfer.types and returns the source object if valid, or null if invalid.
  * @param {*} typesList from event.dataTransfer.types
- * @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null 
+ * @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
  */
 function getDragSource (typesList) {
 	if (typesList.length !== 1) {

scripts/instance.js

@@ -77,8 +77,10 @@ class InstanceCard extends HTMLElement {
 
 		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
 		if (this.searchQuery) {
-			const regEscape = v => v.replace("[-[\]{}()*+?.,\\^$|#\s]", "\\$&");
+			const regExpEscape = v => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-			const nameParts = this.name.split(new RegExp(regEscape(`(${this.searchQuery})`), "ig"));
+			const escapedQuery = regExpEscape(this.searchQuery);
+			const searchRegExp = new RegExp(`(${escapedQuery})`, "gi");
+			const nameParts = this.name.split(searchRegExp);
 			for (let i = 0; i < nameParts.length; i++) {
 				const part = document.createElement("span");
 				part.innerText = nameParts[i];