- added codice ateco as dynamic data;
- stat charts to admin dashboard page;
This commit is contained in:
Vitalii Kiiko
60
src/components/ChartDomandePerBando/index.js
Normal file
60
src/components/ChartDomandePerBando/index.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
import { isEmpty } from 'ramda';
|
||||
|
||||
// components
|
||||
|
||||
|
||||
const ChartDomandePerBando = ({ title, data = [] }) => {
|
||||
const truncateText = (text) => {
|
||||
const maxLength = 12;
|
||||
if (typeof text === 'string' && text.length > maxLength) {
|
||||
return `${text.slice(0, maxLength)}...`;
|
||||
}
|
||||
return text;
|
||||
};
|
||||
|
||||
// Custom tooltip
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="chartCard__tooltip">
|
||||
<p className="chartCard__tooltipTitle">{label}</p>
|
||||
<p className="chartCard__tooltipText">
|
||||
{__('Domande', 'gepafin')}: {payload[0].value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (<div className="chartCard">
|
||||
{title ? <span className="chartCard__title">{title}</span> : null}
|
||||
{data && !isEmpty(data)
|
||||
? <div className="chartCard__chart">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 60,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3"/>
|
||||
<XAxis dataKey="callName" angle={-45} textAnchor="end" height={120}
|
||||
tickFormatter={truncateText}/>
|
||||
<YAxis/>
|
||||
<Tooltip content={<CustomTooltip/>}/>
|
||||
<Legend/>
|
||||
<Bar dataKey="numberOfApplications" fill="#EEC137" name={__('Quantità delle domande', 'gepafin')}/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div> : null}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default ChartDomandePerBando;
|
||||
58
src/components/ChartStatoDomande/index.js
Normal file
58
src/components/ChartStatoDomande/index.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React 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 ChartStatoDomande = ({ title, data = [] }) => {
|
||||
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
|
||||
|
||||
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">
|
||||
{__('Domande', 'gepafin')}: {payload[0].value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (<div className="chartCard">
|
||||
{title ? <span className="chartCard__title">{title}</span> : null}
|
||||
{data && !isEmpty(data)
|
||||
? <div className="chartCard__chart">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
|
||||
outerRadius={120}
|
||||
fill="#8884d8"
|
||||
dataKey="numberOfApplications"
|
||||
nameKey="status"
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div> : null}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default ChartStatoDomande;
|
||||
@@ -1,50 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Handle, Position } from '@xyflow/react';
|
||||
import { isEmpty, head } from 'ramda';
|
||||
|
||||
// store
|
||||
import { storeGet, storeSet } from '../../../../store';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const NodeInitialForm = ({ data: { id, label = '' } }) => {
|
||||
const flowData = storeGet.main.flowData();
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const flowForms = storeGet.main.flowForms();
|
||||
const form = head(flowForms.filter(o => String(o.id) === String(id)));
|
||||
const flowDataItem = head(flowData.filter(o => String(o.formId) === String(id)));
|
||||
|
||||
if (form && flowDataItem) {
|
||||
const field = head(form.content.filter(o => o.id === flowDataItem.chosenField));
|
||||
|
||||
if (field) {
|
||||
const label = head(field.settings.filter(o => o.name === 'label'));
|
||||
setValue(label ? label.value : field.label);
|
||||
}
|
||||
}
|
||||
}, [flowData]);
|
||||
|
||||
return (
|
||||
<div className="nodeInitialForm">
|
||||
<label>
|
||||
{label}
|
||||
</label>
|
||||
<span>{value}</span>
|
||||
{/*{options && !isEmpty(options)
|
||||
? <select onChange={onChangeFn} value={value}>
|
||||
<option value="">{__('Scegli il campo', 'gepafin')}</option>
|
||||
{options.map(o => <option key={o.name} value={o.name}>
|
||||
{o.label}
|
||||
</option>)}
|
||||
</select> : null}*/}
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
isConnectable={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NodeInitialForm;
|
||||
@@ -1,78 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Handle, Position } from '@xyflow/react';
|
||||
import { head, isEmpty } from 'ramda';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { useStore, storeSet, storeGet } from '../../../../store';
|
||||
|
||||
const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
|
||||
const flowEdges = useStore().main.flowEdges();
|
||||
const flowData = useStore().main.flowData();
|
||||
const [options, setOptions] = useState([]);
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const onChangeFn = (e) => {
|
||||
const { value } = e.target;
|
||||
const data = {
|
||||
formId: String(id),
|
||||
chosenField: '',
|
||||
chosenValue: value
|
||||
}
|
||||
setValue(value);
|
||||
storeSet.main.addFlowData(data);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const edge = head(flowEdges.filter(o => o.target === String(id)));
|
||||
if (edge) {
|
||||
const sourceForm = edge.source;
|
||||
const sourceFormData = head(flowData.filter(o => String(o.formId) === sourceForm));
|
||||
const flowForms = storeGet.main.flowForms();
|
||||
const form = head(flowForms.filter(o => String(o.id) === String(sourceForm)));
|
||||
|
||||
if (form && sourceFormData) {
|
||||
const { chosenField } = sourceFormData;
|
||||
const field = head(form.content.filter(o => o.id === chosenField));
|
||||
if (field) {
|
||||
const options = head(field.settings.filter(o => o.name === 'options'));
|
||||
if (options) {
|
||||
setOptions(options.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id)));
|
||||
|
||||
if (flowDataForm) {
|
||||
setValue(flowDataForm.chosenValue);
|
||||
}
|
||||
}, [flowEdges, flowData]);
|
||||
|
||||
return (
|
||||
<div className="nodeIntermediateForm">
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Top}
|
||||
isConnectable={true}
|
||||
/>
|
||||
<label>
|
||||
{label}
|
||||
</label>
|
||||
{options && !isEmpty(options)
|
||||
? <select onChange={onChangeFn} value={value}>
|
||||
<option value="">{__('Scegli il valore', 'gepafin')}</option>
|
||||
{options.map(o => <option key={o.name} value={o.name}>
|
||||
{o.label}
|
||||
</option>)}
|
||||
</select> : null}
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
isConnectable={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NodeIntermediateForm;
|
||||
@@ -1,132 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ReactFlow,
|
||||
Background
|
||||
} from '@xyflow/react';
|
||||
import { isEmpty } from 'ramda';
|
||||
|
||||
import '@xyflow/react/dist/style.css';
|
||||
|
||||
// store
|
||||
import { useStore, storeSet } from '../../store';
|
||||
|
||||
// nodes
|
||||
import NodeInitialForm from './components/NodeInitialForm';
|
||||
import NodeIntermediateForm from './components/NodeIntermediateForm';
|
||||
|
||||
const nodeTypes = {
|
||||
initialForm: NodeInitialForm,
|
||||
intermediateForm: NodeIntermediateForm
|
||||
};
|
||||
|
||||
const FlowBuilder = ({ initialForm = 0, finalForm = 0, mainField = '' }) => {
|
||||
const flowForms = useStore().main.flowForms();
|
||||
const [nodes, setNodes] = useState([]);
|
||||
const [edges, setEdges] = useState([]);
|
||||
|
||||
const range = (start, stop, step) => {
|
||||
return Array.from(
|
||||
{ length: (stop - start) / step + 1 },
|
||||
(_, i) => start + i * step
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
(flowForms.length === 2 && initialForm) ||
|
||||
(flowForms.length > 2 && initialForm && finalForm)
|
||||
) {
|
||||
const total = (flowForms.length - 2) * (200 - 90);
|
||||
let coordinates = range(total * -1, total, 200);
|
||||
|
||||
const initialNodes = flowForms.map(o => {
|
||||
const formId = String(o.id);
|
||||
let obj;
|
||||
|
||||
if (formId === String(initialForm)) {
|
||||
obj = {
|
||||
id: formId,
|
||||
type: 'initialForm',
|
||||
data: { label: o.label, id: formId },
|
||||
position: { x: 0, y: 0 },
|
||||
}
|
||||
} else if (formId === String(finalForm)) {
|
||||
obj = {
|
||||
id: formId,
|
||||
type: 'output',
|
||||
data: { label: o.label, id: formId },
|
||||
position: { x: 0, y: flowForms.length === 2 ? 150 : 300 },
|
||||
}
|
||||
} else {
|
||||
const x = coordinates.splice(0, 1);
|
||||
obj = {
|
||||
id: formId,
|
||||
type: 'intermediateForm',
|
||||
data: { label: o.label, id: formId },
|
||||
position: { x, y: 150 },
|
||||
}
|
||||
}
|
||||
return obj
|
||||
});
|
||||
|
||||
let edges = [];
|
||||
// eslint-disable-next-line
|
||||
flowForms.map(o => {
|
||||
const formId = String(o.id);
|
||||
|
||||
if (formId !== String(initialForm) && formId !== String(finalForm)) {
|
||||
edges.push({
|
||||
id: `${initialForm}->${formId}`,
|
||||
source: String(initialForm),
|
||||
target: formId,
|
||||
type: 'smoothstep'
|
||||
});
|
||||
}
|
||||
if (formId !== String(initialForm) && formId !== String(finalForm) && String(finalForm) !== '0') {
|
||||
edges.push({
|
||||
id: `${formId}->${finalForm}`,
|
||||
source: formId,
|
||||
target: String(finalForm),
|
||||
type: 'smoothstep'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (flowForms.length === 2 && initialForm && finalForm) {
|
||||
edges.push({
|
||||
id: `${initialForm}->${finalForm}`,
|
||||
source: String(initialForm),
|
||||
target: String(finalForm),
|
||||
type: 'smoothstep'
|
||||
});
|
||||
}
|
||||
|
||||
setNodes(initialNodes);
|
||||
setEdges(edges);
|
||||
storeSet.main.flowEdges(edges);
|
||||
} else {
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
}
|
||||
}, [initialForm, finalForm, flowForms, mainField]);
|
||||
|
||||
return (
|
||||
!isEmpty(nodes) && !isEmpty(edges)
|
||||
? <div className="flowBuilder__wrapper">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
fitView
|
||||
nodeTypes={nodeTypes}
|
||||
attributionPosition="top-right"
|
||||
>
|
||||
<Background variant="dots" gap={12} size={1}/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
: null
|
||||
);
|
||||
}
|
||||
|
||||
export default FlowBuilder;
|
||||
Reference in New Issue
Block a user