@centreon/ui 24.4.21 → 24.4.23

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -0,0 +1,103 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { margins } from '../common/margins';
+
+import { groupMargin } from './Thresholds';
+
+export const barHeights = {
+  medium: 72,
+  small: 22
+};
+export const margin = 40;
+
+const lineMargins = {
+  medium: 10,
+  small: 5
+};
+
+interface Props {
+  hideTooltip: () => void;
+  label: string;
+  showTooltip: (args) => void;
+  size: 'small' | 'medium';
+  thresholdType: string;
+  value: number;
+  xScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  xScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  size
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = xScale(value) || 0;
+
+  const lineMargin = lineMargins[size];
+
+  const thresholdLineHeight = barHeights[size] + 2 * lineMargin;
+
+  const isSmall = equals(size, 'small');
+
+  const bottom = barHeights[size] + margin * 2;
+
+  const onMouseEnter = (left) => (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: left,
+      tooltipTop: bottom
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="6, 6"
+        strokeWidth={2}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
+        onMouseEnter={onMouseEnter(scaledValue)}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};

package/src/Graph/SingleBar/Thresholds.tsx

@@ -0,0 +1,50 @@
+import { Thresholds } from '../common/models';
+
+import { ThresholdLine } from './ThresholdLine';
+
+export const groupMargin = 25;
+
+interface Props {
+  hideTooltip: () => void;
+  showTooltip: (args) => void;
+  size: 'small' | 'medium';
+  thresholds: Thresholds;
+  xScale: (value: number) => number;
+}
+
+const Thresholds = ({
+  xScale,
+  thresholds,
+  showTooltip,
+  hideTooltip,
+  size
+}: Props): JSX.Element => (
+  <>
+    {thresholds.warning.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`warning-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        size={size}
+        thresholdType="warning"
+        value={value}
+        xScale={xScale}
+      />
+    ))}
+    {thresholds.critical.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`critical-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        size={size}
+        thresholdType="critical"
+        value={value}
+        xScale={xScale}
+      />
+    ))}
+  </>
+);
+
+export default Thresholds;

package/src/Graph/SingleBar/index.ts

@@ -0,0 +1 @@
+export { default as SingleBar } from './SingleBar';

package/src/Graph/SingleBar/models.ts

@@ -0,0 +1,10 @@
+import { LineChartData, Thresholds } from '../common/models';
+
+export interface SingleBarProps {
+  baseColor?: string;
+  data?: LineChartData;
+  displayAsRaw?: boolean;
+  showLabels?: boolean;
+  size?: 'medium' | 'small';
+  thresholds: Thresholds;
+}

package/src/Graph/Text/Text.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+
+import { Text } from '.';
+
+const meta: Meta<typeof Text> = {
+  component: Text
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ height: '500px', width: '500px' }}>
+    <Text {...props} />
+  </div>
+);
+
+export const success: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.5, 1.5]
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.2, 0.5]
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.13, 0.35]
+  },
+  render: Template
+};
+
+export const rawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.5, 1.5]
+  },
+  render: Template
+};

package/src/Graph/Text/Text.styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTextStyles = makeStyles()((theme) => ({
+  graphText: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    height: '100%',
+    justifyContent: 'center'
+  },
+  thresholds: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(5)
+  }
+}));

package/src/Graph/Text/Text.tsx

@@ -0,0 +1,91 @@
+import { isNil } from 'ramda';
+
+import { Typography, useTheme } from '@mui/material';
+
+import { LineChartData, Thresholds } from '../common/models';
+import {
+  formatMetricValueWithUnit,
+  getMetricWithLatestData
+} from '../common/timeSeries';
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import { useTextStyles } from './Text.styles';
+
+interface Props {
+  baseColor?: string;
+  data?: LineChartData;
+  displayAsRaw?: boolean;
+  labels: {
+    critical: string;
+    warning: string;
+  };
+  thresholds: Thresholds;
+}
+
+export const Text = ({
+  thresholds,
+  data,
+  displayAsRaw,
+  labels,
+  baseColor
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+  const { classes } = useTextStyles();
+
+  if (isNil(data)) {
+    return null;
+  }
+
+  const metric = getMetricWithLatestData(data);
+  const metricValue = metric?.data[0] ?? 0;
+  const metricUnit = metric?.unit ?? '';
+
+  const color = getColorFromDataAndTresholds({
+    baseColor,
+    data: metricValue,
+    theme,
+    thresholds
+  });
+
+  const warningThresholdLabels = thresholds.warning.map(({ value }) =>
+    formatMetricValueWithUnit({
+      unit: metricUnit,
+      value
+    })
+  );
+
+  const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
+    formatMetricValueWithUnit({
+      unit: metricUnit,
+      value
+    })
+  );
+
+  return (
+    <div className={classes.graphText}>
+      <Typography sx={{ color }} variant="h2">
+        <strong>
+          {formatMetricValueWithUnit({
+            isRaw: displayAsRaw,
+            unit: metricUnit,
+            value: metricValue
+          })}
+        </strong>
+      </Typography>
+      {thresholds.enabled && (
+        <div className={classes.thresholds}>
+          <Typography sx={{ color: 'warning.main' }} variant="h5">
+            {labels.warning}
+            {': '}
+            {warningThresholdLabels.join(' - ')}
+          </Typography>
+          <Typography sx={{ color: 'error.main' }} variant="h5">
+            {labels.critical}
+            {': '}
+            {criticalThresholdLabels.join(' - ')}
+          </Typography>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Graph/Text/index.ts

@@ -0,0 +1 @@
+export { Text } from './Text';

package/src/Graph/common/margins.ts

@@ -0,0 +1 @@
+export const margins = { bottom: 20, left: 20, right: 20, top: 20 };

package/src/Graph/common/models.ts

@@ -0,0 +1,19 @@
+import { Metric } from './timeSeries/models';
+
+export interface LineChartData {
+  global;
+  metrics: Array<Metric>;
+  times: Array<string>;
+}
+
+export interface Thresholds {
+  critical: Array<{
+    label: string;
+    value: number;
+  }>;
+  enabled: boolean;
+  warning: Array<{
+    label: string;
+    value: number;
+  }>;
+}