Updated font for the chart

JacobWeinbren · Jan 26, 2024 · f15eb0e · f15eb0e
1 parent 51c907f
commit f15eb0e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 18 deletions.
diff --git a/site/package.json b/site/package.json
@@ -20,8 +20,10 @@
 		"@mapbox/mapbox-gl-geocoder": "^5.0.2",
 		"astro": "^4.2.4",
 		"chart.js": "^4.4.1",
+		"fontfaceobserver": "^2.3.0",
 		"mapbox-gl": "^3.1.0",
 		"react-map-gl": "^7.1.7",
-		"tailwindcss": "^3.4.1"
+		"tailwindcss": "^3.4.1",
+		"webfontloader": "^1.6.28"
 	}
 }
diff --git a/site/src/components/Chart.astro b/site/src/components/Chart.astro
@@ -8,6 +8,7 @@
 
 	const chartElement = document.getElementById("chart");
 	let myChart;
+	console.log("Test");
 
 	if (chartElement) {
 		const ctx = (chartElement as HTMLCanvasElement).getContext("2d");
@@ -37,27 +38,20 @@
 							max: 100,
 							ticks: {
 								callback: (value) => `${value}%`,
-								font: { size: 16, family: "Inter" },
 							},
 						},
 						x: {
 							stacked: true, // Enable stacking
-							ticks: { font: { size: 16, family: "Inter" } },
 						},
 					},
 					plugins: {
 						title: {
 							display: true,
 							text: "Bloc Percentage at Polling Station",
-							font: { size: 16, family: "Inter" },
 							padding: { bottom: 20 },
 						},
 						legend: { display: false },
 						tooltip: {
-							titleFont: {
-								size: 16,
-								family: "Inter",
-							},
 							animation: false,
 							backgroundColor: "rgba(0, 0, 0, 1)",
 							callbacks: {
@@ -76,13 +70,9 @@
 									return `${truncatedPartyName}: ${percentage}%`;
 								},
 							},
-							bodyFont: {
-								size: 16,
-								family: "Inter",
-							},
 							usePointStyle: true,
 							boxPadding: 5,
-							padding: 10,
+							padding: 5,
 						},
 					},
 					elements: { bar: { borderRadius: 2 } },
@@ -165,7 +155,6 @@
 			myChart.data.datasets = myChart.data.datasets.filter((dataset) =>
 				newDatasets.includes(dataset)
 			);
-
 			myChart.update();
 		}
 	};

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -44,10 +44,6 @@ const dropdownHtml = `<label for="json-selector" class="sr-only">Select Knesset
 			href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
 			rel="stylesheet"
 		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
-			rel="stylesheet"
-		/>
 	</head>
 	<body>
 		<div id="geocoder" class="geocoder fixed top-4 left-4 z-10"></div>