@centreon/ui 24.7.6 → 24.7.7

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

@@ -0,0 +1,136 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { LineChartAxis } from '../../LineChart/models';
+
+interface DsData {
+  ds_color_area: string;
+  ds_color_line: string;
+  ds_filled: boolean;
+  ds_invert: string | null;
+  ds_legend: string | null;
+  ds_order: string | null;
+  ds_stack: string | null;
+  ds_transparency: number;
+}
+
+export interface Metric {
+  average_value: number | null;
+  crit: number | null;
+  critical_high_threshold: number | null;
+  critical_low_threshold: number | null;
+  data: Array<number | null>;
+  ds_data?: DsData;
+  legend: string;
+  maximum_value: number | null;
+  metric: string;
+  metric_id: number;
+  minimum_value: number | null;
+  unit: string;
+  warning_high_threshold: number | null;
+  warning_low_threshold: number | null;
+}
+
+type TimeSeries = { timeTick: string };
+
+export type TimeValue = TimeSeries & {
+  [field: number]: number;
+};
+
+export interface Line {
+  areaColor: string;
+  average_value: number | null;
+  color: string;
+  display: boolean;
+  filled: boolean;
+  highlight?: boolean;
+  invert: string | null;
+  legend: string | null;
+  lineColor: string;
+  maximum_value: number | null;
+  metric: string;
+  metric_id: number;
+  minimum_value: number | null;
+  name: string;
+  stackOrder: number | null;
+  transparency: number;
+  unit: string;
+}
+
+export enum GraphOptionId {
+  displayEvents = 'displayEvents',
+  displayTooltips = 'displayTooltips'
+}
+
+export interface AdditionalDataProps<T> {
+  additionalData?: T | null;
+}
+
+export interface Xscale {
+  dataTime: Array<TimeValue>;
+  valueWidth: number;
+}
+export interface AxeScale
+  extends Pick<
+    LineChartAxis,
+    'isCenteredZero' | 'scale' | 'scaleLogarithmicBase'
+  > {
+  dataLines: Array<Line>;
+  dataTimeSeries: Array<TimeValue>;
+  isHorizontal?: boolean;
+  thresholdUnit?: string;
+  thresholds: Array<number>;
+  valueGraphHeight: number;
+}
+
+export interface GetYScaleProps {
+  hasMoreThanTwoUnits: boolean;
+  invert: string | null;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  secondUnit: string;
+  unit: string;
+}
+
+export interface LinesProps {
+  getSortedStackedLines: (lines: Array<Line>) => Array<Line>;
+  getTime: (timeValue: TimeValue) => number;
+  getUnits: (lines: Array<Line>) => Array<string>;
+  getYScale: ({
+    hasMoreThanTwoUnits,
+    unit,
+    secondUnit,
+    leftScale,
+    rightScale,
+    invert
+  }: GetYScaleProps) => ScaleLinear<number, number>;
+  graphHeight: number;
+  graphWidth: number;
+  leftScale: ScaleLinear<number, number, never>;
+  lines: Array<Line>;
+  rightScale: ScaleLinear<number, number, never>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number, never>;
+}
+
+export interface NewLines {
+  newLines: Array<Line>;
+  newSortedLines: Array<Line>;
+}
+
+export interface FormatMetricValueProps {
+  base?: number;
+  unit: string;
+  value: number | null;
+}
+
+export interface YScales {
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+}
+
+export interface TimeValueProps {
+  marginLeft?: number;
+  timeSeries: Array<TimeValue>;
+  x?: number;
+  xScale: ScaleLinear<number, number>;
+}

package/src/Graph/common/useTooltipStyles.ts

@@ -0,0 +1,18 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTooltipStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.caption.fontWeight,
+    maxWidth: 'none',
+    padding: theme.spacing(0.5, 1)
+  },
+  tooltipChildren: { height: '100%', width: '100%' },
+  tooltipDisablePadding: {
+    padding: theme.spacing(0)
+  }
+}));

package/src/Graph/common/utils.ts

