🚧 work in progress 🚧

frameless · Jan 29, 2024 · cf692c5 · cf692c5
1 parent 86bf499
commit cf692c5
Show file tree

Hide file tree

Showing 4 changed files with 628 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -79,6 +79,9 @@
   },
   "dependencies": {
     "@hookform/error-message": "2.0.1",
-    "http-server": "14.1.1"
+    "http-server": "14.1.1",
+    "react-vega": "7.6.0",
+    "vega": "5.27.0",
+    "vega-lite": "5.16.3"
   }
 }
diff --git a/packages/next-templates/src/app/FigureDetails/page.tsx b/packages/next-templates/src/app/FigureDetails/page.tsx
@@ -13,16 +13,23 @@ import {
   TableHeaderCell,
   TableRow,
 } from '@utrecht/component-library-react';
+import { VegaVisualization } from '@utrecht/component-library-react/dist/VegaVisualization';
 import React, { HTMLAttributes, PropsWithChildren, useState } from 'react';
 import './styles/FigureDetails.css';
 
 interface FigureDetailsProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
   openButtonText: string;
   closeButtonText: string;
+  drawerClassName?: string;
   children?: any;
 }
 
-export const FigureDetails = ({ openButtonText, closeButtonText, children }: PropsWithChildren<FigureDetailsProps>) => {
+export const FigureDetails = ({
+  openButtonText,
+  closeButtonText,
+  drawerClassName,
+  children,
+}: PropsWithChildren<FigureDetailsProps>) => {
   const [open, setOpen] = useState(false);
 
   let FigureDetails = (
@@ -34,7 +41,7 @@ export const FigureDetails = ({ openButtonText, closeButtonText, children }: Pro
       >
         {openButtonText}
       </Button>
-      <Drawer open={open}>
+      <Drawer className={drawerClassName} open={open}>
         <Button
           onClick={() => {
             setOpen(!open);
@@ -51,8 +58,76 @@ export const FigureDetails = ({ openButtonText, closeButtonText, children }: Pro
 export default function Home() {
   return (
     <Figure>
+      <VegaVisualization
+        config={{
+          $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+          data: {
+            values: [
+              {
+                a: 'A',
+                b: 28,
+              },
+              {
+                a: 'B',
+                b: 55,
+              },
+              {
+                a: 'C',
+                b: 43,
+              },
+              {
+                a: 'D',
+                b: 91,
+              },
+              {
+                a: 'E',
+                b: 81,
+              },
+              {
+                a: 'F',
+                b: 53,
+              },
+              {
+                a: 'G',
+                b: 19,
+              },
+              {
+                a: 'H',
+                b: 87,
+              },
+              {
+                a: 'I',
+                b: 52,
+              },
+            ],
+          },
+          description: 'A simple bar chart with embedded data.',
+          encoding: {
+            x: {
+              axis: {
+                labelAngle: 0,
+              },
+              field: 'a',
+              title: 'x-Axis',
+              type: 'nominal',
+            },
+            y: {
+              field: 'b',
+              title: 'y-Axis',
+              type: 'quantitative',
+            },
+          },
+          mark: 'bar',
+          title: 'Staafgrafiek',
+        }}
+        label="Bla bla heel toegankelijk"
+      />
       <Paragraph>naam van grafiek</Paragraph>
-      <FigureDetails className="utrecht-figure-details" openButtonText={'open tabel'} closeButtonText={'close tabel'}>
+      <FigureDetails
+        drawerClassName="utrecht-figure-details"
+        openButtonText={'open tabel'}
+        closeButtonText={'close tabel'}
+      >
         <Table>
           <TableHeader>
             <TableRow>

diff --git a/packages/next-templates/src/app/FigureDetails/styles/FigureDetails.css b/packages/next-templates/src/app/FigureDetails/styles/FigureDetails.css
@@ -0,0 +1,12 @@
+.utrecht-figure-details {
+  position: relative;
+}
+
+.utrecht-figure-details::before {
+  position: absolute;
+  content: "";
+  background-color: black;
+  opacity: 0.5;
+  width: 100%;
+  height: 100%;
+}