60 lines
1.4 KiB
JavaScript
60 lines
1.4 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,
|
|
legend: {
|
|
labels: {
|
|
fontColor: "#ffffff",
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
type: "category",
|
|
position: "left",
|
|
ticks: {
|
|
color: "white",
|
|
},
|
|
},
|
|
x: {
|
|
type: "logarithmic",
|
|
position: "bottom",
|
|
ticks: {
|
|
color: "white",
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
data={{
|
|
labels: langs.map((obj) => {
|
|
return obj[0];
|
|
}),
|
|
datasets: [
|
|
{
|
|
label: "D1",
|
|
data: langs.map((obj) => {
|
|
return obj[1];
|
|
}),
|
|
backgroundColor: "#355070",
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|