@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.8 → 23.10.18-MON-17793-create-graph-component-centreon-ui.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.8",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.10",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/Graph.tsx

@@ -26,12 +26,19 @@ import useAnchorPoint from './IntercatifsComponents/AnchorPoint/useAnchorPoint';
 import GraphTooltip from './IntercatifsComponents/Tooltip';
 import useGraphTooltip from './IntercatifsComponents/Tooltip/useGraphTooltip';
 import Legend from './Legend';
-import { Data, GlobalAreaLines, GraphInterval, GraphProps } from './models';
+import {
+  Data,
+  GlobalAreaLines,
+  GraphInterval,
+  GraphProps,
+  LegendModel
+} from './models';
 import { getLeftScale, getRightScale, getXScale } from './timeSeries';
 
 interface Props extends GraphProps {
   graphData: Data;
   graphInterval: GraphInterval;
+  legend?: LegendModel;
   loading: boolean;
   shapeLines?: GlobalAreaLines;
 }
@@ -48,7 +55,8 @@ const Graph = ({
   graphInterval,
   timeShiftZones,
   annotationEvent,
-  tooltip
+  tooltip,
+  legend
 }: Props): JSX.Element => {
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
@@ -261,7 +269,12 @@ const Graph = ({
             </Group.Group>
           </svg>
           <GraphTooltip {...tooltip} {...graphTooltipData} />
-          <Legend base={baseAxis} lines={newLines} timeSeries={timeSeries} />
+          <Legend
+            base={baseAxis}
+            lines={newLines}
+            renderExtraComponent={legend?.renderExtraComponent}
+            timeSeries={timeSeries}
+          />
         </div>
       </ClickAwayListener>
     </>

package/src/Graph/Legend/index.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { slice } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
@@ -20,6 +22,7 @@ interface Props {
   base: number;
   limitLegendRows?: boolean;
   lines: Array<Line>;
+  renderExtraComponent?: ReactNode;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
 }
@@ -29,7 +32,8 @@ const Legend = ({
   timeSeries,
   base,
   toggable = true,
-  limitLegendRows = true
+  limitLegendRows = true,
+  renderExtraComponent
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
@@ -127,6 +131,7 @@ const Legend = ({
           );
         })}
       </div>
+      {renderExtraComponent}
     </div>
   );
 };

package/src/Graph/index.tsx

@@ -9,7 +9,7 @@ import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
 import Graph from './Graph';
-import { GlobalAreaLines, GraphData, GraphProps } from './models';
+import { GlobalAreaLines, GraphData, GraphProps, LegendModel } from './models';
 import useGraphData from './useGraphData';
 
 dayjs.extend(localizedFormat);
@@ -19,6 +19,7 @@ dayjs.extend(timezonePlugin);
 interface Props extends Partial<GraphProps> {
   data: GraphData;
   end: string;
+  legend: LegendModel;
   loading: boolean;
   shapeLines?: GlobalAreaLines;
   start: string;
@@ -37,7 +38,8 @@ const WrapperGraph = ({
   loading,
   timeShiftZones,
   tooltip,
-  annotationEvent
+  annotationEvent,
+  legend
 }: Props): JSX.Element | null => {
   const { adjustedData } = useGraphData({ data, end, start });
 
@@ -59,6 +61,7 @@ const WrapperGraph = ({
             graphData={{ ...adjustedData }}
             graphInterval={{ end, start }}
             height={height ?? responsiveHeight}
+            legend={legend}
             loading={loading}
             shapeLines={shapeLines}
             timeShiftZones={timeShiftZones}

package/src/Graph/models.ts

@@ -110,3 +110,6 @@ export interface GlobalAreaLines {
   areaStackedLines?: Area;
   areaThresholdLines?: ThresholdArea;
 }
+export interface LegendModel {
+  renderExtraComponent?: ReactNode;
+}

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,4 +1,5 @@
 import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { Button, Typography } from '@mui/material';
@@ -6,6 +7,11 @@ import { Button, Typography } from '@mui/material';
 import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
 
 import { customTimePeriodAtom } from '../timePeriodsAtoms';
+import {
+  labelCompactTimePeriod,
+  labelFrom,
+  labelTo
+} from '../translatedLabels';
 
 import useStyles from './CompactCustomTimePeriod.styles';
 
@@ -19,6 +25,7 @@ const CompactCustomTimePeriod = ({
   disabled = false
 }: Props): JSX.Element => {
   const { classes } = useStyles();
+  const { t } = useTranslation();
 
   const { format } = useLocaleDateTimeFormat();
 
@@ -27,10 +34,10 @@ const CompactCustomTimePeriod = ({
   return (
     <div>
       <Button
-        aria-label="CompactTimePeriod"
+        aria-label={t(labelCompactTimePeriod) as string}
         className={classes.button}
         color="primary"
-        data-testid="Compact time period"
+        data-testid={labelCompactTimePeriod}
         disabled={disabled}
         variant="outlined"
         onClick={onClick}
@@ -44,7 +51,7 @@ const CompactCustomTimePeriod = ({
                 component="div"
                 variant="caption"
               >
-                From:
+                {t(labelFrom)}:
               </Typography>
 
               <Typography
@@ -64,7 +71,7 @@ const CompactCustomTimePeriod = ({
                 component="div"
                 variant="caption"
               >
-                To:
+                {t(labelTo)}:
               </Typography>
 
               <Typography

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,6 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { T, always, cond, equals, lte, map, pick } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { useTranslation } from 'react-i18next';
 
 import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
 
@@ -35,7 +36,7 @@ const SelectedTimePeriod = ({
 }: Props): JSX.Element => {
   const { classes } = useStyles();
   const theme = useTheme();
-
+  const { t } = useTranslation();
   const selectedTimePeriodData = useAtomValue(selectedTimePeriodAtom);
 
   const changeSelectedTimePeriod = useSetAtom(
@@ -52,6 +53,12 @@ const SelectedTimePeriod = ({
     currentTimePeriods
   );
 
+  const translatedTimePeriodOptions = timePeriodOptions.map((timePeriod) => ({
+    ...timePeriod,
+    largeName: t(timePeriod.largeName),
+    name: t(timePeriod.name)
+  }));
+
   return (
     <ButtonGroup
       className={classes.buttonGroup}
@@ -86,7 +93,7 @@ const SelectedTimePeriod = ({
             </Button>
           </Tooltip>
         ),
-        timePeriodOptions
+        translatedTimePeriodOptions
       )}
     </ButtonGroup>
   );

package/src/TimePeriods/models.ts

@@ -1,5 +1,14 @@
 import dayjs from 'dayjs';
 
+import {
+  labelLastDay,
+  label1Day,
+  label7Days,
+  label31Days,
+  labelLast7Days,
+  labelLast31Days
+} from './translatedLabels';
+
 export const dateFormat = 'L';
 export const timeFormat = 'LT';
 export const dateTimeFormat = `${dateFormat} ${timeFormat}`;
@@ -18,13 +27,6 @@ export interface TimePeriod {
   timelineEventsLimit: number;
 }
 
-export const label1Day = '1 day';
-export const label7Days = '7 days';
-export const label31Days = '31 days';
-export const labelLastDay = 'Last day';
-export const labelLast7Days = 'Last 7 days';
-export const labelLast31Days = 'Last 31 days';
-
 export const lastDayPeriod: TimePeriod = {
   dateTimeFormat: timeFormat,
   getStart: (): Date => dayjs(Date.now()).subtract(24, 'hour').toDate(),

package/src/TimePeriods/translatedLabels.ts

@@ -0,0 +1,9 @@
+export const label1Day = '1 day';
+export const label7Days = '7 days';
+export const label31Days = '31 days';
+export const labelLastDay = 'Last day';
+export const labelLast7Days = 'Last 7 days';
+export const labelLast31Days = 'Last 31 days';
+export const labelFrom = 'From';
+export const labelTo = 'To';
+export const labelCompactTimePeriod = 'Compact time period';