@devtron-labs/devtron-fe-common-lib 1.20.5-pre-9 → 1.20.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/dist/{@code-editor-DWtbgB8V.js → @code-editor-Dmh5KrSw.js} +9523 -11109
  2. package/dist/{@common-rjsf-CvhwiMoQ.js → @common-rjsf-BFxXGz3f.js} +30 -30
  3. package/dist/{@framer-motion-DMkBQPN0.js → @framer-motion-DZveCoIL.js} +90 -92
  4. package/dist/{@react-dates-BjZWpiVv.js → @react-dates-CZ1bNWJM.js} +1 -1
  5. package/dist/{@react-select-DtwlfcIG.js → @react-select-DS68hCUM.js} +1 -1
  6. package/dist/{@react-virtualized-sticky-tree-M81Af3Qs.js → @react-virtualized-sticky-tree-V-8klKy9.js} +1 -1
  7. package/dist/{@vendor-DceGoESd.js → @vendor-3ORIJA0h.js} +18073 -26322
  8. package/dist/Common/API/reactQueryHooks.d.ts +1 -1
  9. package/dist/Common/API/types.d.ts +1 -1
  10. package/dist/Common/BreadCrumb/BreadcrumbStore.d.ts +0 -1
  11. package/dist/Common/BreadCrumb/Types.d.ts +0 -15
  12. package/dist/Common/Common.service.d.ts +1 -4
  13. package/dist/Common/Constants.d.ts +14 -45
  14. package/dist/Common/Hooks/UseRegisterShortcut/types.d.ts +0 -1
  15. package/dist/Common/Hooks/UseRegisterShortcut/utils.d.ts +1 -1
  16. package/dist/Common/SearchBar/SearchBar.component.d.ts +1 -1
  17. package/dist/Common/SearchBar/types.d.ts +0 -8
  18. package/dist/Common/SegmentedBarChart/types.d.ts +0 -2
  19. package/dist/Common/Types.d.ts +5 -55
  20. package/dist/Common/index.d.ts +0 -1
  21. package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts +1 -1
  22. package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts +2 -0
  23. package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +7 -13
  24. package/dist/Pages/GlobalConfigurations/ClustersAndEnvironments/index.d.ts +1 -1
  25. package/dist/Pages/GlobalConfigurations/ClustersAndEnvironments/types.d.ts +8 -0
  26. package/dist/Pages/ResourceBrowser/ResourceBrowser.Types.d.ts +3 -3
  27. package/dist/Pages/ResourceBrowser/constants.d.ts +8 -8
  28. package/dist/Shared/Components/ActionMenu/types.d.ts +0 -3
  29. package/dist/Shared/Components/ActionMenu/useActionMenu.hook.d.ts +1 -1
  30. package/dist/Shared/Components/Backdrop/Backdrop.d.ts +1 -1
  31. package/dist/Shared/Components/Backdrop/types.d.ts +1 -1
  32. package/dist/Shared/Components/Badge/utils.d.ts +1 -2
  33. package/dist/Shared/Components/ContextSwitcher/ContextSwitcher.d.ts +1 -1
  34. package/dist/Shared/Components/ContextSwitcher/types.d.ts +1 -0
  35. package/dist/Shared/Components/DTFocusTrap/DTFocusTrap.d.ts +1 -1
  36. package/dist/Shared/Components/DTFocusTrap/types.d.ts +1 -2
  37. package/dist/Shared/Components/FeatureDescription/types.d.ts +1 -1
  38. package/dist/Shared/Components/FramerComponents/index.d.ts +2 -2
  39. package/dist/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.d.ts +1 -2
  40. package/dist/Shared/Components/GenericSectionErrorState/types.d.ts +5 -21
  41. package/dist/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.d.ts +1 -1
  42. package/dist/Shared/Components/Header/HeaderWithCreateButton/types.d.ts +3 -1
  43. package/dist/Shared/Components/Header/PageHeader.d.ts +1 -1
  44. package/dist/Shared/Components/Header/types.d.ts +0 -2
  45. package/dist/Shared/Components/Icon/Icon.d.ts +0 -47
  46. package/dist/Shared/Components/Icon/IconBase.d.ts +1 -1
  47. package/dist/Shared/Components/Icon/types.d.ts +0 -6
  48. package/dist/Shared/Components/Illustration/Illustration.d.ts +0 -1
  49. package/dist/Shared/Components/Table/InternalTable.d.ts +1 -1
  50. package/dist/Shared/Components/Table/types.d.ts +4 -6
  51. package/dist/Shared/Components/TrailingItem/types.d.ts +0 -4
  52. package/dist/Shared/Components/TreeView/TreeView.component.d.ts +1 -1
  53. package/dist/Shared/Components/TreeView/TreeViewNodeContent.d.ts +1 -1
  54. package/dist/Shared/Components/TreeView/constants.d.ts +0 -3
  55. package/dist/Shared/Components/TreeView/types.d.ts +3 -17
  56. package/dist/Shared/Components/index.d.ts +0 -6
  57. package/dist/Shared/Helpers.d.ts +0 -2
  58. package/dist/Shared/Hooks/useGetResourceKindsOptions/service.d.ts +5 -0
  59. package/dist/Shared/Hooks/useGetResourceKindsOptions/types.d.ts +20 -5
  60. package/dist/Shared/Hooks/useUserPreferences/service.d.ts +1 -1
  61. package/dist/Shared/Hooks/useUserPreferences/types.d.ts +2 -32
  62. package/dist/Shared/Providers/MainContextProvider/types.d.ts +0 -9
  63. package/dist/Shared/Services/common.service.d.ts +0 -2
  64. package/dist/Shared/Services/types.d.ts +0 -6
  65. package/dist/Shared/constants.d.ts +1 -2
  66. package/dist/Shared/types.d.ts +0 -21
  67. package/dist/assets/@code-editor.css +1 -1
  68. package/dist/assets/ic-gift-animated.9ca6ccb4.svg +38 -0
  69. package/dist/index.d.ts +0 -6
  70. package/dist/index.js +957 -1007
  71. package/package.json +1 -4
  72. package/dist/Common/BreadCrumb/NestedBreadCrumb.d.ts +0 -2
  73. package/dist/Common/SegmentedBarChart/utils.d.ts +0 -2
  74. package/dist/Pages/GlobalConfigurations/ClustersAndEnvironments/VirtualClusterSidebar.d.ts +0 -2
  75. package/dist/Pages-Devtron-2.0/ApplicationManagement/Shared/ApplicationManagementIcon/ApplicationManagementIcon.d.ts +0 -1
  76. package/dist/Pages-Devtron-2.0/ApplicationManagement/Shared/ApplicationManagementIcon/index.d.ts +0 -2
  77. package/dist/Pages-Devtron-2.0/ApplicationManagement/Shared/ApplicationManagementIcon/utils.d.ts +0 -11
  78. package/dist/Pages-Devtron-2.0/ApplicationManagement/Shared/index.d.ts +0 -1
  79. package/dist/Pages-Devtron-2.0/ApplicationManagement/index.d.ts +0 -1
  80. package/dist/Pages-Devtron-2.0/Automation&Enablement/Overview/Overview.d.ts +0 -1
  81. package/dist/Pages-Devtron-2.0/Automation&Enablement/Overview/index.d.ts +0 -1
  82. package/dist/Pages-Devtron-2.0/Automation&Enablement/index.d.ts +0 -1
  83. package/dist/Pages-Devtron-2.0/CostVisibility/Overview/Overview.d.ts +0 -1
  84. package/dist/Pages-Devtron-2.0/CostVisibility/Overview/index.d.ts +0 -1
  85. package/dist/Pages-Devtron-2.0/CostVisibility/Shared/constants.d.ts +0 -4
  86. package/dist/Pages-Devtron-2.0/CostVisibility/Shared/index.d.ts +0 -2
  87. package/dist/Pages-Devtron-2.0/CostVisibility/Shared/types.d.ts +0 -31
  88. package/dist/Pages-Devtron-2.0/CostVisibility/index.d.ts +0 -1
  89. package/dist/Pages-Devtron-2.0/GlobalConfiguration/Overview/Overview.d.ts +0 -1
  90. package/dist/Pages-Devtron-2.0/GlobalConfiguration/Overview/index.d.ts +0 -1
  91. package/dist/Pages-Devtron-2.0/GlobalConfiguration/index.d.ts +0 -1
  92. package/dist/Pages-Devtron-2.0/GlobalOverview/GlobalOverview.d.ts +0 -1
  93. package/dist/Pages-Devtron-2.0/GlobalOverview/index.d.ts +0 -1
  94. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Overview/Overview.d.ts +0 -1
  95. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Overview/index.d.ts +0 -1
  96. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Shared/InfrastructureManagementIcon/InfrastructureManagementIcon.d.ts +0 -1
  97. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Shared/InfrastructureManagementIcon/index.d.ts +0 -2
  98. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Shared/InfrastructureManagementIcon/utils.d.ts +0 -6
  99. package/dist/Pages-Devtron-2.0/InfrastructureManagement/Shared/index.d.ts +0 -1
  100. package/dist/Pages-Devtron-2.0/InfrastructureManagement/index.d.ts +0 -2
  101. package/dist/Pages-Devtron-2.0/InfrastructureManagement/utils.d.ts +0 -11
  102. package/dist/Pages-Devtron-2.0/SecurityCenter/Overview/Overview.d.ts +0 -1
  103. package/dist/Pages-Devtron-2.0/SecurityCenter/Overview/index.d.ts +0 -1
  104. package/dist/Pages-Devtron-2.0/SecurityCenter/index.d.ts +0 -1
  105. package/dist/Pages-Devtron-2.0/SoftwareReleaseManagement/Overview/Overview.d.ts +0 -1
  106. package/dist/Pages-Devtron-2.0/SoftwareReleaseManagement/Overview/index.d.ts +0 -1
  107. package/dist/Pages-Devtron-2.0/SoftwareReleaseManagement/index.d.ts +0 -1
  108. package/dist/Pages-Devtron-2.0/index.d.ts +0 -3
  109. package/dist/Shared/Components/Charts/Chart.component.d.ts +0 -102
  110. package/dist/Shared/Components/Charts/constants.d.ts +0 -8
  111. package/dist/Shared/Components/Charts/index.d.ts +0 -4
  112. package/dist/Shared/Components/Charts/plugins.d.ts +0 -4
  113. package/dist/Shared/Components/Charts/types.d.ts +0 -110
  114. package/dist/Shared/Components/Charts/utils.d.ts +0 -70
  115. package/dist/Shared/Components/ClusterStatusIcon/ClusterStatusIcon.d.ts +0 -3
  116. package/dist/Shared/Components/ClusterStatusIcon/index.d.ts +0 -1
  117. package/dist/Shared/Components/ClusterStatusIcon/types.d.ts +0 -5
  118. package/dist/Shared/Components/ClusterStatusIcon/utils.d.ts +0 -2
  119. package/dist/Shared/Components/ExportToCsv/ExportToCsv.d.ts +0 -3
  120. package/dist/Shared/Components/ExportToCsv/ExportToCsvDialog.d.ts +0 -3
  121. package/dist/Shared/Components/ExportToCsv/index.d.ts +0 -2
  122. package/dist/Shared/Components/ExportToCsv/types.d.ts +0 -64
  123. package/dist/Shared/Components/KeyboardShortcut/KeyboardShortcut.component.d.ts +0 -3
  124. package/dist/Shared/Components/KeyboardShortcut/constants.d.ts +0 -3
  125. package/dist/Shared/Components/KeyboardShortcut/index.d.ts +0 -1
  126. package/dist/Shared/Components/KeyboardShortcut/types.d.ts +0 -4
  127. package/dist/Shared/Components/PrometheusConfigurations/PrometheusConfigCard.d.ts +0 -3
  128. package/dist/Shared/Components/PrometheusConfigurations/index.d.ts +0 -2
  129. package/dist/Shared/Components/PrometheusConfigurations/types.d.ts +0 -20
  130. package/dist/Shared/Components/SelectPicker/GroupedFilterSelectPicker.example.d.ts +0 -0
  131. package/dist/Shared/Components/SideNavigation/SideNavigation.d.ts +0 -2
  132. package/dist/Shared/Components/SideNavigation/index.d.ts +0 -2
  133. package/dist/Shared/Components/SideNavigation/types.d.ts +0 -19
  134. package/dist/assets/ic-alibaba.518d61a4.svg +0 -3
  135. package/dist/assets/ic-argocd-app.9c5eba79.svg +0 -61
  136. package/dist/assets/ic-arrow-line-down.b6a98848.svg +0 -3
  137. package/dist/assets/ic-arrow-white.be4aea3f.svg +0 -3
  138. package/dist/assets/ic-aws.b094356f.svg +0 -11
  139. package/dist/assets/ic-bg-build.8609d0ea.svg +0 -13
  140. package/dist/assets/ic-bg-deploy.266711fe.svg +0 -22
  141. package/dist/assets/ic-bg-production-pipelines.2951cdc0.svg +0 -22
  142. package/dist/assets/ic-bg-project.84658405.svg +0 -12
  143. package/dist/assets/ic-bg-scan.2249360c.svg +0 -28
  144. package/dist/assets/ic-bg-webhook.b455152d.svg +0 -13
  145. package/dist/assets/ic-bot.65f403dd.svg +0 -3
  146. package/dist/assets/ic-building.2405d07b.svg +0 -3
  147. package/dist/assets/ic-bulb.3906a732.svg +0 -7
  148. package/dist/assets/ic-circle-progress.0875625d.svg +0 -6
  149. package/dist/assets/ic-clipboard.2869fa7d.svg +0 -3
  150. package/dist/assets/ic-clock-counterclockwise.3d7c2ef1.svg +0 -3
  151. package/dist/assets/ic-cloud.aa7acc8a.svg +0 -3
  152. package/dist/assets/ic-coin.a06dce22.svg +0 -3
  153. package/dist/assets/ic-coins.2c15f406.svg +0 -3
  154. package/dist/assets/ic-database-backup.b9e7c558.svg +0 -3
  155. package/dist/assets/ic-devtron-text.67a413b6.svg +0 -3
  156. package/dist/assets/ic-dot-circle.5ce1fccf.svg +0 -3
  157. package/dist/assets/ic-edit-lines.57927b07.svg +0 -3
  158. package/dist/assets/ic-failure-color.e167df98.svg +0 -4
  159. package/dist/assets/ic-file-download.ca57c068.svg +0 -5
  160. package/dist/assets/ic-files-changed.04e6de3f.svg +0 -3
  161. package/dist/assets/ic-floppy-disk.6d392bcd.svg +0 -3
  162. package/dist/assets/ic-fluxcd-app.7bf7dce5.svg +0 -22
  163. package/dist/assets/ic-gift-animated.d848dfa3.svg +0 -1
  164. package/dist/assets/ic-google-cloud.a0198038.svg +0 -6
  165. package/dist/assets/ic-kubernetes.7e04c3d2.svg +0 -4
  166. package/dist/assets/ic-line.4e8fa046.svg +0 -3
  167. package/dist/assets/ic-magic-wand.2c29cd4e.svg +0 -10
  168. package/dist/assets/ic-new-chat.f7c90f8e.svg +0 -5
  169. package/dist/assets/ic-oracle-cloud.5a8ee45d.svg +0 -3
  170. package/dist/assets/ic-otc-cloud.43b31bd8.svg +0 -5
  171. package/dist/assets/ic-piggybank.3a4839d7.svg +0 -3
  172. package/dist/assets/ic-priority-high-fill.53755d8f.svg +0 -3
  173. package/dist/assets/ic-priority-low-fill.79e781ae.svg +0 -4
  174. package/dist/assets/ic-priority-medium-fill.7bab0ff8.svg +0 -4
  175. package/dist/assets/ic-priority-urgent-fill.78d42fa0.svg +0 -10
  176. package/dist/assets/ic-red-bulb.25e01bfc.svg +0 -9
  177. package/dist/assets/ic-right-panel-collapse.0ecf8ceb.svg +0 -3
  178. package/dist/assets/ic-spider.99b77bd8.svg +0 -3
  179. package/dist/assets/ic-symbol-greater-than.8f71342d.svg +0 -3
  180. package/dist/assets/ic-trend-up.5752ef30.svg +0 -3
  181. package/dist/assets/ic-vector.4530b03c.svg +0 -3
  182. package/dist/assets/no-cluster-cost-enabled.038c73db.webp +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devtron-labs/devtron-fe-common-lib",
