pixel-react 1.7.8 → 1.8.0
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/lib/components/AllProjectsDropdown/types.d.ts +2 -0
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
- package/lib/components/ChooseFile/types.d.ts +68 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
- package/lib/components/ConnectingBranch/data.d.ts +19 -33
- package/lib/components/ConnectingBranch/types.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +74 -0
- package/lib/components/TableTree/types.d.ts +4 -0
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/Types.d.ts +1 -0
- package/lib/index.d.ts +176 -63
- package/lib/index.esm.js +458 -273
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +458 -272
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +2 -2
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/BlueTheme.scss +44 -44
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/failed_status_icon.svg +1 -1
- package/src/assets/icons/flaky_status_icon.svg +1 -1
- package/src/assets/icons/settings.svg +3 -0
- package/src/assets/icons/skipped_status_icon.svg +1 -1
- package/src/assets/icons/warning_status_icon.svg +1 -1
- package/src/components/AllProjectsDropdown/types.ts +2 -0
- package/src/components/AppHeader/AppHeader.scss +6 -2
- package/src/components/Button/Button.scss +12 -0
- package/src/components/Button/Button.tsx +29 -11
- package/src/components/Button/types.ts +21 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
- package/src/components/Charts/MultiRadialChart/types.ts +4 -1
- package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
- package/src/components/ChooseFile/ChooseFile.tsx +46 -0
- package/src/components/ChooseFile/types.ts +78 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
- package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
- package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
- package/src/components/ConnectingBranch/types.ts +21 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.tsx +67 -70
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
- package/src/components/Select/Select.tsx +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
- package/src/components/StatusCard/StatusCard.scss +2 -1
- package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
- package/src/components/StatusCard/StatusCard.tsx +10 -2
- package/src/components/StatusCard/types.ts +2 -0
- package/src/components/TableTree/Components/TableBody.tsx +19 -15
- package/src/components/TableTree/Components/TableCell.tsx +47 -31
- package/src/components/TableTree/Components/TableRow.tsx +4 -0
- package/src/components/TableTree/TableTree.scss +122 -109
- package/src/components/TableTree/data.ts +16 -1
- package/src/components/TableTree/types.ts +4 -0
- package/src/components/TextArea/Textarea.tsx +2 -0
- package/src/components/TextArea/Types.ts +3 -0
- package/src/index.ts +3 -0
- package/src/utils/validateFile/validateFile.stories.tsx +49 -0
- package/src/utils/validateFile/validateFile.ts +39 -0
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import { DynamicObj } from '../CreateVariable/types';
|
2
3
|
|
3
4
|
export interface ButtonProps {
|
4
5
|
/**
|
@@ -66,4 +67,24 @@ export interface ButtonProps {
|
|
66
67
|
* form to accept form id in string
|
67
68
|
*/
|
68
69
|
form?: string;
|
70
|
+
|
71
|
+
/**
|
72
|
+
* Is the Type ChooseFile for the button
|
73
|
+
*/
|
74
|
+
isChooseFile?: boolean;
|
75
|
+
|
76
|
+
/**
|
77
|
+
* Custom Width for the button
|
78
|
+
*/
|
79
|
+
buttonWidth?: string;
|
80
|
+
|
81
|
+
/**
|
82
|
+
* selectedfile object will be send.
|
83
|
+
*/
|
84
|
+
selectedFile?: File | DynamicObj | null;
|
85
|
+
|
86
|
+
/**
|
87
|
+
* handleCloseIcon function will set to the initial state .
|
88
|
+
*/
|
89
|
+
handleCloseIcon?: () => void;
|
69
90
|
}
|
@@ -18,14 +18,15 @@
|
|
18
18
|
|
19
19
|
.ff-dashboard-donut-chart-svg-container {
|
20
20
|
text-align: center;
|
21
|
+
|
21
22
|
svg {
|
22
23
|
display: block;
|
24
|
+
|
23
25
|
text:nth-of-type(1) {
|
24
|
-
@extend .font2Xl;
|
25
26
|
font-weight: 600;
|
26
27
|
}
|
28
|
+
|
27
29
|
text:nth-of-type(2) {
|
28
|
-
@extend .fontMd;
|
29
30
|
font-weight: 500;
|
30
31
|
}
|
31
32
|
}
|
@@ -40,28 +41,95 @@
|
|
40
41
|
}
|
41
42
|
}
|
42
43
|
|
44
|
+
@mixin ff-legend-item-styles {
|
45
|
+
box-sizing: border-box;
|
46
|
+
display: flex;
|
47
|
+
flex-direction: column;
|
48
|
+
align-items: center;
|
49
|
+
flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
|
50
|
+
|
51
|
+
.ff-legend-value {
|
52
|
+
white-space: nowrap;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
@mixin ff-side-legend-styles {
|
57
|
+
flex-direction: column;
|
58
|
+
flex-wrap: wrap;
|
59
|
+
height: 200px;
|
60
|
+
width: auto;
|
61
|
+
justify-content: center;
|
62
|
+
|
63
|
+
.ff-legend-item {
|
64
|
+
flex: 0 0 auto !important;
|
65
|
+
width: 100%;
|
66
|
+
justify-content: center;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
43
70
|
.ff-legend-container {
|
44
|
-
display:
|
45
|
-
|
71
|
+
display: flex;
|
72
|
+
flex-wrap: wrap;
|
73
|
+
width: 100%;
|
74
|
+
gap: var(--donut-legend-gap, 5px); // Dynamic gap support with fallback
|
75
|
+
|
76
|
+
.ff-legend-item {
|
77
|
+
@include ff-legend-item-styles;
|
78
|
+
}
|
79
|
+
|
80
|
+
&.ff-count-2,
|
81
|
+
&.ff-count-4 {
|
82
|
+
.ff-legend-item {
|
83
|
+
flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
|
84
|
+
}
|
85
|
+
}
|
46
86
|
|
47
|
-
&.ff-
|
48
|
-
|
87
|
+
&.ff-count-5 {
|
88
|
+
.ff-legend-item:nth-child(-n + 3) {
|
89
|
+
flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
|
90
|
+
}
|
49
91
|
|
50
|
-
|
51
|
-
|
92
|
+
.ff-legend-item:nth-child(n + 4) {
|
93
|
+
flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
|
52
94
|
}
|
95
|
+
}
|
96
|
+
|
97
|
+
&.ff-count-3,
|
98
|
+
&.ff-count-6,
|
99
|
+
&.ff-count-more {
|
53
100
|
.ff-legend-item {
|
54
|
-
|
55
|
-
|
56
|
-
|
101
|
+
flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
&.ff-side-legend {
|
106
|
+
@include ff-side-legend-styles;
|
107
|
+
|
108
|
+
&.ff-count-2,
|
109
|
+
&.ff-count-4 {
|
110
|
+
.ff-legend-item {
|
111
|
+
height: calc(50% - var(--donut-legend-gap, 5px));
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
&.ff-count-3,
|
116
|
+
&.ff-count-5,
|
117
|
+
&.ff-count-6,
|
118
|
+
&.ff-count-more {
|
119
|
+
.ff-legend-item {
|
120
|
+
height: calc(33.33% - var(--donut-legend-gap, 5px));
|
121
|
+
}
|
57
122
|
}
|
58
123
|
}
|
59
124
|
|
60
125
|
&.ff-pill-legend {
|
61
|
-
|
126
|
+
display: grid;
|
127
|
+
grid-template-columns: repeat(2, 1fr);
|
128
|
+
gap: var(--donut-legend-gap, 5px);
|
62
129
|
|
63
130
|
.ff-legend-item {
|
64
131
|
display: flex;
|
132
|
+
flex-direction: row;
|
65
133
|
align-items: center;
|
66
134
|
|
67
135
|
.ff-legend-capsule {
|
@@ -80,22 +148,6 @@
|
|
80
148
|
}
|
81
149
|
}
|
82
150
|
}
|
83
|
-
|
84
|
-
&.ff-memory-legend {
|
85
|
-
grid-template-columns: repeat(3, 100px);
|
86
|
-
|
87
|
-
&.ff-side-legend {
|
88
|
-
grid-template-columns: repeat(2, 100px);
|
89
|
-
}
|
90
|
-
|
91
|
-
.ff-legend-item {
|
92
|
-
box-sizing: border-box;
|
93
|
-
display: flex;
|
94
|
-
flex-direction: column;
|
95
|
-
align-items: center;
|
96
|
-
width: 100%;
|
97
|
-
}
|
98
|
-
}
|
99
151
|
}
|
100
152
|
|
101
153
|
.ff-legend-table-wrapper {
|
@@ -112,9 +164,9 @@
|
|
112
164
|
text-align: left;
|
113
165
|
|
114
166
|
.ff-legend-table-thead {
|
115
|
-
position: static;
|
167
|
+
position: static;
|
116
168
|
top: auto;
|
117
|
-
}
|
169
|
+
}
|
118
170
|
.ff-table-header {
|
119
171
|
@extend .fontXs;
|
120
172
|
font-weight: bold;
|
@@ -160,6 +212,7 @@
|
|
160
212
|
gap: 5px;
|
161
213
|
color: var(--input-hover-border-color);
|
162
214
|
}
|
215
|
+
|
163
216
|
.ff-legend-count {
|
164
217
|
text-align: right;
|
165
218
|
}
|
@@ -18,6 +18,7 @@ export const Default: Story = {
|
|
18
18
|
radius: 70,
|
19
19
|
lineWidth: 15,
|
20
20
|
tableWidth: 500,
|
21
|
+
tableHeight: 190,
|
21
22
|
legendDetailsType: 'Scripts',
|
22
23
|
isLegendDetails: true,
|
23
24
|
statusValues: [
|
@@ -25,6 +26,8 @@ export const Default: Story = {
|
|
25
26
|
{ key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
|
26
27
|
{ key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
|
27
28
|
{ key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
|
29
|
+
{ key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
|
30
|
+
{ key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
|
28
31
|
],
|
29
32
|
gapAngle: 0,
|
30
33
|
legendType: 'numberLegend',
|
@@ -40,6 +40,7 @@ const colorMapping = [
|
|
40
40
|
const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
41
41
|
radius = 60,
|
42
42
|
tableWidth,
|
43
|
+
tableHeight = 190,
|
43
44
|
lineWidth = 15,
|
44
45
|
statusValues = [],
|
45
46
|
gapAngle = 0,
|
@@ -58,6 +59,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
58
59
|
legendKeyFontSize = 12,
|
59
60
|
labelYoffSet = -5,
|
60
61
|
subLabelYoffSet = 20,
|
62
|
+
onSelectedStatus = (_value) => {},
|
61
63
|
}) => {
|
62
64
|
const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
|
63
65
|
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
|
@@ -142,6 +144,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
142
144
|
});
|
143
145
|
};
|
144
146
|
|
147
|
+
const handleSelectStatus = (value: string) => {
|
148
|
+
onSelectedStatus(value);
|
149
|
+
};
|
150
|
+
|
145
151
|
const SVG_PADDING = 3;
|
146
152
|
const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
|
147
153
|
const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
|
@@ -172,6 +178,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
172
178
|
onMouseLeave={handleMouseLeave}
|
173
179
|
strokeOpacity={0.8}
|
174
180
|
onMouseMove={handleMouseMove}
|
181
|
+
onClick={() => handleSelectStatus(chartItem?.key)}
|
175
182
|
/>
|
176
183
|
</g>
|
177
184
|
);
|
@@ -188,7 +195,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
188
195
|
>
|
189
196
|
<Typography fontSize={12}>
|
190
197
|
{hoveredItemIndex !== null &&
|
191
|
-
`${nonZeroValues[hoveredItemIndex]?.key}
|
198
|
+
`${nonZeroValues[hoveredItemIndex]?.key} : `}
|
192
199
|
</Typography>
|
193
200
|
<Typography fontSize={12}>
|
194
201
|
{hoveredItemIndex !== null &&
|
@@ -205,15 +212,25 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
205
212
|
legendType: LegendType,
|
206
213
|
legendPosition: string
|
207
214
|
) => {
|
215
|
+
const legendCount = legendData.length;
|
216
|
+
const legendCountClass =
|
217
|
+
legendCount > 6 ? 'ff-count-more' : `ff-count-${legendCount}`;
|
218
|
+
const isSideLegend =
|
219
|
+
legendPosition === 'left' || legendPosition === 'right';
|
220
|
+
|
208
221
|
switch (legendType) {
|
209
|
-
case 'numberLegend':
|
222
|
+
case 'numberLegend': {
|
210
223
|
return (
|
211
224
|
<div
|
212
|
-
className={classNames(
|
213
|
-
'ff-
|
214
|
-
|
215
|
-
|
216
|
-
|
225
|
+
className={classNames(
|
226
|
+
'ff-legend-container',
|
227
|
+
'ff-number-legend',
|
228
|
+
legendCountClass,
|
229
|
+
{ 'ff-side-legend': isSideLegend }
|
230
|
+
)}
|
231
|
+
style={
|
232
|
+
{ '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
|
233
|
+
}
|
217
234
|
>
|
218
235
|
{legendData.map((item, index) => (
|
219
236
|
<div className="ff-legend-item" key={index}>
|
@@ -240,12 +257,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
240
257
|
))}
|
241
258
|
</div>
|
242
259
|
);
|
243
|
-
|
260
|
+
}
|
244
261
|
case 'pillLegend':
|
245
262
|
return (
|
246
263
|
<div
|
247
264
|
className="ff-legend-container ff-pill-legend"
|
248
|
-
style={
|
265
|
+
style={
|
266
|
+
{ '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
|
267
|
+
}
|
249
268
|
>
|
250
269
|
{legendData.map((item, index) => (
|
251
270
|
<div className="ff-legend-item" key={index}>
|
@@ -273,11 +292,15 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
273
292
|
case 'memoryLegend':
|
274
293
|
return (
|
275
294
|
<div
|
276
|
-
className={classNames(
|
277
|
-
'ff-
|
278
|
-
|
279
|
-
|
280
|
-
|
295
|
+
className={classNames(
|
296
|
+
'ff-legend-container',
|
297
|
+
'ff-memory-legend',
|
298
|
+
legendCountClass,
|
299
|
+
{ 'ff-side-legend': isSideLegend }
|
300
|
+
)}
|
301
|
+
style={
|
302
|
+
{ '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
|
303
|
+
}
|
281
304
|
>
|
282
305
|
{legendData.map((item, index) => (
|
283
306
|
<React.Fragment key={index}>
|
@@ -313,8 +336,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
313
336
|
case 'tableLegend':
|
314
337
|
return (
|
315
338
|
<div className="ff-legend-table-wrapper">
|
316
|
-
<table className="ff-legend-table">
|
317
|
-
<thead className=
|
339
|
+
<table className="ff-legend-table" style={{ height: tableHeight }}>
|
340
|
+
<thead className="ff-legend-table-thead">
|
318
341
|
<tr>
|
319
342
|
<th className="ff-table-header" style={{ width: tableWidth }}>
|
320
343
|
Name
|
@@ -51,8 +51,10 @@ export type DashboardDonutChartProps = {
|
|
51
51
|
chartGap?: number;
|
52
52
|
legendGap?: number;
|
53
53
|
tableWidth?: number;
|
54
|
+
tableHeight?:number;
|
54
55
|
legendValueFontSize?: number;
|
55
56
|
legendKeyFontSize?: number;
|
56
57
|
labelYoffSet?: number;
|
57
58
|
subLabelYoffSet?: number;
|
59
|
+
onSelectedStatus?: (_value: string) => void;
|
58
60
|
};
|
@@ -82,7 +82,6 @@ export const PillLegend: Story = {
|
|
82
82
|
radius: 50,
|
83
83
|
lineWidth: 4,
|
84
84
|
labelHeading: '00 module',
|
85
|
-
fontSize: 16,
|
86
85
|
barValues: [
|
87
86
|
{
|
88
87
|
value: 10,
|
@@ -112,5 +111,7 @@ export const PillLegend: Story = {
|
|
112
111
|
lineCap: 'round',
|
113
112
|
legendType: 'pillLegend',
|
114
113
|
isLegendDetails: true,
|
114
|
+
labelFontSize: 12,
|
115
|
+
subLabelFontSize: 8
|
115
116
|
},
|
116
117
|
};
|
@@ -30,6 +30,8 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
30
30
|
labelHeading,
|
31
31
|
legendType = 'numberLegend',
|
32
32
|
isLegendDetails = true,
|
33
|
+
labelFontSize = 12,
|
34
|
+
subLabelFontSize = 8,
|
33
35
|
}) => {
|
34
36
|
const [tooltip, setTooltip] = useState<{
|
35
37
|
visible: boolean;
|
@@ -53,7 +55,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
53
55
|
const svgSize = 2 * (maxRadius + lineWidth);
|
54
56
|
const reversedBarValues = [...barValues].reverse();
|
55
57
|
|
56
|
-
const labelLines = labelHeading.split(' ');
|
58
|
+
const labelLines = labelHeading.trim().split(' ');
|
57
59
|
|
58
60
|
const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
|
59
61
|
switch (legendType) {
|
@@ -85,7 +87,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
85
87
|
case 'pillLegend':
|
86
88
|
return (
|
87
89
|
<div className={`ff-legend-container ff-pill-legend`}>
|
88
|
-
{legendData.map((item, index) => (
|
90
|
+
{legendData.reverse().map((item, index) => (
|
89
91
|
<div className="ff-legend-item" key={index}>
|
90
92
|
<span
|
91
93
|
className="ff-legend-capsule"
|
@@ -178,6 +180,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
178
180
|
0,
|
179
181
|
2 * Math.PI
|
180
182
|
);
|
183
|
+
|
181
184
|
const foregroundArcPath = calculateArc(
|
182
185
|
0,
|
183
186
|
0,
|
@@ -238,10 +241,20 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
238
241
|
const [firstWord, ...restWords] = line.split(' ');
|
239
242
|
return (
|
240
243
|
<tspan key={index}>
|
241
|
-
<tspan
|
244
|
+
<tspan
|
245
|
+
x="0"
|
246
|
+
dy="0"
|
247
|
+
style={{ fontSize: `${labelFontSize}px` }}
|
248
|
+
className="ff-center-first-text"
|
249
|
+
>
|
242
250
|
{firstWord}
|
243
251
|
</tspan>
|
244
|
-
<tspan
|
252
|
+
<tspan
|
253
|
+
x="0"
|
254
|
+
dy={18}
|
255
|
+
style={{ fontSize: `${subLabelFontSize}px` }}
|
256
|
+
className="ff-center-text"
|
257
|
+
>
|
245
258
|
{restWords.join(' ')}
|
246
259
|
</tspan>
|
247
260
|
</tspan>
|
@@ -253,6 +266,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
253
266
|
x="0"
|
254
267
|
dy={index === 0 ? 0 : 18}
|
255
268
|
className="ff-center-text"
|
269
|
+
style={{ fontSize: `${subLabelFontSize}px` }}
|
256
270
|
>
|
257
271
|
{line}
|
258
272
|
</tspan>
|
@@ -15,7 +15,10 @@ export interface MultiRadialChartProps {
|
|
15
15
|
lineCap: 'square' | 'round';
|
16
16
|
barValues: BarValue[];
|
17
17
|
legendType?: LegendType;
|
18
|
-
isLegendDetails?: boolean;
|
18
|
+
isLegendDetails?: boolean;
|
19
|
+
labelFontSize?: number,
|
20
|
+
subLabelFontSize?: number
|
21
|
+
gapAngle?:number;
|
19
22
|
}
|
20
23
|
export interface ChartItem extends BarValue{
|
21
24
|
label: string;
|
@@ -0,0 +1,190 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import React, { useEffect, useState } from 'react';
|
3
|
+
import ChooseFile from './ChooseFile';
|
4
|
+
import Drawer from '../Drawer/Drawer';
|
5
|
+
import FileDropzone from '../FileDropzone/FileDropzone';
|
6
|
+
import { RadioOption } from '../FileDropzone/types';
|
7
|
+
import { DynamicObj } from '../CreateVariable/types';
|
8
|
+
import Button from '../Button';
|
9
|
+
import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
|
10
|
+
|
11
|
+
const meta: Meta<typeof ChooseFile> = {
|
12
|
+
title: 'Components/ChooseFile',
|
13
|
+
component: ChooseFile,
|
14
|
+
parameters: {
|
15
|
+
layout: 'centered',
|
16
|
+
},
|
17
|
+
tags: ['autodocs'],
|
18
|
+
};
|
19
|
+
|
20
|
+
type Story = StoryObj<typeof ChooseFile>;
|
21
|
+
|
22
|
+
const defaultArgs = {
|
23
|
+
disabled: false,
|
24
|
+
};
|
25
|
+
|
26
|
+
export const ChooseFileDisplay: Story = {
|
27
|
+
render: () => {
|
28
|
+
const [isOpen, setIsOpen] = useState(false);
|
29
|
+
const [showModal, setShowModal] = useState(false);
|
30
|
+
const [selectedRadioOption, setSelectedRadioOption] =
|
31
|
+
useState<RadioOption>();
|
32
|
+
const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
|
33
|
+
null
|
34
|
+
);
|
35
|
+
const [testDataSelectedFile, setTestDataSelectedFile] = useState<
|
36
|
+
DynamicObj | File | null
|
37
|
+
>(null);
|
38
|
+
|
39
|
+
const testData = [
|
40
|
+
{
|
41
|
+
_id: '1',
|
42
|
+
name: 'File1.txt',
|
43
|
+
actualPath: '/documents/File1.txt',
|
44
|
+
searchKey: 'file1',
|
45
|
+
parentId: 'root',
|
46
|
+
},
|
47
|
+
{
|
48
|
+
_id: '2',
|
49
|
+
name: 'File2.doc',
|
50
|
+
actualPath: '/documents/File2.doc',
|
51
|
+
searchKey: 'file2',
|
52
|
+
parentId: 'root',
|
53
|
+
},
|
54
|
+
{
|
55
|
+
_id: '3',
|
56
|
+
name: 'Image1.png',
|
57
|
+
actualPath: '/images/Image1.png',
|
58
|
+
searchKey: 'image1',
|
59
|
+
parentId: 'folder1',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
_id: '4',
|
63
|
+
name: 'Presentation.ppt',
|
64
|
+
actualPath: '/presentations/Presentation.ppt',
|
65
|
+
searchKey: 'presentation',
|
66
|
+
parentId: 'folder2',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
const radioOptions: RadioOption[] = [
|
71
|
+
{ value: 'Test Data', label: 'Test Data' },
|
72
|
+
{ value: 'Local File', label: 'Local File' },
|
73
|
+
];
|
74
|
+
|
75
|
+
const handleOptionChange = (option: RadioOption) => {
|
76
|
+
setSelectedRadioOption(option);
|
77
|
+
setShowModal(option.value === 'Test Data');
|
78
|
+
};
|
79
|
+
|
80
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
81
|
+
const file = event.target.files?.[0];
|
82
|
+
setSelectedFile(file || null);
|
83
|
+
};
|
84
|
+
|
85
|
+
const handleRemoveFile = () => setSelectedFile(null);
|
86
|
+
|
87
|
+
const handleSaveButton = () => {
|
88
|
+
setSelectedFile(testDataSelectedFile);
|
89
|
+
setShowModal(false);
|
90
|
+
};
|
91
|
+
|
92
|
+
const handleCloseIcon = () => {
|
93
|
+
setSelectedFile(null);
|
94
|
+
setIsOpen(false);
|
95
|
+
};
|
96
|
+
|
97
|
+
const handleSaveChooseFile = () => {
|
98
|
+
setIsOpen(false);
|
99
|
+
|
100
|
+
};
|
101
|
+
|
102
|
+
const renderFooterButtons = (onSave: () => void, onCancel: () => void) => (
|
103
|
+
<div className="footer_basic_button">
|
104
|
+
<Button
|
105
|
+
type="button"
|
106
|
+
variant="secondary"
|
107
|
+
size="small"
|
108
|
+
onClick={onCancel}
|
109
|
+
label="Cancel"
|
110
|
+
/>
|
111
|
+
<Button
|
112
|
+
type="button"
|
113
|
+
variant="primary"
|
114
|
+
size="small"
|
115
|
+
onClick={onSave}
|
116
|
+
label="Save"
|
117
|
+
/>
|
118
|
+
</div>
|
119
|
+
);
|
120
|
+
|
121
|
+
useEffect(() => {
|
122
|
+
setSelectedFile(testDataSelectedFile);
|
123
|
+
}, [testDataSelectedFile]);
|
124
|
+
|
125
|
+
return (
|
126
|
+
<>
|
127
|
+
<ChooseFile
|
128
|
+
label={selectedFile?.name || 'Choose File'}
|
129
|
+
variant="secondary"
|
130
|
+
buttonWidth="308px"
|
131
|
+
isChooseFile
|
132
|
+
iconName={selectedFile?.name ? 'close' : 'attachment_icon'}
|
133
|
+
onClick={() => setIsOpen(true)}
|
134
|
+
selectedFile={selectedFile}
|
135
|
+
handleCloseIcon={handleCloseIcon}
|
136
|
+
/>
|
137
|
+
|
138
|
+
<Drawer
|
139
|
+
isOpen={isOpen}
|
140
|
+
onClose={() => setIsOpen(false)}
|
141
|
+
isFooterRequired={false}
|
142
|
+
_isExpanded={false}
|
143
|
+
size="medium"
|
144
|
+
>
|
145
|
+
<FileDropzone
|
146
|
+
{...defaultArgs}
|
147
|
+
accept={[
|
148
|
+
'image/png',
|
149
|
+
'image/jpeg',
|
150
|
+
'application/x-zip-compressed',
|
151
|
+
'application/zip',
|
152
|
+
]}
|
153
|
+
validateMIMEType
|
154
|
+
isWebServiceFileDropZone
|
155
|
+
selectedRadioOption={selectedRadioOption}
|
156
|
+
radioOptions={radioOptions}
|
157
|
+
handleOptionChange={handleOptionChange}
|
158
|
+
setSelectedFile={setSelectedFile}
|
159
|
+
selectedFile={selectedFile}
|
160
|
+
handleFileChange={handleFileChange}
|
161
|
+
handleRemoveFile={handleRemoveFile}
|
162
|
+
setShowDrawer={setShowModal}
|
163
|
+
/>
|
164
|
+
{selectedRadioOption?.value === 'Test Data' && (
|
165
|
+
<Drawer
|
166
|
+
isOpen={showModal}
|
167
|
+
onClose={() => setShowModal(false)}
|
168
|
+
isFooterRequired={false}
|
169
|
+
_isExpanded={false}
|
170
|
+
size="small"
|
171
|
+
>
|
172
|
+
<ConditionalDropdown
|
173
|
+
label="Select Path Using #"
|
174
|
+
placeholder="Enter # to search files"
|
175
|
+
isHash
|
176
|
+
dataFiles={testData}
|
177
|
+
dropdownWidth="auto"
|
178
|
+
setHashInputValue={setTestDataSelectedFile}
|
179
|
+
/>
|
180
|
+
{renderFooterButtons(handleSaveButton, () => setShowModal(false))}
|
181
|
+
</Drawer>
|
182
|
+
)}
|
183
|
+
{renderFooterButtons(handleSaveChooseFile, () => setIsOpen(false))}
|
184
|
+
</Drawer>
|
185
|
+
</>
|
186
|
+
);
|
187
|
+
},
|
188
|
+
};
|
189
|
+
|
190
|
+
export default meta;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import { memo, type FC } from 'react'
|
2
|
+
import { ChooseFileProps } from './types'
|
3
|
+
import Button from '../Button'
|
4
|
+
|
5
|
+
const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
|
6
|
+
prevProps.selectedFile?.name === nextProps.selectedFile?.name;
|
7
|
+
|
8
|
+
const ChooseFile:FC<ChooseFileProps> = ({
|
9
|
+
variant = 'primary',
|
10
|
+
size = 'small',
|
11
|
+
onClick,
|
12
|
+
label='Choose File',
|
13
|
+
disabled = false,
|
14
|
+
type = 'button',
|
15
|
+
className = '',
|
16
|
+
style = {},
|
17
|
+
iconName,
|
18
|
+
isChooseFile=false,
|
19
|
+
buttonWidth='auto',
|
20
|
+
selectedFile = {},
|
21
|
+
handleCloseIcon,
|
22
|
+
}) => {
|
23
|
+
|
24
|
+
return (
|
25
|
+
<div>
|
26
|
+
<Button
|
27
|
+
variant={variant}
|
28
|
+
label={label}
|
29
|
+
type={type}
|
30
|
+
onClick={onClick}
|
31
|
+
buttonWidth={buttonWidth}
|
32
|
+
isChooseFile={isChooseFile}
|
33
|
+
size={size}
|
34
|
+
disabled={disabled}
|
35
|
+
className={className}
|
36
|
+
iconName={iconName}
|
37
|
+
style={style}
|
38
|
+
iconPosition='right'
|
39
|
+
selectedFile={selectedFile}
|
40
|
+
handleCloseIcon={handleCloseIcon}
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
)
|
44
|
+
}
|
45
|
+
|
46
|
+
export default memo(ChooseFile, areEqual);
|