@scality/core-ui 0.166.0 → 0.168.0

package/src/lib/components/toast/useMutationsHandler.test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useToast } from './ToastProvider';
 import { useMutationsHandler } from './useMutationsHandler';
 
@@ -68,7 +68,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations,
@@ -77,10 +77,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onMainMutationSuccess).toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onMainMutationSuccess).toHaveBeenCalled();
     });
   });
 
@@ -91,7 +89,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations,
@@ -99,13 +97,11 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(showToast).toHaveBeenCalledWith({
-          open: true,
-          status: 'success',
-          message: 'message',
-        });
+    await waitFor(() => {
+      expect(showToast).toHaveBeenCalledWith({
+        open: true,
+        status: 'success',
+        message: 'message',
       });
     });
   });
@@ -131,7 +127,7 @@ describe('useMutationsHandler', () => {
       },
     ] as const;
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations: mutationsWithError,
@@ -139,13 +135,11 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(showToast).toHaveBeenCalledWith({
-          open: true,
-          status: 'error',
-          message: 'message',
-        });
+    await waitFor(() => {
+      expect(showToast).toHaveBeenCalledWith({
+        open: true,
+        status: 'error',
+        message: 'message',
       });
     });
   });
@@ -171,7 +165,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations: otherMutations,
@@ -180,10 +174,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onAllMutationsSuccess).toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onAllMutationsSuccess).toHaveBeenCalled();
     });
   });
 
@@ -220,7 +212,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation: firstMutation,
         dependantMutations: otherMutations,
@@ -229,10 +221,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onAllMutationsSuccess).not.toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onAllMutationsSuccess).not.toHaveBeenCalled();
     });
   });
 });

package/src/lib/index.ts

@@ -1,8 +1,6 @@
 export { Banner } from './components/banner/Banner.component';
 export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
-export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
-export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
 export {
   LOADER_SIZE,
@@ -21,22 +19,18 @@ export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';
 export { Notifications } from './components/notifications/Notifications.component';
 export { SearchInput } from './components/searchinput/SearchInput.component';
-export { Select } from './components/select/Select.component';
+
 export { Sidebar } from './components/sidebar/Sidebar.component';
 export { Steppers } from './components/steppers/Steppers.component';
 export { Toggle } from './components/toggle/Toggle.component';
 export { Tooltip } from './components/tooltip/Tooltip.component';
-export { MultiSelect } from './components/multiselect/MultiSelect.component';
-export { VegaChart } from './components/vegachart/VegaChart.component';
-export { LineChart } from './components/linechart/LineChart.component';
+
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
-export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
-export { Sparkline } from './components/sparkline/SparkLine.component';
+
 export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
-export { AreaChart } from './components/areachart/AreaChart.component';
-export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
+
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
 export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
@@ -48,7 +42,7 @@ export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
 export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
 export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
 export { TextBadge } from './components/textbadge/TextBadge.component';
-export { SpacedBox } from './components/spacedbox/SpacedBox';
+
 export { Layout as Layout2 } from './components/layout/v2';
 export { TwoPanelLayout } from './components/layout/v2/panels';
 export { AppContainer } from './components/layout/v2/AppContainer';
@@ -82,3 +76,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
+export { CoreUITheme } from './style/theme';

package/src/lib/next.ts

@@ -25,3 +25,4 @@ export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { CoreUITheme } from './style/theme';

package/stories/BarChart/barchart.stories.tsx

@@ -61,7 +61,7 @@ export const Playground: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type="category" bars={exampleData} />
+          <Barchart type={{ type: 'category' }} bars={exampleData} />
           <ChartLegend shape="rectangle" direction="horizontal" />
         </Stack>
       </ChartLegendWrapper>
@@ -332,7 +332,7 @@ export const CapacityWithUnitRange: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={capacityDataWithUnitRange}
           unitRange={[
             {
@@ -402,7 +402,7 @@ export const Stacked: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type="category" bars={stackedData} stacked />
+          <Barchart type={{ type: 'category' }} bars={stackedData} stacked />
           <ChartLegend shape="rectangle" />
         </Stack>
       </ChartLegendWrapper>
@@ -453,7 +453,7 @@ export const DefaultSort: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           stacked
           bars={defaultSortData}
           defaultSort={customSort}
@@ -531,7 +531,7 @@ export const WithCustomTooltip: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               tooltip={customTooltip}
               height={300}
@@ -602,7 +602,7 @@ export const StatusColors: Story = {
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={statusData}
             stacked
             title="System Health Metrics"
@@ -656,7 +656,7 @@ export const LegendShapes: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               height={200}
               title="Horizontal Rectangle Legend"
@@ -673,7 +673,7 @@ export const LegendShapes: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
-              type="category"
+              type={{ type: 'category' }}
               bars={exampleData}
               height={200}
               title="Vertical Line Legend"
@@ -727,14 +727,14 @@ export const BarchartsWithSingleLegend: Story = {
           }}
         >
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={exampleData}
             height={200}
             title="Barchart 1"
           />
 
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={exampleData}
             height={200}
             title="Barchart 2"
@@ -757,7 +757,7 @@ export const ErrorState: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={[]}
           isError
           title="Error State"
@@ -808,7 +808,7 @@ export const StackedBarSort: Story = {
         }}
       >
         <Barchart
-          type="category"
+          type={{ type: 'category' }}
           bars={statusesData}
           stacked
           stackedBarSort={sort}
@@ -883,7 +883,7 @@ export const CompleteExample: Story = {
           }}
         >
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             title="Loading BarChart"
             helpTooltip="Click on the button to load or unload data"
             secondaryTitle={isLoading ? 'Loading...' : 'Loaded data'}
@@ -911,3 +911,98 @@ export const CompleteExample: Story = {
     );
   },
 };
