@centreon/ui 24.4.1-MON-34459-fullscreen-mode.0 → 24.4.1-MON-develop-dashboard.1

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -0,0 +1,251 @@
+import { useRef } from 'react';
+
+import { Pie } from '@visx/shape';
+import { Group } from '@visx/group';
+import { Text } from '@visx/text';
+import numeral from 'numeral';
+import { always, equals, gt, ifElse, lt } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography, useTheme } from '@mui/material';
+
+import { Tooltip } from '../../components';
+import { Legend as LegendComponent } from '../Legend';
+import { LegendProps } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
+import { labelNoDataFound } from '../translatedLabels';
+
+import { PieProps } from './models';
+import { usePieStyles } from './PieChart.styles';
+import { useResponsivePie } from './useResponsivePie';
+
+const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
+  <LegendComponent direction={direction} scale={scale} />
+);
+
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+
+const getTooltipPlacement = ({ radianX, radianY }): Placement => {
+  if (gt(Math.abs(radianX), Math.abs(radianY))) {
+    return ifElse<[b: number], Placement, Placement>(
+      lt(0),
+      always<Placement>('right'),
+      always<Placement>('left')
+    )(radianX);
+  }
+
+  return ifElse<[b: number], Placement, Placement>(
+    lt(0),
+    always<Placement>('bottom'),
+    always<Placement>('top')
+  )(radianY);
+};
+
+const ResponsivePie = ({
+  title,
+  variant = 'pie',
+  width,
+  height,
+  data,
+  unit = 'number',
+  Legend = DefaultLengd,
+  displayLegend = true,
+  innerRadius: defaultInnerRadius = 40,
+  onArcClick,
+  displayValues,
+  TooltipContent,
+  legendDirection = 'column'
+}: PieProps & { height: number; width: number }): JSX.Element => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const legendRef = useRef(null);
+  const titleRef = useRef(null);
+
+  const {
+    half,
+    legendScale,
+    svgContainerSize,
+    svgSize,
+    svgWrapperWidth,
+    total,
+    innerRadius,
+    isContainsExactlyOneNonZeroValue,
+    areAllValuesNull
+  } = useResponsivePie({
+    data,
+    defaultInnerRadius,
+    height,
+    legendRef,
+    titleRef,
+    unit,
+    width
+  });
+
+  const { classes } = usePieStyles({ svgSize });
+
+  if (areAllValuesNull) {
+    return (
+      <div className={classes.container} style={{ height, width }}>
+        <Typography variant="h3">{t(labelNoDataFound)}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={classes.container}
+      style={{
+        height,
+        width
+      }}
+    >
+      <div
+        className={classes.svgWrapper}
+        style={{
+          height,
+          width: svgWrapperWidth
+        }}
+      >
+        {equals(variant, 'pie') && title && (
+          <div className={classes.title} data-testid="Title" ref={titleRef}>
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+          </div>
+        )}
+        <div
+          className={classes.svgContainer}
+          data-testid="pieChart"
+          style={{
+            height: svgContainerSize,
+            width: svgContainerSize
+          }}
+        >
+          <svg data-variant={variant} height={svgSize} width={svgSize}>
+            <Group left={half} top={half}>
+              <Pie
+                cornerRadius={4}
+                data={data}
+                innerRadius={() => {
+                  return equals(variant, 'pie') ? 0 : half - innerRadius;
+                }}
+                outerRadius={half}
+                pieValue={(items) => items.value}
+              >
+                {(pie) => {
+                  return pie.arcs.map((arc) => {
+                    const [centroidX, centroidY] = pie.path.centroid(arc);
+                    const midAngle = Math.atan2(centroidY, centroidX);
+
+                    const labelRadius = half * 0.8;
+
+                    const labelX = Math.cos(midAngle) * labelRadius;
+                    const labelY = Math.sin(midAngle) * labelRadius;
+
+                    const angle = arc.endAngle - arc.startAngle;
+                    const minAngle = 0.2;
+
+                    const x = equals(variant, 'donut') ? centroidX : labelX;
+                    const y = equals(variant, 'donut') ? centroidY : labelY;
+
+                    const onClick = (): void => {
+                      onArcClick?.(arc.data);
+                    };
+
+                    return (
+                      <Tooltip
+                        hasCaret
+                        classes={{
+                          tooltip: classes.pieChartTooltip
+                        }}
+                        followCursor={false}
+                        key={arc.data.label}
+                        label={
+                          TooltipContent && (
+                            <TooltipContent
+                              color={arc.data.color}
+                              label={arc.data.label}
+                              title={title}
+                              total={total}
+                              value={arc.data.value}
+                            />
+                          )
+                        }
+                        leaveDelay={200}
+                        placement={getTooltipPlacement({
+                          radianX: Math.cos(midAngle),
+                          radianY: Math.sin(midAngle)
+                        })}
+                      >
+                        <g data-testid={arc.data.label} onClick={onClick}>
+                          <path
+                            d={pie.path(arc) as string}
+                            fill={arc.data.color}
+                          />
+                          {displayValues &&
+                            !isContainsExactlyOneNonZeroValue &&
+                            angle > minAngle && (
+                              <Text
+                                data-testid="value"
+                                dy=".33em"
+                                fill="#000"
+                                fontSize={12}
+                                pointerEvents="none"
+                                textAnchor="middle"
+                                x={x}
+                                y={y}
+                              >
+                                {getValueByUnit({
+                                  total,
+                                  unit,
+                                  value: arc.data.value
+                                })}
+                              </Text>
+                            )}
+                        </g>
+                      </Tooltip>
+                    );
+                  });
+                }}
+              </Pie>
+              {equals(variant, 'donut') && title && (
+                <>
+                  <Text
+                    className={classes.title}
+                    dy={lt(svgSize, 150) ? -10 : -15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {numeral(total).format('0a').toUpperCase()}
+                  </Text>
+                  <Text
+                    className={classes.title}
+                    data-testid="Title"
+                    dy={lt(svgSize, 150) ? 10 : 15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {title}
+                  </Text>
+                </>
+              )}
+            </Group>
+          </svg>
+        </div>
+      </div>
+      {displayLegend && (
+        <div data-testid="Legend" ref={legendRef}>
+          <Legend
+            data={data}
+            direction={legendDirection}
+            scale={legendScale}
+            title={title}
+            total={total}
+            unit={unit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResponsivePie;

package/src/Graph/PieChart/index.ts

@@ -0,0 +1 @@
+export { default as PieChart } from './PieChart';

package/src/Graph/PieChart/models.ts

@@ -0,0 +1,19 @@
+export interface ArcType {
+  color: string;
+  label: string;
+  value: number;
+}
+
+export interface PieProps {
+  Legend?: ({ scale, direction, data, title, total, unit }) => JSX.Element;
+  TooltipContent?: (arcData) => JSX.Element | boolean | null;
+  data: Array<ArcType>;
+  displayLegend?: boolean;
+  displayValues?: boolean;
+  innerRadius?: number;
+  legendDirection?: 'row' | 'column';
+  onArcClick?: (ardata) => void;
+  title?: string;
+  unit?: 'percentage' | 'number';
+  variant?: 'pie' | 'donut';
+}

package/src/Graph/PieChart/useResponsivePie.ts

@@ -0,0 +1,86 @@
+import { equals, isEmpty, pluck, reject } from 'ramda';
+
+import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
+
+import { ArcType } from './models';
+
+interface ResponsivePieProps {
+  data: Array<ArcType>;
+  defaultInnerRadius: number;
+  height: number;
+  legendRef;
+  titleRef;
+  unit: 'percentage' | 'number';
+  width: number;
+}
+
+interface ResponsivePieState {
+  areAllValuesNull: boolean;
+  half: number;
+  innerRadius: number;
+  isContainsExactlyOneNonZeroValue: boolean;
+  legendScale: LegendScale;
+  svgContainerSize: number;
+  svgSize: number;
+  svgWrapperWidth: number;
+  total: number;
+}
+export const useResponsivePie = ({
+  titleRef,
+  legendRef,
+  height,
+  width,
+  data,
+  unit,
+  defaultInnerRadius
+}: ResponsivePieProps): ResponsivePieState => {
+  const heightOfTitle = titleRef.current?.offsetHeight || 0;
+  const widthOfLegend = legendRef.current?.offsetWidth || 0;
+
+  const horizontalGap = widthOfLegend > 0 ? 16 : 0;
+  const verticalGap = heightOfTitle > 0 ? 8 : 0;
+
+  const svgWrapperWidth = width - widthOfLegend - horizontalGap;
+
+  const svgContainerSize = Math.min(
+    height - heightOfTitle - verticalGap,
+    width - widthOfLegend - horizontalGap
+  );
+
+  const outerRadius = Math.min(32, svgContainerSize / 6);
+
+  const svgSize = svgContainerSize - outerRadius;
+
+  const half = svgSize / 2;
+
+  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
+
+  const innerRadius = Math.min(defaultInnerRadius, svgSize / 5);
+
+  const legendScale = {
+    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+    range: pluck('color', data)
+  };
+
+  const values = pluck('value', data);
+
+  const isContainsExactlyOneNonZeroValue = equals(
+    reject((value) => equals(value, 0), values).length,
+    1
+  );
+
+  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
+
+  return {
+    areAllValuesNull,
+    half,
+    innerRadius,
+    isContainsExactlyOneNonZeroValue,
+    legendScale,
+    svgContainerSize,
+    svgSize,
+    svgWrapperWidth,
+    total
+  };
+};

package/src/Graph/common/utils.ts

@@ -11,6 +11,7 @@ import {
   lte,
   pluck
 } from 'ramda';
+import numeral from 'numeral';
 
 import { Theme } from '@mui/material';
 
@@ -73,3 +74,21 @@ export const getColorFromDataAndTresholds = ({
     [T, always(theme.palette.error.main)]
   ])(data);
 };
+
+interface ValueByUnitProps {
+  total: number;
+  unit: 'percentage' | 'number';
+  value: number;
+}
+
+export const getValueByUnit = ({
+  unit,
+  value,
+  total
+}: ValueByUnitProps): string => {
+  if (equals(unit, 'number')) {
+    return numeral(value).format('0a').toUpperCase();
+  }
+
+  return `${((value * 100) / total).toFixed(1)}%`;
+};

package/src/Graph/index.ts

@@ -4,3 +4,5 @@ export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
 
 export { HeatMap } from './HeatMap';
+export { BarStack } from './BarStack';
+export { PieChart } from './PieChart';

package/src/Graph/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelNoDataFound = 'No Data Available';

package/src/Listing/ActionBar/index.tsx

@@ -174,14 +174,15 @@ const MemoListingActionBar = ({
               </IconButton>
             )}
           <div className={classes.ModeViewer} />
-          {columnConfiguration?.selectedColumnIds && (
-            <ColumnMultiSelect
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              onResetColumns={onResetColumns}
-              onSelectColumns={onSelectColumns}
-            />
-          )}
+          {columnConfiguration?.selectedColumnIds &&
+            columnConfiguration?.sortable && (
+              <ColumnMultiSelect
+                columnConfiguration={columnConfiguration}
+                columns={columns}
+                onResetColumns={onResetColumns}
+                onSelectColumns={onSelectColumns}
+              />
+            )}
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}

package/src/Listing/Cell/DataCell.styles.ts

@@ -8,6 +8,9 @@ const useStyles = makeStyles()((theme) => ({
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   },
+  clickable: {
+    cursor: 'default'
+  },
   componentColumn: {
     width: theme.spacing(2.75)
   },

package/src/Listing/Cell/DataCell.tsx

@@ -46,7 +46,7 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -64,7 +64,7 @@ const DataCell = ({
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan } = column;
+      const { getFormattedString, isTruncated, getColSpan, align } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -87,6 +87,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
+            alignItems: align,
             gridColumn
           }}
           {...commonCellProps}
@@ -99,7 +100,7 @@ const DataCell = ({
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable } = column;
+      const { getHiddenCondition, clickable, align } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -126,9 +127,12 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
+          className={cx(classes.cell, clickable && classes.clickable)}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
+          style={{
+            alignItems: align
+          }}
           onClick={(e): void => {
             if (!clickable) {
               return;

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,4 +1,6 @@
-import { Button } from '@mui/material';
+import { Button, Typography } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
 
 import { ColumnType } from './models';
 
@@ -12,6 +14,12 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
+const LargeText = (): JSX.Element => (
+  <Typography sx={{ whiteSpace: 'normal' }}>
+    This is a large text that fills the content
+  </Typography>
+);
+
 const generateSubItems = (parentIndex: number): Array<unknown> => {
   return tenElements.map((__, subIndex) => ({
     active: false,
@@ -37,6 +45,28 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   subItems: index % 2 === 0 ? generateSubItems(index) : undefined
 }));
 
+const defaultColumn = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: LargeText,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '100px'
+  }
+];
+
 const columnsWithSubItems = [
   {
     getFormattedString: ({ name }): string => name,
@@ -62,7 +92,27 @@ const columnsWithSubItems = [
 
 const expandedItems = [0, 8];
 
-const mountListing = (): void => {
+const mountListingResponsive = (listingVariant: ListingVariant): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <Listing
+          isResponsive
+          columns={defaultColumn}
+          currentPage={1}
+          limit={10}
+          listingVariant={listingVariant}
+          rows={listingWithSubItems}
+          totalRows={10}
+        />
+      </div>
+    )
+  });
+};
+
+const mountListingForSubItems = (): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
@@ -89,9 +139,9 @@ const mountListing = (): void => {
 };
 
 describe('Listing', () => {
-  beforeEach(mountListing);
-
   it('expands the row when the corresponding icon si clicked', () => {
+    mountListingForSubItems();
+
     cy.contains('E0').should('be.visible');
 
     expandedItems.forEach((index) => {
@@ -111,6 +161,8 @@ describe('Listing', () => {
   });
 
   it('collapses the row when the corresponding icon si clicked', () => {
+    mountListingForSubItems();
+
     cy.contains('Sub item 100').should('be.visible');
 
     cy.findByLabelText('Collapse 0').click();
@@ -119,4 +171,28 @@ describe('Listing', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.compact);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '30px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.extended);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '38px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
 });

package/src/Listing/Listing.styles.ts

@@ -1,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -9,12 +7,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  listingVariant: ListingVariant;
+  isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,7 +54,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
         rows?.length || 1
-      }, ${dataStyle.body.height}px)`,
+      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/index.stories.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
@@ -395,3 +395,26 @@ export const ListingWithSubItems = {
   },
   render: TemplateSubItems
 };
+
+export const ListingWithResponsive = {
+  args: {
+    checkable: true,
+    columns: [
+      ...defaultColumns,
+      {
+        Component: ComponentColumn,
+        id: '##',
+        label: 'Responsive',
+        type: ColumnType.component,
+        width: '140px'
+      }
+    ],
+    currentPage: 1,
+    isResponsive: true,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    totalRows: 10
+  },
+  render: TemplateSubItems
+};

package/src/Listing/index.test.tsx

@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: false
+          sortable: true
         }}
         columns={columns}
         rows={rows}