@centreon/ui 25.8.1 → 25.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.8.1",
+  "version": "25.9.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -259,4 +259,4 @@ export const mixedStackedMinMax: Story = {
     max: 20
   },
   render: Template
-};
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -73,7 +73,7 @@ const BarChart = ({
   max,
   boundariesUnit
 }: BarChartProps): JSX.Element => {
-  const { adjustedData } = useChartData({ data, end, start });
+  const { adjustedData } = useChartData({ data, end, start, min, max });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
 
   if (loading && !adjustedData) {
@@ -116,4 +116,4 @@ const BarChart = ({
   );
 };
 
-export default BarChart;
+export default BarChart;

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -180,7 +180,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.4 s').should('be.visible');
-      cy.contains('75.64%').should('be.visible');
+       cy.contains('75.64%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -451,7 +451,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 198.7929601526369)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 274.47726401277305)"]').should(
         'be.visible'
       );
 
@@ -533,7 +533,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="250.83333333333334"]').should('be.visible');
-      cy.get('circle[cy="246.2421135204699"]').should('be.visible');
+      cy.get('circle[cy="251.79089393069725"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -746,11 +746,9 @@ describe('Lines and bars', () => {
 
     checkGraphWidth();
 
-    cy.get(
-      'path[d="M7.501377410468319,278.09035407759154 h56.51239669421488 h1v1 v95.90964592240846 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-95.90964592240846 v-1h1z'
-    );
-    cy.get(
-      'path[d="M24.05509641873278,225.7604521029811 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v17.222463958081512 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-17.222463958081512 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+    cy.get('path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
+    ).should('be.visible');
+    cy.get('path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/Chart.tsx

@@ -394,4 +394,4 @@ const Chart = ({
   );
 };
 
-export default Chart;
+export default Chart;

package/src/Graph/Chart/models.ts

@@ -193,4 +193,4 @@ export interface GraphTooltipData {
     unit: string;
     value: number;
   }>;
-}
+}

package/src/Graph/common/timeSeries/index.ts

@@ -766,4 +766,4 @@ export {
   formatMetricValueWithUnit,
   getYScaleUnit,
   getYScalePerUnit
-};
+};

package/src/InputField/Select/index.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import {
   Divider,
   FormControl,
+  FormControlProps,
   FormHelperText,
   InputLabel,
   ListSubheader,
@@ -59,6 +60,7 @@ type Props = {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   options: Array<SelectEntry>;
   selectedOptionId: number | string;
+  formControlProps: FormControlProps;
 } & Omit<SelectProps, 'error'>;
 
 const SelectField = ({
@@ -72,6 +74,7 @@ const SelectField = ({
   ariaLabel,
   inputProps,
   compact = false,
+  formControlProps,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -92,6 +95,8 @@ const SelectField = ({
       error={!isNil(error)}
       fullWidth={fullWidth}
       size="small"
+      {...formControlProps}
+      
     >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
@@ -146,4 +151,4 @@ const SelectField = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

package/src/ThemeProvider/base.css

@@ -0,0 +1,49 @@
+@layer base {
+  ::-webkit-scrollbar {
+    height: var(--spacing-2);
+    width: var(--spacing-2);
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-text-disabled);
+    border-radius: var(--spacing-1);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary-main);
+  }
+
+  * {
+    scrollbar-color: var(--color-text-disabled) var(--color-background-default);
+    scrollbar-width: thin;
+  }
+
+  html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: var(--color-background-paper);
+    height: 100%;
+    padding: 0;
+    width: 100%;
+  }
+
+  #root {
+    background-color: var(--color-background-paper) !important;
+  }
+
+  @variant dark {
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--color-divider);
+    }
+    * {
+      scrollbar-color: var(--color-divider) var(--color-background-default);
+    }
+  }
+}

package/src/ThemeProvider/index.tsx

@@ -26,7 +26,7 @@ import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  interface DefaultTheme extends Theme {}
+  interface DefaultTheme extends Theme { }
 }
 
 declare module '@mui/material/TextField' {
@@ -147,46 +147,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
-        html {
-          margin: 0;
-          padding: 0;
-          width: 100%;
-          height: 100%;
-          text-rendering: optimizeLegibility;
-        }
-        body {
-          background-color: ${theme.palette.background.paper};
-          height: 100%;
-          padding: 0;
-          width: 100%;
-        }
-        #root {
-          background-color: ${theme.palette.background.paper};
-        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
@@ -211,6 +171,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           font-weight: 700;
           src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
         }
