mirror of
https://github.com/Ryujinx/Ryujinx-Website.git
synced 2024-06-02 21:28:47 +02:00
Chart
This commit is contained in:
Isaac Marovitz
parent
b6293e9774
commit
bd26649188
46
package-lock.json
generated
46
package-lock.json
generated
|
|
@ -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
36
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user