diff --git a/package-lock.json b/package-lock.json index 13576dec..0d9d20e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "steam-workshop-stats", - "version": "1.9.0", + "version": "1.9.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "steam-workshop-stats", - "version": "1.9.0", + "version": "1.9.1", "dependencies": { "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", diff --git a/package.json b/package.json index e2bfa002..54da6ec7 100644 --- a/package.json +++ b/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": { diff --git a/src/languages/en.json b/src/languages/en.json index 855bbc38..d2e218a4 100644 --- a/src/languages/en.json +++ b/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!" diff --git a/src/languages/es.json b/src/languages/es.json index 04540d03..9b899b73 100644 --- a/src/languages/es.json +++ b/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." diff --git a/src/languages/pt-BR.json b/src/languages/pt-BR.json index cd486d0a..552d96d2 100644 --- a/src/languages/pt-BR.json +++ b/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." diff --git a/src/languages/th.json b/src/languages/th.json index 7dbfc675..206148d8 100644 --- a/src/languages/th.json +++ b/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 หากใช้เวลานานเกินไปอาจมีข้อผิดพลาด" diff --git a/src/lib/Graphs.svelte b/src/lib/Graph.svelte similarity index 59% rename from src/lib/Graphs.svelte rename to src/lib/Graph.svelte index 3df02744..5fa9b733 100644 --- a/src/lib/Graphs.svelte +++ b/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,24 +38,24 @@ }; 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: [ { @@ -51,8 +63,8 @@ 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 @@ } -
- -
- -
- +
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 60da5621..1e79b412 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -13,7 +13,7 @@

{$_("title")}

{$_("description")}

- diff --git a/src/routes/fetch-user/+page.svelte b/src/routes/fetch-user/+page.svelte index 921eba21..50b0f45f 100644 --- a/src/routes/fetch-user/+page.svelte +++ b/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 @@ @@ -156,18 +156,18 @@ - {#if tab === "addon"} + {#if tab === "addons"}

{$_("stats.addonsOf", { values: { username: steamUser.username }, @@ -190,13 +190,13 @@ /> {/each}

- {:else} + {:else if tab === "graph"}

- {$_("stats.graphsOf", { + {$_("stats.graphOf", { values: { username: steamUser.username }, })}

- + {/if} {:else}