/
Charts.jsx
executable file
·119 lines (106 loc) · 3.37 KB
/
Charts.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// Evolutility-UI-React :: /views/Charts/Charts.js
// Dashboard style set of charts (bars or pies).
// https://github.com/evoluteur/evolutility-ui-react
// (c) 2023 Olivier Giulieri
//#region ----- Imports ----------------------------
import React, { useEffect, useState, useCallback } from "react";
import { useParams } from "react-router-dom";
import classnames from "classnames";
import ErrorBoundary from "components/ErrorBoundary";
import { i18n_charts } from "i18n/i18n";
import { getModel } from "utils/moMa";
import { fieldInCharts } from "utils/dico";
import { lcRead } from "utils/localStorage";
import { capitalize } from "utils/format";
import ViewHeader from "components/views/ViewHeader/ViewHeader";
import Alert from "components/widgets/Alert/Alert";
import Chart from "./Chart";
//#endregion
import "./Charts.scss";
const Charts = () => {
const [expandedChart, setExpandedChart] = useState(null);
const { entity } = useParams();
const m = getModel(entity);
const title = i18n_charts.dash.replace(
"{0}",
capitalize(m?.namePlural || "")
);
useEffect(() => {
document.title = title;
window.scrollTo(0, 0);
}, [title]);
const toggleExpandedChart = useCallback(
(fid, expanded) => {
if (fid === expandedChart) {
setExpandedChart(expanded ? fid : null);
} else {
setExpandedChart(fid);
}
},
[expandedChart]
);
if (m) {
const chartFields = m.fields.filter(fieldInCharts);
const nbCharts = chartFields.length;
const css = classnames("evol-many-charts", {
"single-chart": nbCharts === 1,
});
const chartTitle = (f) =>
i18n_charts.objectByField
.replace("{0}", capitalize(m.namePlural))
.replace("{1}", f.labelCharts || f.label);
let charts;
const cssChart = (f) =>
classnames("panel", {
"hidden-chart": expandedChart && expandedChart !== f.id,
});
if (nbCharts === 0) {
charts = (
<Alert title="No data" message={i18n_charts.nocharts} type="info" />
);
} else {
const chartFieldProps = (f) => ({
entity: entity,
key: f.id,
field: f,
title: chartTitle(f),
chartType: lcRead(`${m.id}-charts-${f.id}`) || f.chartType,
});
if (nbCharts === 1) {
const f = chartFields[0];
charts = (
<Chart
{...chartFieldProps(f)}
size="large"
isExpanded={true}
className="panel single-chart"
/>
);
} else {
charts = chartFields.map((f) => (
<Chart
key={f?.id}
{...chartFieldProps(f)}
size={f?.id === expandedChart ? "large" : "small"}
setExpanded={toggleExpandedChart}
isExpanded={f?.id === expandedChart}
hidden={expandedChart && expandedChart !== f?.id}
className={cssChart(f)}
/>
));
}
}
return (
<div className={`evol-charts model_${entity}`}>
<ViewHeader entity={entity} title={title} view="charts" />
<ErrorBoundary>
<div className={css}>{charts}</div>
</ErrorBoundary>
</div>
);
}
return (
<Alert title="Error" message={`Invalid input parameter "${entity}".`} />
);
};
export default Charts;