IA-3338: Add fiter "Project" on Form statistics

hat/assets/js/apps/Iaso/components/instancesGraph.js → hat/assets/js/apps/Iaso/components/instancesGraph.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { LoadingSpinner } from 'bluesquare-components';
 import {
     Bar,
@@ -12,15 +12,37 @@ import {
 } from 'recharts';
 import { Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { getRequest } from 'Iaso/libs/Api';
-import { useSnackQuery } from 'Iaso/libs/apiHooks';
 import { getChipColors } from '../constants/chipColors';
 
-export const InstancesPerFormGraph = () => {
-    const { data, isLoading } = useSnackQuery(['instances', 'stats'], () =>
-        getRequest('/api/instances/stats/'),
-    );
+type Data = {
+    index: string;
+    name: string;
+    [key: string]: string | number | null;
+}[];
+
+type Field = {
+    name: string;
+    type: string;
+    freq?: string;
+};
 
+type Schema = {
+    fields: Field[];
+    pandas_version: string;
+    primaryKey: string[];
+};
+
+type Props = {
+    data: {
+        data: Data;
+        schema: Schema;
+    };
+    isLoading: boolean;
+};
+export const InstancesPerFormGraph: FunctionComponent<Props> = ({
+    data,
+    isLoading,
+}) => {
     return (
         <>
             <Typography variant="h5">
@@ -38,7 +60,7 @@ export const InstancesPerFormGraph = () => {
                         data={data.data}
                         margin={{
                             top: 20,
-                            right: 30,
+                            right: 0,
                             left: 20,
                             bottom: 5,
                         }}

hat/assets/js/apps/Iaso/components/instancesTotalGraph.js → hat/assets/js/apps/Iaso/components/instancesTotalGraph.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import {
     CartesianGrid,
     Line,
@@ -11,14 +11,39 @@ import {
 import { Typography } from '@mui/material';
 import { LoadingSpinner } from 'bluesquare-components';
 import { FormattedMessage } from 'react-intl';
-import { useSnackQuery } from 'Iaso/libs/apiHooks';
-import { getRequest } from 'Iaso/libs/Api';
 
-export const InstancesTotalGraph = () => {
-    const { data, isLoading } = useSnackQuery(['instances', 'stats_sum'], () =>
-        getRequest('/api/instances/stats_sum/'),
-    );
+type Data = {
+    index: number;
+    period: string;
+    value: number;
+    total: number;
+    name: string;
+}[];
+
+type Field = {
+    name: string;
+    type: string;
+    tz?: string;
+};
+
+type Schema = {
+    fields: Field[];
+    pandas_version: string;
+    primaryKey: string[];
+};
+
+type Props = {
+    data: {
+        data: Data;
+        schema: Schema;
+    };
+    isLoading: boolean;
+};
 
+export const InstancesTotalGraph: FunctionComponent<Props> = ({
+    data,
+    isLoading,
+}) => {
     return (
         <>
             <Typography variant="h5">

hat/assets/js/apps/Iaso/constants/routes.tsx

@@ -15,7 +15,7 @@ import { Duplicates } from '../domains/entities/duplicates/list/Duplicates';
 import { EntityTypes } from '../domains/entities/entityTypes';
 import Forms from '../domains/forms';
 import FormDetail from '../domains/forms/detail';
-import FormsStats from '../domains/forms/stats';
+import { FormsStats } from '../domains/forms/stats';
 import Instances from '../domains/instances';
 import CompareSubmissions from '../domains/instances/compare';
 import { CompareInstanceLogs } from '../domains/instances/compare/components/CompareInstanceLogs';

hat/assets/js/apps/Iaso/constants/urls.ts

@@ -70,7 +70,7 @@ export const baseRouteConfigs: Record<string, RouteConfig> = {
             ...paginationPathParamsWithPrefix('attachments'),
         ],
     },
-    formsStats: { url: 'forms/stats', params: ['accountId'] },
+    formsStats: { url: 'forms/stats', params: ['accountId', 'projectIds'] },
     instances: {
         url: 'forms/submissions',
         params: [
@@ -120,13 +120,13 @@ export const baseRouteConfigs: Record<string, RouteConfig> = {
     mappings: {
         url: 'forms/mappings',
         params: [
-            'accountId', 
-            'formId', 
+            'accountId',
+            'formId',
             'mappingTypes',
             'orgUnitTypeIds',
             'projectsIds',
-            'search', 
-            ...paginationPathParams
+            'search',
+            ...paginationPathParams,
         ],
     },
     mappingDetail: {

hat/assets/js/apps/Iaso/domains/forms/components/formStasts/Filters.tsx

@@ -0,0 +1,100 @@
+import { Button, Grid } from '@mui/material';
+import React, { FunctionComponent, useCallback, useState } from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+import { makeStyles } from '@mui/styles';
+import {
+    commonStyles,
+    useRedirectTo,
+    useSafeIntl,
+} from 'bluesquare-components';
+import InputComponent from '../../../../components/forms/InputComponent';
+import MESSAGES from '../../messages';
+import { useGetProjectsDropdownOptions } from '../../../projects/hooks/requests';
+
+const useStyles = makeStyles(theme => ({
+    ...commonStyles(theme),
+}));
+
+type Params = {
+    projectIds?: string;
+};
+
+type Props = {
+    baseUrl: string;
+    params: Params;
+};
+
+export const Filters: FunctionComponent<Props> = ({ baseUrl, params }) => {
+    const [filtersUpdated, setFiltersUpdated] = useState(false);
+    const classes = useStyles();
+    const { formatMessage } = useSafeIntl();
+    const { data: allProjects, isFetching: isFetchingProjects } =
+        useGetProjectsDropdownOptions();
+    const [filters, setFilters] = useState({
+        projectIds: params.projectIds,
+    });
+
+    const handleChange = useCallback(
+        (key, value) => {
+            setFiltersUpdated(true);
+            setFilters({
+                ...filters,
+                [key]: value,
+            });
+        },
+        [filters],
+    );
+
+    const redirectTo = useRedirectTo();
+    const handleSearch = useCallback(() => {
+        if (filtersUpdated) {
+            setFiltersUpdated(false);
+            const tempParams = {
+                ...params,
+                ...filters,
+            };
+            redirectTo(baseUrl, tempParams);
+        }
+    }, [filtersUpdated, params, filters, redirectTo, baseUrl]);
+
+    return (
+        <Grid container spacing={2}>
+            <Grid item xs={12} sm={6} md={3}>
+                <InputComponent
+                    keyValue="projectIds"
+                    onChange={handleChange}
+                    value={filters.projectIds}
+                    type="select"
+                    options={allProjects}
+                    label={MESSAGES.projects}
+                    loading={isFetchingProjects}
+                    onEnterPressed={handleSearch}
+                    clearable
+                    multi
+                />
+            </Grid>
+
+            <Grid
+                item
+                xs={12}
+                sm={6}
+                md={9}
+                container
+                justifyContent="flex-end"
+                alignItems="center"
+            >
+                <Button
+                    data-test="search-button"
+                    disabled={!filtersUpdated}
+                    variant="contained"
+                    className={classes.button}
+                    color="primary"
+                    onClick={handleSearch}
+                >
+                    <SearchIcon className={classes.buttonIcon} />
+                    {formatMessage(MESSAGES.search)}
+                </Button>
+            </Grid>
+        </Grid>
+    );
+};

hat/assets/js/apps/Iaso/domains/forms/hooks/UseGetFormStats.tsx

@@ -0,0 +1,43 @@
+import { UseQueryResult } from 'react-query';
+import { getRequest } from '../../../libs/Api';
+import { useSnackQuery } from '../../../libs/apiHooks';
+import { makeUrlWithParams } from '../../../libs/utils';
+import { ApiFormStatsParams } from '../types/formStats';
+
+const getFormStats = url => {
+    return getRequest(url);
+};
+
+const useGetFormStats = ({
+    params,
+    url,
+    queryKey,
+}: ApiFormStatsParams): UseQueryResult<any, Error> => {
+    const apiParams = { project_ids: params.projectIds };
+    const apiUrl = makeUrlWithParams(url, apiParams);
+    return useSnackQuery({
+        queryKey: [queryKey, apiUrl],
+        queryFn: () => getFormStats(apiUrl),
+        options: {
+            staleTime: 60000,
+            cacheTime: 60000,
+            keepPreviousData: true,
+        },
+    });
+};
+
+export const useGetPerFormStats = params => {
+    return useGetFormStats({
+        params,
+        url: '/api/instances/stats/',
+        queryKey: ['instances', 'stats'],
+    });
+};
+
+export const useGetFormStatsSum = params => {
+    return useGetFormStats({
+        params,
+        url: '/api/instances/stats_sum/',
+        queryKey: ['instances', 'stats_sum'],
+    });
+};