+
+export const Histogram: Story = {
+  render: () => {
+    const histogramData = [
+      {
+        label: 'Success',
+        data: [
+          ['0-10', 1],
+          ['10-20', 5],
+          ['20-30', 15],
+          ['30-40', 40],
+          ['40-50', 45],
+          ['50-60', 50],
+          ['60-70', 40],
+          ['70-80', 15],
+          ['80-90', 5],
+          ['90-100', 1],
+        ],
+      },
+    ] as const;
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <div style={{ width: '50%', padding: spacing.r16 }}>
+        <ChartLegendWrapper
+          colorSet={{
+            Success: theme.statusHealthy,
+            Failed: theme.statusCritical,
+          }}
+        >
+          <Barchart
+            type={{ type: 'category', gap: 0 }}
+            bars={histogramData}
+            title="Histogram"
+          />
+        </ChartLegendWrapper>
+      </div>
+    );
+  },
+};
+
+export const StackedHistogram: Story = {
+  render: () => {
+    const histogramData = [
+      {
+        label: 'Test 1',
+        data: [
+          ['0-10', 1],
+          ['10-20', 5],
+          ['20-30', 15],
+          ['30-40', 40],
+          ['40-50', 45],
+          ['50-60', 50],
+          ['60-70', 40],
+          ['70-80', 15],
+          ['80-90', 5],
+          ['90-100', 1],
+        ],
+      },
+      {
+        label: 'Test 2',
+        data: [
+          ['0-10', 1],
+          ['10-20', 2],
+          ['20-30', 4],
+          ['30-40', 4],
+          ['40-50', 5],
+          ['50-60', 6],
+          ['60-70', 6],
+          ['70-80', 3],
+          ['80-90', 2],
+          ['90-100', 1],
+        ],
+      },
+    ] as const;
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <div style={{ width: '50%', padding: spacing.r16 }}>
+        <ChartLegendWrapper
+          colorSet={{
+            'Test 1': theme.statusHealthy,
+            'Test 2': theme.statusWarning,
+          }}
+        >
+          <Barchart
+            type={{ type: 'category', gap: 0 }}
+            bars={histogramData}
+            title="Stacked Histogram"
+            stacked
+          />
+          <ChartLegend shape="rectangle" />
+        </ChartLegendWrapper>
+      </div>
+    );
+  },
+};

package/stories/barchart.stories.tsx

