Analyze MultiversX address
Last updated
Last updated
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
ArcElement,
ChartOptions
} from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
ArcElement
);
export function UserProfileAnalyzeChart({
labelsByWeight
}) {
const labelsFromProfile = labelsByWeight ? Object.keys(labelsByWeight) : [];
const dataFromProfile = labelsByWeight ? Object.values(labelsByWeight) : [];
const data = {
labels: labelsFromProfile,
datasets: [
{
label: 'percent',
data: dataFromProfile,
backgroundColor: [
'rgba(255, 145, 0, 0.1)',
'rgba(255, 0, 145, 0.1)',
'rgba(145, 255, 0, 0.1)',
'rgba(255, 0, 0, 0.1)',
'rgba(0, 255, 145, 0.1)',
'rgba(255, 145, 145, 0.1)',
'rgba(145, 0, 255, 0.1)',
'rgba(255, 255, 0, 0.1)'
],
borderColor: [
'rgba(255, 145, 0, 1)',
'rgba(255, 0, 145, 1)',
'rgba(145, 255, 0, 1)',
'rgba(255, 0, 0, 1)',
'rgba(0, 255, 145, 1)',
'rgba(255, 145, 145, 1)',
'rgba(145, 0, 255, 1)',
'rgba(255, 255, 0, 1)'
],
borderWidth: 1,
pointRadius: 0,
tension: 1,
},
],
};
const options = {
plugins: {
legend: {
align: "center",
position: "right",
}
}
};
return (
<Doughnut data={data} options={options} />
);
}import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
ArcElement,
ChartOptions
} from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
ArcElement
);
export function UserProfileAnalyzeChart({
labelsByWeight
}: {
labelsByWeight: { [key: string]: number; }
}) {
const labelsFromProfile = labelsByWeight ? Object.keys(labelsByWeight) : [];
const dataFromProfile = labelsByWeight ? Object.values(labelsByWeight) : [];
const data = {
labels: labelsFromProfile,
datasets: [
{
label: 'percent',
data: dataFromProfile,
backgroundColor: [
'rgba(255, 145, 0, 0.1)',
'rgba(255, 0, 145, 0.1)',
'rgba(145, 255, 0, 0.1)',
'rgba(255, 0, 0, 0.1)',
'rgba(0, 255, 145, 0.1)',
'rgba(255, 145, 145, 0.1)',
'rgba(145, 0, 255, 0.1)',
'rgba(255, 255, 0, 0.1)'
],
borderColor: [
'rgba(255, 145, 0, 1)',
'rgba(255, 0, 145, 1)',
'rgba(145, 255, 0, 1)',
'rgba(255, 0, 0, 1)',
'rgba(0, 255, 145, 1)',
'rgba(255, 145, 145, 1)',
'rgba(145, 0, 255, 1)',
'rgba(255, 255, 0, 1)'
],
borderWidth: 1,
pointRadius: 0,
tension: 1,
},
],
};
const options: ChartOptions<"doughnut"> = {
plugins: {
legend: {
align: "center",
position: "right",
}
}
};
return (
<Doughnut data={data} options={options} />
);
}