[frontend] public widget : entities heatmap

opencti-platform/opencti-front/src/public/components/dashboard/PublicStixCoreObjectsMultiHeatMap.tsx

@@ -0,0 +1,117 @@
+import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';
+import React from 'react';
+import WidgetNoData from '../../../components/dashboard/WidgetNoData';
+import type { PublicWidgetContainerProps } from './publicWidgetContainerProps';
+import { useFormatter } from '../../../components/i18n';
+import useQueryLoading from '../../../utils/hooks/useQueryLoading';
+import WidgetContainer from '../../../components/dashboard/WidgetContainer';
+import WidgetLoader from '../../../components/dashboard/WidgetLoader';
+import { PublicStixCoreObjectsMultiHeatMapQuery } from './__generated__/PublicStixCoreObjectsMultiHeatMapQuery.graphql';
+import WidgetMultiHeatMap from '../../../components/dashboard/WidgetMultiHeatMap';
+import type { PublicManifestWidget } from './PublicManifest';
+
+const publicStixCoreObjectsMultiHeatMapQuery = graphql`
+  query PublicStixCoreObjectsMultiHeatMapQuery(
+    $startDate: DateTime
+    $endDate: DateTime
+    $uriKey: String!
+    $widgetId : String!
+  ) {
+    publicStixCoreObjectsMultiTimeSeries(
+      startDate: $startDate
+      endDate: $endDate
+      uriKey: $uriKey
+      widgetId : $widgetId
+    ) {
+      data {
+        date
+        value
+      }
+    }
+  }
+`;
+
+interface PublicStixCoreObjectsMultiHeatMapComponentProps {
+  parameters: PublicManifestWidget['parameters']
+  dataSelection: PublicManifestWidget['dataSelection']
+  queryRef: PreloadedQuery<PublicStixCoreObjectsMultiHeatMapQuery>
+}
+
+const PublicStixCoreObjectsMultiHeatMapComponent = ({
+  parameters,
+  dataSelection,
+  queryRef,
+}: PublicStixCoreObjectsMultiHeatMapComponentProps) => {
+  const { t_i18n } = useFormatter();
+  const { publicStixCoreObjectsMultiTimeSeries } = usePreloadedQuery(
+    publicStixCoreObjectsMultiHeatMapQuery,
+    queryRef,
+  );
+
+  if (publicStixCoreObjectsMultiTimeSeries) {
+    const allValues = publicStixCoreObjectsMultiTimeSeries
+      .map((serie) => (serie?.data ?? []).flatMap((o) => o?.value ?? []))
+      .flat();
+    const maxValue = Math.max(...allValues);
+    const minValue = Math.min(...allValues);
+
+    return (
+      <WidgetMultiHeatMap
+        data={publicStixCoreObjectsMultiTimeSeries.map((serie, i) => ({
+          name: dataSelection[i].label ?? t_i18n('Number of entities'),
+          data: (serie?.data ?? []).map((entry) => ({
+            x: new Date(entry?.date),
+            y: entry?.value,
+          })),
+        })).sort((a, b) => b.name.localeCompare(a.name))}
+        minValue={minValue}
+        maxValue={maxValue}
+        isStacked={parameters.stacked}
+        withExport={false}
+        readonly={true}
+      />
+    );
+  }
+  return <WidgetNoData />;
+};
+
+const PublicStixCoreObjectsMultiHeatMap = ({
+  uriKey,
+  widget,
+  startDate,
+  endDate,
+  title,
+}: PublicWidgetContainerProps) => {
+  const { t_i18n } = useFormatter();
+  const { id, parameters, dataSelection } = widget;
+  const queryRef = useQueryLoading<PublicStixCoreObjectsMultiHeatMapQuery>(
+    publicStixCoreObjectsMultiHeatMapQuery,
+    {
+      uriKey,
+      widgetId: id,
+      startDate,
+      endDate,
+    },
+  );
+
+  return (
+    <WidgetContainer
+      title={parameters.title ?? title ?? t_i18n('Entities number')}
+      variant="inLine"
+    >
+      {queryRef ? (
+        <React.Suspense fallback={<WidgetLoader />}>
+          <PublicStixCoreObjectsMultiHeatMapComponent
+            queryRef={queryRef}
+            parameters={parameters}
+            dataSelection={dataSelection}
+          />
+        </React.Suspense>
+      ) : (
+        <WidgetLoader />
+      )}
+    </WidgetContainer>
+  );
+};
+
+export default PublicStixCoreObjectsMultiHeatMap;

opencti-platform/opencti-front/src/public/components/dashboard/usePublicDashboardWidgets.tsx

@@ -10,6 +10,7 @@ import PublicStixCoreObjectsMultiAreaChart from './PublicStixCoreObjectsMultiAre
 import PublicStixCoreObjectsTimeline from './PublicStixCoreObjectsTimeline';
 import PublicStixCoreObjectsDonut from './PublicStixCoreObjectsDonut';
 import PublicStixCoreObjectsRadar from './PublicStixCoreObjectsRadar';
+import PublicStixCoreObjectsMultiHeatMap from './PublicStixCoreObjectsMultiHeatMap';
 
 const usePublicDashboardWidgets = (uriKey: string, config?: PublicManifestConfig) => {
   const startDate = config?.relativeDate ? computerRelativeDate(config.relativeDate) : config?.startDate;
@@ -103,7 +104,14 @@ const usePublicDashboardWidgets = (uriKey: string, config?: PublicManifestConfig
           />
         );
       case 'heatmap':
-        return 'Not implemented yet';
+        return (
+          <PublicStixCoreObjectsMultiHeatMap
+            startDate={startDate}
+            endDate={endDate}
+            uriKey={uriKey}
+            widget={widget}
+          />
+        );
       case 'tree':
         return 'Not implemented yet';
       default: