You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.5 KiB
84 lines
2.5 KiB
import { Doughnut } from "react-chartjs-2";
|
|
import { Chart as ChartJS, ArcElement, Tooltip, Legend, defaults } from 'chart.js';
|
|
|
|
import { AppProvider } from "../context/AppContext";
|
|
import { useState, useEffect } from 'react'
|
|
import { getSessionKey } from '../utils/utils.js'
|
|
|
|
ChartJS.register(ArcElement, Tooltip, Legend);
|
|
|
|
export default function CategorizedBudget() {
|
|
const [chartData, setChartData] = useState(null);
|
|
|
|
useEffect(() => {
|
|
async function getChartData() {
|
|
try {
|
|
fetch('http://127.0.0.1:3030/w/budget', {
|
|
method: 'GET',
|
|
headers: {
|
|
'x-session-key' : 'b36efa01-7824-4f61-a274-63131b58d8fe',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status != 200) {
|
|
console.log(data.error);
|
|
} else {
|
|
const chartData = {
|
|
labels: [data.categories.length > 0 ? data.categories : "no expenses"],
|
|
datasets: [
|
|
{
|
|
data: data.expenses_by_category.length > 0
|
|
? data.expenses_by_category.map(category => {
|
|
return category['whole']
|
|
})
|
|
: [1],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)',
|
|
],
|
|
borderColor: [
|
|
"black"
|
|
],
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
}
|
|
setChartData(chartData);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
} catch(error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
getChartData();
|
|
}, []);
|
|
|
|
if (!chartData) {
|
|
return <p>Loading...</p>
|
|
}
|
|
|
|
return (
|
|
<div className="widget">
|
|
<h4>Expenses by Category</h4>
|
|
<Doughnut className="w-100 h-auto"
|
|
data={chartData}
|
|
options={{
|
|
plugins: {
|
|
legend: {
|
|
position: 'right'
|
|
}
|
|
},
|
|
responsive: true
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
} |