[frontend] refactor charts and dashboard to improve perfs (#9933)

OpenCTI-Platform · Feb 26, 2025 · 8573c5c · 8573c5c
1 parent cb45ebb
commit 8573c5c
Show file tree

Hide file tree

Showing 27 changed files with 1,284 additions and 1,067 deletions.
diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetDonut.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetDonut.tsx
@@ -1,5 +1,5 @@
 import Chart from '@components/common/charts/Chart';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTheme } from '@mui/styles';
 import type { ApexOptions } from 'apexcharts';
 import { donutChartOptions } from '../../utils/Charts';
@@ -23,34 +23,39 @@ const WidgetDonut = ({
   const theme = useTheme<Theme>();
   const { buildWidgetLabelsOption } = useDistributionGraphData();
 
-  const chartData = data.map((n) => n.value);
-  const labels = buildWidgetLabelsOption(data, groupBy);
-  let chartColors = [];
-  if (data.at(0)?.entity?.color) {
-    chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.color === '#ffffff'
-      ? '#000000'
-      : n.entity?.color));
-  }
-  if (data.at(0)?.entity?.x_opencti_color) {
-    chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.x_opencti_color === '#ffffff'
-      ? '#000000'
-      : n.entity?.x_opencti_color));
-  }
-  if (data.at(0)?.entity?.template?.color) {
-    chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.template.color === '#ffffff'
-      ? '#000000'
-      : n.entity?.template.color));
-  }
+  const chartData = useMemo(() => data.map((n) => n.value), [data]);
+
+  const options: ApexOptions = useMemo(() => {
+    const labels = buildWidgetLabelsOption(data, groupBy);
+    let chartColors = [];
+    if (data.at(0)?.entity?.color) {
+      chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.color === '#ffffff'
+        ? '#000000'
+        : n.entity?.color));
+    }
+    if (data.at(0)?.entity?.x_opencti_color) {
+      chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.x_opencti_color === '#ffffff'
+        ? '#000000'
+        : n.entity?.x_opencti_color));
+    }
+    if (data.at(0)?.entity?.template?.color) {
+      chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.template.color === '#ffffff'
+        ? '#000000'
+        : n.entity?.template.color));
+    }
+
+    return donutChartOptions(
+      theme,
+      labels,
+      'bottom',
+      false,
+      chartColors,
+    ) as ApexOptions;
+  }, [data, groupBy]);
 
   return (
     <Chart
-      options={donutChartOptions(
-        theme,
-        labels,
-        'bottom',
-        false,
-        chartColors,
-      ) as ApexOptions}
+      options={options}
       series={chartData}
       type="donut"
       width="100%"

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetHorizontalBars.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetHorizontalBars.tsx
@@ -1,5 +1,5 @@
 import Chart from '@components/common/charts/Chart';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTheme } from '@mui/styles';
 import { useNavigate } from 'react-router-dom';
 import { ApexOptions } from 'apexcharts';
