@centreon/ui 24.4.1-MON-32953-improve-responsiveness.0 → 24.4.1-MON-develop-dashboard.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/package.json +4 -1
  2. package/src/Graph/BarStack/BarStack.cypress.spec.tsx +154 -0
  3. package/src/Graph/BarStack/BarStack.stories.tsx +123 -0
  4. package/src/Graph/BarStack/BarStack.styles.ts +36 -0
  5. package/src/Graph/BarStack/BarStack.tsx +14 -0
  6. package/src/Graph/BarStack/ResponsiveBarStack.tsx +208 -0
  7. package/src/Graph/BarStack/index.ts +1 -0
  8. package/src/Graph/BarStack/models.ts +19 -0
  9. package/src/Graph/BarStack/useResponsiveBarStack.ts +139 -0
  10. package/src/Graph/Legend/Legend.tsx +21 -0
  11. package/src/Graph/Legend/index.ts +1 -0
  12. package/src/Graph/Legend/models.ts +11 -0
  13. package/src/Graph/PieChart/PieChart.cypress.spec.tsx +169 -0
  14. package/src/Graph/PieChart/PieChart.stories.tsx +194 -0
  15. package/src/Graph/PieChart/PieChart.styles.ts +39 -0
  16. package/src/Graph/PieChart/PieChart.tsx +14 -0
  17. package/src/Graph/PieChart/ResponsivePie.tsx +251 -0
  18. package/src/Graph/PieChart/index.ts +1 -0
  19. package/src/Graph/PieChart/models.ts +19 -0
  20. package/src/Graph/PieChart/useResponsivePie.ts +86 -0
  21. package/src/Graph/common/utils.ts +19 -0
  22. package/src/Graph/index.ts +2 -0
  23. package/src/Graph/translatedLabels.ts +1 -0
  24. package/src/InputField/Select/Autocomplete/index.tsx +2 -8
  25. package/src/Listing/ActionBar/index.tsx +9 -8
  26. package/src/Listing/Cell/DataCell.styles.ts +3 -0
  27. package/src/Listing/Cell/DataCell.tsx +8 -4
  28. package/src/Listing/Listing.cypress.spec.tsx +80 -4
  29. package/src/Listing/Listing.styles.ts +3 -5
  30. package/src/Listing/index.stories.tsx +25 -2
  31. package/src/Listing/index.test.tsx +1 -1
  32. package/src/Listing/index.tsx +3 -1
  33. package/src/Listing/models.ts +1 -0
  34. package/src/components/Modal/Modal.styles.ts +3 -8
package/src/Listing/index.stories.tsx CHANGED
@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
40
40
  }));
41
41
 
42
42
  const ComponentColumn = ({ row, isSelected }): JSX.Element => (
43
- <>
43
+ <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
44
44
  <span>
45
45
  {'I am '}
46
46
  <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
50
50
  {'I am '}
51
51
  <b>{`${row.active ? 'active' : 'not active'}`}</b>
52
52
  </span>
53
- </>
53
+ </div>
54
54
  );
55
55
 
56
56
  const ButtonColumn = ({ row }): JSX.Element => (
@@ -395,3 +395,26 @@ export const ListingWithSubItems = {
395
395
  },
396
396
  render: TemplateSubItems
397
397
  };
398
+
399
+ export const ListingWithResponsive = {
400
+ args: {
401
+ checkable: true,
402
+ columns: [
403
+ ...defaultColumns,
404
+ {
405
+ Component: ComponentColumn,
406
+ id: '##',
407
+ label: 'Responsive',
408
+ type: ColumnType.component,
409
+ width: '140px'
410
+ }
411
+ ],
412
+ currentPage: 1,
413
+ isResponsive: true,
414
+ limit: 10,
415
+ loading: false,
416
+ rows: listingWithSubItems,
417
+ totalRows: 10
418
+ },
419
+ render: TemplateSubItems
420
+ };
package/src/Listing/index.test.tsx CHANGED
@@ -216,7 +216,7 @@ describe('Listing', () => {
216
216
  <Listing
217
217
  columnConfiguration={{
218
218
  selectedColumnIds: columns.map(prop('id')),
219
- sortable: false
219
+ sortable: true
220
220
  }}
221
221
  columns={columns}
222
222
  rows={rows}
package/src/Listing/index.tsx CHANGED
@@ -102,6 +102,7 @@ export interface Props<TRow> {
102
102
  getId?: (row: TRow) => RowId;
103
103
  headerMemoProps?: Array<unknown>;
104
104
  innerScrollDisabled?: boolean;
105
+ isResponsive?: boolean;
105
106
  limit?: number;
106
107
  listingVariant?: ListingVariant;
107
108
  loading?: boolean;
@@ -147,6 +148,7 @@ const Listing = <TRow extends { id: RowId }>({
147
148
  columns,
148
149
  columnConfiguration = defaultColumnConfiguration,
149
150
  customPaginationClassName,
151
+ isResponsive = false,
150
152
  onResetColumns,
151
153
  onSelectColumns,
152
154
  rows = [],
@@ -233,7 +235,7 @@ const Listing = <TRow extends { id: RowId }>({
233
235
  const { classes } = useListingStyles({
234
236
  dataStyle,
235
237
  getGridTemplateColumn,
236
- listingVariant,
238
+ isResponsive,
237
239
  rows: rowsToDisplay
238
240
  });
239
241
 
package/src/Listing/models.ts CHANGED
@@ -15,6 +15,7 @@ export interface ComponentColumnProps {
15
15
 
16
16
  export interface Column {
17
17
  Component?: (props: ComponentColumnProps) => JSX.Element | null;
18
+ align?: 'start' | 'end' | 'center';
18
19
  clickable?: boolean;
19
20
  compact?: boolean;
20
21
  disablePadding?: boolean;
package/src/components/Modal/Modal.styles.ts CHANGED
@@ -28,7 +28,6 @@ const useStyles = makeStyles<{
28
28
  left: props?.left ?? 0,
29
29
  margin: 0,
30
30
  maxWidth: 'unset',
31
- paddingBottom: theme.spacing(8),
32
31
  position: 'absolute',
33
32
  right: props?.right ?? 0,
34
33
  top: props?.top ?? 0,
@@ -51,18 +50,14 @@ const useStyles = makeStyles<{
51
50
  },
52
51
  modalActions: {
53
52
  '&[data-fixed="true"]': {
54
- background: theme.palette.background.paper,
55
- position: 'fixed',
56
- width: '100%'
53
+ position: 'fixed'
57
54
  },
58
- bottom: 0,
55
+ bottom: theme.spacing(2),
59
56
  display: 'flex',
60
57
  flexDirection: 'row',
61
58
  gap: theme.spacing(2),
62
59
  justifyContent: 'flex-end',
63
- padding: theme.spacing(1, 2.5, 2.5, 0),
64
- right: 0,
65
- zIndex: theme.zIndex.modal
60
+ right: theme.spacing(2.5)
66
61
  },
67
62
  modalBody: {
68
63
  '& > p': {