Skip to content

Commit 3fdbb7f

Browse files
ManelleGManelleG
authored
style: uniformized layout - Ref gestion-de-projet#2986 (#1134)
1 parent d631739 commit 3fdbb7f

File tree

129 files changed

+2805
-3021
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+2805
-3021
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="description" content="Web site created using create-react-app" />
99
<link rel="apple-touch-icon" href="/logo192.png" />
1010
<link
11-
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap"
11+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap"
1212
rel="stylesheet"
1313
/>
1414
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

‎src/assets/icones/autre-inconnu.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/assets/icones/warning.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CriteriaForm/mappers/renderers.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { checkIsLeaf } from 'utils/valueSets'
3131
import { selectValueSetCodes } from 'state/valueSets'
3232
import SearchbarWithCheck from 'components/ui/Searchbar/SearchbarWithChecks'
3333
import { SearchbarWithCheckWrapper } from 'components/ui/Searchbar/styles'
34+
import CustomAlert from 'components/ui/Alert'
3435

3536
/************************************************************************************/
3637
/* Criteria Form Item Renderer */
@@ -41,7 +42,7 @@ This file contains the list of functions used to render the React view form for
4142

4243
const FORM_ITEM_RENDERER: { [key in CriteriaFormItemType]: CriteriaFormItemView<key> } = {
4344
info: (props) => {
44-
return <Alert severity={props.definition.contentType}>{props.definition.content}</Alert>
45+
return <CustomAlert severity={props.definition.contentType}>{props.definition.content}</CustomAlert>
4546
},
4647
text: (props) => {
4748
// eslint-disable-next-line react-hooks/rules-of-hooks

‎src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CriteriaForm/types.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { ReactNode } from 'react'
2-
import { ScopeElement } from 'types/scope'
32
import { Hierarchy } from 'types/hierarchy'
43
import { Comparators, CriteriaType, ResourceType } from 'types/requestCriterias'
5-
import { SourceType } from 'types/scope'
4+
import { ScopeElement, SourceType } from 'types/scope'
65
import { LabelObject } from 'types/searchCriterias'
76
import { CHIPS_DISPLAY_METHODS } from './mappers/chipDisplayMapper'
87
import { BUILD_MAPPERS, UNBUILD_MAPPERS } from './mappers/buildMappers'

‎src/components/CreationCohort/DiagramView/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react'
2-
import { Alert, Button, Grid } from '@mui/material'
2+
import { Button, Grid } from '@mui/material'
33

44
import LogicalOperator from './components/LogicalOperator'
55
import TemporalConstraintCard from './components/TemporalConstraintCard/TemporalConstraintCard'
@@ -14,6 +14,7 @@ import PopulationCard from './components/PopulationCard/PopulationCard'
1414
import ModalRightError from './components/PopulationCard/components/ModalRightError'
1515
import { checkNominativeCriteria, cleanNominativeCriterias } from 'utils/cohortCreation'
1616
import ScopeTree from 'components/ScopeTree'
17+
import CustomAlert from 'components/ui/Alert'
1718

1819
const DiagramView = () => {
1920
const dispatch = useAppDispatch()
@@ -63,10 +64,10 @@ const DiagramView = () => {
6364
>
6465
<div style={{ minWidth: 500, paddingRight: 24 }}>
6566
{maintenanceIsActive && (
66-
<Alert severity="warning" style={{ marginTop: '-12px', width: '100%', marginBottom: '10px' }}>
67+
<CustomAlert severity="warning" style={{ marginTop: '-12px', marginBottom: '10px' }}>
6768
Une maintenance est en cours. Seules les consultations de cohortes, requêtes et données patients sont
6869
activées. Les créations, éditions et suppressions de cohortes et de requêtes sont désactivées.
69-
</Alert>
70+
</CustomAlert>
7071
)}
7172
<CohortCreationBreadcrumbs />
7273

‎src/components/Dashboard/Preview/Preview.tsx‎

Lines changed: 30 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,18 @@ import {
88
Table,
99
TableBody,
1010
TableContainer,
11-
Typography,
12-
IconButton,
13-
Tooltip
11+
Typography
1412
} from '@mui/material'
13+
import Chart from 'components/ui/Chart'
1514
import { TableCellWrapper } from 'components/ui/TableCell/styles'
1615

1716
import PieChart from './Charts/PieChart'
1817
import BarChart from './Charts/BarChart'
1918
import GroupedBarChart from './Charts/GroupedBarChart'
2019
import DonutChart from './Charts/DonutChart'
2120
import PyramidChart from './Charts/PyramidChart'
22-
import InfoIcon from '@mui/icons-material/Info'
23-
import WarningIcon from '@mui/icons-material/Warning'
2421

2522
import useStyles from './styles'
26-
import clsx from 'clsx'
2723

2824
import { getGenderRepartitionSimpleData } from 'utils/graphUtils'
2925
import { format } from 'utils/numbers'
@@ -152,126 +148,55 @@ const Preview: React.FC<PreviewProps> = ({
152148

153149
<Grid container>
154150
<Grid container item xs={12} sm={6} lg={4} justifyContent="center">
155-
<Paper id="vital-repartition-card" className={clsx(classes.chartOverlay, classes.fixedChartOverlay)}>
156-
<Grid container item className={classes.chartTitle}>
157-
<Typography id="vital-repartition-card-title" variant="h3" color="primary">
158-
Répartition par statut vital
159-
</Typography>
160-
</Grid>
161-
162-
{loading || !vitalStatusData ? (
163-
<Grid className={classes.progressContainer}>
164-
<CircularProgress />
165-
</Grid>
166-
) : (
167-
<PieChart data={vitalStatusData ?? []} />
168-
)}
169-
</Paper>
151+
<Chart id="vital-repartition-card" isLoading={loading} title="Répartition par statut vital">
152+
<PieChart data={vitalStatusData ?? []} />
153+
</Chart>
170154
</Grid>
171155

172156
<Grid container item xs={12} sm={6} lg={4} justifyContent="center">
173-
<Paper id="visit-type-repartition-card" className={clsx(classes.chartOverlay, classes.fixedChartOverlay)}>
174-
<Grid container item className={classes.chartTitle}>
175-
<Typography id="visit-type-repartition-card-title" variant="h3" color="primary">
176-
Répartition par type de visite
177-
</Typography>
178-
</Grid>
179-
180-
{loading ? (
181-
<Grid className={classes.progressContainer}>
182-
<CircularProgress />
183-
</Grid>
184-
) : (
185-
<DonutChart data={visitTypeRepartitionData} />
186-
)}
187-
</Paper>
157+
<Chart id="visit-type-repartition-card" isLoading={loading} title="Répartition par type de visite">
158+
<DonutChart data={visitTypeRepartitionData} />
159+
</Chart>
188160
</Grid>
189161

190162
<Grid container item xs={12} sm={12} lg={4} justifyContent="center">
191-
<Paper id="gender-repartition-card" className={clsx(classes.chartOverlay, classes.fixedChartOverlay)}>
192-
<Grid container item className={classes.chartTitle}>
193-
<Typography id="gender-repartition-card-title" variant="h3" color="primary">
194-
Répartition par genre
195-
</Typography>
196-
</Grid>
197-
198-
{loading ? (
199-
<Grid className={classes.progressContainer}>
200-
<CircularProgress />
201-
</Grid>
202-
) : (
203-
<BarChart data={genderData} />
204-
)}
205-
</Paper>
163+
<Chart id="gender-repartition-card" isLoading={loading} title="Répartition par genre">
164+
<BarChart data={genderData} />
165+
</Chart>
206166
</Grid>
207167

208168
<Grid container item md={12} lg={6} justifyContent="center">
209-
<Grid container item justifyContent="center">
210-
<Paper id="age-structure-card" className={clsx(classes.chartOverlay, classes.fixedChartOverlay)}>
211-
<Grid container item className={classes.chartTitle}>
212-
<Typography id="age-structure-card-title" variant="h3" color="primary">
213-
Pyramide des âges
214-
</Typography>
215-
</Grid>
216-
217-
{loading ? (
218-
<Grid className={classes.progressContainer}>
219-
<CircularProgress />
220-
</Grid>
221-
) : (
222-
<PyramidChart data={agePyramidData} />
223-
)}
224-
</Paper>
225-
</Grid>
169+
<Chart id="age-structure-card" isLoading={loading} title="Pyramide des âges">
170+
<PyramidChart data={agePyramidData} />
171+
</Chart>
226172
</Grid>
227173

228174
<Grid container item md={12} lg={6} justifyContent="center">
229175
<Grid container item justifyContent="center">
230-
<Paper id="month-repartition-visit-card" className={clsx(classes.chartOverlay, classes.fixedChartOverlay)}>
231-
<Grid container item className={classes.chartTitle}>
232-
<Typography id="month-repartition-visit-card-title" variant="h3" color="primary">
233-
Répartition des visites par mois
234-
</Typography>
235-
</Grid>
236-
237-
{loading ? (
238-
<Grid className={classes.progressContainer}>
239-
<CircularProgress />
240-
</Grid>
241-
) : (
242-
<GroupedBarChart data={monthlyVisitData} />
243-
)}
244-
</Paper>
176+
<Chart id="month-repartition-visit-card" isLoading={loading} title="Répartition des visites par mois">
177+
<GroupedBarChart data={monthlyVisitData} />
178+
</Chart>
245179
</Grid>
246180
</Grid>
247181
</Grid>
248182

249183
{appConfig.features.locationMap.enabled && cohortId && (
250184
<Grid container item justifyContent="space-between" alignItems="center">
251185
<Grid item xs={12} sm={12} md={12} justifyContent="center">
252-
<Paper id="location-map" className={classes.chartOverlay}>
253-
<Grid container item className={classes.chartTitle}>
254-
<Typography id="location-map-card-title" variant="h3" color="primary">
255-
Répartition spatiale par zone IRIS
256-
<Tooltip title="Les localisations des patients sont affichées uniquement si leur adresse est disponible (certains patients n'ayant pas d'adresse associée).">
257-
<IconButton style={{ padding: '0 0 0 4px', marginTop: '-2.5px', position: 'absolute' }}>
258-
<InfoIcon style={{ height: 22 }} />
259-
</IconButton>
260-
</Tooltip>
261-
{total && total > MAP_WARNING_PERSON_COUNT_THRESHOLD && (
262-
<Tooltip title="Le nombre de patients de ce périmètre est très large, la carte peut être lente à charger.">
263-
<IconButton
264-
style={{ padding: '0 0 0 4px', marginTop: '-2.5px', marginLeft: '25px', position: 'absolute' }}
265-
>
266-
<WarningIcon color="warning" style={{ height: 22 }} />
267-
</IconButton>
268-
</Tooltip>
269-
)}
270-
</Typography>
271-
</Grid>
272-
186+
<Chart
187+
id="location-map"
188+
isLoading={loading}
189+
title="Répartition spatiale par zone IRIS"
190+
tooltip="Les localisations des patients sont affichées uniquement si leur adresse est disponible (certains patients n'ayant pas d'adresse associée)."
191+
warningTooltip={
192+
total && total > MAP_WARNING_PERSON_COUNT_THRESHOLD
193+
? 'Le nombre de patients de ce périmètre est très large, la carte peut être lente à charger.'
194+
: undefined
195+
}
196+
height={'fit-content'}
197+
>
273198
<LocationMap cohortId={cohortId} />
274-
</Paper>
199+
</Chart>
275200
</Grid>
276201
</Grid>
277202
)}

‎src/components/Dashboard/Preview/styles.ts‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { Theme } from '@mui/material/styles'
33

44
const useStyles = makeStyles()((theme: Theme) => ({
55
root: {
6-
backgroundColor: '#E6F1FD'
6+
backgroundColor: '#FFF',
7+
marginTop: 16
78
},
89
progressContainer: {
910
height: '100%',
@@ -15,22 +16,26 @@ const useStyles = makeStyles()((theme: Theme) => ({
1516
margin: theme.spacing(1),
1617
height: 150,
1718
width: 'calc(100% - 16px)',
18-
borderRadius: '8px'
19+
borderRadius: '8px',
20+
boxShadow: 'unset',
21+
border: '1px solid #D1E2F4',
22+
overflowY: 'hidden'
1923
},
2024
nbPatients: {
2125
marginTop: '24px'
2226
},
2327
nbPatientsOverlay: {
2428
display: 'flex',
2529
flexDirection: 'column',
26-
backgroundColor: '#FFF',
2730
padding: theme.spacing(2),
2831
margin: theme.spacing(1),
2932
height: '148px',
3033
borderRadius: '8px',
3134
alignItems: 'center',
3235
fontSize: '16px',
33-
width: 'calc(100% - 16px)'
36+
width: 'calc(100% - 16px)',
37+
boxShadow: 'unset',
38+
border: '1px solid #D1E2F4'
3439
},
3540
tableHead: {
3641
height: '42px'
@@ -42,20 +47,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
4247
padding: '0 20px',
4348
textTransform: 'uppercase'
4449
},
45-
fixedChartOverlay: {
46-
display: 'flex',
47-
flexDirection: 'column',
48-
height: '300px',
49-
alignItems: 'center'
50-
},
51-
chartOverlay: {
52-
backgroundColor: '#FFF',
53-
padding: theme.spacing(2),
54-
margin: theme.spacing(1),
55-
borderRadius: '8px',
56-
fontSize: '16px',
57-
width: 'calc(100% - 16px)'
58-
},
5950
chartTitle: {
6051
borderBottom: '2px inset #E6F1FD',
6152
paddingBottom: '10px'

0 commit comments

Comments
 (0)