71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { Bar } from 'react-chartjs-2';
|
|
import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useSkillDamageForAvatar } from '@/hooks/useSkillDamageForAvatar';
|
|
import { useDamageByTypeForAvatar } from '@/hooks/useDamageTypeForAvatar';
|
|
|
|
|
|
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
|
|
|
|
export default function SkillBarChart({ avatarId }: { avatarId: number }) {
|
|
const [mode, setMode] = useState<1 | 2>(2);
|
|
|
|
const transI18n = useTranslations('DataAnalysisPage');
|
|
const { labels: skillLabels, damageValues: skillDamageValues } = useSkillDamageForAvatar(avatarId);
|
|
const { labels: typeLabels, damageValues: typeDamageValues } = useDamageByTypeForAvatar(avatarId);
|
|
|
|
const colors = ['#f87171', '#facc15', '#34d399', '#60a5fa', '#a78bfa', '#fb923c'];
|
|
|
|
const data = {
|
|
labels: mode === 1 ? skillLabels.map(it => transI18n(it)) : typeLabels.map(it => transI18n(it)),
|
|
datasets: [
|
|
{
|
|
label: mode === 1
|
|
? transI18n('skill')
|
|
: transI18n('damage'),
|
|
data: mode === 1 ? skillDamageValues : typeDamageValues,
|
|
backgroundColor: colors.slice(0, (mode === 1 ? skillLabels : typeLabels).length),
|
|
borderColor: '#111',
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
};
|
|
|
|
const options = {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { precision: 0 },
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="mb-4 flex items-start gap-2 justify-end">
|
|
{[
|
|
{ mode: 1, label: `${transI18n("type")} 1`, className: "btn-primary" },
|
|
{ mode: 2, label: `${transI18n("type")} 2`, className: "btn-warning" },
|
|
].map(({ mode: m, label, className }) => (
|
|
<button
|
|
key={m}
|
|
onClick={() => setMode(m as 1 | 2)}
|
|
className={`btn btn-sm ${mode === m ? className : "btn-ghost"}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Bar data={data} options={options} />
|
|
</div>
|
|
);
|
|
}
|