@@ -39,35 +39,39 @@ const WidgetHorizontalBars = ({
   const theme = useTheme<Theme>();
   const navigate = useNavigate();
 
-  const getFormattedValue = (value: string | number) => {
-    if (typeof value === 'number') {
-      return simpleNumberFormat(value);
-    }
-    const newTimestamp = parseInt(value, 10);
-    if (!Number.isNaN(newTimestamp)) {
-      const convertedDate = timestamp(newTimestamp);
-      const date = dateFormat(convertedDate);
-      if (date) return date;
-    }
-    return value;
-  };
+  const options: ApexOptions = useMemo(() => {
+    const getFormattedValue = (value: string | number) => {
+      if (typeof value === 'number') {
+        return simpleNumberFormat(value);
+      }
+      const newTimestamp = parseInt(value, 10);
+      if (!Number.isNaN(newTimestamp)) {
+        const convertedDate = timestamp(newTimestamp);
+        const date = dateFormat(convertedDate);
+        if (date) return date;
+      }
+      return value;
+    };
+
+    return horizontalBarsChartOptions(
+      theme,
+      true,
+      simpleNumberFormat,
+      getFormattedValue,
+      distributed,
+      navigate,
+      redirectionUtils,
+      stacked,
+      total,
+      categories,
+      legend,
+      stackType,
+    ) as ApexOptions;
+  }, [categories, legend, stackType]);
 
   return (
     <Chart
-      options={horizontalBarsChartOptions(
-        theme,
-        true,
-        simpleNumberFormat,
-        getFormattedValue,
-        distributed,
-        navigate,
-        redirectionUtils,
-        stacked,
-        total,
-        categories,
-        legend,
-        stackType,
-      ) as ApexOptions}
+      options={options}
       series={series}
       type="bar"
       width="100%"

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiAreas.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiAreas.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@mui/styles';
 import Chart from '@components/common/charts/Chart';
 import { ApexOptions } from 'apexcharts';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Theme } from '../Theme';
 import { useFormatter } from '../i18n';
 import { areaChartOptions } from '../../utils/Charts';
@@ -27,25 +27,29 @@ const WidgetMultiAreas = ({
   const theme = useTheme<Theme>();
   const { fsd, mtdy, yd } = useFormatter();
 
-  let formatter = fsd;
-  if (interval === 'month' || interval === 'quarter') {
-    formatter = mtdy;
-  }
-  if (interval === 'year') {
-    formatter = yd;
-  }
+  const options: ApexOptions = useMemo(() => {
+    let formatter = fsd;
+    if (interval === 'month' || interval === 'quarter') {
+      formatter = mtdy;
+    }
+    if (interval === 'year') {
+      formatter = yd;
+    }
+
+    return areaChartOptions(
+      theme,
+      !interval || ['day', 'week'].includes(interval),
+      formatter,
+      simpleNumberFormat,
+      interval && !['day', 'week'].includes(interval) ? 'dataPoints' : undefined,
+      isStacked,
+      hasLegend,
+    ) as ApexOptions;
+  }, []);
 
   return (
     <Chart
-      options={areaChartOptions(
-        theme,
-        !interval || ['day', 'week'].includes(interval),
-        formatter,
-        simpleNumberFormat,
-        interval && !['day', 'week'].includes(interval) ? 'dataPoints' : undefined,
-        isStacked,
-        hasLegend,
-      ) as ApexOptions}
+      options={options}
       series={series}
       type="area"
       width="100%"

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiHeatMap.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiHeatMap.tsx
@@ -1,5 +1,5 @@
 import Chart from '@components/common/charts/Chart';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTheme } from '@mui/styles';
 import { ApexOptions } from 'apexcharts';
 import { heatMapOptions } from '../../utils/Charts';
@@ -55,38 +55,42 @@ const WidgetMultiHeatMap = ({
   const theme = useTheme<Theme>();
   const { fsd } = useFormatter();
 
-  const interval = Math.trunc((maxValue - minValue) / 9);
-  const colorRanges = Array(10)
-    .fill(0)
-    .map((_, i) => ({
-      from:
+  const options: ApexOptions = useMemo(() => {
+    const interval = Math.trunc((maxValue - minValue) / 9);
+    const colorRanges = Array(10)
+      .fill(0)
+      .map((_, i) => ({
+        from:
         minValue + (i + 1) * interval - interval === 0
           ? 1
           : minValue + (i + 1) * interval - interval,
-      to: minValue + (i + 1) * interval,
-      color:
+        to: minValue + (i + 1) * interval,
+        color:
         theme.palette.mode === 'dark'
           ? darkColors[i + 1]
           : lightColors[i + 1],
-    }));
-  colorRanges.push({
-    from: 0,
-    to: 0,
-    color:
+      }));
+    colorRanges.push({
+      from: 0,
+      to: 0,
+      color:
       theme.palette.mode === 'dark' ? darkColors[0] : lightColors[0],
-  });
+    });
+
+    return heatMapOptions(
+      theme,
+      true,
+      fsd,
+      undefined,
+      undefined,
+      isStacked,
+      colorRanges,
+    ) as ApexOptions;
+  }, [maxValue, minValue]);
 
   return (
     <Chart
-      options={heatMapOptions(
-        theme,
-        true,
-        fsd,
-        undefined,
-        undefined,
-        isStacked,
-        colorRanges,
-      ) as ApexOptions}
+      options={options}
       series={data}
       type="heatmap"
       width="100%"

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiLines.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetMultiLines.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@mui/styles';
 import Chart from '@components/common/charts/Chart';
 import { ApexOptions } from 'apexcharts';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Theme } from '../Theme';
 import { useFormatter } from '../i18n';
 import { lineChartOptions } from '../../utils/Charts';
@@ -25,25 +25,29 @@ const WidgetMultiLines = ({
   const theme = useTheme<Theme>();
   const { fsd, mtdy, yd } = useFormatter();
 
-  let formatter = fsd;
-  if (interval === 'month' || interval === 'quarter') {
-    formatter = mtdy;
-  }
-  if (interval === 'year') {
-    formatter = yd;
-  }
+  const options: ApexOptions = useMemo(() => {
+    let formatter = fsd;
+    if (interval === 'month' || interval === 'quarter') {
+      formatter = mtdy;
+    }
+    if (interval === 'year') {
+      formatter = yd;
+    }
+
+    return lineChartOptions(
+      theme,
+      !interval || ['day', 'week'].includes(interval),
+      formatter,
+      simpleNumberFormat,
+      interval && !['day', 'week'].includes(interval) ? 'dataPoints' : undefined,
+      false,
+      hasLegend,
+    ) as ApexOptions;
+  }, [interval]);
 
   return (
     <Chart
-      options={lineChartOptions(
-        theme,
-        !interval || ['day', 'week'].includes(interval),
-        formatter,
-        simpleNumberFormat,
-        interval && !['day', 'week'].includes(interval) ? 'dataPoints' : undefined,
-        false,
-        hasLegend,
-      ) as ApexOptions}
+      options={options}
       series={series}
       type="line"
       width="100%"

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetPolarArea.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetPolarArea.tsx
@@ -1,5 +1,5 @@
 import Chart from '@components/common/charts/Chart';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTheme } from '@mui/styles';
 import { ApexOptions } from 'apexcharts';
 import { polarAreaChartOptions } from '../../utils/Charts';
@@ -22,19 +22,24 @@ const WidgetPolarArea = ({
   const theme = useTheme<Theme>();
   const { buildWidgetLabelsOption, buildWidgetColorsOptions } = useDistributionGraphData();
 
-  const chartData = data.flatMap((n) => (n ? (n.value ?? 0) : []));
-  const labels = buildWidgetLabelsOption(data, groupBy);
-  const colors = buildWidgetColorsOptions(data, groupBy);
+  const chartData = useMemo(() => data.flatMap((n) => (n ? (n.value ?? 0) : [])), [data]);
+
+  const options: ApexOptions = useMemo(() => {
+    const labels = buildWidgetLabelsOption(data, groupBy);
+    const colors = buildWidgetColorsOptions(data, groupBy);
+
+    return polarAreaChartOptions(
+      theme,
+      labels,
+      undefined,
+      'bottom',
+      colors,
+    ) as ApexOptions;
+  }, [data, groupBy]);
 
   return (
     <Chart
-      options={polarAreaChartOptions(
-        theme,
-        labels,
-        undefined,
-        'bottom',
-        colors,
-      ) as ApexOptions}
+      options={options}
       series={chartData}
       type="polarArea"
       width="100%"