www-next/components/RepoSummary/RepoSummary.jsx

45 lines
1.1 KiB
JavaScript

import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart, CategoryScale, BarElement, LogarithmicScale } from "chart.js";
import styles from "./RepoSummary.module.sass";
Chart.register(CategoryScale, BarElement, LogarithmicScale);
function sortByValue(obj) {
return Object.entries(obj).sort(([, a], [, b]) => b - a);
}
export function RepoSummary(props) {
const langs = sortByValue(props.stats.languages);
console.log(props.publicGithubRepos);
return (
<div className={styles.container}>
<Bar
options={{
indexAxis: "y",
responsive: true,
scales: {
myScale: {
type: "logarithmic",
position: "bottom",
},
},
}}
data={{
labels: langs.map((obj) => {
return obj[0];
}),
datasets: [
{
label: "D1",
data: langs.map((obj) => {
return obj[1];
}),
backgroundColor: "#355070",
},
],
}}
/>
</div>
);
}