From a20cf5a080453e7f7c6375e8cd17b3a72acfaf82 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Sun, 10 Sep 2023 13:34:18 +0200
Subject: [PATCH] feat(legend): implementation of legend for visualizations
---
libs/shared/lib/components/Legend.tsx | 36 +++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
create mode 100644 libs/shared/lib/components/Legend.tsx
diff --git a/libs/shared/lib/components/Legend.tsx b/libs/shared/lib/components/Legend.tsx
new file mode 100644
index 000000000..9b3f4a7ef
--- /dev/null
+++ b/libs/shared/lib/components/Legend.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Close, ExpandLess, ExpandMore } from '@mui/icons-material';
+
+type Props = {
+ title?: string;
+ screenPosition?: string;
+ open: boolean;
+ setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+ children: React.ReactNode;
+};
+
+const DEFAULT_TITLE = 'Legend';
+const DEFAULT_SCREEN_POSITION = 'top-2 right-2';
+
+export const Legend =({ title = DEFAULT_TITLE, screenPosition = DEFAULT_SCREEN_POSITION, open, setOpen, children }: Props) => {
+ const [expand, setExpand] = React.useState<boolean>(true);
+
+ return (
+ open && (
+ <div className={`absolute ${screenPosition} z-20 bg-white w-60`}>
+ <div className="px-4 py-3 flex justify-between align-middle">
+ <h4 className="font-bold">{title}</h4>
+ <div>
+ <button className="btn btn-outline btn-xs" onClick={() => setExpand(!expand)}>
+ {expand ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+ </button>
+ <button className="btn btn-primary btn-xs ml-1" onClick={() => setOpen(false)}>
+ <Close fontSize="small" />
+ </button>
+ </div>
+ </div>
+ {expand && <div className="px-4 pb-3">{children}</div>}
+ </div>
+ )
+ );
+}
--
GitLab