3
- "version": "1.20.5-pre-9",
3
+ "version": "1.20.6",
4
4
  "description": "Supporting common component library",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -49,7 +49,6 @@
49
49
  "@types/dompurify": "^3.0.5",
50
50
  "@types/json-schema": "^7.0.15",
51
51
  "@types/react": "17.0.39",
52
- "@types/react-csv": "^1.1.10",
53
52
  "@types/react-dates": "^21.8.6",
54
53
  "@types/react-dom": "17.0.13",
55
54
  "@types/react-router-dom": "^5.3.3",
@@ -117,7 +116,6 @@
117
116
  "@uiw/react-codemirror": "4.23.7",
118
117
  "@xyflow/react": "12.4.2",
119
118
  "ansi_up": "^5.2.1",
120
- "chart.js": "^4.5.0",
121
119
  "codemirror-json-schema": "0.8.0",
122
120
  "dayjs": "^1.11.13",
123
121
  "fast-json-patch": "^3.1.1",
@@ -128,7 +126,6 @@
128
126
  "nanoid": "^3.3.8",
129
127
  "qrcode.react": "^4.2.0",
130
128
  "react-canvas-confetti": "^2.0.7",
131
- "react-csv": "^2.2.2",
132
129
  "react-dates": "^21.8.0",
