feat: add project flags component

frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx

@@ -6,6 +6,7 @@ import { FlagsChart } from './FlagsChart/FlagsChart';
 import { useExecutiveDashboard } from 'hooks/api/getters/useExecutiveSummary/useExecutiveSummary';
 import { UserStats } from './UserStats/UserStats';
 import { FlagStats } from './FlagStats/FlagStats';
+import FlagsProjectChart from './FlagsProjectChart/FlagsProjectChartComponent';
 
 const StyledGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -31,6 +32,8 @@ export const ExecutiveDashboard: VFC = () => {
         ).toFixed(1);
     };
 
+    console.log(executiveDashboardData);
+
     return (
         <>
             <Box sx={(theme) => ({ paddingBottom: theme.spacing(4) })}>
@@ -51,6 +54,9 @@ export const ExecutiveDashboard: VFC = () => {
                 <UsersChart userTrends={executiveDashboardData.userTrends} />
                 <FlagsChart flagTrends={executiveDashboardData.flagTrends} />
             </StyledGrid>
+            <FlagsProjectChart
+                projectFlagTrends={executiveDashboardData.projectFlagTrends}
+            />
         </>
     );
 };

frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const FlagsChart = lazy(() => import('./FlagsChartComponent'));

frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChartComponent.tsx

@@ -0,0 +1,155 @@
+import { useMemo, type VFC } from 'react';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+    TimeScale,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import 'chartjs-adapter-date-fns';
+import { Paper, Theme, Typography, useTheme } from '@mui/material';
+import {
+    useLocationSettings,
+    type ILocationSettings,
+} from 'hooks/useLocationSettings';
+import { formatDateYMD } from 'utils/formatDate';
+import { ExecutiveSummarySchema } from 'openapi';
+
+const getRandomColor = () => {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+};
+
+const createData = (
+    theme: Theme,
+    flagTrends: ExecutiveSummarySchema['projectFlagTrends'] = [],
+) => {
+    // Group flag trends by project
+    const groupedFlagTrends = flagTrends.reduce((groups, item) => {
+        if (!groups[item.project]) {
+            groups[item.project] = [];
+        }
+        groups[item.project].push(item);
+        return groups;
+    }, {});
+
+    // Create a dataset for each project
+    const datasets = Object.entries(groupedFlagTrends).map(
+        ([project, trends], index) => {
+            const color = getRandomColor();
+            return {
+                label: project,
+                data: trends.map((item) => item.total),
+                borderColor: color,
+                backgroundColor: color,
+                fill: true,
+            };
+        },
+    );
+
+    return {
+        labels: flagTrends.map((item) => item.date),
+        datasets,
+    };
+};
+
+const createOptions = (theme: Theme, locationSettings: ILocationSettings) =>
+    ({
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            tooltip: {
+                callbacks: {
+                    title: (tooltipItems: any) => {
+                        const item = tooltipItems?.[0];
+                        const date =
+                            item?.chart?.data?.labels?.[item.dataIndex];
+                        return date
+                            ? formatDateYMD(date, locationSettings.locale)
+                            : '';
+                    },
+                },
+            },
+        },
+        locale: locationSettings.locale,
+        interaction: {
+            intersect: false,
+            axis: 'x',
+        },
+        color: theme.palette.text.secondary,
+        scales: {
+            y: {
+                type: 'linear',
+                grid: {
+                    color: theme.palette.divider,
+                    borderColor: theme.palette.divider,
+                },
+                ticks: { color: theme.palette.text.secondary },
+            },
+            x: {
+                type: 'time',
+                time: {
+                    unit: 'month',
+                },
+                grid: {
+                    color: theme.palette.divider,
+                    borderColor: theme.palette.divider,
+                },
+                ticks: {
+                    color: theme.palette.text.secondary,
+                },
+            },
+        },
+    }) as const;
+
+interface IFlagsChartComponentProps {
+    projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
+}
+
+const FlagsProjectChart: VFC<IFlagsChartComponentProps> = ({
+    projectFlagTrends,
+}) => {
+    const theme = useTheme();
+    const { locationSettings } = useLocationSettings();
+    const data = useMemo(
+        () => createData(theme, projectFlagTrends),
+        [theme, projectFlagTrends],
+    );
+    const options = createOptions(theme, locationSettings);
+
+    return (
+        <Paper sx={(theme) => ({ padding: theme.spacing(4) })}>
+            <Typography
+                variant='h3'
+                sx={(theme) => ({ marginBottom: theme.spacing(3) })}
+            >
+                Number of flags per project
+            </Typography>
+            <Line options={options} data={data} />
+        </Paper>
+    );
+};
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    TimeScale,
+    Title,
+    Tooltip,
+    Legend,
+);
+
+export default FlagsProjectChart;