@centreon/ui 23.10.57 → 23.10.58

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/index.tsx

@@ -7,8 +7,12 @@ import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
 import { DisplayAnchor, GlobalAreaLines } from '../../models';
-import { getStackedYScale, getUnits, getYScale } from '../../timeSeries';
-import { Line, TimeValue } from '../../timeSeries/models';
+import {
+  getStackedYScale,
+  getUnits,
+  getYScale
+} from '../../../common/timeSeries';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
 
 import RegularLine from './RegularLines';
 import useRegularLines from './RegularLines/useRegularLines';

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/models.ts

@@ -1,8 +1,8 @@
 import { ScaleLinear } from 'd3-scale';
 import { curveBasis } from '@visx/curve';
 
-import { GraphData } from '../../models';
-import { Line, TimeValue } from '../../timeSeries/models';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+import { LineChartData } from '../../../common/models';
 
 import { FactorsVariation } from './Threshold/models';
 
@@ -31,7 +31,7 @@ export interface AreaRegularLines extends ShapeGraphData {
 }
 
 export interface AreaThreshold extends AreaRegularLines {
-  dataExclusionPeriods?: Array<GraphData>;
+  dataExclusionPeriods?: Array<LineChartData>;
   factors?: FactorsVariation;
   getCountDisplayedCircles?: (value: number) => void;
 }

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/useFilterLines.ts

@@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
 import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
 import { linesGraphAtom } from '../graphAtoms';
