Ryujinx_Mirror/Ryujinx-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chart

Browse source
This commit is contained in:
Isaac Marovitz 2023-05-30 22:11:24 -04:00
parent b6293e9774
commit bd26649188
No known key found for this signature in database
GPG key ID: 97250B2B09A132E1
3 changed files with 109 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
package-lock.json generated
View file

@ -10,8 +10,10 @@
"dependencies": {
"@heroicons/vue": "^1.0.6",
"axios": "^0.27.2",
"chart.js": "^4.3.0",
"dayjs": "^1.11.5",
"vue": "^3.2.37",
"vue-chartjs": "^5.2.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.3"
},
@ -176,6 +178,11 @@
"node": ">= 14"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -952,6 +959,17 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/chart.js": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
"integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=7"
}
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -3164,6 +3182,15 @@
"@vue/shared": "3.2.37"
}
},
"node_modules/vue-chartjs": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
"integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
"peerDependencies": {
"chart.js": "^4.1.1",
"vue": "^3.0.0-0 || ^2.7.0"
}
},
"node_modules/vue-eslint-parser": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@ -3412,6 +3439,11 @@
"@intlify/shared": "9.2.2"
}
},
"@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -3963,6 +3995,14 @@
"supports-color": "^7.1.0"
}
},
"chart.js": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
"integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
"requires": {
"@kurkle/color": "^0.3.0"
}
},
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -5412,6 +5452,12 @@
"@vue/shared": "3.2.37"
}
},
"vue-chartjs": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
"integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
"requires": {}
},
"vue-eslint-parser": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",

36
package.json
View file

@ -7,29 +7,31 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.37",
"vue-router": "^4.1.3",
"vue-i18n": "^9.2.2",
"@heroicons/vue": "^1.0.6",
"axios": "^0.27.2",
"dayjs": "^1.11.5"
"chart.js": "^4.3.0",
"dayjs": "^1.11.5",
"vue": "^3.2.37",
"vue-chartjs": "^5.2.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.2",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"typescript": "^4.6.4",
"vite": "^3.0.6",
"vue-tsc": "^0.39.5",
"prettier": "^2.7.1",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.3.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@types/node": "16.11.48"
"@types/node": "16.11.48",
"@vitejs/plugin-vue": "^3.0.2",
"@vue/eslint-config-typescript": "^11.0.0",
"autoprefixer": "^10.4.8",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.3.0",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.6.4",
"vite": "^3.0.6",
"vue-tsc": "^0.39.5"
}
}

50
src/views/CompatibilityPage.vue
View file

@ -3,32 +3,41 @@ import { IssueSearch } from "@/types";
import axios from "axios";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { Doughnut } from "vue-chartjs";
import { Chart, ArcElement, Title, Legend, Tooltip, Colors, ChartData } from 'chart.js'
Chart.register(ArcElement, Title, Legend, Tooltip, Colors);
const { t } = useI18n();
const data = ref<PlayableTier[]>([
const tierData = ref<PlayableTier[]>([
{
labelName: "status-playable",
prettyPrintName: "Playable",
color: "green",
count: 0
},
{
labelName: "status-ingame",
prettyPrintName: "In-Game",
color: "yellow",
count: 0
},
{
labelName: "status-menus",
prettyPrintName: "Menus",
color: "yellow",
count: 0
},
{
labelName: "status-boots",
prettyPrintName: "Boots",
color: "yellow",
count: 0
},
{
labelName: "status-nothing",
prettyPrintName: "Nothing",
color: "red",
count: 0
},
]);
@ -40,24 +49,53 @@ onMounted(() => {
interface PlayableTier {
labelName: string;
prettyPrintName: string;
color: string;
count: number;
}
const fetchStats = async () => {
try {
data.value.forEach(async tier => {
await Promise.all(tierData.value.map(async tier => {
const result = await axios.get<IssueSearch>(
`${import.meta.env.VITE_LABEL_SEARCH_URL}label:${tier.labelName}+state:open`
);
tier.count = result.data.total_count;
});
console.log(data.value);
}));
chartData.value = ({
labels: tierData.value.flatMap((tier) => tier.prettyPrintName),
datasets: [
{
data: tierData.value.flatMap((tier) => tier.count),
backgroundColor: tierData.value.flatMap((tier) => tier.color),
}
]
})
} catch (err) {
console.error(err);
}
}
const chartData = ref<ChartData<'doughnut'>>({
datasets: []
})
</script>
<template></template>
<template>
<div class="space-y-16 container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32">
<div class="text-center">
<h2 class="text-3xl md:text-4xl font-extrabold mb-4">
Compatibility
</h2>
<h3 class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600 lg:w-2/3 mx-auto">
{{ t("views.homepage.ourTeamDescription") }}
</h3>
</div>
<div class="container flex justify-center">
<Doughnut :data="chartData" />
</div>
</div>
</template>