Feat/0 dvis

Adds 0D visualization component. Visualization that encodes count, average, min, max etc (not ready from backend, needs to be properly connected) and optional title.

Can be exported as png.

Solves #1208331568796694

libs/shared/lib/vis/visualizations/Vis0D/Vis0D.tsx

-import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
 import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
 import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
 import html2canvas from 'html2canvas';
+import { Input } from '@graphpolaris/shared/lib/components/inputs';
 
-export interface Vis0DProps {}
+export interface Vis0DProps {
+  title: string;
+}
 
-const settings: Vis0DProps = {};
+const settings: Vis0DProps = {
+  title: '',
+};
 
 export interface Vis0DVisHandle {
   exportImageInternal: () => void;
 }
 
-const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({ data }, refExternal) => {
+const formatNumber = (number: number) => {
+  return number.toLocaleString('de-DE');
+};
+const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({ data, settings }, refExternal) => {
   const internalRef = useRef<HTMLDivElement>(null);
   useImperativeHandle(refExternal, () => ({
     exportImageInternal() {
@@ -48,13 +56,15 @@ const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({
     },
   }));
 
+  // !FIXME: When stats pills are ready, substitue results accordingly
   return (
-    <div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}>
+    <div className="h-full w-full flex flex-col items-center justify-center overflow-hidden" ref={internalRef}>
+      {settings.title && <span className="text-3xl text-center mb-4">{settings.title}</span>}
       {data?.nodes?.length > 0 ? (
         <span className="text-4xl text-center">Select 0D data</span>
       ) : (
-        <span className="text-8xl text-center">5</span>
-      )}
+        <span className="text-8xl text-center">{formatNumber(1231312)}</span>
+      )}{' '}
     </div>
   );
 });
@@ -62,7 +72,7 @@ const Vis0D = forwardRef<Vis0DVisHandle, VisualizationPropTypes<Vis0DProps>>(({
 const Vis0DSettings = ({ settings, updateSettings }: VisualizationSettingsPropTypes<Vis0DProps>) => {
   return (
     <SettingsContainer>
-      <div></div>
+      <Input type="text" label="Title" value={settings.title} onChange={(value) => updateSettings({ title: value as string })} />
     </SettingsContainer>
   );
 };