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.
- package/.yarn/install-state.gz +0 -0
- package/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +3 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConditionalDropdown/types.d.ts +4 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +10 -4
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +9 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +0 -2
- package/lib/components/Excel/Types.d.ts +14 -10
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +10 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +13 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/Select/components/types.d.ts +3 -2
- package/lib/components/Select/types.d.ts +10 -2
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +47 -6
- package/lib/index.esm.js +5088 -2119
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +5097 -2118
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/keyBoardActionUtil/UseKeyboardActions.d.ts +2 -0
- package/lib/utils/keyBoardActionUtil/types.d.ts +4 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/lib/validations/regex.d.ts +5 -1
- package/package.json +6 -1
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/DarkTheme.scss +1 -1
- package/src/assets/icons/external_user.svg +13 -0
- package/src/assets/icons/group_user.svg +12 -0
- package/src/assets/icons/single_user.svg +12 -0
- package/src/assets/icons/unfollow_icon.svg +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +38 -6
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
- package/src/components/Charts/DashboardDonutChart/types.ts +4 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +27 -88
- package/src/components/Charts/LineChart/LineChart.tsx +138 -42
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +3 -3
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +47 -43
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +2 -1
- package/src/components/ConditionalDropdown/types.ts +4 -0
- package/src/components/Drawer/Drawer.stories.tsx +1 -0
- package/src/components/Drawer/Drawer.tsx +5 -1
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/Editor.scss +23 -18
- package/src/components/Editor/Editor.tsx +2 -2
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +6 -2
- package/src/components/Excel/ExcelFile/ExcelFile.scss +45 -41
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +33 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +29 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +0 -36
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +2 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +1 -40
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +2 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +3 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +0 -3
- package/src/components/Excel/ExcelFile.stories.tsx +20 -28
- package/src/components/Excel/Types.ts +17 -15
- package/src/components/Icon/iconList.ts +8 -0
- package/src/components/Modal/Modal.stories.tsx +7 -0
- package/src/components/Modal/Modal.tsx +17 -20
- package/src/components/Select/Select.stories.tsx +85 -0
- package/src/components/Select/Select.tsx +10 -2
- package/src/components/Select/components/Dropdown.tsx +23 -15
- package/src/components/Select/components/types.ts +3 -2
- package/src/components/Select/types.ts +12 -2
- package/src/index.ts +20 -0
- package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx +53 -0
- package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx +20 -0
- package/src/utils/keyBoardActionUtil/types.ts +4 -0
- package/src/validations/regex.stories.tsx +24 -0
- package/src/validations/regex.ts +15 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/TableTree/TableTree copy.d.ts +0 -25
- package/src/assets/images/photo.png +0 -0
- /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:
|
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: '
|
37
|
-
totalMemory:
|
29
|
+
date: '29 Oct',
|
30
|
+
totalMemory: '200 KB',
|
38
31
|
},
|
39
32
|
{
|
40
|
-
date: '
|
41
|
-
totalMemory:
|
33
|
+
date: '30 Oct',
|
34
|
+
totalMemory: '40 MB',
|
42
35
|
},
|
43
36
|
{
|
44
37
|
date: '3 Nov',
|
45
|
-
totalMemory:
|
38
|
+
totalMemory: '20 MB',
|
46
39
|
},
|
47
40
|
{
|
48
41
|
date: '23 Nov',
|
49
|
-
totalMemory:
|
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
|
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:
|
137
|
-
{ date: '2 oct', value:
|
138
|
-
{ date: '3 oct', value:
|
139
|
-
{ date: '4 oct', value:
|
140
|
-
{ date: '5 oct', value:
|
141
|
-
{ date: '6 oct', value:
|
142
|
-
{ date: '7 oct', value:
|
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
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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
|
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
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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) =>
|
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
|
-
{
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
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 && (
|
@@ -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:
|
72
|
-
height:
|
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=
|
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
|
145
|
-
const
|
146
|
-
|
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
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
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:
|
301
|
+
label:value?.barLabel,
|
298
302
|
key: value.value.toString(),
|
299
303
|
})),
|
300
304
|
legendType
|
@@ -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 {
|