-import { Line } from '../timeSeries/models';
+import { Line } from '../../common/timeSeries/models';
 
 import {
   findLineOfOriginMetricThreshold,

package/src/Graph/{Header → LineChart/Header}/index.tsx

@@ -5,14 +5,14 @@ import Typography from '@mui/material/Typography';
 
 import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
 
-import { useStyles } from '../Graph.styles';
+import { useStyles } from '../LineChart.styles';
 import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
-import { GraphHeader } from '../models';
-import { TimeValue } from '../timeSeries/models';
+import { LineChartHeader } from '../models';
+import { TimeValue } from '../../common/timeSeries/models';
 
 interface Props {
   displayTimeTick?: boolean;
-  header?: GraphHeader;
+  header?: LineChartHeader;
   timeSeries: Array<TimeValue>;
   title: string;
   xScale: ScaleLinear<number, number>;

package/src/Graph/{Icons → LineChart/Icons}/Downtime.tsx

@@ -1,6 +1,6 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-import { ReactComponent as IconDowntime } from '../../@assets/icons/downtime.icon.svg';
+import { ReactComponent as IconDowntime } from '../../../@assets/icons/downtime.icon.svg';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
   <SvgIcon component={IconDowntime} {...props} />

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/AnchorPoint/RegularAnchorPoint.tsx

@@ -1,8 +1,8 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { isNil, prop } from 'ramda';
 
-import { bisectDate, getDates } from '../../timeSeries';
-import { TimeValue } from '../../timeSeries/models';
+import { bisectDate, getDates } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/timeSeries/models';
 
 import useTickGraph from './useTickGraph';
 import { GetYAnchorPoint } from './models';

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/AnchorPoint/StackedAnchorPoint.tsx

@@ -1,8 +1,8 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { isNil, map, pipe } from 'ramda';
 
-import { bisectDate } from '../../timeSeries';
-import { TimeValue } from '../../timeSeries/models';
+import { bisectDate } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/timeSeries/models';
 
 import { StackValue } from './models';
 import useTickGraph from './useTickGraph';

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/AnchorPoint/models.ts

@@ -1,6 +1,6 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { Line, TimeValue } from '../../timeSeries/models';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
 
 interface AnchorPoint {
   areaColor: string;

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/AnchorPoint/useTickGraph.ts

@@ -6,8 +6,8 @@ import { isEmpty, isNil, not } from 'ramda';
 
 import useAxisY from '../../BasicComponents/Axes/useAxisY';
 import { margin } from '../../common';
-import { getMetrics, getTimeValue } from '../../timeSeries';
-import { Line, TimeValue } from '../../timeSeries/models';
+import { getMetrics, getTimeValue } from '../../../common/timeSeries';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/Tooltip/useGraphTooltip.ts

@@ -5,7 +5,7 @@ import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 
 import { getDate } from '../../helpers/index';
-import { TimeValue } from '../../timeSeries/models';
+import { TimeValue } from '../../../common/timeSeries/models';
 import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
 import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
 

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/index.tsx

@@ -12,8 +12,8 @@ import {
   InteractedZone,
   InteractedZone as ZoomPreviewModel
 } from '../models';
-import { getTimeValue } from '../timeSeries';
-import { TimeValue } from '../timeSeries/models';
+import { getTimeValue } from '../../common/timeSeries';
+import { TimeValue } from '../../common/timeSeries/models';
 
 import Annotations from './Annotations';
 import { TimelineEvent } from './Annotations/models';

package/src/Graph/{InteractiveComponents → LineChart/InteractiveComponents}/interactionWithGraphAtoms.ts

@@ -1,7 +1,7 @@
 import { atom } from 'jotai';
 import { not, isNil } from 'ramda';
 
-import { TimeValue } from '../timeSeries/models';
+import { TimeValue } from '../../common/timeSeries/models';
 
 export const eventMouseDownAtom = atom<null | MouseEvent>(null);
 export const eventMouseUpAtom = atom<null | MouseEvent>(null);

package/src/Graph/{Legend → LineChart/Legend}/LegendHeader.tsx

@@ -2,7 +2,7 @@ import { includes, isEmpty, split } from 'ramda';
 
 import { Tooltip, Typography } from '@mui/material';
 
-import { Line } from '../timeSeries/models';
+import { Line } from '../../common/timeSeries/models';
 
 import { useStyles } from './Legend.styles';
 

package/src/Graph/{Legend → LineChart/Legend}/index.tsx

@@ -8,8 +8,8 @@ import { Box, alpha, useTheme } from '@mui/material';
 import { useMemoComponent } from '@centreon/ui';
 
 import { maxLinesDisplayedLegend } from '../common';
-import { formatMetricValue } from '../timeSeries';
-import { Line, TimeValue } from '../timeSeries/models';
+import { formatMetricValue } from '../../common/timeSeries';
+import { Line, TimeValue } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
 import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 

package/src/Graph/{Legend → LineChart/Legend}/useInteractiveValues.ts

@@ -4,8 +4,12 @@ import { useAtomValue } from 'jotai';
 import { equals, find, isNil } from 'ramda';
 
 import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
-import { formatMetricValue, getLineForMetric, getMetrics } from '../timeSeries';
-import { Line, TimeValue } from '../timeSeries/models';
+import {
+  formatMetricValue,
+  getLineForMetric,
+  getMetrics
+} from '../../common/timeSeries';
+import { Line, TimeValue } from '../../common/timeSeries/models';
 
 import { FormattedMetricData } from './models';
 

package/src/Graph/{Legend → LineChart/Legend}/useLegend.ts

@@ -18,7 +18,7 @@ import {
 } from 'ramda';
 
 import { linesGraphAtom } from '../graphAtoms';
-import { Line } from '../timeSeries/models';
+import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
   clearHighlight: () => void;

package/src/Graph/{Graph.tsx → LineChart/LineChart.tsx}

@@ -5,13 +5,15 @@ import { isNil } from 'ramda';
 
 import { ClickAwayListener, Skeleton } from '@mui/material';
 
+import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
+
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
 import LoadingProgress from './BasicComponents/LoadingProgress';
 import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './Graph.styles';
+import { useStyles } from './LineChart.styles';
 import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
 import TooltipAnchorPoint from './InteractiveComponents/AnchorPoint/TooltipAnchorPoint';
@@ -23,14 +25,13 @@ import {
   Data,
   GlobalAreaLines,
   GraphInterval,
-  GraphProps,
+  LineChartProps,
   LegendModel
 } from './models';
-import { getLeftScale, getRightScale, getXScale } from './timeSeries';
-import { useIntersection } from './useGraphIntersection';
+import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
 
-interface Props extends GraphProps {
+interface Props extends LineChartProps {
   curve: CurveType;
   graphData: Data;
   graphInterval: GraphInterval;
@@ -40,7 +41,7 @@ interface Props extends GraphProps {
   shapeLines?: GlobalAreaLines;
 }
 
-const Graph = ({
+const LineChart = ({
   graphData,
   height = 500,
   width,
@@ -234,4 +235,4 @@ const Graph = ({
   );
 };
 
-export default Graph;
+export default LineChart;

package/src/Graph/{graphAtoms.ts → LineChart/graphAtoms.ts}

@@ -1,6 +1,6 @@
 import { atom } from 'jotai';
 
-import { Line } from './timeSeries/models';
+import { Line } from '../common/timeSeries/models';
 
 export const linesGraphAtom = atom<Array<Line> | null>(null);
 export const timeTickGraphAtom = atom<Date | null>(null);

package/src/Graph/{helpers → LineChart/helpers}/index.ts

@@ -3,10 +3,15 @@ import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
 
 import { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
-import { GetDate, GraphData, GraphInterval } from '../models';
-import { getLineData, getTimeSeries, getTimeValue } from '../timeSeries';
-
-export const adjustGraphData = (graphData: GraphData): LinesData => {
+import { GetDate, GraphInterval } from '../models';
+import {
+  getLineData,
+  getTimeSeries,
+  getTimeValue
+} from '../../common/timeSeries';
+import { LineChartData } from '../../common/models';
+
+export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
   const displayedLines = reject(propEq('display', false), sortedLines);

package/src/Graph/{index.stories.tsx → LineChart/index.stories.tsx}

@@ -10,7 +10,8 @@ import Tooltip from '@mui/material/Tooltip';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
-import TimePeriod from '../TimePeriods';
+import TimePeriod from '../../TimePeriods';
+import { LineChartData } from '../common/models';
 
 import { dateTimeFormat } from './common';
 import {
@@ -32,17 +33,17 @@ import dataLastDay from './mockedData/lastDayThreshold.json';
 import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
-import { GraphData, Interval, ThresholdType, TooltipData } from './models';
+import { Interval, ThresholdType, TooltipData } from './models';
 
-import WrapperGraph from './index';
+import WrapperLineChart from './index';
 
-const meta: Meta<typeof WrapperGraph> = {
-  component: WrapperGraph,
+const meta: Meta<typeof WrapperLineChart> = {
+  component: WrapperLineChart,
   tags: ['autodocs']
 };
 export default meta;
 
-type Story = StoryObj<typeof WrapperGraph>;
+type Story = StoryObj<typeof WrapperLineChart>;
 
 interface Random {
   max: number;
@@ -72,7 +73,7 @@ const Threshold = (args): JSX.Element => {
         <Button onClick={handleClick}>change envelope size randomly</Button>
       </Tooltip>
 
-      <WrapperGraph
+      <WrapperLineChart
         {...args}
         data={dataLastDay}
         shapeLines={{
@@ -115,19 +116,19 @@ const ExternalComponent = (tooltipData): JSX.Element => {
   );
 };
 
-const GraphAndCLS = (args): JSX.Element => {
-  const [data, setData] = useState<GraphData | null>(null);
+const LineChartAndCLS = (args): JSX.Element => {
+  const [data, setData] = useState<LineChartData | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      setData(dataLastDay as unknown as GraphData);
+      setData(dataLastDay as unknown as LineChartData);
     }, 100000);
   }, []);
 
   return (
-    <WrapperGraph
+    <WrapperLineChart
       {...args}
       data={data}
       loading={loading}
@@ -162,8 +163,8 @@ const TimePeriodSwitch = ({
   );
 };
 
-const GraphAndTimePeriod = (args): JSX.Element => {
-  const [currentData, setCurrentData] = useState<GraphData>();
+const LineChartAndTimePeriod = (args): JSX.Element => {
+  const [currentData, setCurrentData] = useState<LineChartData>();
   const [start, setStart] = useState<string>();
   const [end, setEnd] = useState<string>();
   const [displayAnnotation, setDisplayAnnotation] = useState();
@@ -180,28 +181,28 @@ const GraphAndTimePeriod = (args): JSX.Element => {
       return;
     }
     if (start.includes(lastDayForwardDate)) {
-      setCurrentData(dataLastDayForword as unknown as GraphData);
+      setCurrentData(dataLastDayForword as unknown as LineChartData);
 
       return;
     }
 
     if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDay as unknown as GraphData);
+      setCurrentData(dataLastDay as unknown as LineChartData);
 
       return;
     }
     if (start.includes(defaultLast7days.split('T')[0])) {
-      setCurrentData(dataLastWeek as unknown as GraphData);
+      setCurrentData(dataLastWeek as unknown as LineChartData);
 
       return;
     }
     if (start.includes(defaultLastMonth.split('T')[0])) {
-      setCurrentData(dataLastMonth as unknown as GraphData);
+      setCurrentData(dataLastMonth as unknown as LineChartData);
 
       return;
     }
     if (start.includes(zoomPreviewDate)) {
-      setCurrentData(dataZoomPreview as unknown as GraphData);
+      setCurrentData(dataZoomPreview as unknown as LineChartData);
     }
   }, [start, end, adjustedTimePeriodInterval]);
 
@@ -226,7 +227,7 @@ const GraphAndTimePeriod = (args): JSX.Element => {
           <TimePeriodSwitch getDataSwitch={getDataSwitch} />
         }
       />
-      <WrapperGraph
+      <WrapperLineChart
         data={currentData}
         {...args}
         annotationEvent={annotationEventData}
@@ -255,10 +256,10 @@ const GraphAndTimePeriod = (args): JSX.Element => {
   );
 };
 
-const GraphAndExclusionPeriod = (args): JSX.Element => {
+const LineChartAndExclusionPeriod = (args): JSX.Element => {
   const [dataExclusionPeriods, setDataExclusionPeriods] = useState<
-    Array<GraphData>
-  >([exclusionPeriodFirstPeriod as unknown as GraphData]);
+    Array<LineChartData>
+  >([exclusionPeriodFirstPeriod as unknown as LineChartData]);
 
   const handleClick = (data): void => {
     setDataExclusionPeriods([...dataExclusionPeriods, data]);
@@ -278,9 +279,9 @@ const GraphAndExclusionPeriod = (args): JSX.Element => {
           second
         </Button>
       </ButtonGroup>
-      <WrapperGraph
+      <WrapperLineChart
         {...args}
-        data={dataLastDay as unknown as GraphData}
+        data={dataLastDay as unknown as LineChartData}
         shapeLines={{
           areaThresholdLines: [
             {
@@ -300,9 +301,9 @@ const GraphAndExclusionPeriod = (args): JSX.Element => {
 
 const Template: Story = {
   render: (args) => (
-    <WrapperGraph
+    <WrapperLineChart
       {...args}
-      data={dataLastDay as unknown as GraphData}
+      data={dataLastDay as unknown as LineChartData}
       shapeLines={{
         areaThresholdLines: [
           {
@@ -315,28 +316,28 @@ const Template: Story = {
 };
 
 const WithTimePeriod = {
-  render: (args): JSX.Element => <GraphAndTimePeriod {...args} />
+  render: (args): JSX.Element => <LineChartAndTimePeriod {...args} />
 };
 
-const GraphWithExclusionPeriod: Story = {
-  render: (args) => <GraphAndExclusionPeriod {...args} />
+const LineChartWithExclusionPeriod: Story = {
+  render: (args) => <LineChartAndExclusionPeriod {...args} />
 };
 
-const GraphWithEnvelopVariation: Story = {
+const LineChartWithEnvelopVariation: Story = {
   render: (args) => <Threshold {...args} />
 };
 
-const GraphWithCLS: Story = {
-  render: (args) => <GraphAndCLS {...args} />
+const LineChartWithCLS: Story = {
+  render: (args) => <LineChartAndCLS {...args} />
 };
 
-export const Graph: Story = {
+export const LineChart: Story = {
   ...Template,
   argTypes,
   args: argumentsData
 };
 
-export const GraphWithStepCurve: Story = {
+export const LineChartWithStepCurve: Story = {
   ...Template,
   argTypes,
   args: {
@@ -345,7 +346,7 @@ export const GraphWithStepCurve: Story = {
   }
 };
 
-export const GraphWithTimePeriod: Story = {
+export const LineChartWithTimePeriod: Story = {
   ...WithTimePeriod,
   args: {
     end: defaultEnd,
@@ -355,7 +356,7 @@ export const GraphWithTimePeriod: Story = {
 };
 
 export const WithEnvelopVariation: Story = {
-  ...GraphWithEnvelopVariation,
+  ...LineChartWithEnvelopVariation,
   args: {
     end: defaultEnd,
     height: 500,
@@ -364,7 +365,7 @@ export const WithEnvelopVariation: Story = {
 };
 
 export const withExclusionPeriods: Story = {
-  ...GraphWithExclusionPeriod,
+  ...LineChartWithExclusionPeriod,
   args: {
     end: defaultEnd,
     height: 500,
@@ -373,7 +374,7 @@ export const withExclusionPeriods: Story = {
 };
 
 export const withCLS: Story = {
-  ...GraphWithCLS,
+  ...LineChartWithCLS,
   args: {
     end: defaultEnd,
     height: 500,

package/src/Graph/{index.tsx → LineChart/index.tsx}

@@ -10,19 +10,21 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
-import Graph from './Graph';
+import { LineChartData } from '../common/models';
+
+import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
-import { GlobalAreaLines, GraphData, GraphProps, LegendModel } from './models';
-import useGraphData from './useGraphData';
+import { GlobalAreaLines, LineChartProps, LegendModel } from './models';
+import useLineChartData from './useLineChartData';
 import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
-interface Props extends Partial<GraphProps> {
+interface Props extends Partial<LineChartProps> {
   curve?: CurveType;
-  data?: GraphData;
+  data?: LineChartData;
   end: string;
   legend: LegendModel;
   loading: boolean;
@@ -31,7 +33,7 @@ interface Props extends Partial<GraphProps> {
   start: string;
 }
 
-const WrapperGraph = ({
+const WrapperLineChart = ({
   end,
   start,
   height = 500,
@@ -50,8 +52,8 @@ const WrapperGraph = ({
   curve = Curve.curveLinear,
   marginBottom = 0
 }: Props): JSX.Element | null => {
-  const { adjustedData } = useGraphData({ data, end, start });
-  const graphRef = useRef<HTMLDivElement | null>(null);
+  const { adjustedData } = useLineChartData({ data, end, start });
+  const lineChartRef = useRef<HTMLDivElement | null>(null);
 
   if (loading || !adjustedData) {
     return (
@@ -64,7 +66,7 @@ const WrapperGraph = ({
 
   return (
     <div
-      ref={graphRef as MutableRefObject<HTMLDivElement>}
+      ref={lineChartRef as MutableRefObject<HTMLDivElement>}
       style={{ height: '100%', width: '100%' }}
     >
       <Responsive.ParentSize>
@@ -73,14 +75,14 @@ const WrapperGraph = ({
           width: responsiveWidth
         }): JSX.Element => {
           return (
-            <Graph
+            <LineChart
               annotationEvent={annotationEvent}
               axis={axis}
               curve={curve}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
-              graphRef={graphRef}
+              graphRef={lineChartRef}
               header={header}
               height={height || responsiveHeight}
               legend={legend}
@@ -99,4 +101,4 @@ const WrapperGraph = ({
   );
 };
 
-export default WrapperGraph;
+export default WrapperLineChart;

package/src/Graph/{models.ts → LineChart/models.ts}

@@ -2,7 +2,9 @@ import { ReactNode } from 'react';
 
 import { ScaleLinear } from 'd3-scale';
 
-import { Line, Metric, TimeValue } from './timeSeries/models';
+import { Line, TimeValue } from '../common/timeSeries/models';
+import { LineChartData } from '../common/models';
+
 import {
   AxisX,
   Axis as AxisYLeft,
@@ -15,13 +17,7 @@ import {
 import { TimelineEvent } from './InteractiveComponents/Annotations/models';
 import { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
 
-export interface GraphData {
-  global;
-  metrics: Array<Metric>;
-  times: Array<string>;
-}
-
-export interface GraphEndpoint {
+export interface LineChartEndpoint {
   baseUrl: string;
   queryParameters: GraphInterval;
 }
@@ -76,7 +72,7 @@ export interface AnnotationEvent {
   data?: Array<TimelineEvent>;
 }
 
-export interface GraphHeader {
+export interface LineChartHeader {
   displayTitle?: boolean;
   extraComponent?: ReactNode;
 }
@@ -86,11 +82,11 @@ export interface DisplayAnchor {
   displayTooltipsGuidingLines?: boolean;
 }
 
-export interface GraphProps {
+export interface LineChartProps {
   annotationEvent?: AnnotationEvent;
   axis?: Axis;
   displayAnchor?: DisplayAnchor;
-  header?: GraphHeader;
+  header?: LineChartHeader;
   height?: number | null;
   loading: boolean;
   timeShiftZones?: InteractedZone;
@@ -116,7 +112,7 @@ export enum ThresholdType {
 }
 
 export interface PatternThreshold {
-  data: Array<GraphData>;
+  data: Array<LineChartData>;
   orientation?: Array<PatternOrientation>;
   type: ThresholdType.pattern;
 }