59 lines
1.2 KiB
JavaScript
59 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import {
|
|
Chart,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
} from "chart.js";
|
|
import styles from "./Graph.module.sass";
|
|
|
|
export default function Graph(props) {
|
|
Chart.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
);
|
|
|
|
const accounts = [
|
|
...new Set(
|
|
props.transactions
|
|
.map((txn) => {
|
|
return txn.parts.map((part) => {
|
|
return part.account;
|
|
});
|
|
})
|
|
.flat()
|
|
),
|
|
];
|
|
|
|
return (
|
|
<div className={styles.graph}>
|
|
<Line
|
|
options={{ responsive: true, maintainAspectRatio: false }}
|
|
data={{
|
|
labels: ["JAN", "FEB", "MAR"],
|
|
datasets: accounts.map((account) => {
|
|
return {
|
|
label: account,
|
|
data: [1, 2, 4],
|
|
// backgroundColor: getComputedStyle(
|
|
// document.documentElement
|
|
// ).getPropertyValue("--color-blue"),
|
|
// borderColor: document.documentElement.style.getPropertyValue("--color-blue"),
|
|
};
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|