@@ -111,7 +111,7 @@ const horizontalBarChartArgs = {
 };
 
 export default {
-  title: 'Components/Data Display/Charts/BarChart',
+  title: 'Components/Deprecated/Charts/BarChart',
   component: BarChart,
   decorators: [
     (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,

package/stories/card.stories.tsx

@@ -7,12 +7,14 @@ import {
   CardBodyContainer,
 } from '../src/lib/components/card/Card.component';
 import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
-import { Text, Wrapper } from './common';
-import { brand } from '../src/lib/style/theme';
+import { Text } from './common';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
 import { action } from '@storybook/addon-actions';
 
 // RGB color in theme provoke an error, excludes from control options
-const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
+const colors = Object.keys(coreUIAvailableThemes.darkRebrand).filter(
+  (color) => !/RGB/.test(color),
+);
 
 export default {
   title: 'Components/Data Display/Card',
@@ -43,8 +45,8 @@ const Row = styled.div`
 `;
 const defaultBody = (
   <CircularProgressBar
-    color={brand.buttonSecondary}
-    backgroundColor={brand.textPrimary}
+    color={coreUIAvailableThemes.darkRebrand.buttonSecondary}
+    backgroundColor={coreUIAvailableThemes.darkRebrand.textPrimary}
     radius={30}
     strokeWidth={5}
     percent={60}

package/stories/controls.ts

@@ -1,23 +1,23 @@
-import { iconTable } from "../src/lib/components/icon/Icon.component";
+import { iconTable } from '../src/lib/components/icon/Icon.component';
 
 export const iconOptions = Object.keys(iconTable);
 
 export const sizesOptions = ['smaller', 'small', 'base', 'large', 'larger'];
 
 export const placementOptions = [
-    'top',
-    'bottom',
-    'left',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom-end',
-    'bottom-start',
-    'left-start',
-    'left-end',
-  ];
+  'top',
+  'bottom',
+  'left',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom-end',
+  'bottom-start',
+  'left-start',
+  'left-end',
+];
 export const localeArgtype = {
   control: { type: 'radio' },
   options: ['en', 'fr'],
@@ -40,9 +40,8 @@ export const variantsOptions = [
   'backgroundLevel1',
 ];
 
-
-export const tooltipArgTypes =  {
-    tooltip: {
+export const tooltipArgTypes = {
+  tooltip: {
     description:
       "Object with 'overlay','placement' and 'overlayStyle' properties",
     control: false,
@@ -53,7 +52,7 @@ export const tooltipArgTypes =  {
     options: placementOptions,
   },
   tooltipOverlayStyle: {
-    control:'object',
+    control: 'object',
     description: 'Object of CSS properties',
-  }}
-
+  },
+};

package/stories/linecharttemporal.stories.tsx

@@ -10,7 +10,7 @@ import { Wrapper } from './common';
 import { dataLineChartV2, dataLineChartV2_readwrite } from './data/linechart';
 import { defaultRenderTooltipSerie } from '../src/lib/components/linetemporalchart/tooltip';
 export default {
-  title: 'Components/Data Display/Charts/LineTemporalChart',
+  title: 'Components/Deprecated/Charts/LineTemporalChart',
   component: LineTemporalChart,
   decorators: [
     (story) => (

package/stories/linetimeseriechart.stories.tsx

@@ -64,6 +64,10 @@ const meta: Meta<typeof LineTimeSerieChart> = {
       options: ['default', 'percentage', 'symmetrical'],
     },
     yAxisTitle: { control: 'text' },
+    timeFormat: {
+      control: 'select',
+      options: ['date-time', 'date'],
+    },
   },
 };
 
@@ -380,6 +384,99 @@ const prometheusData5 = [
   [1740492000, '19859.90'],
 ];
 
+// Data with irregular intervals but gaps under 2 intervals (less than 24 minutes)
+// Sample frequency is 720 seconds (12 minutes), so 2 intervals = 1440 seconds (24 minutes)
+const irregularIntervalData = [
+  [1740405600, '47.55'], // Base timestamp
+  [1740406200, '53.01'], // +600 seconds (10 minutes) - under 2 intervals
+  [1740407100, '40.19'], // +900 seconds (15 minutes) - under 2 intervals
+  [1740408000, '59.19'], // +900 seconds (15 minutes) - under 2 intervals
+  [1740409100, '62.50'], // +1100 seconds (18.3 minutes) - under 2 intervals
+  [1740410300, '57.45'], // +1200 seconds (20 minutes) - under 2 intervals
+  [1740411000, '45.19'], // +700 seconds (11.7 minutes) - under 2 intervals
+  [1740412200, '58.62'], // +1200 seconds (20 minutes) - under 2 intervals
+  [1740413000, '53.08'], // +800 seconds (13.3 minutes) - under 2 intervals
+  [1740414300, '64.91'], // +1300 seconds (21.7 minutes) - under 2 intervals
+  [1740415100, '81.23'], // +800 seconds (13.3 minutes) - under 2 intervals
+  [1740416400, '64.82'], // +1300 seconds (21.7 minutes) - under 2 intervals
+  [1740417200, '67.17'], // +800 seconds (13.3 minutes) - under 2 intervals
+  [1740418500, '55.23'], // +1300 seconds (21.7 minutes) - under 2 intervals
+  [1740419400, '47.92'], // +900 seconds (15 minutes) - under 2 intervals
+  [1740420600, '72.11'], // +1200 seconds (20 minutes) - under 2 intervals
+  [1740421500, '61.91'], // +900 seconds (15 minutes) - under 2 intervals
+  [1740422700, '51.07'], // +1200 seconds (20 minutes) - under 2 intervals
+  [1740423800, '39.50'], // +1100 seconds (18.3 minutes) - under 2 intervals
+  [1740424900, '46.92'], // +1100 seconds (18.3 minutes) - under 2 intervals
+];
+
+// Data spanning several months - multi-month dataset
+const longTermPrometheusData: [number, string][] = [
+  // January 2025
+  [1735689600, '42.15'], // Jan 1, 2025
+  [1735776000, '38.92'], // Jan 2, 2025
+  [1735862400, '55.33'], // Jan 3, 2025
+  [1735948800, '67.88'], // Jan 4, 2025
+  [1736035200, '44.21'], // Jan 5, 2025
+  [1736121600, '72.15'], // Jan 6, 2025
+  [1736208000, '39.67'], // Jan 7, 2025
+  [1736294400, '58.44'], // Jan 8, 2025
+  [1736380800, '63.92'], // Jan 9, 2025
+  [1736467200, '41.33'], // Jan 10, 2025
+  [1736553600, '76.88'], // Jan 11, 2025
+  [1736640000, '52.15'], // Jan 12, 2025
+  [1736726400, '48.67'], // Jan 13, 2025
+  [1736812800, '69.33'], // Jan 14, 2025
+  [1736899200, '35.88'], // Jan 15, 2025
+  // February 2025
+  [1738368000, '81.15'], // Feb 1, 2025
+  [1738454400, '47.67'], // Feb 2, 2025
+  [1738540800, '54.33'], // Feb 3, 2025
+  [1738627200, '62.88'], // Feb 4, 2025
+  [1738713600, '38.15'], // Feb 5, 2025
+  [1738800000, '73.67'], // Feb 6, 2025
+  [1738886400, '45.33'], // Feb 7, 2025
+  [1738972800, '59.88'], // Feb 8, 2025
+  [1739059200, '51.15'], // Feb 9, 2025
+  [1739145600, '66.67'], // Feb 10, 2025
+  [1739232000, '43.33'], // Feb 11, 2025
+  [1739318400, '78.88'], // Feb 12, 2025
+  [1739404800, '36.15'], // Feb 13, 2025
+  [1739491200, '64.67'], // Feb 14, 2025
+  [1739577600, '49.33'], // Feb 15, 2025
+  // March 2025
+  [1740787200, '71.88'], // Mar 1, 2025
+  [1740873600, '42.15'], // Mar 2, 2025
+  [1740960000, '57.67'], // Mar 3, 2025
+  [1741046400, '68.33'], // Mar 4, 2025
+  [1741132800, '34.88'], // Mar 5, 2025
+  [1741219200, '75.15'], // Mar 6, 2025
+  [1741305600, '48.67'], // Mar 7, 2025
+  [1741392000, '53.33'], // Mar 8, 2025
+  [1741478400, '61.88'], // Mar 9, 2025
+  [1741564800, '37.15'], // Mar 10, 2025
+  [1741651200, '74.67'], // Mar 11, 2025
+  [1741737600, '44.33'], // Mar 12, 2025
+  [1741824000, '58.88'], // Mar 13, 2025
+  [1741910400, '52.15'], // Mar 14, 2025
+  [1741996800, '67.67'], // Mar 15, 2025
+  // April 2025
+  [1743465600, '41.33'], // Apr 1, 2025
+  [1743552000, '76.88'], // Apr 2, 2025
+  [1743638400, '35.15'], // Apr 3, 2025
+  [1743724800, '63.67'], // Apr 4, 2025
+  [1743811200, '50.33'], // Apr 5, 2025
+  [1743897600, '72.88'], // Apr 6, 2025
+  [1743984000, '39.15'], // Apr 7, 2025
+  [1744070400, '56.67'], // Apr 8, 2025
+  [1744156800, '65.33'], // Apr 9, 2025
+  [1744243200, '33.88'], // Apr 10, 2025
+  [1744329600, '77.15'], // Apr 11, 2025
+  [1744416000, '46.67'], // Apr 12, 2025
+  [1744502400, '54.33'], // Apr 13, 2025
+  [1744588800, '60.88'], // Apr 14, 2025
+  [1744675200, '49.22'], // Apr 15, 2025
+];
+
 export const PercentageChartExample: Story = {
   args: {
     series: [
@@ -400,6 +497,7 @@ export const PercentageChartExample: Story = {
     yAxisTitle: '',
     interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    xAxisFormat: 'date-time',
   },
 };
 const UNIT_RANGE_BS = [
@@ -488,3 +586,51 @@ export const AutoUnitChartExample: Story = {
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };
+
+export const IrregularIntervalsExample: Story = {
+  args: {
+    series: [
+      {
+        data: irregularIntervalData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Irregular intervals data',
+    height: 200,
+    startingTimeStamp: irregularIntervalData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText:
+      'Data points with irregular timestamps, but all gaps are less than 2 intervals (24 minutes). No missing data points are added.',
+    yAxisType: 'percentage',
+    yAxisTitle: '',
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+  },
+};
+
+export const DateFormatExample: Story = {
+  args: {
+    series: [
+      {
+        data: longTermPrometheusData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Long term data',
+    height: 200,
+    startingTimeStamp: longTermPrometheusData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText: 'This is the help text',
+    interval: 60 * 60 * 24, // 1 day
+    duration:
+      longTermPrometheusData[longTermPrometheusData.length - 1][0] -
+      longTermPrometheusData[0][0],
+    timeFormat: 'date',
+  },
+};