+        body {
+          background-color: ${theme.palette.background.paper};
+        }
       `
     },
     MuiInputBase: {
@@ -235,14 +198,14 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           '&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus':
-            {
-              background: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.primary.dark
-                : theme.palette.primary.light,
-              color: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.common.white
-                : theme.palette.primary.main
-            },
+          {
+            background: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.primary.dark
+              : theme.palette.primary.light,
+            color: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.common.white
+              : theme.palette.primary.main
+          },
           fontSize: theme.typography.body2.fontSize
         })
       }
@@ -259,12 +222,12 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           [`[role="tooltip"] &, &.MuiMenu-paper, &.${autocompleteClasses.paper}`]:
-            {
-              backgroundColor: theme.palette.background.default,
-              border: 'none',
-              borderRadius: `${theme.shape.borderRadius}px`,
-              boxShadow: theme.shadows[3]
-            }
+          {
+            backgroundColor: theme.palette.background.default,
+            border: 'none',
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: theme.shadows[3]
+          }
         })
       }
     },

package/src/ThemeProvider/tailwindcss.css

@@ -1,10 +1,13 @@
 @import "tailwindcss";
+@import "./base.css"; /* Base styles: scrollbar, html, body, #root */
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Typography */
   --font-body: Roboto, Arial, serif;
 
+  /* Spacing system */
   --spacing: 4px;
 
   --spacing-0: calc(var(--spacing) * 0);
@@ -19,6 +22,11 @@
   --spacing-9: calc(var(--spacing) * 9);
   --spacing-10: calc(var(--spacing) * 10);
 
+  /* =============
+     COLOR SYSTEM
+     ============= */
+  
+  /* Action colors */
   --color-action-acknowledged: #745f35;
   --color-action-acknowledged-background: #dfd2b9;
   --color-action-in-flapping: #064a3f;
@@ -35,6 +43,8 @@
   --color-action-in-downtime-background: #e5d8f3;
   --color-action-selected: rgba(102, 102, 102, 0.3);
   --color-action-selected-opacity: 0.3;
+  
+  /* Background colors */
   --color-background-default: #f4f4f4;
   --color-background-listing-header: #666666;
   --color-background-panel: #ededed;
@@ -42,13 +52,19 @@
   --color-background-paper: #ffffff;
   --color-background-tooltip: #434e58;
   --color-background-widget: #f8f8f8;
+  
+  /* Chip colors */
   --color-chip-error: #ff6666;
   --color-chip-info: #1588d1;
   --color-chip-neutral: #6da4e4;
   --color-chip-success: #88b922;
   --color-chip-warning: #fd9b27;
+  
+  /* Utility colors */
   --color-divider: #e3e3e3;
   --color-error-main: #ff4a4a;
+  
+  /* Header colors */
   --color-header-page-action-background-active: #1975d10f;
   --color-header-page-action-background-default: #ffffff00;
   --color-header-page-action-color-active: #1976d2;
@@ -74,13 +90,19 @@
   --color-header-menu-item-color-active: #3e85d5;
   --color-header-menu-item-color-default: #1b2127;
   --color-header-menu-item-color-hover: #101418;
+  
+  /* State colors */
   --color-pending-main: #1ebeb3;
+  
+  /* Primary & Secondary colors */
   --color-primary-main: #2e68aa;
   --color-primary-light: #cde7fc;
   --color-primary-dark: #255891;
   --color-secondary-main: #c772d6;
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
+  
+  /* Status colors */
   --color-status-background-error: #ff6666;
   --color-status-background-none: --alpha(#2e68aa / 10%);
   --color-status-background-pending: #1ebeb3;
@@ -88,12 +110,16 @@
   --color-stauts-background-unknown: #e3e3e3;
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
+  
+  /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
   --color-text-secondary: #666666;
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
   --color-warning-dark: #fc7e00;
+  
+  /* Base colors */
   --color-white: #ffffff;
   --color-black: #000000;
 }