- saving progress;

2025-02-10 14:35:51 +01:00
parent 7ff7d84c17
commit 7fa06b5b8c
12 changed files with 447 additions and 11 deletions
--- a/src/components/ChartDomandePerStato/index.js
+++ b/src/components/ChartDomandePerStato/index.js
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Tooltip, ResponsiveContainer, Cell, Pie, PieChart } from 'recharts';
+import { isEmpty } from 'ramda';
+import getBandoLabel from '../../helpers/getBandoLabel';
+
+// components
+
+
+const ChartDomandePerStato = ({ title, data = [] }) => {
+    const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
+    const [chartData, setChartData] = useState({});
+
+    const CustomTooltip = ({ active, payload }) => {
+        if (active && payload && payload.length) {
+            return (
+                <div className="chartCard__tooltip">
+                    <p className="chartCard__tooltipTitle">{getBandoLabel(payload[0].name)}</p>
+                    <p className="chartCard__tooltipText">
+                        {payload[0].name}: {payload[0].value}
+                    </p>
+                </div>
+            );
+        }
+        return null;
+    };
+
+    useEffect(() => {
+        const grouped = data.reduce((acc, cur) => {
+            if (cur.status === 'APPROVED') {
+                acc.approved.value = cur.numberOfApplication;
+            } else if (cur.status === 'REJECTED') {
+                acc.rejected.value = cur.numberOfApplication;
+            } else {
+                acc.inProgress.value += cur.numberOfApplication;
+            }
+            return acc;
+        }, {
+            inProgress: {value: 0, label: 'In corso'},
+            approved: {value: 0, label: 'Approvato'},
+            rejected: {value: 0, label: 'Respinto'}
+        });
+        setChartData(grouped)
+    }, [data]);
+
+    console.log('chartData', chartData)
+
+    return (<div className="chartCard">
+        {title ? <span className="chartCard__title">{title}</span> : null}
+        {chartData && !isEmpty(chartData)
+            ? <div className="chartCard__chart">
+                <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                        <Pie
+                            data={Object.values(chartData)}
+                            cx="50%"
+                            cy="50%"
+                            labelLine={false}
+                            label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
+                            outerRadius={120}
+                            fill="#8884d8"
+                            dataKey="value"
+                            nameKey="label"
+                        >
+                            {Object.values(chartData).map((entry, index) => (
+                                <Cell
+                                    key={`cell-${index}`}
+                                    fill={COLORS[index % COLORS.length]}
+                                />
+                            ))}
+                        </Pie>
+                        <Tooltip content={<CustomTooltip />} />
+                    </PieChart>
+                </ResponsiveContainer>
+            </div> : null}
+    </div>)
+}
+
+export default ChartDomandePerStato;