Merge pull request #811 from thejaviertc/dev

v1.9.1

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "steam-workshop-stats",
 	"author": "javiertc",
-	"version": "1.9.0",
+	"version": "1.9.1",
 	"type": "module",
 	"homepage": "https://thejaviertc.github.io/steam-workshop-stats/",
 	"dependencies": {

src/languages/en.json

@@ -30,8 +30,8 @@
 		"dislikes": "Dislikes",
 		"addons": "Addons",
 		"addonsOf": "Addons of {username}",
-		"graphs": "Graphs",
-		"graphsOf": "Graphs of {username}"
+		"graph": "Graph",
+		"graphOf": "Graph of {username}"
 	},
 	"notifications": {
 		"disclaimer": "Disclaimer! This can take up to 30 seconds because the API is on a free hosting, so it has to wake up!"

src/languages/es.json

@@ -30,8 +30,8 @@
 		"dislikes": "Dislikes",
 		"addons": "Addons",
 		"addonsOf": "Addons de {username}",
-		"graphs": "Gráficos",
-		"graphsOf": "Gráficos de {username}"
+		"graph": "Gráfica",
+		"graphOf": "Gráfica de {username}"
 	},
 	"notifications": {
 		"disclaimer": "¡Atención! Si tarda un poco, es debido a que la API se está despertando. Si tarda más de 30 segundos, puede ser debido a un error."

src/languages/pt-BR.json

@@ -30,8 +30,8 @@
 		"dislikes": "Dislikes",
 		"addons": "Extensões",
 		"addonsOf": "Extensões de {username}",
-		"graphs": "Graphs",
-		"graphsOf": "Graphs of {username}"
+		"graph": "Graph",
+		"graphOf": "Graph of {username}"
 	},
 	"notifications": {
 		"disclaimer": "Atenção! se demorar por um tempo, é porque a API estava hibernando e demora um pouco a responder, se realmente demorar bastante é porque deve ter tido um erro."

src/languages/th.json

@@ -30,8 +30,8 @@
 		"dislikes": "คะแนนเชิงลบ",
 		"addons": "ม็อดของ",
 		"addonsOf": "ม็อดของ {username}",
-		"graphs": "Graphs",
-		"graphsOf": "Graphs of {username}"
+		"graph": "Graph",
+		"graphOf": "Graph of {username}"
 	},
 	"notifications": {
 		"disclaimer": "คำชี้แจง! อาจใช้เวลาในการโหลดครู่หนึ่งเพื่อปลุก API หากใช้เวลานานเกินไปอาจมีข้อผิดพลาด"

src/lib/Graphs.svelte → src/lib/Graph.svelte

@@ -2,21 +2,33 @@
 	import type IAddon from "$lib/interfaces/IAddon";
 	import type ISteamUser from "$lib/interfaces/ISteamUser";
 
-	import { _ } from "svelte-i18n";
 	import Chart from "chart.js/auto";
 	import { onMount } from "svelte";
+	import { _ } from "svelte-i18n";
 
 	export let steamUser: ISteamUser;
 
-	let basicDataGraph: any;
-	let scoreGraph: any;
-
+	let graph: any;
+	let graphsHeight: number = 300;
 	let graphConfig = {
 		type: "bar",
-		data: {},
+		data: prepareGraphData(steamUser),
 		options: {
 			indexAxis: "y",
+			scales: {
+				y: {
+					grid: {
+						color: "#666666",
+					},
+				},
+				x: {
+					grid: {
+						color: "#666666",
+					},
+				},
+			},
 			responsive: true,
+			maintainAspectRatio: false,
 			plugins: {
 				legend: {
 					position: "top",
@@ -26,33 +38,33 @@
 	};
 
 	onMount(() => {
-		let basicDataGraphConfig = { ...graphConfig };
-		basicDataGraphConfig.data = prepareBasicData(steamUser);
-
-		new Chart(basicDataGraph.getContext("2d"), basicDataGraphConfig);
-
-		let scoreGraphConfig = { ...graphConfig };
-		scoreGraphConfig.data = prepareScoreData(steamUser);
-
-		new Chart(scoreGraph.getContext("2d"), scoreGraphConfig);
+		new Chart(graph.getContext("2d"), graphConfig);
 	});
 
 	/**
-	 * Prepares the data for the graph of Basic Data
+	 * Prepares the data for the graph
 	 */
-	function prepareBasicData(steamUser: ISteamUser) {
+	function prepareGraphData(steamUser: ISteamUser) {
+		graphsHeight = graphsHeight + steamUser.addons.length * 150;
+
 		return {
 			labels: steamUser.addons.map(function (addon: IAddon) {
-				return addon["title"];
+				let title = addon["title"];
+
+				if (title.length >= 30) {
+					title = title.substring(0, 27) + "...";
+				}
+
+				return title;
 			}),
 			datasets: [
 				{
 					label: $_("stats.views"),
 					data: steamUser.addons.map(function (addon: IAddon) {
 						return addon["views"];
 					}),
-					borderColor: "rgb(25, 135, 84)",
-					backgroundColor: "rgba(25, 135, 84, 0.5)",
+					borderColor: "rgb(96, 165, 250)",
+					backgroundColor: "rgba(96, 165, 250, 0.5)",
 					minBarLength: 10,
 				},
 				{
@@ -69,23 +81,10 @@
 					data: steamUser.addons.map(function (addon: IAddon) {
 						return addon["favorites"];
 					}),
-					borderColor: "rgb(220, 53, 69)",
-					backgroundColor: "rgba(220, 53, 69, 0.5)",
+					borderColor: "rgb(126, 34, 206)",
+					backgroundColor: "rgba(126, 34, 206, 0.5)",
 					minBarLength: 10,
 				},
-			],
-		};
-	}
-
-	/**
-	 * Prepares the data for the graph of Score
-	 */
-	function prepareScoreData(steamUser: ISteamUser) {
-		return {
-			labels: steamUser.addons.map(function (addon: IAddon) {
-				return addon["title"];
-			}),
-			datasets: [
 				{
 					label: $_("stats.likes"),
 					data: steamUser.addons.map(function (addon: IAddon) {
@@ -109,10 +108,9 @@
 	}
 </script>
 
-<div class="container bg-secondary mx-auto mt-8 px-10 py-6 rounded-xl">
-	<canvas bind:this={basicDataGraph} />
-</div>
-
-<div class="container bg-secondary mx-auto mt-8 px-10 py-6 rounded-xl">
-	<canvas bind:this={scoreGraph} />
+<div
+	class="container bg-secondary mx-auto mt-8 px-10 py-6 rounded-xl"
+	style="height: {graphsHeight}px"
+>
+	<canvas bind:this={graph} />
 </div>

src/routes/+page.svelte

@@ -13,7 +13,7 @@
 	<h1>{$_("title")}</h1>
 	<h4 class="my-4">{$_("description")}</h4>
 	<div class="my-6">
-		<Button class="btn-disabled mb-4 sm:mb-0" faIcon={faChartLine} link={base}
+		<Button class="btn btn-neutral mb-4 sm:mb-0" faIcon={faChartLine} link={base}
 			>{$_("actions.trackMyStats")}</Button
 		>
 		<!-- TODO: Add btn-outline -->

src/routes/fetch-user/+page.svelte

@@ -14,15 +14,15 @@
 		faUser,
 	} from "@fortawesome/free-solid-svg-icons";
 
-	import Graphs from "$lib/Graphs.svelte";
+	import Graph from "$lib/Graph.svelte";
+	import Stat from "$lib/Stat.svelte";
 	import Fa from "svelte-fa";
 	import { _ } from "svelte-i18n";
-	import Stat from "$lib/Stat.svelte";
 
 	let oldUrl: string = "";
 	let url: string = "";
 	let isSubmitted: boolean = false;
-	let tab: string = "addon";
+	let tab: string = "addons";
 
 	const apiUrl =
 		process.env.NODE_ENV === "development"
@@ -101,7 +101,7 @@
 		<input
 			type="text"
 			class="input input-bordered input-accent text-center w-3/4 my-6"
-			placeholder="{$_("misc.example")} https://steamcommunity.com/id/javiertc/"
+			placeholder="{$_('misc.example')} https://steamcommunity.com/id/javiertc/"
 			bind:value={url}
 			required
 		/>
@@ -156,18 +156,18 @@
 					<div class="invisible lg:visible my-8">
 						<button
 							on:click={changeTab}
-							value="addon"
-							class="mx-2 btn btn-accent {tab === "addon" ? "" : "btn-outline"}"
+							value="addons"
+							class="mx-2 btn btn-accent {tab === 'addons' ? '' : 'btn-outline'}"
 							>{$_("stats.addons")}</button
 						>
 						<button
 							on:click={changeTab}
-							value="graphs"
-							class="mx-2 btn btn-accent {tab === "graphs" ? "" : "btn-outline"}"
-							>{$_("stats.graphs")}</button
+							value="graph"
+							class="mx-2 btn btn-accent {tab === 'graph' ? '' : 'btn-outline'}"
+							>{$_("stats.graph")}</button
 						>
 					</div>
-					{#if tab === "addon"}
+					{#if tab === "addons"}
 						<h2 class="mb-8">
 							{$_("stats.addonsOf", {
 								values: { username: steamUser.username },
@@ -190,13 +190,13 @@
 								/>
 							{/each}
 						</div>
-					{:else}
+					{:else if tab === "graph"}
 						<h2>
-							{$_("stats.graphsOf", {
+							{$_("stats.graphOf", {
 								values: { username: steamUser.username },
 							})}
 						</h2>
-						<Graphs {steamUser} />
+						<Graph {steamUser} />
 					{/if}
 				{:else}
 					<h2 class="text-center">