pixel-react 1.8.3 → 1.8.5

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 (193) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/1fb4472b34e4fe07.css +1 -0
  3. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  4. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  5. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  6. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  7. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  8. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  9. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  10. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  11. package/lib/components/Button/Button.stories.d.ts +13 -0
  12. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  13. package/lib/components/Charts/DashboardDonutChart/types.d.ts +3 -0
  14. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  15. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  16. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  17. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  18. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  19. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  20. package/lib/components/ConditionalDropdown/types.d.ts +4 -0
  21. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  22. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  23. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  24. package/lib/components/Drawer/Types.d.ts +4 -0
  25. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +4 -0
  26. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +10 -4
  27. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +10 -0
  28. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  29. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +9 -0
  30. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +0 -2
  31. package/lib/components/Excel/Types.d.ts +14 -10
  32. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  42. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  43. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  44. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  66. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  67. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  68. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  69. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  70. package/lib/components/ExcelFile/Types.d.ts +129 -0
  71. package/lib/components/ExcelFile/index.d.ts +1 -0
  72. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  73. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  74. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  75. package/lib/components/Form/Form.stories.d.ts +7 -0
  76. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  77. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  78. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  79. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  80. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  81. package/lib/components/Input/Input.stories.d.ts +9 -0
  82. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  83. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
  84. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  85. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  86. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  87. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  88. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  89. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  90. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +10 -0
  91. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  92. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  93. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  94. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  95. package/lib/components/Search/Search.stories.d.ts +6 -0
  96. package/lib/components/Select/Select.stories.d.ts +13 -0
  97. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  98. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  99. package/lib/components/Select/components/types.d.ts +3 -2
  100. package/lib/components/Select/types.d.ts +10 -2
  101. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  102. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  103. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  104. package/lib/components/Table/Table.stories.d.ts +13 -0
  105. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  106. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  107. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  108. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  109. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  110. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  111. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  112. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  113. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  114. package/lib/index.d.ts +47 -6
  115. package/lib/index.esm.js +5088 -2119
  116. package/lib/index.esm.js.map +1 -1
  117. package/lib/index.js +5097 -2118
  118. package/lib/index.js.map +1 -1
  119. package/lib/tsconfig.tsbuildinfo +1 -1
  120. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  121. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  122. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  123. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  124. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  125. package/lib/utils/find/findAndInsert.d.ts +7 -0
  126. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  127. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  128. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  129. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  130. package/lib/utils/keyBoardActionUtil/UseKeyboardActions.d.ts +2 -0
  131. package/lib/utils/keyBoardActionUtil/types.d.ts +4 -0
  132. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  133. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  134. package/lib/validations/regex.d.ts +5 -1
  135. package/package.json +6 -1
  136. package/src/assets/Themes/BaseTheme.scss +1 -0
  137. package/src/assets/Themes/DarkTheme.scss +1 -1
  138. package/src/assets/icons/external_user.svg +13 -0
  139. package/src/assets/icons/group_user.svg +12 -0
  140. package/src/assets/icons/single_user.svg +12 -0
  141. package/src/assets/icons/unfollow_icon.svg +3 -0
  142. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +38 -6
  143. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
  144. package/src/components/Charts/DashboardDonutChart/types.ts +4 -1
  145. package/src/components/Charts/LineChart/LineChart.stories.tsx +27 -88
  146. package/src/components/Charts/LineChart/LineChart.tsx +138 -42
  147. package/src/components/Charts/LineChart/types.ts +1 -0
  148. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +3 -3
  149. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +47 -43
  150. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -0
  151. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +2 -1
  152. package/src/components/ConditionalDropdown/types.ts +4 -0
  153. package/src/components/Drawer/Drawer.stories.tsx +1 -0
  154. package/src/components/Drawer/Drawer.tsx +5 -1
  155. package/src/components/Drawer/Types.ts +4 -0
  156. package/src/components/Editor/Editor.scss +23 -18
  157. package/src/components/Editor/Editor.tsx +2 -2
  158. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
  159. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +6 -2
  160. package/src/components/Excel/ExcelFile/ExcelFile.scss +45 -41
  161. package/src/components/Excel/ExcelFile/ExcelFile.tsx +33 -11
  162. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +29 -1
  163. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +0 -36
  164. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +2 -2
  165. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +1 -40
  166. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +2 -2
  167. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +3 -3
  168. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +12 -1
  169. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +3 -2
  170. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +0 -3
  171. package/src/components/Excel/ExcelFile.stories.tsx +20 -28
  172. package/src/components/Excel/Types.ts +17 -15
  173. package/src/components/Icon/iconList.ts +8 -0
  174. package/src/components/Modal/Modal.stories.tsx +7 -0
  175. package/src/components/Modal/Modal.tsx +17 -20
  176. package/src/components/Select/Select.stories.tsx +85 -0
  177. package/src/components/Select/Select.tsx +10 -2
  178. package/src/components/Select/components/Dropdown.tsx +23 -15
  179. package/src/components/Select/components/types.ts +3 -2
  180. package/src/components/Select/types.ts +12 -2
  181. package/src/index.ts +20 -0
  182. package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx +53 -0
  183. package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx +20 -0
  184. package/src/utils/keyBoardActionUtil/types.ts +4 -0
  185. package/src/validations/regex.stories.tsx +24 -0
  186. package/src/validations/regex.ts +15 -0
  187. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  188. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  189. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  190. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  191. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
  192. package/src/assets/images/photo.png +0 -0
  193. /package/lib/components/{Excel → ExcelFile}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -22,31 +22,24 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
