@centreon/ui 24.7.0 → 24.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.7.0",
+  "version": "24.7.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -30,7 +30,7 @@
     "name": "centreon@centreon.com"
   },
   "baseCodeCoveragePercentage": 60,
-  "license": "GPL-2.0",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
   },
@@ -39,7 +39,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts",
-    "./fonts/*": "./public/fonts/*",
+    "./fonts/*": "./src/fonts/*",
     "./test/testRenderer": "./test/testRenderer.tsx"
   },
   "files": [
@@ -49,123 +49,104 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^8.0.0",
-    "@cypress/webpack-dev-server": "^3.7.4",
+    "@cypress/react": "^8.0.2",
+    "@cypress/webpack-dev-server": "^3.10.0",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.49.2",
-    "@modern-js/storybook": "^2.49.2",
-    "@simonsmith/cypress-image-snapshot": "^9.0.1",
-    "@storybook/addon-a11y": "^7.0.9",
-    "@storybook/addon-docs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-styling": "^1.0.6",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-vite": "^7.6.18",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/manager-api": "^7.0.9",
+    "@modern-js/prod-server": "^2.54.5",
+    "@modern-js/storybook": "^2.54.5",
+    "@simonsmith/cypress-image-snapshot": "^9.0.3",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-docs": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-themes": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.9",
-    "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/test-runner": "^0.19.0",
+    "@storybook/theming": "^8.1.11",
+    "@testing-library/cypress": "^10.0.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
-    "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.9",
-    "@types/react": "^18.2.65",
+    "@types/mocha": "^10.0.7",
+    "@types/ramda": "^0.30.0",
+    "@types/react": "^18.3.3",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "axios-mock-adapter": "^1.22.0",
-    "cypress": "^13.7.1",
+    "chai": "^5.1.1",
+    "cypress": "^13.13.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
-    "puppeteer": "^13.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "remark-gfm": "^3.0.1",
-    "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.6.8",
-    "storybook-addon-mock": "^4.3.0",
-    "storybook-dark-mode": "^3.0.3",
-    "style-dictionary": "^3.9.2",
+    "msw": "2.3.1",
+    "msw-storybook-addon": "^2.0.2",
+    "puppeteer": "^22.12.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
+    "remark-gfm": "^4.0.0",
+    "speed-measure-vite-plugin": "^1.0.1",
+    "storybook": "^8.1.11",
+    "storybook-addon-mock": "^5.0.0",
+    "storybook-dark-mode": "^4.0.2",
+    "style-dictionary": "^4.0.0",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^4.3.5",
-    "vite-plugin-istanbul": "^5.0.0",
-    "vite-plugin-svgr": "^3.3.0",
+    "vite": "^5.3.3",
+    "vite-plugin-istanbul": "^6.0.2",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.6",
-    "@lexical/link": "^0.12.6",
-    "@lexical/list": "^0.12.6",
-    "@lexical/react": "^0.12.6",
-    "@lexical/rich-text": "^0.12.6",
-    "@lexical/selection": "^0.12.6",
-    "@lexical/utils": "^0.12.6",
+    "@centreon/ui-context": "file:../ui-context",
+    "@lexical/html": "^0.16.1",
+    "@lexical/link": "^0.16.1",
+    "@lexical/list": "^0.16.1",
+    "@lexical/react": "^0.16.1",
+    "@lexical/rich-text": "^0.16.1",
+    "@lexical/selection": "^0.16.1",
+    "@lexical/utils": "^0.16.1",
+    "@mui/material": "^5.15.21",
     "@react-spring/web": "^9.7.3",
     "@visx/clip-path": "^3.3.0",
-    "@visx/curve": "^2.1.0",
+    "@visx/curve": "^3.3.0",
     "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
     "@visx/hierarchy": "^3.3.0",
-    "@visx/legend": "^3.5.0",
+    "@visx/legend": "^3.10.3",
     "@visx/pattern": "^3.3.0",
     "@visx/point": "^3.3.0",
     "@visx/scale": "^3.5.0",
-    "@visx/shape": "^2.18.0",
+    "@visx/shape": "^3.5.0",
     "@visx/text": "^3.3.0",
-    "@visx/threshold": "^2.12.2",
-    "@visx/visx": "2.16.0",
+    "@visx/threshold": "^3.5.0",
+    "@visx/visx": "3.11.0",
     "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
-    "humanize-duration": "^3.31.0",
-    "lexical": "^0.12.6",
+    "dayjs": "^1.11.11",
+    "humanize-duration": "^3.32.1",
+    "lexical": "^0.16.1",
     "notistack": "^3.0.1",
     "numeral": "^2.0.6",
-    "ramda": "0.29.1",
+    "ramda": "0.30.1",
     "react-grid-layout": "^1.4.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.24.0",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.12.1",
+    "sanitize-html": "^2.13.0",
     "ulog": "^2.0.0-beta.19"
   },
