@scality/core-ui 0.166.0 → 0.168.0

package/.storybook/preview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
-import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
 import { ToastProvider } from '../src/lib';
 
@@ -72,9 +72,11 @@ export const parameters = {
   controls: {
     //All props with color in name will automatically have a control 'color'
     //with colors presets to theme colors, possible to have the color name from theme in control
-    presetColors: Object.entries(brand).map((color) => {
-      return { color: color[1], title: color[0] };
-    }),
+    presetColors: Object.entries(coreUIAvailableThemes.darkRebrand).map(
+      (color) => {
+        return { color: color[1], title: color[0] };
+      },
+    ),
     matchers: {
       color: /color/i,
     },

package/README.md

@@ -11,38 +11,21 @@ Core-UI is a component library containing all components, layouts, icons and the
 - Add `@scality/core-ui` in the `package.json`'s dependencies of your project.
 
 ```json
-    "@scality/core-ui": "0.115.0",
+    "@scality/core-ui": "^0.165.0",
 ```
 
 - `@scality/core-ui` requires the peerDependencies below. Make sure that you have them in the `package.json`'s dependencies.
 
 ```json
-    "@fortawesome/fontawesome-free": "^5.10.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@js-temporal/polyfill": "^0.4.4",
-    "polished": "3.4.1",
-    "pretty-bytes": "^5.6.0",
-    "react": "^17.0.2",
-    "react-debounce-input": "3.2.2",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    // to provides a Provider to the components using react-query
     "react-query": "^3.34.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-select": "4.3.1",
-    "react-table": "^7.7.0",
-    "react-virtualized": "9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.5",
-    "react-window": "^1.8.6",
-    "styled-components": "^4.1.2",
-    "styled-system": "^5.1.5",
-    "vega": "^5.17.3",
-    "vega-embed": "^6.0.0",
-    "vega-lite": "^5.0.0",
-    "vega-tooltip": "^0.27.0"
+    // for the components using react router
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
+    // for legacy chart components
+    "canvas": "^2.10.1",
 ```
 
 - Install the dependencies :
@@ -90,51 +73,23 @@ import { coreUIAvailableThemes as themes } from '@scality/core-ui/dist/style/the
 
 There is 2 default theme available in Core-UI : you can find them [here](https://github.com/scality/core-ui/pull/684#:~:text=https%3A//github.com/scality/core%2Dui/blob/development/1.0/src/lib/style/theme.ts)
 
-<br/>
-
-You can also modify or create a new theme. In this case make sure to respect this type :
+You can also modify or create a new theme but make sure to extend this type:
 
 ```tsx
-export type CoreUITheme = {
-  statusHealthy: string;
-  statusHealthyRGB: string;
-  statusWarning: string;
-  statusWarningRGB: string;
-  statusCritical: string;
-  statusCriticalRGB: string;
-  selectedActive: string;
-  highlight: string;
-  border: string;
-  buttonPrimary: string;
-  buttonSecondary: string;
-  buttonDelete: string;
-  infoPrimary: string;
-  infoSecondary: string;
-  backgroundLevel1: string;
-  backgroundLevel2: string;
-  backgroundLevel3: string;
-  backgroundLevel4: string;
-  textPrimary: string;
-  textSecondary: string;
-  textTertiary: string;
-  textReverse: string;
-  textLink: string;
-};
+import { CoreUITheme } from "@scality/core-ui/dist/next";
 ```
 
-<br />
-
 ## Development
 
 This project is built with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/), and styled with [styled-components](https://styled-components.com/).
 
-To start contributing to core-ui, clone the repository :
+To start contributing to core-ui, clone the repository:
 
 ```sh
 git clone git@github.com:scality/core-ui.git
 ```
 
-then install the dependancies :
+then install the dependancies:
 
 ```sh
 npm install
@@ -142,7 +97,7 @@ npm install
 
 ### Create a new branch
 
-Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with :
+Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with:
 
 - feature/ for new component or major component update : `feature/TICKET-123-some-feature`
 - improvement/ for code improvement, component update : `improvement/TICKET-456-some-improvement`
@@ -183,7 +138,7 @@ When creating a new version of an existing component, expose it in `src/lib/next
 
 You can use storybook to help with the development.
 Storybook helps to test and vizualize component in isolation.
-If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component :
+If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component:
 
 ```jsx
 // in stories/example/example.stories.tsx
@@ -200,10 +155,9 @@ type Story = StoryObj<typeof Example>;
 export const Default: Story = {
   render: () => <Example />,
 };
-
 ```
 
-then launch storybook :
+Then launch storybook:
 
 ```sh
 npm run storybook
@@ -213,7 +167,7 @@ Storybook will be launched on `http://localhost:3000`.
 
 ### Lint
 
-To make sure your code is correctly lint, run :
+To make sure your code is correctly lint, run:
 
 ```sh
 npm run lint
@@ -225,13 +179,13 @@ It will run ESLint by using `eslint-config-react-app` which is a shareable ESLin
 
 Build tests with [jest](https://jestjs.io/)
 
-Make sure to write tests that cover all cases, then you can run all tests with :
+Make sure to write tests that cover all cases, then you can run all tests with:
 
 ```sh
 npm run test
 ```
 
-or run a specific test with :
+Or run a specific test with:
 
 ```sh
 npm run test Example.test.tsx
@@ -241,7 +195,6 @@ npm run test Example.test.tsx
 
 Core-UI uses [storybook](https://storybook.js.org/) for its documentation. \
 Illustrate use cases and state variations with [stories](https://storybook.js.org/docs/writing-stories).
-All stories should be type.
 
 If possible create or update the component guideline.
 This guideline is an MDX file containing details about the component usage and is illustrated with the stories write in stories.tsx file.
@@ -259,29 +212,23 @@ import * as ExampleStories from './Example.stories';
 An Example component is used for example.
 
 <Canvas of={ExampleStories.Default} />
-
 ```
 
-### Pull request
-
-Push your code on the repository
-
-```sh
-git push origin <branch-name>
-```
+### Contributing
 
-then create a `Pull Request`.
-Pull request needs to be approved by at least one reviewer.
-After your PR is approved you can comment `/approve`
+- Push your code on a branch following the [branch naming convention](#create-a-new-branch)
+- Create a pull request.
+- Obtain the approval of at least one reviewer.
+- Then comment with `/approve` to merge the PR.
 
 ### Release
 
 After merging one or more PR in Core-UI, it is possible to plublish a new release.
-In the Core-UI repo, follow these steps :
+In the Core-UI repo, follow these steps:
 
 1. Go on `Releases` then `Draft a new release`
-2. In the select menu `Choose a tag` : Create a new tag (the current tag increment by 1).
-3. You can now `Generate release notes` : it will add all the PR infos since the last release. \
+2. In the select menu `Choose a tag`: Create a new tag (the current tag increment by 1).
+3. You can now `Generate release notes`: it will add all the PR infos since the last release. \
    You can add details if necessary.
 4. `Publish release`
 5. It will create a PR that need to be approved.

package/dist/components/barchart/BarChart.component.d.ts

@@ -7,6 +7,11 @@ type Props = {
     height?: number;
     barConfig?: Record<string, any>;
 };
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 declare function BarChart({ id, data, xAxis, yAxis, color, height, barConfig, }: Props): import("react/jsx-runtime").JSX.Element;
 export { BarChart };
 //# sourceMappingURL=BarChart.component.d.ts.map

package/dist/components/barchart/BarChart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/barchart/BarChart.component.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VegaChart } from '../vegachartv2/VegaChartV2.component';
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 function BarChart({ id, data, xAxis, yAxis, color, height = 200, barConfig, }) {
     const spec = {
         mark: {

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -7,6 +7,10 @@ export type TimeType = {
         interval: number;
     };
 };
+export type CategoryType = {
+    type: 'category';
+    gap?: number;
+};
 export type Point = {
     key: string | number;
     values: {
@@ -36,7 +40,7 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
     category: string | number;
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
-    type: 'category' | TimeType;
+    type: CategoryType | TimeType;
     bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js

@@ -94,7 +94,7 @@ export const Barchart = (props) => {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const [hoveredValue, setHoveredValue] = useState();
-    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
+    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = { type: 'category' }, unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
     const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
         const color = getColor(bar.label);
@@ -104,7 +104,11 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+                        ? type.gap === 0
+                            ? undefined
+                            : CHART_CONSTANTS.BAR_SIZE
+                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
                             return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
                         }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator

package/dist/components/barchartv2/utils.js

@@ -174,10 +174,10 @@ const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
  */
 export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort, legendOrder) => {
     const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
-    let data = type !== 'category' && type.type === 'time'
+    let data = type.type !== 'category' && type.type === 'time'
         ? transformTimeData(bars, type, barDataKeys)
         : transformCategoryData(bars, barDataKeys);
-    if (type === 'category' && defaultSort) {
+    if (type.type === 'category' && defaultSort) {
         data = applySortingToData(data, barDataKeys, defaultSort);
     }
     const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked, legendOrder);

package/dist/components/button/Button.component.d.ts

@@ -19,8 +19,9 @@ export declare const ButtonText: import("styled-components").StyledComponent<"sp
 export declare const ButtonContent: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 declare function Button({ text, href, icon, size, variant, outlined, disabled, onClick, title, isLoading, type, inverted, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export { Button };

package/dist/components/button/Button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;GAIG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/button/Button.component.js

@@ -218,8 +218,9 @@ export const ButtonContent = styled.span `
 const Anchor = ButtonStyled.withComponent('a');
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 function Button({ text = '', href = '', icon = null, size = 'base', variant = 'buttonPrimary', outlined = false, disabled = false, onClick, title = '', isLoading = false, type = 'button', inverted = false, ...rest }) {
     return href && href.length ? (_jsxs(Anchor, { className: "sc-button", href: href, variant: variant, outlined: outlined, disabled: disabled, size: size, title: title, ...rest, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })) : (_jsx(ButtonStyled, { className: "sc-button", variant: variant, outlined: outlined, disabled: disabled || isLoading, size: size, onClick: onClick, title: title, isLoading: isLoading, type: type, inverted: inverted, icon: icon, text: text, ...rest, children: _jsxs(ButtonContent, { children: [isLoading && _jsx(Loader, { size: size }), _jsxs("span", { className: "sc-button-text", children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })] }) }));

package/dist/components/chartlegend/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CA+ElB,CAAC"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAyElB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -45,7 +45,7 @@ export const LegendShape = styled.div `
 }}
 `;
 export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
-    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, getAllResourcesCount, getSelectedCount, selectOnlyResource, } = useChartLegend();
+    const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
     const resources = listResources();
     const handleLegendClick = useCallback((resource, event) => {
         if (disabled)
@@ -54,7 +54,7 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
         const itemIsSelected = isSelected(resource);
         if (isModifierClick) {
             if (itemIsSelected) {
-                if (getSelectedCount() === 1) {
+                if (isOnlyOneSelected()) {
                     selectAllResources();
                 }
                 else {
@@ -65,16 +65,11 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
                 addSelectedResource(resource);
             }
         }
+        else if (itemIsSelected && isOnlyOneSelected()) {
+            selectAllResources();
+        }
         else {
-            if (getSelectedCount() === getAllResourcesCount()) {
-                selectOnlyResource(resource);
-            }
-            else if (itemIsSelected) {
-                selectAllResources();
-            }
-            else {
-                selectOnlyResource(resource);
-            }
+            selectOnlyResource(resource);
         }
     }, [
         disabled,
@@ -83,8 +78,7 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
         removeSelectedResource,
         selectAllResources,
         selectOnlyResource,
-        getAllResourcesCount,
-        getSelectedCount,
+        isOnlyOneSelected,
     ]);
     return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
             const color = getColor(resource);

package/dist/components/chartlegend/ChartLegendWrapper.d.ts

@@ -9,8 +9,7 @@ export type ChartLegendState = {
     isSelected: (resource: string) => boolean;
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
-    getAllResourcesCount: () => number;
-    getSelectedCount: () => number;
+    isOnlyOneSelected: () => boolean;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;

package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,oBAAoB,EAAE,MAAM,MAAM,CAAC;IACnC,gBAAgB,EAAE,MAAM,MAAM,CAAC;CAChC,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAwFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAiFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -16,11 +16,8 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
     const selectOnlyResource = useCallback((resource) => {
         setSelectedResources([resource]);
     }, []);
-    const getAllResourcesCount = useCallback(() => {
-        return allResources.length;
-    }, [allResources]);
-    const getSelectedCount = useCallback(() => {
-        return selectedResources.length;
+    const isOnlyOneSelected = useCallback(() => {
+        return selectedResources.length === 1;
     }, [selectedResources]);
     const isSelected = useCallback((resource) => {
         return selectedResources.includes(resource);
@@ -45,8 +42,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         isSelected,
         getColor,
         listResources,
-        getAllResourcesCount,
-        getSelectedCount,
+        isOnlyOneSelected,
     }), [
         selectedResources,
         addSelectedResource,
@@ -56,8 +52,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         isSelected,
         getColor,
         listResources,
-        getAllResourcesCount,
-        getSelectedCount,
+        isOnlyOneSelected,
     ]);
     return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
 };

package/dist/components/date/FormattedDateTime.d.ts

@@ -5,8 +5,13 @@ export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
 type FormattedDateTimeProps = {
-    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date' | 'year-month-day';
     value: Date;
 };
 export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,CAAC;IAEjB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAqHxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,GACZ,gBAAgB,CAAC;IAErB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAuHxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -44,6 +44,15 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     minute: '2-digit',
     hour12: false,
 });
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+});
 const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
     if (timeDiff > 0) {
         return `${stringToBeFormatted} ago`;
@@ -93,6 +102,8 @@ export const FormattedDateTime = ({ format, value, }) => {
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
         case 'chart-date':
             return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
+        case 'year-month-day':
+            return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
         default:
             return _jsx(_Fragment, {});
     }

package/dist/components/icon/Icon.component.d.ts

@@ -127,18 +127,16 @@ export declare const iconTable: {
     Play: string;
     Mail: string;
 };
-export declare const customIcons: {
-    'Remote-user': ({ "aria-label": ariaLabel, color, size }: {
-        "aria-label": any;
-        color: any;
-        size: any;
-    }) => import("react/jsx-runtime").JSX.Element;
-    'Remote-group': ({ "aria-label": ariaLabel, color, size }: {
-        "aria-label": any;
-        color: any;
-        size: any;
-    }) => import("react/jsx-runtime").JSX.Element;
+type IconProps = {
+    'aria-label'?: string;
+    color?: string;
+    size?: string;
+    icon?: string;
+    title?: string;
 };
+export declare const customIcons: Record<string, ((props: IconProps) => JSX.Element) & {
+    displayName?: string;
+}>;
 export type IconName = keyof typeof iconTable | keyof typeof customIcons;
 export type IconColor = keyof CoreUITheme;
 type Props = {

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -136,6 +136,8 @@ export const customIcons = {
     'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
     'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
 };
+customIcons['Remote-user'].displayName = 'RemoteUser';
+customIcons['Remote-group'].displayName = 'RemoteGroup';
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {
     const theme = props.theme;

package/dist/components/linetemporalchart/ChartUtil.d.ts

@@ -25,14 +25,15 @@ export declare function getUnitLabel(unitRange: {
 };
 /**
  * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  *
  * @param {array} orginalValues - The array of the data points are already sorted according to the time series
  * @param {number} startingTimeStamp - The starting timestamp in seconds
  * @param {number} sampleDuration - The time span value in seconds
- * @param {number} sampleFrequency - The time difference between two data points in seconds
+ * @param {number} sampleInterval - The time difference between two data points in seconds
  *
  */
-export declare function addMissingDataPoint(orginalValues: [number, string | null][], startingTimeStamp: number, sampleDuration: number, sampleFrequency: number): [number, string | null][];
+export declare function addMissingDataPoint(orginalValues: [number, number | string | null][], startingTimeStamp?: number, sampleDuration?: number, sampleInterval?: number): [number, number | string | null][];
 export declare const getRelativeValue: (value: number, base: number) => number;
 export declare const relativeDatumToOriginalDatum: <T>(datum: T, base: number) => T;
 export declare const getAbsoluteValue: (relativeValue: number, base: number) => number;

package/dist/components/linetemporalchart/ChartUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAkCA;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,EACxC,iBAAiB,EAAE,MAAM,EACzB,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAsC3B;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}