22
22
  data: [
23
23
  {
24
24
  date: '25 Oct',
25
- totalMemory: 9.86,
26
- },
27
- {
28
- date: '26 Oct',
29
- totalMemory: 9.86,
30
- },
31
- {
32
- date: '27 Oct',
33
- totalMemory: 9.86,
25
+ totalMemory: '1 GB',
34
26
  },
27
+
35
28
  {
36
- date: '28 Oct',
37
- totalMemory: 9.9,
29
+ date: '29 Oct',
30
+ totalMemory: '200 KB',
38
31
  },
39
32
  {
40
- date: '29 Oct',
41
- totalMemory: 100,
33
+ date: '30 Oct',
34
+ totalMemory: '40 MB',
42
35
  },
43
36
  {
44
37
  date: '3 Nov',
45
- totalMemory: 10.12,
38
+ totalMemory: '20 MB',
46
39
  },
47
40
  {
48
41
  date: '23 Nov',
49
- totalMemory: 10.1,
42
+ totalMemory: '90 MB',
50
43
  },
51
44
  ],
52
45
  },
@@ -60,7 +53,8 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
60
53
  xAxisColor: '#D9D9D9',
61
54
  yAxisColor: '#252C37',
62
55
  numberSize: '10px',
63
- proportionalSpacing :false,
56
+ proportionalSpacing: false,
57
+ chartName: 'memory',
64
58
  },
