users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/graph.jsx

cabf188ae487120d4b9ac1fe21fff45403a787b4 · 2.6 KB · 87 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Utils from "../../utils.js";
3 import { SuspenseIcon } from "../icons/icon.jsx";
4
5 const { React } = Uebersicht;
6
7 export { graphStyles as styles } from "../../styles/components/data/graph";
8
9 /**
10 * Graph component to display a bar graph with captions and values.
11 *
12 * @param {Object} props - The properties object.
13 * @param {string} props.className - Additional class names for the graph container.
14 * @param {Object} props.caption - Caption data containing value, icon, and color for each key.
15 * @param {Array} props.values - Array of value objects to be displayed as bars.
16 * @param {number} props.maxLength - Maximum length of the graph.
17 * @param {number} [props.maxValue] - Maximum value for scaling the bars.
18 * @returns {JSX.Element|null} The rendered graph component or null if no caption is provided.
19 */
20 export default function Graph({
21 className,
22 caption,
23 values = [],
24 maxLength,
25 maxValue,
26 }) {
27 // Return null if no caption is provided
28 if (!caption) {
29 return null;
30 }
31
32 const captionKeys = Object.keys(caption);
33
34 // Calculate maxValue if not provided
35 if (maxValue === undefined) {
36 const allValues = values.map((value) => Object.values(value)).flat();
37 maxValue = Math.max(...allValues);
38 }
39
40 const classes = Utils.classNames("graph", className);
41
42 return (
43 <div className={classes}>
44 <div className="graph__bars">
45 {values.map((value) => {
46 const keys = Object.keys(value);
47 return keys.map((key) => {
48 const height = (value[key] / maxValue) * 100;
49 const { color: backgroundColor } = caption[key];
50 return (
51 <div
52 key={key}
53 className="graph__bar"
54 style={{
55 flex: `0 0 calc(100% / ${maxLength * captionKeys.length})`,
56 height: `${height}%`,
57 backgroundColor,
58 }}
59 />
60 );
61 });
62 })}
63 </div>
64 <div className="graph__data">
65 {captionKeys.map((key) => {
66 const { value, icon: Icon, color } = caption[key];
67 return (
68 <div key={key} className="graph__data-item">
69 {Icon && (
70 <SuspenseIcon>
71 <Icon
72 className="graph__data-item-icon"
73 style={{ fill: color }}
74 />
75 </SuspenseIcon>
76 )}
77 <span
78 className="graph__data-item-value"
79 dangerouslySetInnerHTML={{ __html: value }}
80 />
81 </div>
82 );
83 })}
84 </div>
85 </div>
86 );
87 }