@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/LineChart/index.stories.tsx

@@ -1,504 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@mui/material';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Switch from '@mui/material/Switch';
-import Tooltip from '@mui/material/Tooltip';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import TimePeriod from '../../TimePeriods';
-import { LineChartData } from '../common/models';
-import annotationData from '../mockedData/annotationData.json';
-import exclusionPeriodFirstPeriod from '../mockedData/exclusionPeriodFirstPeriod.json';
-import exclusionPeriodSecondPeriod from '../mockedData/exclusionPeriodSecondPeriod.json';
-import exclusionPeriodThirdPeriod from '../mockedData/exclusionPeriodThirdPeriod.json';
-import dataLastDayForword from '../mockedData/lastDayForward.json';
-import dataLastDayThreshold from '../mockedData/lastDayThreshold.json';
-import dataLastMonth from '../mockedData/lastMonth.json';
-import dataLastWeek from '../mockedData/lastWeek.json';
-import dataZoomPreview from '../mockedData/zoomPreview.json';
-import dataLastDay from '../mockedData/lastDay.json';
-import dataCurvesSameColor from '../mockedData/curvesWithSameColor.json';
-
-import {
-  argTypes,
-  args as argumentsData,
-  defaultEnd,
-  defaultLast7days,
-  defaultLastMonth,
-  defaultStart,
-  lastDayForwardDate,
-  zoomPreviewDate
-} from './helpers/doc';
-import { dateTimeFormat } from './common';
-import { Interval, ThresholdType, TooltipData } from './models';
-
-import WrapperLineChart from './index';
-
-const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart
-};
-export default meta;
-
-type Story = StoryObj<typeof WrapperLineChart>;
-
-interface Random {
-  max: number;
-  min: number;
-}
-
-const Threshold = (args): JSX.Element => {
-  const [currentFactorMultiplication, setCurrentFactorMultiplication] =
-    useState<number>(2.5);
-  const [countedCircles, setCountedCircles] = useState<number>();
-
-  const getRandomInt = ({ min, max }: Random): number => {
-    return Math.floor(Math.random() * (max - min) + min);
-  };
-
-  const handleClick = (): void => {
-    setCurrentFactorMultiplication(getRandomInt({ max: 5, min: 1 }));
-  };
-
-  const getCountDisplayedCircles = (value: number): void => {
-    setCountedCircles(value);
-  };
-
-  return (
-    <>
-      <Tooltip title={`number of displayed circles :${countedCircles}`}>
-        <Button onClick={handleClick}>change envelope size randomly</Button>
-      </Tooltip>
-
-      <WrapperLineChart
-        {...args}
-        data={dataLastDayThreshold}
-        shapeLines={{
-          areaThresholdLines: [
-            { type: ThresholdType.basic },
-            {
-              factors: {
-                currentFactorMultiplication,
-                simulatedFactorMultiplication: 1.5
-              },
-              getCountDisplayedCircles,
-              type: ThresholdType.variation
-            }
-          ]
-        }}
-      />
-    </>
-  );
-};
-
-const ExternalComponent = (tooltipData): JSX.Element => {
-  const { hideTooltip, data } = tooltipData;
-  const { format } = useLocaleDateTimeFormat();
-
-  return (
-    <>
-      External component
-      <br />
-      <br />
-      {format({
-        date: data,
-        formatString: dateTimeFormat
-      })}
-      <br />
-      <br />
-      <button type="button" onClick={(): void => hideTooltip()}>
-        hide tooltip
-      </button>
-    </>
-  );
-};
-
-const LineChartAndCLS = (args): JSX.Element => {
-  const [data, setData] = useState<LineChartData | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-      setData(dataLastDayThreshold as unknown as LineChartData);
-    }, 100000);
-  }, []);
-
-  return (
-    <WrapperLineChart
-      {...args}
-      data={data}
-      loading={loading}
-      shapeLines={{ areaThresholdLines: [{ type: ThresholdType.basic }] }}
-    />
-  );
-};
-
-interface TimePeriodSwitchProps {
-  getDataSwitch: (value: boolean) => void;
-}
-
-const TimePeriodSwitch = ({
-  getDataSwitch
-}: TimePeriodSwitchProps): JSX.Element => {
-  const [checked, setChecked] = useState(false);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setChecked(event.target.checked);
-  };
-
-  useEffect(() => {
-    getDataSwitch?.(checked);
-  }, [checked]);
-
-  return (
-    <Switch
-      checked={checked}
-      inputProps={{ 'aria-label': 'controlled' }}
-      onChange={handleChange}
-    />
-  );
-};
-
-const LineChartAndTimePeriod = (args): JSX.Element => {
-  const [currentData, setCurrentData] = useState<LineChartData>();
-  const [start, setStart] = useState<string>();
-  const [end, setEnd] = useState<string>();
-  const [displayAnnotation, setDisplayAnnotation] = useState();
-  const [adjustedTimePeriodInterval, setAdjustedTimePeriodInterval] =
-    useState<Interval>();
-
-  const getParameters = (interval): void => {
-    setStart(interval.start);
-    setEnd(interval.end);
-  };
-
-  useEffect(() => {
-    if (!start || !end) {
-      return;
-    }
-    if (start.includes(lastDayForwardDate)) {
-      setCurrentData(dataLastDayForword as unknown as LineChartData);
-
-      return;
-    }
-
-    if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDayThreshold as unknown as LineChartData);
-
-      return;
-    }
-    if (start.includes(defaultLast7days.split('T')[0])) {
-      setCurrentData(dataLastWeek as unknown as LineChartData);
-
-      return;
-    }
-    if (start.includes(defaultLastMonth.split('T')[0])) {
-      setCurrentData(dataLastMonth as unknown as LineChartData);
-
-      return;
-    }
-    if (start.includes(zoomPreviewDate)) {
-      setCurrentData(dataZoomPreview as unknown as LineChartData);
-    }
-  }, [start, end, adjustedTimePeriodInterval]);
-
-  const getInterval = (interval: Interval): void => {
-    setAdjustedTimePeriodInterval(interval);
-  };
-
-  const getDataSwitch = (value): void => {
-    setDisplayAnnotation(value);
-  };
-
-  const annotationEventData = displayAnnotation && {
-    data: annotationData.result
-  };
-
-  return (
-    <>
-      <TimePeriod
-        adjustTimePeriodData={adjustedTimePeriodInterval}
-        getParameters={getParameters}
-        renderExternalComponent={
-          <TimePeriodSwitch getDataSwitch={getDataSwitch} />
-        }
-      />
-      <WrapperLineChart
-        data={currentData}
-        {...args}
-        annotationEvent={annotationEventData}
-        end={end}
-        loading={false}
-        shapeLines={{ areaThresholdLines: [{ type: ThresholdType.basic }] }}
-        start={start}
-        timeShiftZones={{ enable: true, getInterval }}
-        tooltip={{
-          enable: true,
-          renderComponent: ({
-            data,
-            tooltipOpen,
-            hideTooltip
-          }: TooltipData): JSX.Element => (
-            <ExternalComponent
-              data={data}
-              hideTooltip={hideTooltip}
-              openTooltip={tooltipOpen}
-            />
-          )
-        }}
-        zoomPreview={{ enable: true, getInterval }}
-      />
-    </>
-  );
-};
-
-const LineChartAndExclusionPeriod = (args): JSX.Element => {
-  const [dataExclusionPeriods, setDataExclusionPeriods] = useState<
-    Array<LineChartData>
-  >([exclusionPeriodFirstPeriod as unknown as LineChartData]);
-
-  const handleClick = (data): void => {
-    setDataExclusionPeriods([...dataExclusionPeriods, data]);
-  };
-
-  return (
-    <>
-      <div>Add exclusion periods:</div>
-      <ButtonGroup
-        aria-label="outlined primary button group"
-        variant="contained"
-      >
-        <Button onClick={(): void => handleClick(exclusionPeriodSecondPeriod)}>
-          first
-        </Button>
-        <Button onClick={(): void => handleClick(exclusionPeriodThirdPeriod)}>
-          second
-        </Button>
-      </ButtonGroup>
-      <WrapperLineChart
-        {...args}
-        data={dataLastDayThreshold as unknown as LineChartData}
-        shapeLines={{
-          areaThresholdLines: [
-            {
-              type: ThresholdType.basic
-            },
-            {
-              data: dataExclusionPeriods,
-              orientation: ['diagonal'],
-              type: ThresholdType.pattern
-            }
-          ]
-        }}
-      />
-    </>
-  );
-};
-
-const Template: Story = {
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDayThreshold as unknown as LineChartData}
-      shapeLines={{
-        areaThresholdLines: [
-          {
-            type: ThresholdType.basic
-          }
-        ]
-      }}
-    />
-  )
-};
-
-const WithTimePeriod = {
-  render: (args): JSX.Element => <LineChartAndTimePeriod {...args} />
-};
-
-const LineChartWithExclusionPeriod: Story = {
-  render: (args) => <LineChartAndExclusionPeriod {...args} />
-};
-
-const LineChartWithEnvelopVariation: Story = {
-  render: (args) => <Threshold {...args} />
-};
-
-const LineChartWithCLS: Story = {
-  render: (args) => <LineChartAndCLS {...args} />
-};
-
-export const LineChart: Story = {
-  ...Template,
-  argTypes,
-  args: argumentsData
-};
-
-export const LineChartWithStepCurve: Story = {
-  ...Template,
-  argTypes,
-  args: {
-    ...argumentsData,
-    lineStyle: {
-      curve: 'step'
-    }
-  }
-};
-
-export const LineChartWithTimePeriod: Story = {
-  ...WithTimePeriod,
-  args: {
-    end: defaultEnd,
-    height: 500,
-    start: defaultStart
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  }
-};
-
-export const WithEnvelopVariation: Story = {
-  ...LineChartWithEnvelopVariation,
-  args: {
-    end: defaultEnd,
-    height: 500,
-    start: defaultStart
-  }
-};
-
-export const withExclusionPeriods: Story = {
-  ...LineChartWithExclusionPeriod,
-  args: {
-    end: defaultEnd,
-    height: 500,
-    start: defaultStart
-  }
-};
-
-export const withCLS: Story = {
-  ...LineChartWithCLS,
-  args: {
-    end: defaultEnd,
-    height: 500,
-    start: defaultStart
-  }
-};
-
-export const withThresholds: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholds: {
-      critical: [
-        {
-          label: 'critical',
-          value: 350
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning',
-          value: 300
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const withThresholdsAndUnit: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdUnit: '%',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical',
-          value: 79
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning',
-          value: 65
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const thresholdsRange: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdUnit: '%',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 60
-        },
-        {
-          label: 'critical 2',
-          value: 79
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 20
-        },
-        {
-          label: 'warning 2',
-          value: 30
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const LineChartWithSameColorCurves: Story = {
-  ...Template,
-  argTypes,
-  args: {
-    ...argumentsData,
-    lineStyle: {
-      areaTransparency: 10,
-      dashLength: 10,
-      dashOffset: 10,
-      lineWidth: 9,
-      showArea: true,
-      showPoints: true
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataCurvesSameColor as unknown as LineChartData}
-    />
-  )
-};

package/src/Graph/LineChart/index.tsx

@@ -1,118 +0,0 @@
-import { MutableRefObject, useRef } from 'react';
-
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-
-import { ParentSize } from '../..';
-import { LineChartData, Thresholds } from '../common/models';
-import Loading from '../../LoadingSkeleton';
-
-import LineChart from './LineChart';
-import LoadingSkeleton from './LoadingSkeleton';
-import { GlobalAreaLines, LineChartProps } from './models';
-import useLineChartData from './useLineChartData';
-
-dayjs.extend(localizedFormat);
-dayjs.extend(utcPlugin);
-dayjs.extend(timezonePlugin);
-
-interface Props extends Partial<LineChartProps> {
-  data?: LineChartData;
-  end: string;
-  limitLegend?: false | number;
-  loading: boolean;
-  shapeLines?: GlobalAreaLines;
-  start: string;
-  thresholdUnit?: string;
-  thresholds?: Thresholds;
-}
-
-const WrapperLineChart = ({
-  end,
-  start,
-  height = 500,
-  width,
-  shapeLines,
-  axis,
-  displayAnchor,
-  zoomPreview,
-  data,
-  loading,
-  timeShiftZones,
-  tooltip = {
-    mode: 'all',
-    sortOrder: 'name'
-  },
-  annotationEvent,
-  legend = {
-    display: true,
-    mode: 'grid',
-    placement: 'bottom'
-  },
-  header,
-  lineStyle,
-  thresholds,
-  thresholdUnit,
-  limitLegend
-}: Props): JSX.Element | null => {
-  const { adjustedData } = useLineChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
-
-  if (loading && !adjustedData) {
-    return (
-      <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? false}
-        graphHeight={height || 200}
-      />
-    );
-  }
-
-  if (!adjustedData) {
-    return <Loading height={height} width={width} />;
-  }
-
-  return (
-    <div
-      ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
-    >
-      <ParentSize>
-        {({
-          height: responsiveHeight,
-          width: responsiveWidth
-        }): JSX.Element => {
-          return (
-            <LineChart
-              annotationEvent={annotationEvent}
-              axis={axis}
-              displayAnchor={displayAnchor}
-              graphData={adjustedData}
-              graphInterval={{ end, start }}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              lineStyle={lineStyle}
-              shapeLines={shapeLines}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              timeShiftZones={timeShiftZones}
-              tooltip={tooltip}
-              width={width ?? responsiveWidth}
-              zoomPreview={zoomPreview}
-            />
-          );
-        }}
-      </ParentSize>
-    </div>
-  );
-};
-
-export default WrapperLineChart;