feat: new vis 0Dviz

libs/shared/lib/vis/components/VisualizationPanel.tsx

@@ -30,6 +30,7 @@ export const Visualizations: Record<string, PromiseFunc> = {
     SemanticSubstratesVis: () => import('../visualizations/semanticsubstratesvis/semanticsubstratesvis'),
   }),
   ...(isVisualizationReleased('MapVis') && { MapVis: () => import('../visualizations/mapvis/mapvis') }),
+  ...(isVisualizationReleased('Vis0D') && { Vis0D: () => import('../visualizations/Vis0D/Vis0D') }),
 };
 
 export const VISUALIZATION_TYPES: string[] = Object.keys(Visualizations);

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

+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 {
+  title: string;
+}
+
+const settings: Vis0DProps = {
+  title: '',
+};
+
+export interface Vis0DVisHandle {
+  exportImageInternal: () => void;
+}
+
+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() {
+      const captureImage = () => {
+        const element = internalRef.current;
+        if (element) {
+          html2canvas(element, {
+            backgroundColor: '#FFFFFF',
+          })
+            .then((canvas) => {
+              const finalImage = canvas.toDataURL('image/png');
+              const link = document.createElement('a');
+              link.href = finalImage;
+              link.download = 'Vis0D.png';
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+            })
+            .catch((error) => {
+              console.error('Error capturing image:', error);
+            });
+        } else {
+          console.error('Container element not found');
+        }
+      };
+
+      const renderCanvas = () => {
+        requestAnimationFrame(() => {
+          captureImage();
+        });
+      };
+
+      renderCanvas();
+    },
+  }));
+
+  // !FIXME: When stats pills are ready, substitue results accordingly
+  return (
+    <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">{formatNumber(1231312)}</span>
+      )}{' '}
+    </div>
+  );
+});
+
+const Vis0DSettings = ({ settings, updateSettings }: VisualizationSettingsPropTypes<Vis0DProps>) => {
+  return (
+    <SettingsContainer>
+      <Input type="text" label="Title" value={settings.title} onChange={(value) => updateSettings({ title: value as string })} />
+    </SettingsContainer>
+  );
+};
+
+const Vis0DRef = React.createRef<Vis0DVisHandle>();
+
+export const Vis0DComponent: VISComponentType<Vis0DProps> = {
+  displayName: '0Dvis',
+  description: 'KPI visualization',
+  component: React.forwardRef((props: VisualizationPropTypes<Vis0DProps>, ref) => <Vis0D {...props} ref={Vis0DRef} />),
+  settingsComponent: Vis0DSettings,
+  settings: settings,
+  exportImage: () => {
+    if (Vis0DRef.current) {
+      Vis0DRef.current.exportImageInternal();
+    } else {
+      console.error('0Dvis reference is not set.');
+    }
+  },
+};
+
+export default Vis0DComponent;

libs/shared/lib/vis/visualizations/Vis0D/index.ts

+export * from './Vis0D';

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

+import { Meta } from '@storybook/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { mockData } from '../../../mock-data';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
+import Vis0DComponent from './Vis0D';
+
+const Component: Meta<typeof Vis0DComponent.component> = {
+  title: 'Visualizations/0DVis',
+  component: Vis0DComponent.component,
+  decorators: [
+    (story) => (
+      <Provider store={Mockstore}>
+        <div
+          style={{
+            width: '100%',
+            height: '100vh',
+          }}
+        >
+          {story()}
+        </div>
+      </Provider>
+    ),
+  ],
+};
+
+const Mockstore: any = configureStore({
+  reducer: {
+    schema: schemaSlice.reducer,
+    graphQueryResult: graphQueryResultSlice.reducer,
+    visualize: visualizationSlice.reducer,
+    querybuilder: querybuilderSlice.reducer,
+  },
+});
+
+export const TestWithData = {
+  args: {
+    data: {
+      nodes: 12313,
+      edges: [],
+    },
+    ml: {},
+    settings: {
+      ...Vis0DComponent.settings,
+      title: 'KPI Count Movie',
+    },
+  },
+};
+
+export const TestWithNoData = {
+  args: {
+    data: {
+      nodes: [123123, 1312, 21313],
+      edges: [],
+    },
+    ml: {},
+    settings: Vis0DComponent.settings,
+  },
+};
+
+export default Component;

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

@@ -4,3 +4,4 @@ export * from './paohvis/paohvis';
 export * from './tablevis/tablevis';
 export * from './matrixvis/matrixvis';
 export * from './semanticsubstratesvis/semanticsubstratesvis';
+export * from './Vis0D/Vis0D';