65
59
  render: (args) => (
66
60
  <div className="linechart-container">
@@ -72,74 +66,18 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
72
66
  export const multiLineScriptsChart: StoryObj<LineChartProps> = {
73
67
  args: {
74
68
  data: [
75
- {
76
- color: '#179C5F',
77
- name: 'Success',
78
- show: true,
79
- data: [
80
- { date: '1 oct', value: 10 },
81
- { date: '2 oct', value: 20 },
82
- { date: '3 oct', value: 30 },
83
- { date: '4 oct', value: 26 },
84
- { date: '5 oct', value: 90 },
85
- { date: '6 oct', value: 10 },
86
- { date: '7 oct', value: 12 },
87
- ],
88
- },
89
- {
90
- color: '#9C1732',
91
- name: 'Failed',
92
- show: true,
93
- data: [
94
- { date: '1 oct', value: 50 },
95
- { date: '2 oct', value: 30 },
96
- { date: '3 oct', value: 40 },
97
- { date: '4 oct', value: 20 },
98
- { date: '5 oct', value: 90 },
99
- { date: '6 oct', value: 70 },
100
- { date: '7 oct', value: 30 },
101
- ],
102
- },
103
- {
104
- color: '#E2750F',
105
- name: 'Warning',
106
- show: true,
107
- data: [
108
- { date: '1 oct', value: 10 },
109
- { date: '2 oct', value: 20 },
110
- { date: '3 oct', value: 99 },
111
- { date: '4 oct', value: 20 },
112
- { date: '5 oct', value: 10 },
113
- { date: '6 oct', value: 10 },
114
- { date: '7 oct', value: 10 },
115
- ],
116
- },
117
- {
118
- color: '#A83FC4',
119
- name: 'Skipped',
120
- show: true,
121
- data: [
122
- { date: '1 oct', value: 40 },
123
- { date: '2 oct', value: 10 },
124
- { date: '3 oct', value: 10 },
125
- { date: '4 oct', value: 20 },
126
- { date: '5 oct', value: 10 },
127
- { date: '6 oct', value: 30 },
128
- { date: '7 oct', value: 10 },
129
- ],
130
- },
131
69
  {
132
70
  color: '#3F5AC4',
133
71
  name: 'Flaky',
134
72
  show: true,
135
73
  data: [
136
- { date: '1 oct', value: 20 },
137
- { date: '2 oct', value: 40 },
138
- { date: '3 oct', value: 30 },
139
- { date: '4 oct', value: 10 },
140
- { date: '5 oct', value: 10 },
141
- { date: '6 oct', value: 20 },
142
- { date: '7 oct', value: 40 },
74
+ { date: '1 oct', value: 10 },
75
+ { date: '2 oct', value: 0 },
76
+ { date: '3 oct', value: 0 },
77
+ { date: '4 oct', value: 0 },
78
+ { date: '5 oct', value: 0 },
79
+ { date: '6 oct', value: 0 },
80
+ { date: '7 oct', value: 0 },
143
81
  ],
144
82
  },
145
83
  ],
@@ -154,8 +92,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
154
92
  yAxisColor: '#252C37',
155
93
  yAxisLabelColor: '#252C37',
156
94
  textSize: '12px',
157
- proportionalSpacing :false,
158
-
95
+ proportionalSpacing: false,
96
+ chartName: 'scripts',
159
97
  },
160
98
  render: (args) => (
161
99
  <div className="linechart-container">
@@ -186,12 +124,12 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
186
124
  show: true,
187
125
  data: [
188
126
  { date: '1 oct', value: 50 },
189
- { date: '2 oct', value: 30 },
127
+ { date: '2 oct', value: 0 },
190
128
  { date: '3 oct', value: 40 },
191
129
  { date: '4 oct', value: 20 },
192
130
  { date: '5 oct', value: 90 },
193
131
  { date: '6 oct', value: 70 },
194
- { date: '7 oct', value: 30 },
132
+ { date: '7 oct', value: 0 },
195
133
  ],
196
134
  },
197
135
  {
@@ -201,7 +139,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
201
139
  data: [
202
140
  { date: '1 oct', value: 10 },
203
141
  { date: '2 oct', value: 20 },
204
- { date: '3 oct', value: 90 },
142
+ { date: '3 oct', value: 0 },
205
143
  { date: '4 oct', value: 20 },
206
144
  { date: '5 oct', value: 10 },
207
145
  { date: '6 oct', value: 10 },
@@ -213,13 +151,13 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
213
151
  name: 'Skipped',
214
152
  show: true,
215
153
  data: [
216
- { date: '1 oct', value: 40 },
154
+ { date: '1 oct', value: 0 },
217
155
  { date: '2 oct', value: 20 },
218
156
  { date: '3 oct', value: 10 },
219
157
  { date: '4 oct', value: 20 },
220
158
  { date: '5 oct', value: 10 },
221
159
  { date: '6 oct', value: 30 },
222
- { date: '7 oct', value: 10 },
160
+ { date: '7 oct', value: 0 },
223
161
  ],
224
162
  },
225
163
  {
@@ -231,7 +169,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
231
169
  { date: '2 oct', value: 40 },
232
170
  { date: '3 oct', value: 30 },
233
171
  { date: '4 oct', value: 20 },
234
- { date: '5 oct', value: 10 },
172
+ { date: '5 oct', value: 0 },
235
173
  { date: '6 oct', value: 40 },
236
174
  { date: '7 oct', value: 20 },
237
175
  ],
@@ -249,7 +187,8 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
249
187
  yAxisLabelColor: '#252C37',
250
188
  textSize: '12px',
251
189
  fontWeight: 'semi-bold',
252
- proportionalSpacing :false,
190
+ proportionalSpacing: false,
191
+ chartName: 'defects',
253
192
  },
254
193
  render: (args) => (
255
194
  <div className="linechart-container">
@@ -2,6 +2,11 @@ import React, { useState } from 'react';
2
2
  import { LineChartProps } from './types';
3
3
  import './LineChart.scss';
4
4
  import Typography from '../../Typography';
5
+ import {
6
+ MEMORY_VALIDATION_REGEX,
7
+ NUMBER_REGEX,
8
+ UNIT_REGEX,
9
+ } from '../../../validations/regex';
5
10
 
6
11
  interface HoverState {
7
12
  cursorX: number | null;
@@ -26,53 +31,121 @@ const LineChart: React.FC<LineChartProps> = ({
26
31
  fontWeight,
27
32
  numberSize,
28
33
  proportionalSpacing,
34
+ chartName,
29
35
  }) => {
30
36
  const margin = 40;
31
37
  const xMax = width - margin * 2;
32
38
  const yMax = height - margin * 2;
33
39
 
40
+ const roundUp = (value: any, decimals = 2) => {
41
+ let unit = '';
42
+
43
+ if (typeof value === 'string') {
44
+ const match = value.match(NUMBER_REGEX);
45
+ const unitMatch = value.match(UNIT_REGEX);
46
+ if (match) {
47
+ value = parseFloat(match[0]);
48
+ }
49
+ if (unitMatch) {
50
+ unit = unitMatch[0];
51
+ }
52
+ }
53
+
54
+ const multiplier = Math.pow(10, decimals);
55
+ const roundedValue = Math.ceil(value * multiplier) / multiplier;
56
+
57
+ return `${roundedValue} ${unit}`.trim();
58
+ };
59
+ function convertToMB(input: any) {
60
+ if (!isNaN(input)) {
61
+ return parseFloat(input);
62
+ }
63
+
64
+ const regex = MEMORY_VALIDATION_REGEX;
65
+ const match = input.match(regex);
66
+
67
+ if (!match) {
68
+ throw new Error(
69
+ "Invalid input format. Use '<value> <unit>' format (e.g., '10.9580078125 KB') or just a number."
70
+ );
71
+ }
72
+
73
+ const value = parseFloat(match[1]);
74
+ const unit = match[2] ? match[2].toUpperCase() : null;
75
+
76
+ switch (unit) {
77
+ case 'GB':
78
+ return parseFloat((value * 1024).toFixed(2));
79
+ case 'MB':
80
+ return parseFloat(value.toFixed(2));
81
+ case 'KB':
82
+ return parseFloat((value / 1024).toFixed(2));
83
+ default:
84
+ throw new Error('Invalid unit. Supported units are GB, MB, and KB.');
85
+ }
86
+ }
87
+
34
88
  const isDefaultLineChart =
35
89
  data[0]?.data[0]?.hasOwnProperty('date') &&
36
90
  data[0]?.data[0]?.hasOwnProperty('totalMemory');
37
91
  const xKey = isDefaultLineChart ? 'date' : 'date';
38
92
  const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
39
93
  const xScale = (x: string) => {
40
- if (proportionalSpacing) {
41
- const date = new Date(x);
42
- const time = date.getTime();
43
- const minDate = new Date(
44
- Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
45
- );
46
- const maxDate = new Date(
47
- Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
48
- );
49
-
50
- return (
51
- ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
52
- xMax
53
- );
54
- } else {
55
- const index = data[0].data.findIndex((point: any) => point[xKey] === x);
56
- if (index === -1) return 0;
57
- const totalPoints = data[0].data.length;
58
- return (index / (totalPoints - 1)) * xMax;
59
- }
60
- };
94
+ if (proportionalSpacing) {
95
+ const date = new Date(x);
96
+ const time = date.getTime();
97
+ const minDate = new Date(
98
+ Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
99
+ );
100
+ const maxDate = new Date(
101
+ Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
102
+ );
103
+
104
+ return (
105
+ ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
106
+ xMax
107
+ );
108
+ } else {
109
+ const index = data[0].data.findIndex((point: any) => point[xKey] === x);
110
+ if (index === -1) return 0;
111
+ const totalPoints = data[0].data.length;
112
+ return (index / (totalPoints - 1)) * xMax;
113
+ }
114
+ };
61
115
 
116
+ const maxValue = Math.max(
117
+ ...data.flatMap((line) =>
118
+ line.data.map((point: any) => convertToMB(point[yKey]))
119
+ )
120
+ );
62
121
 
63
- const yScale = (y: number) => yMax - (y * yMax) / 1024;
122
+ const yScale = (y: number) => {
123
+ if (chartName === 'memory') {
124
+ const maxMemoryValue = Math.max(
125
+ ...data.flatMap((line) =>
126
+ line.data.map((point: any) => convertToMB(point[yKey]))
127
+ )
128
+ );
129
+
130
+ const scaleMax = maxMemoryValue > 1024 ? maxMemoryValue : 1024;
131
+
132
+ return yMax - (y * yMax) / scaleMax;
133
+ } else {
134
+ return yMax - (y * yMax) / (maxValue === 0 ? 1024 : maxValue);
135
+ }
136
+ };
64
137
 
65
138
  const generateLinePath = (lineData: { [key: string]: any }[]) =>
66
139
  lineData.reduce((path, point, i) => {
67
140
  const x = xScale(point[xKey]);
68
- const y = yScale(point[yKey]);
141
+ const y = yScale(convertToMB(point[yKey]));
69
142
  if (i === 0) {
70
143
  return `M ${x} ${y}`;
71
144
  }
72
145
 
73
146
  const prevPoint = lineData[i - 1];
74
147
  const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
75
- const prevY = prevPoint ? yScale(prevPoint[yKey]) : 0;
148
+ const prevY = prevPoint ? yScale(convertToMB(prevPoint[yKey])) : 0;
76
149
 
77
150
  return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
78
151
  x - (x - prevX) / 2
@@ -108,10 +181,10 @@ const LineChart: React.FC<LineChartProps> = ({
108
181
 
109
182
  if (nearestPoint) {
110
183
  nearestXValue = nearestPoint[xKey];
111
- nearestValues.hoverValues[lineIndex] = nearestPoint[yKey];
184
+ nearestValues.hoverValues[lineIndex] = roundUp(nearestPoint[yKey]);
112
185
  nearestValues.dotPositions[lineIndex] = {
113
186
  x: nearestXValue ? xScale(nearestXValue) : 0,
114
- y: yScale(nearestPoint[yKey]),
187
+ y: yScale(convertToMB(nearestPoint[yKey])),
115
188
  };
116
189
  }
117
190
  });
@@ -243,22 +316,45 @@ const LineChart: React.FC<LineChartProps> = ({
243
316
  </text>
244
317
  ))}
245
318
 
246
- {Array.from({ length: 6 }).map((_, i) => {
247
- const yValueInGB = i * 0.2;
248
- return (
249
- <text
250
- key={yValueInGB}
251
- x={-15}
252
- y={yScale(yValueInGB * 1024)}
253
- textAnchor="middle"
254
- fill={yAxisValueColor}
255
- className="ff-line-chart-y-axis-text"
256
- style={{ fontSize: numberSize }}
257
- >
258
- {yValueInGB.toFixed(1)}
259
- </text>
260
- );
261
- })}
319
+ {chartName === 'memory'
320
+ ? Array.from({ length: 6 }).map((_, i) => {
321
+ const dynamicMaxValue = maxValue < 1024 ? 1024 : maxValue;
322
+ const isSmallScale = maxValue < 1024;
323
+ const yValue = (i * dynamicMaxValue) / 5;
324
+ const displayValue = isSmallScale
325
+ ? yValue / 1024
326
+ : yValue / 1024;
327
+
328
+ return (
329
+ <text
330
+ key={yValue}
331
+ x={-10}
332
+ y={yScale(yValue)}
333
+ textAnchor="end"
334
+ fill={yAxisValueColor}
335
+ className="ff-line-chart-y-axis-text"
336
+ style={{ fontSize: numberSize }}
337
+ >
338
+ {displayValue.toFixed(1)}
339
+ </text>
340
+ );
341
+ })
342
+ : Array.from({ length: 6 }).map((_, i) => {
343
+ const yValue = (i * maxValue) / 5;
344
+ return (
345
+ <text
346
+ key={yValue}
347
+ x={-10}
348
+ y={yScale(yValue)}
349
+ textAnchor="end"
350
+ fill={yAxisValueColor}
351
+ className="ff-line-chart-y-axis-text"
352
+ style={{ fontSize: numberSize }}
353
+ >
354
+ {yValue.toFixed(0)}
355
+ </text>
356
+ );
357
+ })}
262
358
  </g>
263
359
  </svg>
264
360
  {hoverState.tooltip.visible && (
@@ -27,4 +27,5 @@ export interface LineChartProps {
27
27
  fontWeight?: string | number;
28
28
  numberSize?: string | number;
29
29
  proportionalSpacing?: boolean;
30
+ chartName?: string;
30
31
  }
@@ -4,7 +4,7 @@
4
4
  cursor: pointer;
5
5
  display: flex;
6
6
  align-items: center;
7
-
7
+ gap: 16px;
8
8
  &.ff-multi-radial-chart-number {
9
9
  flex-direction: column;
10
10
  }
@@ -68,8 +68,8 @@
68
68
  background-color: var(--status-success-text-color);
69
69
  color: var(--text-color);
70
70
  border-radius: 15px;
71
- min-width: 25px;
72
- height: 18px;
71
+ min-width: 21px;
72
+ height: 15px;
73
73
  display: flex;
74
74
  justify-content: center;
75
75
  align-items: center;
@@ -2,8 +2,6 @@ import React, { useState } from 'react';
2
2
  import { MultiRadialChartProps, ChartItem, LegendType } from './types';
3
3
  import './MultiRadialChart.scss';
4
4
  import Typography from '../../Typography';
5
- import { truncateText } from '../../../utils/truncateText/truncateText';
6
-
7
5
  const calculateArc = (
8
6
  centerX: number,
9
7
  centerY: number,
@@ -16,10 +14,7 @@ const calculateArc = (
16
14
  const endX = centerX + radius * Math.cos(endAngle);
17
15
  const endY = centerY + radius * Math.sin(endAngle);
18
16
  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
19
- return `
20
- M ${startX} ${startY}
21
- A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}
22
- `;
17
+ return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
23
18
  };
24
19
 
25
20
  const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
@@ -86,7 +81,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
86
81
 
87
82
  case 'pillLegend':
88
83
  return (
89
- <div className={`ff-legend-container ff-pill-legend`}>
84
+ <div className="ff-legend-container ff-pill-legend">
90
85
  {legendData.reverse().map((item, index) => (
91
86
  <div className="ff-legend-item" key={index}>
92
87
  <span
@@ -95,12 +90,9 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
95
90
  backgroundColor: item.arcColor,
96
91
  }}
97
92
  >
98
- <Typography fontSize={10}>{item.value}</Typography>
93
+ <Typography fontSize={10} color="var(--tooltip-text-color)">{item.value}</Typography>
99
94
  </span>
100
- <Typography
101
- className="ff-legend-key"
102
- color=" var(--text-color)"
103
- >
95
+ <Typography className="ff-legend-key">
104
96
  {item.label}
105
97
  </Typography>
106
98
  </div>
@@ -139,12 +131,16 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
139
131
  const textData = (text: string, maxLength: number) => {
140
132
  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
141
133
  };
134
+
142
135
  const getArcColorFromTooltip = () => {
143
136
  if (!tooltip.visible) return '';
144
- const value = tooltip.content.split(':')[1]?.trim();
145
- const matchingBar = barValues.find((val) => `${val.value}` === value);
146
- return matchingBar?.arcColor || '';
137
+ const valueString = tooltip.content.split(':')[1]?.trim();
138
+ const value = valueString ? Number(valueString) : undefined;
139
+ if (value === undefined) return '';
140
+ const matchingBar = barValues.find((val) => val.value === value);
141
+ return matchingBar?.arcColor || '';
147
142
  };
143
+
148
144
  return (
149
145
  <div
150
146
  className={`ff-multi-radial-chart-container ${
@@ -154,40 +150,51 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
154
150
  }`}
155
151
  >
156
152
  <div className="relative" style={{ width: svgSize, height: svgSize }}>
157
- <svg
158
- width={svgSize}
159
- height={svgSize}
160
- viewBox={`0 0 ${svgSize} ${svgSize}`}
161
- className="absolute top-0 left-0"
162
- >
153
+ <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
163
154
  <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
164
155
  {reversedBarValues.map((values, i) => {
165
156
  const originalIndex = barValues.length - 1 - i;
166
157
  const percentage = values.value / totalBarValue;
167
158
  const angleIncrement = percentage * 2 * Math.PI;
168
- let startAngle = -Math.PI / 2;
159
+ let startAngle = -Math.PI / 2;
169
160
  let endAngle = startAngle + angleIncrement;
170
161
  if (values.value === totalBarValue) {
171
162
  startAngle = 0;
172
163
  endAngle = 2 * Math.PI;
173
164
  }
174
- const currentRadius =
175
- baseRadius + radiusIncrement * originalIndex;
176
- const backGroundArcPath = calculateArc(
177
- 0,
178
- 0,
179
- currentRadius,
180
- 0,
181
- 2 * Math.PI
182
- );
165
+ const currentRadius = baseRadius + radiusIncrement * originalIndex;
183
166
 
184
- const foregroundArcPath = calculateArc(
185
- 0,
186
- 0,
187
- currentRadius,
188
- startAngle,
189
- endAngle
190
- );
167
+ const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
168
+
169
+ // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
170
+ if (values.value === 0) {
171
+ const dotX = currentRadius * Math.cos(-Math.PI / 2);
172
+ const dotY = currentRadius * Math.sin(-Math.PI / 2);
173
+ return (
174
+ <g key={originalIndex}>
175
+ <path
176
+ d={backGroundArcPath}
177
+ fill="none"
178
+ stroke={values.arcBackgroundColor}
179
+ strokeWidth={lineWidth}
180
+ className="transition-all duration-300"
181
+ />
182
+ <circle
183
+ cx={dotX}
184
+ cy={dotY}
185
+ r={5}
186
+ fill={values.arcColor}
187
+ onMouseEnter={(e) =>
188
+ handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
189
+ }
190
+ onMouseMove={handleMouseMove}
191
+ onMouseLeave={handleMouseLeave}
192
+ />
193
+ </g>
194
+ );
195
+ }
196
+
197
+ const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
191
198
  return (
192
199
  <g key={originalIndex}>
193
200
  <path
@@ -204,10 +211,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
204
211
  strokeWidth={lineWidth}
205
212
  strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
206
213
  onMouseEnter={(e) =>
207
- handleMouseEnter(
208
- e,
209
- `${values.barLabel || 'Data'}: ${values.value}`
210
- )
214
+ handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
211
215
  }
212
216
  onMouseMove={handleMouseMove}
213
217
  onMouseLeave={handleMouseLeave}
@@ -294,7 +298,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
294
298
  renderLegend(
295
299
  barValues.map((value) => ({
296
300
  ...value,
297
- label: truncateText(value?.barLabel, 8),
301
+ label:value?.barLabel,
298
302
  key: value.value.toString(),
299
303
  })),
300
304
  legendType
@@ -44,6 +44,7 @@ const Template: StoryFn<ConditionalDropdownProps> = (args) => {
44
44
  value={inputValue}
45
45
  onCreateVariableClick={() => setOpenCreateVariable(true)}
46
46
  ref={inputRef}
47
+ showAddVariableIcon
47
48
  />
48
49
  {openCreateVariable && (
49
50
  <CreateVariableSlider
@@ -30,6 +30,7 @@ const ConditionalDropdown = forwardRef<
30
30
  dropdownWidth = 'inherit',
31
31
  isHash = false,
32
32
  dataFiles = [],
33
+ showAddVariableIcon = true,
33
34
  ...props
34
35
  },
35
36
  ref
@@ -122,7 +123,7 @@ const ConditionalDropdown = forwardRef<
122
123
  label={label}
123
124
  placeholder={placeholder}
124
125
  />
125
- {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
126
+ {!checkEmpty(value) && !isHash && showCreateVariableIcon && showAddVariableIcon && (
126
127
  <Icon
127
128
  onClick={onCreateVariableClick}
128
129
  name="add_variable"
@@ -130,6 +130,10 @@ export interface ConditionalDropdownProps {
130
130
  * Options for the dropdown when `isHash` is true.
131
131
  */
132
132
  dataFiles?: dynamicObject[];
133
+ /**
134
+ * a boolean prop to show add variable icon or not.
135
+ */
136
+ showAddVariableIcon?: boolean;
133
137
  }
134
138
 
135
139
  export interface OptionsDropdownProps {
@@ -143,6 +143,7 @@ export const Controlled: Story = {
143
143
  <Drawer
144
144
  {...defaultArgs}
145
145
  isOpen={showModal}
146
+ onCollapse={() => {}}
146
147
  onClose={() => setShowModal(false)}
147
148
  isFooterRequired={true}
148
149
  _isExpanded={false}