133
130
  "react-draggable": "^4.4.5",
134
131
  "react-international-phone": "^4.5.0",
@@ -1,2 +0,0 @@
1
- import { NestedBreadCrumbProps } from './Types';
2
- export declare const NestedBreadCrumb: ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => JSX.Element;
@@ -1,2 +0,0 @@
1
- import { ComponentSizeType } from '../../Shared/constants';
2
- export declare const getBarHeightForSize: (size: ComponentSizeType) => "h-20" | "h-6" | "h-8";
@@ -1,2 +0,0 @@
1
- declare const VirtualClusterSidebar: () => JSX.Element;
2
- export default VirtualClusterSidebar;
@@ -1 +0,0 @@
1
- export declare const ApplicationManagementIcon: () => JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from './ApplicationManagementIcon';
2
- export { getApplicationManagementBreadcrumb } from './utils';
@@ -1,11 +0,0 @@
1
- export declare const getApplicationManagementBreadcrumb: () => {
2
- 'application-management': {
3
- component: JSX.Element;
4
- linked: boolean;
5
- };
6
- list: {
7
- component: JSX.Element;
8
- };
9
- d: any;
10
- app: any;
11
- };
@@ -1 +0,0 @@
1
- export * from './ApplicationManagementIcon';
@@ -1 +0,0 @@
1
- export * from './Shared';
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1,4 +0,0 @@
1
- import { IconName } from '../../../Shared/Components';
2
- import { ClusterProviderType } from './types';
3
- export declare const CLUSTER_PROVIDER_TO_ICON_NAME: Record<ClusterProviderType, IconName | null>;
4
- export declare const CLUSTER_PROVIDER_TO_LABEL: Record<ClusterProviderType, string>;
@@ -1,2 +0,0 @@
1
- export * from './constants';
2
- export * from './types';
@@ -1,31 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { RJSFFormSchema } from '../../../Common/RJSF';
3
- import { ClusterDetailListType } from '../../../Common/Types';
4
- export declare enum CostBreakdownViewType {
5
- CLUSTERS = "clusters",
6
- ENVIRONMENTS = "environments",
7
- PROJECTS = "projects",
8
- APPLICATIONS = "applications"
9
- }
10
- export declare enum CostBreakdownItemViewParamsType {
11
- ITEM_NAME = "itemName",
12
- VIEW = "view",
13
- DETAIL = "detail"
14
- }
15
- type RenderClusterFormParamsType = {
16
- clusterDetails: ClusterDetailListType;
17
- handleClose: () => void;
18
- handleSuccess: () => void;
19
- };
20
- export interface CostVisibilityRenderContextType {
21
- renderClusterForm: (params: RenderClusterFormParamsType) => JSX.Element;
22
- }
23
- export interface CostVisibilityRenderProviderProps extends CostVisibilityRenderContextType {
24
- children: ReactNode;
25
- }
26
- export type ClusterProviderType = 'AWS' | 'GCP' | 'Azure' | 'Alibaba' | 'Scaleway' | 'Oracle' | 'OTC' | 'DigitalOcean' | 'Unknown';
27
- export interface ClusterProviderDetailsType {
28
- clusterProvider: ClusterProviderType;
29
- costModuleSchema: RJSFFormSchema;
30
- }
31
- export {};
@@ -1 +0,0 @@
1
- export * from './Shared';
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export declare const GlobalOverview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './GlobalOverview';
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export declare const InfrastructureManagementIcon: () => JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from './InfrastructureManagementIcon';
2
- export { getInfrastructureManagementBreadcrumb } from './utils';
@@ -1,6 +0,0 @@
1
- export declare const getInfrastructureManagementBreadcrumb: () => {
2
- 'infrastructure-management': {
3
- component: JSX.Element;
4
- linked: boolean;
5
- };
6
- };
@@ -1 +0,0 @@
1
- export * from './InfrastructureManagementIcon';
@@ -1,2 +0,0 @@
1
- export * from './Overview';
2
- export * from './Shared';
@@ -1,11 +0,0 @@
1
- export declare const getAutomationEnablementBreadcrumbConfig: () => {
2
- 'automation-and-enablement': {
3
- component: JSX.Element;
4
- linked: boolean;
5
- };
6
- job: any;
7
- list: {
8
- component: JSX.Element;
9
- };
10
- 'jobId(\\d+)': any;
11
- };
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export declare const Overview: () => JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1 +0,0 @@
1
- export * from './Overview';
@@ -1,3 +0,0 @@
1
- export * from './ApplicationManagement';
2
- export * from './CostVisibility';
3
- export * from './InfrastructureManagement';
@@ -1,102 +0,0 @@
1
- import { ChartProps } from './types';
2
- /**
3
- * A versatile Chart component that renders different types of charts using Chart.js.
4
- * Supports area charts, pie charts, stacked bar charts (vertical/horizontal), and line charts.
5
- *
6
- * The component automatically adapts to theme changes and provides consistent styling
7
- * across all chart types. Colors are provided by the user through the CHART_COLORS constant
8
- * or custom color tokens.
9
- *
10
- * @example
11
- * ```tsx
12
- * [Area Chart Example]
13
- * <Chart
14
- * id="quarterly-growth"
15
- * type="area"
16
- * xAxisLabels={['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023']}
17
- * datasets={[{
18
- * datasetName: 'Revenue Growth (%)',
19
- * yAxisValues: [15.2, 18.7, 22.3, 19.8],
20
- * backgroundColor: 'LavenderPurple300'
21
- * }]}
22
- * />
23
- *
24
- * [Pie Chart Example]
25
- * <Chart
26
- * id="technology-adoption"
27
- * type="pie"
28
- * xAxisLabels={['React', 'Vue.js', 'Angular']}
29
- * datasets={{
30
- * datasetName: 'Adoption Rate (%)',
31
- * yAxisValues: [45.2, 28.7, 35.4],
32
- * backgroundColor: ['SkyBlue300', 'AquaTeal400', 'LavenderPurple300']
33
- * }}
34
- * />
35
- *
36
- * [Line Chart Example (non-stacked, non-filled)]
37
- * <Chart
38
- * id="traffic-trends"
39
- * type="line"
40
- * xAxisLabels={['Jan', 'Feb', 'Mar', 'Apr']}
41
- * datasets={[{
42
- * datasetName: 'Website Traffic',
43
- * yAxisValues: [120, 190, 300, 500],
44
- * borderColor: 'SkyBlue500'
45
- * }]}
46
- * />
47
- *
48
- * [Stacked Bar Chart Example]
49
- * <Chart
50
- * id="team-allocation"
51
- * type="stackedBar"
52
- * xAxisLabels={['Q1', 'Q2', 'Q3', 'Q4']}
53
- * datasets={[
54
- * {
55
- * datasetName: 'Frontend',
56
- * yAxisValues: [120, 150, 180, 200],
57
- * backgroundColor: 'SkyBlue600'
58
- * },
59
- * {
60
- * datasetName: 'Backend',
61
- * yAxisValues: [80, 100, 120, 140],
62
- * backgroundColor: 'AquaTeal600'
63
- * }
64
- * ]}
65
- * />
66
- * ```
67
- *
68
- * @param id - Unique identifier for the chart canvas element
69
- * @param type - Chart type: 'area', 'pie', 'stackedBar', 'stackedBarHorizontal', or 'line'
70
- * @param xAxisLabels - Array of labels for the x-axis (or categories for pie charts)
71
- * @param datasets - Chart data: array of datasets for most charts, single dataset object for pie charts
72
- *
73
- * @performance
74
- * **Memoization Recommendations:**
75
- * - `xAxisLabels`: Should be memoized with useMemo() if derived from complex calculations
76
- * - `datasets`: Should be memoized with useMemo() as it contains arrays and objects that cause re-renders
77
- * - Avoid passing inline objects or arrays directly to these props
78
- *
79
- * @example
80
- * ```tsx
81
- * [Good: Memoized props prevent unnecessary re-renders]
82
- * const labels = useMemo(() => quarters.map(q => `Q${q}`), [quarters])
83
- * const chartDatasets = useMemo(() => [
84
- * {
85
- * datasetName: 'Revenue',
86
- * yAxisValues: revenueData,
87
- * backgroundColor: 'LavenderPurple300'
88
- * }
89
- * ], [revenueData])
90
- *
91
- * return <Chart id="revenue-chart" type="area" xAxisLabels={labels} datasets={chartDatasets} />
92
- * ```
93
- *
94
- * @notes
95
- * - Chart automatically re-renders when theme changes (light/dark mode)
96
- * - Line charts are rendered as non-stacked and non-filled by default
97
- * - Pie charts expect a single dataset object instead of an array
98
- * - Colors should reference CHART_COLORS tokens for consistency
99
- * - Component destroys and recreates Chart.js instance on prop changes for optimal performance
100
- */
101
- declare const Chart: (props: ChartProps) => JSX.Element;
102
- export default Chart;
@@ -1,8 +0,0 @@
1
- import { AppThemeType } from '../../Providers';
2
- import { ChartColorKey } from './types';
3
- export declare const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>>;
4
- export declare const CHART_GRID_LINES_COLORS: Record<AppThemeType, string>;
5
- export declare const CHART_AXIS_COLORS: Record<AppThemeType, string>;
6
- export declare const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string>;
7
- export declare const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string>;
8
- export declare const LINE_DASH: number[];
@@ -1,4 +0,0 @@
1
- export { default as Chart } from './Chart.component';
2
- export { CHART_COLORS } from './constants';
3
- export type { ChartColorKey, ChartProps, ChartType, ReferenceLineConfigType, SimpleDataset, SimpleDatasetForPie, } from './types';
4
- export { chartColorGenerator } from './utils';
@@ -1,4 +0,0 @@
1
- import { Plugin } from 'chart.js';
2
- import { AppThemeType } from '../../Providers';
3
- import { ReferenceLineConfigType } from './types';
4
- export declare const drawReferenceLine: (config: ReferenceLineConfigType, id: string, appTheme: AppThemeType) => Plugin;
@@ -1,110 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { TooltipOptions, TooltipPositionerFunction } from 'chart.js';
3
- import { TooltipProps } from '../../../Common/Tooltip';
4
- import { AppThemeType } from '../../Providers';
5
- import { Never } from '../../types';
6
- export type ChartType = 'area' | 'pie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
7
- export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray';
8
- export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
9
- export type ChartColorKey = `${ColorTokensType}${VariantsType}`;
10
- export type ChartTypeWithoutPie = Exclude<ChartType, 'pie'>;
11
- interface BaseSimpleDataset {
12
- datasetName: string;
13
- yAxisValues: number[];
14
- }
15
- export interface SimpleDataset extends BaseSimpleDataset {
16
- color: ChartColorKey;
17
- isClickable?: boolean;
18
- }
19
- export interface SimpleDatasetForLineAndArea extends Omit<SimpleDataset, 'isClickable'> {
20
- isDashed?: boolean;
21
- }
22
- export interface SimpleDatasetForPie extends BaseSimpleDataset {
23
- colors: Array<ChartColorKey>;
24
- isClickable?: boolean[];
25
- }
26
- export interface ReferenceLineConfigType {
27
- strokeWidth?: number;
28
- color?: ChartColorKey;
29
- value: number;
30
- }
31
- type XYAxisMax = {
32
- xAxisMax?: number;
33
- yAxisMax?: number;
34
- /**
35
- * Optional reference lines to draw across the chart
36
- */
37
- referenceLines?: ReferenceLineConfigType[];
38
- };
39
- type OnChartClickHandler = (datasetName: string, value: number) => void;
40
- export type TypeAndDatasetsType = ({
41
- type: 'pie';
42
- /**
43
- * Needs to be memoized
44
- */
45
- datasets: SimpleDatasetForPie;
46
- onChartClick?: OnChartClickHandler;
47
- } & Never<XYAxisMax>) | ({
48
- type: 'line';
49
- datasets: SimpleDatasetForLineAndArea[];
50
- onChartClick?: never;
51
- } & XYAxisMax) | ({
52
- type: 'area';
53
- datasets: SimpleDatasetForLineAndArea;
54
- onChartClick?: never;
55
- } & XYAxisMax) | ({
56
- type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
57
- datasets: SimpleDataset[];
58
- onChartClick?: OnChartClickHandler;
59
- } & XYAxisMax);
60
- export type ChartProps = {
61
- id: string;
62
- /**
63
- * The x-axis labels. Needs to be memoized
64
- */
65
- xAxisLabels: string[];
66
- /**
67
- * Hide the x and y axis and grid lines
68
- * @default false
69
- */
70
- hideAxis?: boolean;
71
- hideXAxisLabels?: boolean;
72
- tooltipConfig?: {
73
- getTooltipContent?: (args: Parameters<TooltipOptions['external']>[0]) => ReactNode;
74
- /**
75
- * @default 'top'
76
- */
77
- placement?: TooltipProps['placement'];
78
- };
79
- /** A title for x axis */
80
- xScaleTitle?: string;
81
- /** A title for y axis */
82
- yScaleTitle?: string;
83
- } & TypeAndDatasetsType;
84
- export type TransformDatasetProps = {
85
- appTheme: AppThemeType;
86
- } & ({
87
- type: 'pie';
88
- dataset: SimpleDatasetForPie;
89
- } | {
90
- type: 'line' | 'area';
91
- dataset: SimpleDatasetForLineAndArea;
92
- } | {
93
- type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
94
- dataset: SimpleDataset;
95
- });
96
- export type GetBackgroundAndBorderColorProps = TransformDatasetProps;
97
- export type TransformDataForChartProps = {
98
- appTheme: AppThemeType;
99
- } & TypeAndDatasetsType;
100
- export interface GetDefaultOptionsParams {
101
- chartProps: ChartProps;
102
- appTheme: AppThemeType;
103
- externalTooltipHandler: TooltipOptions['external'];
104
- }
105
- declare module 'chart.js' {
106
- interface TooltipPositionerMap {
107
- barElementCenterPositioner: TooltipPositionerFunction<'bar'>;
108
- }
109
- }
110
- export {};
@@ -1,70 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { Chart, ChartDataset, ChartOptions, ChartType as ChartJSChartType, Point, TooltipOptions } from 'chart.js';
3
- import { AppThemeType } from '../../Providers';
4
- import { ChartType, GetDefaultOptionsParams, TransformDataForChartProps } from './types';
5
- export declare const getLegendsLabelConfig: (type: ChartType, appTheme: AppThemeType) => {
6
- usePointStyle: false;
7
- boxHeight: number;
8
- generateLabels: (chart: Chart<"line">) => {
9
- fillStyle: string;
10
- strokeStyle: string;
11
- lineDash: number[];
12
- lineWidth: number;
13
- text: string;
14
- borderRadius?: number | import('chart.js').BorderRadius;
15
- datasetIndex?: number;
16
- index?: number;
17
- fontColor?: import('chart.js').Color;
18
- hidden?: boolean;
19
- lineCap?: CanvasLineCap;
20
- lineDashOffset?: number;
21
- lineJoin?: CanvasLineJoin;
22
- pointStyle?: import('chart.js').PointStyle;
23
- rotation?: number;
24
- textAlign?: import('chart.js').TextAlign;
25
- }[];
26
- color: string;
27
- font: {
28
- family: string;
29
- size: number;
30
- lineHeight: string;
31
- weight: number;
32
- };
33
- } | {
34
- usePointStyle: true;
35
- boxHeight: number;
36
- boxWidth: number;
37
- pointStyle: "rectRounded";
38
- color: string;
39
- font: {
40
- family: string;
41
- size: number;
42
- lineHeight: string;
43
- weight: number;
44
- };
45
- };
46
- export declare const getChartJSType: (type: ChartType) => ChartJSChartType;
47
- export declare const getDefaultOptions: ({ chartProps, appTheme, externalTooltipHandler, }: GetDefaultOptionsParams) => ChartOptions;
48
- export declare const transformDataForChart: (props: TransformDataForChartProps) => (ChartDataset<"line"> | {
49
- backgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
50
- borderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
51
- pointBackgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
52
- pointBorderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
53
- label: string;
54
- data: number[];
55
- } | {
56
- backgroundColor: string[];
57
- hoverBackgroundColor: string[];
58
- borderColor: string;
59
- label: string;
60
- data: number[];
61
- } | {
62
- backgroundColor: string;
63
- hoverBackgroundColor: string;
64
- borderColor: string;
65
- label: string;
66
- data: number[];
67
- })[];
68
- export declare function chartColorGenerator(): Generator<"DeepPlum500" | "DeepPlum300" | "DeepPlum100" | "DeepPlum50" | "DeepPlum600" | "DeepPlum400" | "DeepPlum200" | "DeepPlum700" | "DeepPlum800" | "DeepPlum900" | "DeepPlum950" | "Magenta500" | "Magenta300" | "Magenta100" | "Magenta50" | "Magenta600" | "Magenta400" | "Magenta200" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta950" | "Slate500" | "Slate300" | "Slate100" | "Slate50" | "Slate600" | "Slate400" | "Slate200" | "Slate700" | "Slate800" | "Slate900" | "Slate950" | "Lavender500" | "Lavender300" | "Lavender100" | "Lavender50" | "Lavender600" | "Lavender400" | "Lavender200" | "Lavender700" | "Lavender800" | "Lavender900" | "Lavender950" | "SkyBlue500" | "SkyBlue300" | "SkyBlue100" | "SkyBlue50" | "SkyBlue600" | "SkyBlue400" | "SkyBlue200" | "SkyBlue700" | "SkyBlue800" | "SkyBlue900" | "SkyBlue950" | "AquaTeal500" | "AquaTeal300" | "AquaTeal100" | "AquaTeal50" | "AquaTeal600" | "AquaTeal400" | "AquaTeal200" | "AquaTeal700" | "AquaTeal800" | "AquaTeal900" | "AquaTeal950" | "LimeGreen500" | "LimeGreen300" | "LimeGreen100" | "LimeGreen50" | "LimeGreen600" | "LimeGreen400" | "LimeGreen200" | "LimeGreen700" | "LimeGreen800" | "LimeGreen900" | "LimeGreen950" | "CoralRed500" | "CoralRed300" | "CoralRed100" | "CoralRed50" | "CoralRed600" | "CoralRed400" | "CoralRed200" | "CoralRed700" | "CoralRed800" | "CoralRed900" | "CoralRed950" | "GoldenYellow500" | "GoldenYellow300" | "GoldenYellow100" | "GoldenYellow50" | "GoldenYellow600" | "GoldenYellow400" | "GoldenYellow200" | "GoldenYellow700" | "GoldenYellow800" | "GoldenYellow900" | "GoldenYellow950" | "CharcoalGray500" | "CharcoalGray300" | "CharcoalGray100" | "CharcoalGray50" | "CharcoalGray600" | "CharcoalGray400" | "CharcoalGray200" | "CharcoalGray700" | "CharcoalGray800" | "CharcoalGray900" | "CharcoalGray950" | "Gray500" | "Gray300" | "Gray100" | "Gray50" | "Gray600" | "Gray400" | "Gray200" | "Gray700" | "Gray800" | "Gray900" | "Gray950", void, unknown>;
69
- export declare const buildChartTooltipFromContext: ({ title, body, labelColors: labelColorsProp, }: Pick<Parameters<TooltipOptions["external"]>[0]["tooltip"], "title" | "body" | "labelColors">) => ReactNode;
70
- export declare const distanceBetweenPoints: (pt1: Point, pt2: Point) => number;
@@ -1,3 +0,0 @@
1
- import { ClusterStatusIconProps } from './types';
2
- declare const ClusterStatusIcon: ({ clusterStatus, isVirtualCluster }: ClusterStatusIconProps) => JSX.Element;
3
- export default ClusterStatusIcon;
@@ -1 +0,0 @@
1
- export { default as ClusterStatusIcon } from './ClusterStatusIcon';
@@ -1,5 +0,0 @@
1
- import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
2
- export interface ClusterStatusIconProps {
3
- clusterStatus: ClusterStatusType;
4
- isVirtualCluster: boolean;
5
- }
@@ -1,2 +0,0 @@
1
- import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
2
- export declare const getBulletColorAccToStatus: (status: ClusterStatusType) => "bcg-5" | "bcr-5" | "bcy-5";
@@ -1,3 +0,0 @@
1
- import { ExportToCsvProps } from './types';
2
- declare const ExportToCsv: <HeaderItemType extends string>({ apiPromise, fileName, triggerElementConfig, disabled, modalConfig, headers, downloadRequestId, }: ExportToCsvProps<HeaderItemType>) => JSX.Element;
3
- export default ExportToCsv;
@@ -1,3 +0,0 @@
1
- import { ExportToCsvDialogProps } from './types';
2
- declare const ExportToCsvDialog: ({ exportDataError, isLoading, initiateDownload, handleCancelRequest, }: ExportToCsvDialogProps) => JSX.Element;
3
- export default ExportToCsvDialog;
@@ -1,2 +0,0 @@
1
- export { default as ExportToCsv } from './ExportToCsv';
2
- export * from './types';
@@ -1,64 +0,0 @@
1
- import { ServerErrors } from '../../../Common/ServerError';
2
- import { APIOptions } from '../../../Common/Types';
3
- import { ButtonProps } from '../Button';
4
- type TriggerElementConfigType = {
5
- buttonProps: ButtonProps;
6
- showOnlyIcon?: boolean;
7
- customButton?: never;
8
- isExternalTrigger?: false;
9
- } | {
10
- customButton: {
11
- content: JSX.Element;
12
- className: string;
13
- };
14
- buttonProps?: never;
15
- showOnlyIcon?: false;
16
- isExternalTrigger?: false;
17
- } | {
18
- isExternalTrigger: true;
19
- showOnlyIcon?: false;
20
- buttonProps?: never;
21
- customButton?: never;
22
- } | {
23
- showOnlyIcon: true;
24
- buttonProps?: never;
25
- customButton?: never;
26
- isExternalTrigger?: false;
27
- };
28
- export interface ExportToCsvProps<HeaderItemKeyType extends string> {
29
- headers: {
30
- label: string;
31
- key: HeaderItemKeyType;
32
- }[];
33
- apiPromise: ({ signal, }: Pick<APIOptions, 'signal'>) => Promise<Record<HeaderItemKeyType, string | number | boolean>[]>;
34
- fileName: string;
35
- /**
36
- * If nothing given will render a Button with "Export CSV" text
37
- */
38
- triggerElementConfig?: TriggerElementConfigType;
39
- /**
40
- * @default false
41
- */
42
- disabled?: boolean;
43
- /**
44
- * If not given would show default dialog
45
- */
46
- modalConfig?: {
47
- hideDialog: false;
48
- renderCustomModal?: (proceedWithDownload: (shouldProceed: boolean) => void) => JSX.Element;
49
- } | {
50
- hideDialog: true;
51
- renderCustomModal?: never;
52
- };
53
- /**
54
- * If given, would trigger export on when this changes and has some value
55
- */
56
- downloadRequestId?: string | number;
57
- }
58
- export interface ExportToCsvDialogProps {
59
- isLoading: boolean;
60
- exportDataError: ServerErrors;
61
- initiateDownload: () => void;
62
- handleCancelRequest: () => void;
63
- }
64
- export {};
@@ -1,3 +0,0 @@
1
- import { KeyboardShortcutProps } from './types';
2
- declare const KeyboardShortcut: ({ keyboardKey }: KeyboardShortcutProps) => JSX.Element;
3
- export default KeyboardShortcut;
@@ -1,3 +0,0 @@
1
- import { SupportedKeyboardKeysType } from '../../../Common/Hooks';
2
- import { IconsProps } from '../Icon';
3
- export declare const KEY_TO_UI_MAP: Record<SupportedKeyboardKeysType, string | Pick<IconsProps, 'name' | 'rotateBy'>>;