1 files changed, 87 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/graph.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/graph.jsx
new file mode 100755
index 0000000..008e68e
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/graph.jsx
@@ -0,0 +1,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>
+  );
+}