@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.9 → 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.9",
+  "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;
+}