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
|
import * as Uebersicht from "uebersicht";
import * as Utils from "../../utils.js";
import { SuspenseIcon } from "../icons/icon.jsx";
const { React } = Uebersicht;
export { graphStyles as styles } from "../../styles/components/data/graph";
/**
* Graph component to display a bar graph with captions and values.
*
* @param {Object} props - The properties object.
* @param {string} props.className - Additional class names for the graph container.
* @param {Object} props.caption - Caption data containing value, icon, and color for each key.
* @param {Array} props.values - Array of value objects to be displayed as bars.
* @param {number} props.maxLength - Maximum length of the graph.
* @param {number} [props.maxValue] - Maximum value for scaling the bars.
* @returns {JSX.Element|null} The rendered graph component or null if no caption is provided.
*/
export default function Graph({
className,
caption,
values = [],
maxLength,
maxValue,
}) {
// Return null if no caption is provided
if (!caption) {
return null;
}
const captionKeys = Object.keys(caption);
// Calculate maxValue if not provided
if (maxValue === undefined) {
const allValues = values.map((value) => Object.values(value)).flat();
maxValue = Math.max(...allValues);
}
const classes = Utils.classNames("graph", className);
return (
<div className={classes}>
<div className="graph__bars">
{values.map((value) => {
const keys = Object.keys(value);
return keys.map((key) => {
const height = (value[key] / maxValue) * 100;
const { color: backgroundColor } = caption[key];
return (
<div
key={key}
className="graph__bar"
style={{
flex: `0 0 calc(100% / ${maxLength * captionKeys.length})`,
height: `${height}%`,
backgroundColor,
}}
/>
);
});
})}
</div>
<div className="graph__data">
{captionKeys.map((key) => {
const { value, icon: Icon, color } = caption[key];
return (
<div key={key} className="graph__data-item">
{Icon && (
<SuspenseIcon>
<Icon
className="graph__data-item-icon"
style={{ fill: color }}
/>
</SuspenseIcon>
)}
<span
className="graph__data-item-value"
dangerouslySetInnerHTML={{ __html: value }}
/>
</div>
);
})}
</div>
</div>
);
}
|