-  "peerDependencies": {
-    "@centreon/ui-context": "file:../ui-context",
-    "@dnd-kit/core": "6.x",
-    "@dnd-kit/sortable": "6.x",
-    "@dnd-kit/utilities": "3.x",
-    "@mui/icons-material": "5.x",
-    "@mui/material": "5.x",
-    "@mui/styles": "5.x",
-    "@tanstack/react-query": "5.x",
-    "axios": ">= 1.6.4",
-    "dayjs": "1.x",
-    "formik": "2.x",
-    "jotai": "2.x",
-    "numeral": "2.x",
-    "ramda": "0.x",
-    "react-i18next": "12.x",
-    "react-router-dom": "6.x",
-    "react-scale-text": "1.x",
-    "resize-observer-polyfill": "1.x",
-    "ts.data.json": "2.x",
-    "tss-react": "4.x"
-  },
   "jest-junit": {
     "suiteName": "jest tests",
     "output": "./junit.xml"

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
+const PACKAGE_VERSION = '2.3.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { equals } from 'ramda';
 
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
@@ -56,6 +57,16 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '295');
+      } else {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '863');
+      }
+
       cy.makeSnapshot();
     });
 
@@ -66,6 +77,16 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '171');
+      } else {
+        cy.findByTestId('single-bar-3-2-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '432');
+      }
+
       cy.makeSnapshot();
     });
 
@@ -76,6 +97,16 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'height')
+          .should('equals', '187');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'width')
+          .should('equals', '546');
+      }
+
       cy.makeSnapshot();
     });
 
@@ -86,6 +117,16 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '265');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '773');
+      }
+
       cy.makeSnapshot();
     });
 
@@ -100,6 +141,16 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'height')
+          .should('equals', '94');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+          .should('have.attr', 'width')
+          .should('equals', '273');
+      }
+
       cy.makeSnapshot();
     });
 
@@ -114,7 +165,15 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.makeSnapshot();
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '133');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '387');
+      }
     });
 
     it(`displays bar chart ${orientation}ly with a custom style`, () => {
@@ -128,7 +187,15 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.makeSnapshot();
+      if (equals(orientation, 'horizontal')) {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'height')
+          .should('equals', '265');
+      } else {
+        cy.findByTestId('stacked-bar-3-0-0.08644')
+          .should('have.attr', 'width')
+          .should('equals', '773');
+      }
     });
   });
 
@@ -149,6 +216,10 @@ describe('Bar chart', () => {
     );
     cy.contains('0.11 ms').should('be.visible');
 
+    cy.findByTestId('single-bar-3-2-0.08644')
+      .should('have.attr', 'height')
+      .should('equals', '295');
+
     cy.makeSnapshot();
   });
 
@@ -170,6 +241,10 @@ describe('Bar chart', () => {
 
     cy.contains('06/19/2024').should('not.exist');
 
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
     cy.makeSnapshot();
   });
 
@@ -203,6 +278,10 @@ describe('Bar chart', () => {
     cy.contains('0.02 ms').should('be.visible');
     cy.contains('0.11 ms').should('be.visible');
 
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
     cy.makeSnapshot();
   });
 
@@ -228,6 +307,10 @@ describe('Bar chart', () => {
     );
     cy.contains('0.05 ms').should('be.visible');
 
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
+      .should('have.attr', 'height')
+      .should('equals', '187');
+
     cy.makeSnapshot();
   });
 });

package/src/Graph/BarChart/BarStack.tsx