@@ -0,0 +1,180 @@
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  isNil,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
+import numeral from 'numeral';
+
+import { darken, getLuminance, lighten, Theme } from '@mui/material';
+
+import { Thresholds } from './models';
+
+interface GetColorFromDataAndThresholdsProps {
+  baseColor?: string;
+  data: number;
+  theme: Theme;
+  thresholds: Thresholds;
+}
+
+export const getColorFromDataAndTresholds = ({
+  data,
+  thresholds,
+  theme,
+  baseColor
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return baseColor || theme.palette.primary.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
+    [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)}%`;
+};
+
+interface NormalizeLevelProps {
+  factor: number;
+  level: number;
+}
+
+const normalizeLevel = ({ level, factor }: NormalizeLevelProps): number =>
+  (level * factor) / 10;
+
+interface EmphasizeCurveColorProps {
+  color: string;
+  index: number;
+}
+
+export const emphasizeCurveColor = ({
+  color,
+  index
+}: EmphasizeCurveColorProps): string => {
+  const totalLevels = 5;
+  const levels = [...Array(totalLevels).keys()];
+  const factor = 10 / totalLevels;
+
+  if (gte(getLuminance(color), 0.5)) {
+    if (gte(index, totalLevels * 2)) {
+      return darken(color, normalizeLevel({ factor, level: last(levels) }));
+    }
+    if (gte(index, totalLevels)) {
+      return darken(
+        color,
+        normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+      );
+    }
+
+    return lighten(color, normalizeLevel({ factor, level: levels[index] }));
+  }
+
+  if (gte(index, totalLevels * 2)) {
+    return lighten(color, normalizeLevel({ factor, level: last(levels) }));
+  }
+  if (gte(index, totalLevels)) {
+    return lighten(
+      color,
+      normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+    );
+  }
+
+  return darken(color, normalizeLevel({ factor, level: levels[index] }));
+};
+
+interface GetStrokeDashArrayProps {
+  dashLength?: number;
+  dashOffset?: number;
+  dotOffset?: number;
+  lineWidth?: number;
+}
+
+export const getStrokeDashArray = ({
+  dashLength,
+  dashOffset,
+  dotOffset,
+  lineWidth
+}: GetStrokeDashArrayProps): string | undefined => {
+  if (isNil(dotOffset) && isNil(dashLength) && isNil(dashOffset)) {
+    return undefined;
+  }
+
+  if (dotOffset) {
+    return `${lineWidth} ${dotOffset}`;
+  }
+
+  if (dashLength || dashOffset) {
+    return `${dashLength || 1} ${dashOffset || 1}`;
+  }
+
+  return undefined;
+};
+
+export const getPointRadius = (lineWidth?: number): number =>
+  Math.max(Math.ceil((lineWidth ?? 2) * 1.2), 2);
+
+export const commonTickLabelProps = {
+  fontFamily: 'Roboto, sans-serif',
+  fontSize: 10,
+  textAnchor: 'middle'
+};

package/src/Graph/index.ts

@@ -0,0 +1,15 @@
+export { default as LineChart } from './LineChart';
+export { default as ThresholdLines } from './LineChart/BasicComponents/Lines/Threshold';
+export { default as useLineChartData } from './LineChart/useLineChartData';
+export { default as BarChart } from './BarChart/BarChart';
+export { Gauge } from './Gauge';
+export { SingleBar } from './SingleBar';
+export { Text as GraphText } from './Text';
+
+export { HeatMap } from './HeatMap';
+export { BarStack } from './BarStack';
+export { PieChart } from './PieChart';
+export * from './Tree';
+export type { LineChartData } from './common/models';
+export * from './common/timeSeries';
+export * from './LineChart/models';

package/src/Graph/mockedData/annotationData.json

@@ -0,0 +1,326 @@
+
+{
+    "result": [
+        {
+            "id": 78662735,
+            "type": "comment",
+            "date": "2023-06-07T20:07:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 85.149% (memory used)",
+            "contact": "nouha",
+            "status": {
+                "code": 0,
+                "name": "OK",
+                "severity_code": 5
+            },
+            "tries": 1
+        },
+        {
+            "id": 78662642,
+            "type": "comment",
+            "date": "2023-06-07T19:57:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.908% (memory used)",
+            "contact": "nouha",
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 3
+        },
+        {
+            "id": 78662621,
+            "type": "comment",
+            "date": "2023-06-07T19:56:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 82.956% (memory used)",
+            "contact": "nouha",
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 2
+        },
+        {
+            "id": 78662612,
+            "type": "downtime",
+            "date": "2023-06-07T19:55:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.341% (memory used)",
+            "contact": "nouha",
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 1
+        },
+        {
+            "id": 78662414,
+            "type": "downtime",
+            "date": "2023-06-07T19:45:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 85.217% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 0,
+                "name": "OK",
+                "severity_code": 5
+            },
+            "tries": 1
+        },
+        {
+            "id": 78661672,
+            "type": "downtime",
+            "date": "2023-06-07T19:05:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.467% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 3
+        },
+        {
+            "id": 78661660,
+            "type": "acknowledgement",
+            "date": "2023-06-07T19:04:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 83.731% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 2
+        },
+        {
+            "id": 78661625,
+            "type": "acknowledgement",
+            "date": "2023-06-07T19:03:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.825% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 1
+        },
+        {
+            "id": 78659281,
+            "type": "acknowledgement",
+            "date": "2023-06-07T17:18:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 86.132% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 0,
+                "name": "OK",
+                "severity_code": 5
+            },
+            "tries": 1
+        },
+        {
+            "id": 78658829,
+            "type": "acknowledgement",
+            "date": "2023-06-07T16:58:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 82.638% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 3
+        },
+        {
+            "id": 78658821,
+            "type": "event",
+            "date": "2023-06-07T16:57:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 83.353% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 2
+        },
+        {
+            "id": 78658804,
+            "type": "event",
+            "date": "2023-06-07T16:56:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.231% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 1
+        },
+        {
+            "id": 78658665,
+            "type": "event",
+            "date": "2023-06-07T16:51:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 85.792% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 0,
+                "name": "OK",
+                "severity_code": 5
+            },
+            "tries": 1
+        },
+        {
+            "id": 78650736,
+            "type": "event",
+            "date": "2023-06-07T11:06:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 81.780% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 3
+        },
+        {
+            "id": 78650731,
+            "type": "event",
+            "date": "2023-06-07T11:05:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 82.828% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 2
+        },
+        {
+            "id": 78650689,
+            "type": "event",
+            "date": "2023-06-07T11:04:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.561% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 1
+        },
+        {
+            "id": 78650260,
+            "type": "event",
+            "date": "2023-06-07T10:44:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 85.529% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 0,
+                "name": "OK",
+                "severity_code": 5
+            },
+            "tries": 1
+        },
+        {
+            "id": 78650158,
+            "type": "event",
+            "date": "2023-06-07T10:39:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.905% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 3
+        },
+        {
+            "id": 78650096,
+            "type": "event",
+            "date": "2023-06-07T10:38:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 84.210% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 2
+        },
+        {
+            "id": 78650057,
+            "type": "event",
+            "date": "2023-06-07T10:37:28+02:00",
+            "start_date": null,
+            "end_date": null,
+            "content": "Shared pool hit ratio = 83.771% (memory used)",
+            "contact": null,
+            "status": {
+                "code": 1,
+                "name": "WARNING",
+                "severity_code": 2
+            },
+            "tries": 1
+        }
+    ],
+    "meta": {
+        "page": 1,
+        "limit": 20,
+        "search": {
+            "$and": [
+                {
+                    "date": {
+                        "$gt": "2023-06-06T19:27:15.554Z"
+                    }
+                },
+                {
+                    "date": {
+                        "$lt": "2023-06-07T19:27:15.554Z"
+                    }
+                }
+            ]
+        },
+        "sort_by": {},
+        "total": 44
+    }
+}
+