[frontend] add widget PolarArea for relationships

opencti-platform/opencti-front/src/components/dashboard/WidgetPolarArea.tsx

@@ -0,0 +1,40 @@
+import Chart from '@components/common/charts/Chart';
+import React from 'react';
+import { useTheme } from '@mui/styles';
+import { ApexOptions } from 'apexcharts';
+import { polarAreaChartOptions } from '../../utils/Charts';
+import type { Theme } from '../Theme';
+
+interface WidgetPolarAreaProps {
+  data: {
+    label: string,
+    value: number
+  }[]
+  withExport?: boolean
+  readonly?: boolean
+}
+
+const WidgetPolarArea = ({
+  data,
+  withExport,
+  readonly,
+}: WidgetPolarAreaProps) => {
+  const theme = useTheme<Theme>();
+
+  const chartData = data.map((n) => n.value);
+  const labels = data.map((n) => n.label);
+
+  return (
+    <Chart
+      options={polarAreaChartOptions(theme, labels) as ApexOptions}
+      series={chartData}
+      type="polarArea"
+      width="100%"
+      height="100%"
+      withExportPopover={withExport}
+      isReadOnly={readonly}
+    />
+  );
+};
+
+export default WidgetPolarArea;

opencti-platform/opencti-front/src/private/components/common/stix_relationships/StixRelationshipsPolarArea.jsx

@@ -1,26 +1,14 @@
 import React from 'react';
 import * as R from 'ramda';
 import { graphql } from 'react-relay';
-import CircularProgress from '@mui/material/CircularProgress';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/styles';
-import makeStyles from '@mui/styles/makeStyles';
-import Chart from '../charts/Chart';
 import { QueryRenderer } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
-import { polarAreaChartOptions } from '../../../../utils/Charts';
 import { defaultValue } from '../../../../utils/Graph';
 import { buildFiltersAndOptionsForWidgets } from '../../../../utils/filters/filtersUtils';
-
-const useStyles = makeStyles(() => ({
-  paper: {
-    height: '100%',
-    margin: '10px 0 0 0',
-    padding: '15px 0 0 0',
-    borderRadius: 4,
-  },
-}));
+import WidgetNoData from '../../../../components/dashboard/WidgetNoData';
+import WidgetLoader from '../../../../components/dashboard/WidgetLoader';
+import WidgetContainer from '../../../../components/dashboard/WidgetContainer';
+import WidgetPolarArea from '../../../../components/dashboard/WidgetPolarArea';
 
 const stixRelationshipsPolarAreasDistributionQuery = graphql`
   query StixRelationshipsPolarAreaDistributionQuery(
@@ -226,8 +214,6 @@ const StixRelationshipsPolarArea = ({
   withExportPopover = false,
   isReadOnly = false,
 }) => {
-  const classes = useStyles();
-  const theme = useTheme();
   const { t_i18n } = useFormatter();
   const renderContent = () => {
     let selection = {};
@@ -267,74 +253,30 @@ const StixRelationshipsPolarArea = ({
                 props.stixRelationshipsDistribution,
               );
             }
-            const chartData = data.map((n) => n.value);
-            const labels = data.map((n) => n.label);
             return (
-              <Chart
-                options={polarAreaChartOptions(theme, labels)}
-                series={chartData}
-                type="polarArea"
-                width="100%"
-                height="100%"
-                withExportPopover={withExportPopover}
-                isReadOnly={isReadOnly}
+              <WidgetPolarArea
+                data={data}
+                withExport={withExportPopover}
+                readonly={isReadOnly}
               />
             );
           }
           if (props) {
-            return (
-              <div style={{ display: 'table', height: '100%', width: '100%' }}>
-                <span
-                  style={{
-                    display: 'table-cell',
-                    verticalAlign: 'middle',
-                    textAlign: 'center',
-                  }}
-                >
-                  {t_i18n('No entities of this type has been found.')}
-                </span>
-              </div>
-            );
+            return <WidgetNoData />;
           }
-          return (
-            <div style={{ display: 'table', height: '100%', width: '100%' }}>
-              <span
-                style={{
-                  display: 'table-cell',
-                  verticalAlign: 'middle',
-                  textAlign: 'center',
-                }}
-              >
-                <CircularProgress size={40} thickness={2}/>
-              </span>
-            </div>
-          );
+          return <WidgetLoader />;
         }}
       />
     );
   };
   return (
-    <div style={{ height: height || '100%' }}>
-      <Typography
-        variant="h4"
-        gutterBottom={true}
-        style={{
-          margin: variant !== 'inLine' ? '0 0 10px 0' : '-10px 0 10px -7px',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }}
-      >
-        {parameters.title || title || t_i18n('Relationships distribution')}
-      </Typography>
-      {variant !== 'inLine' ? (
-        <Paper classes={{ root: classes.paper }} variant="outlined">
-          {renderContent()}
-        </Paper>
-      ) : (
-        renderContent()
-      )}
-    </div>
+    <WidgetContainer
+      height={height}
+      title={parameters.title ?? title ?? t_i18n('Relationships distribution')}
+      variant={variant}
+    >
+      {renderContent()}
+    </WidgetContainer>
   );
 };
 

opencti-platform/opencti-front/src/private/components/workspaces/dashboards/Dashboard.jsx

@@ -5,6 +5,7 @@ import RGL, { WidthProvider } from 'react-grid-layout';
 import Paper from '@mui/material/Paper';
 import makeStyles from '@mui/styles/makeStyles';
 import { v4 as uuid } from 'uuid';
+import StixRelationshipsPolarArea from '../../common/stix_relationships/StixRelationshipsPolarArea';
 import { computerRelativeDate, dayStartDate, parse } from '../../../../utils/Time';
 import WorkspaceHeader from '../WorkspaceHeader';
 import { commitMutation } from '../../../../relay/environment';
@@ -519,6 +520,18 @@ const DashboardComponent = ({ workspace, noToolbar }) => {
             isReadOnly={!isWrite}
           />
         );
+      case 'polar-area':
+        return (
+          <StixRelationshipsPolarArea
+            startDate={startDate}
+            endDate={endDate}
+            dataSelection={widget.dataSelection}
+            parameters={widget.parameters}
+            variant="inLine"
+            withExportPopover={true}
+            isReadOnly={!isWrite}
+          />
+        );
       case 'heatmap':
         return (
           <StixRelationshipsMultiHeatMap

opencti-platform/opencti-front/src/private/components/workspaces/dashboards/WidgetConfig.jsx

@@ -259,6 +259,16 @@ const visualizationTypes = [
     isEntities: true,
     isAudits: true,
   },
+  {
+    key: 'polar-area',
+    name: 'Polar Area',
+    dataSelectionLimit: 1,
+    category: 'distribution',
+    availableParameters: ['attribute'],
+    isRelationships: true,
+    isEntities: false,
+    isAudits: false,
+  },
   {
     key: 'heatmap',
     name: 'Heatmap',
@@ -560,6 +570,8 @@ const WidgetConfig = ({ workspace, widget, onComplete, closeMenu }) => {
         return <ChartLine fontSize="large" color="primary"/>;
       case 'radar':
         return <Radar fontSize="large" color="primary"/>;
+      case 'polar-area':
+        return <Radar fontSize="large" color="primary"/>;
       case 'tree':
         return <ChartTree fontSize="large" color="primary"/>;
       case 'bookmark':