@@ -64,11 +64,13 @@ const BarStack = ({
               <rect
                 data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
                 fill={bar.color}
-                height={isHorizontal ? Math.abs(bar.height) : barWidth}
+                height={Math.ceil(
+                  isHorizontal ? Math.abs(bar.height) : barWidth
+                )}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
                 opacity={barStyle.opacity}
-                width={isHorizontal ? barWidth : Math.abs(bar.width)}
-                x={
+                width={Math.ceil(isHorizontal ? barWidth : Math.abs(bar.width))}
+                x={Math.ceil(
                   isHorizontal
                     ? barPadding
                     : getPadding({
@@ -76,8 +78,8 @@ const BarStack = ({
                         padding: bar.x,
                         size: bar.width
                       })
-                }
-                y={
+                )}
+                y={Math.ceil(
                   isHorizontal
                     ? getPadding({
                         isNegativeValue,
@@ -85,7 +87,7 @@ const BarStack = ({
                         size: bar.height
                       })
                     : barPadding
-                }
+                )}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined

package/src/Graph/BarChart/SingleBar.tsx

@@ -35,10 +35,10 @@ const SingleBar = ({
     <rect
       data-testid={`single-bar-${bar.key}-${bar.index}-${bar.value}`}
       fill={bar.color}
-      height={isHorizontal ? barLength : bar.height}
+      height={Math.ceil(isHorizontal ? barLength : bar.height)}
       opacity={barStyle.opacity}
       rx={(isHorizontal ? bar.width : bar.height) * barStyle.radius}
-      width={isHorizontal ? bar.width : barLength}
+      width={Math.ceil(isHorizontal ? bar.width : barLength)}
       x={isHorizontal ? bar.x : barPadding}
       y={isHorizontal ? barPadding : bar.y}
       {...listeners}

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -55,14 +55,14 @@ const WrapperThresholdLines = ({
   };
 
   const thresholdLines = areaThresholdLines?.map((item, index) => {
-    const { type } = item;
+    const { type, id } = item;
 
     if (equals(type, ThresholdType.basic)) {
       return [
         {
           Component: BasicThreshold,
           key: index,
-          props: { ...commonProps, getY0, getY1 }
+          props: { ...commonProps, getY0, getY1, id }
         }
       ];
     }
@@ -131,7 +131,7 @@ const WrapperThresholdLines = ({
     <g>
       {filteredThresholdLines.map((element) =>
         element?.map(({ Component, props, key }) => (
-          <Component {...props} id={key} key={key} />
+          <Component {...props} id={props?.id ?? key} key={key} />
         ))
       )}
     </g>

package/src/Graph/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 IconDowntime from '../../../@assets/icons/downtime.icon.svg';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
   <SvgIcon component={IconDowntime} {...props} />

package/src/Graph/LineChart/LineChart.tsx

@@ -123,6 +123,7 @@ const LineChart = ({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
+    legendHeight: legend?.height,
     legendPlacement: legend?.placement,
     width
   });
@@ -229,6 +230,7 @@ const LineChart = ({
           height={height}
           legend={{
             displayLegend,
+            legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
             renderExtraComponent: legend?.renderExtraComponent

package/src/Graph/LineChart/helpers/index.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
+import durationPlugin from 'dayjs/plugin/duration';
 
 import { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
@@ -11,6 +12,8 @@ import {
 } from '../../common/timeSeries';
 import { LineChartData } from '../../common/models';
 
+dayjs.extend(durationPlugin);
+
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);

package/src/Graph/LineChart/index.tsx

@@ -11,6 +11,7 @@ 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';
@@ -73,7 +74,7 @@ const WrapperLineChart = ({
   }
 
   if (!adjustedData) {
-    return null;
+    return <Loading height={height} width={width} />;
   }
 
   return (

package/src/Graph/LineChart/models.ts

@@ -154,6 +154,7 @@ export interface GlobalAreaLines {
 }
 export interface LegendModel {
   display?: boolean;
+  height?: number;
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;

package/src/Graph/PieChart/PieChart.cypress.spec.tsx

@@ -72,8 +72,6 @@ describe('Pie chart', () => {
   it('renders as a pie when variant is set to "pie"', () => {
     initialize({ variant: 'pie' });
     cy.get('[data-variant="pie"]').should('exist');
-
-    cy.makeSnapshot();
   });
 
   it('displays tooltip with correct information on hover', () => {
@@ -134,8 +132,6 @@ describe('Pie chart', () => {
 
     initialize({});
     cy.findByTestId('Title').should('not.exist');
-
-    cy.makeSnapshot();
   });
 
   it('adjusts outer radius when chart dimensions are too small', () => {

package/src/Graph/common/Axes/index.tsx

@@ -45,12 +45,10 @@ const Axes = ({
 
   const xTickCount = Math.min(Math.ceil(width / 82), 12);
 
+  const [start, end] = xScale.domain();
+
   const tickFormat =
-    data?.axisX?.xAxisTickFormat ??
-    getXAxisTickFormat({
-      start: xScale.domain()[0],
-      start: xScale.domain()[-1]
-    });
+    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat({ end, start });
 
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -27,6 +27,7 @@ interface Props {
   isHorizontal?: boolean;
   legend: {
     displayLegend: boolean;
+    legendHeight?: number;
     mode?: 'grid' | 'list';
     placement?: 'left' | 'right' | 'bottom';
     renderExtraComponent?: ReactNode;
@@ -112,7 +113,10 @@ const BaseChart = ({
         </Stack>
       </div>
       {legend.displayLegend && displayLegendInBottom && (
-        <div ref={legendRef}>
+        <div
+          ref={legendRef}
+          style={{ height: legend?.legendHeight ?? 'undefined' }}
+        >
           <Legend
             base={base}
             height={height}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -4,10 +4,10 @@ import { Group } from '@visx/visx';
 import { equals } from 'ramda';
 
 import { margin } from '../../LineChart/common';
-import Grids from '../Grids';
+import { LineChartAxis } from '../../LineChart/models';
 import Axes from '../Axes';
+import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
-import { LineChartAxis } from '../../LineChart/models';
 
 import { extraMargin } from './useComputeBaseChartDimensions';
 

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -10,6 +10,7 @@ interface UseComputeBaseChartDimensionsProps {
   hasSecondUnit?: boolean;
   height: number | null;
   legendDisplay?: boolean;
+  legendHeight?: number;
   legendPlacement?: string;
   width: number;
 }
@@ -25,14 +26,18 @@ export const useComputeBaseChartDimensions = ({
   height,
   legendDisplay,
   legendPlacement,
-  hasSecondUnit
+  hasSecondUnit,
+  legendHeight
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const legendRef = useRef<HTMLDivElement | null>(null);
 
+  const currentLegendHeight =
+    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
     (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
-      ? legendRef.current?.getBoundingClientRect().height || 0
+      ? currentLegendHeight
       : 0;
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&

package/src/Graph/index.ts

@@ -1,4 +1,6 @@
 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';
@@ -8,3 +10,6 @@ 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';