@centreon/ui 25.4.2 → 25.4.4

package/package.json

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

package/src/Graph/Chart/useChartData.ts

@@ -30,6 +30,8 @@ interface Props {
   start?: string;
 }
 
+const getBoolean = (value) => Boolean(Number(value));
+
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
 
@@ -48,7 +50,16 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
 
     const newMetrics = Object.entries(metricsGroupedByColor).map(
       ([color, value]) => {
-        return value?.map((metric, index) =>
+        const adjustedValue = value?.map((item) => ({
+          ...item,
+          ds_data: {
+            ...item?.ds_data,
+            ds_invert: getBoolean(item?.ds_data?.ds_invert),
+            ds_filled: getBoolean(item?.ds_data?.ds_filled)
+          }
+        }));
+
+        return adjustedValue?.map((metric, index) =>
           set(
             lensPath(['ds_data', 'ds_color_line']),
             emphasizeCurveColor({ color, index }),
@@ -76,6 +87,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
     const { title } = dataWithAdjustedMetricsColor.global;
 
     const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
+
     const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
 
     adjustedDataRef.current = {

package/src/Graph/Tree/Links.tsx

@@ -26,7 +26,7 @@ const Links = <TData extends BaseProp>({
 }: Props<TData>): Array<JSX.Element> => {
   const theme = useTheme();
 
-  return links.map((link) => {
+  return links.map((link, idx) => {
     const ancestorIds = link.target
       .ancestors()
       .map((ancestor) => ancestor.data.data.id);
@@ -37,7 +37,7 @@ const Links = <TData extends BaseProp>({
 
     const LinkComponent = getLinkComponent(treeLink?.type);
 
-    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
+    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}-${idx}`;
 
     return (
       <LinkComponent

package/src/Graph/Tree/Tree.tsx

@@ -84,10 +84,10 @@ export const Tree = <TData extends BaseProp>({
   );
 
   return (
-    <Group left={node.width}>
+    <Group left={node.width / 2}>
       <VisxTree
         left={0}
-        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        nodeSize={[node.height + nodeMargins.x, node.height + node.width]}
         root={hierarchy(formattedTree, getExpanded)}
         separation={() => 1}
         size={[containerWidth, containerHeight]}

package/src/Graph/Tree/constants.ts

@@ -1,2 +1,2 @@
 export const margins = { bottom: 30, left: 30, right: 30, top: 30 };
-export const nodeMargins = { x: 90, y: 16 };
+export const nodeMargins = { x: 2 };