pixel-react 1.7.7 → 1.7.9
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/1fb4472b34e4fe07.css +1 -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.d.ts +2 -2
- package/lib/components/Button/Button.stories.d.ts +1 -0
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -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/Drawer/Drawer.stories.d.ts +5 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -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/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +6 -5
- package/lib/components/Icon/Icon.stories.d.ts +1 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +1 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +1 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +2 -1
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +1 -1
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +2 -0
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/Table/Table.stories.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/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +174 -63
- package/lib/index.esm.js +478 -287
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +478 -286
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/ffID/ffID.stories.d.ts +1 -1
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +1 -1
- 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/AppHeader/AppHeader.tsx +4 -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/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- 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,4 @@
|
|
1
|
-
import { forwardRef } from 'react';
|
1
|
+
import { forwardRef, memo } from 'react';
|
2
2
|
import './Button.scss';
|
3
3
|
import '../../assets/styles/_colors.scss';
|
4
4
|
import Icon from '../Icon';
|
@@ -6,6 +6,9 @@ import { ButtonProps } from './types';
|
|
6
6
|
import classNames from 'classnames';
|
7
7
|
import Typography from '../Typography';
|
8
8
|
|
9
|
+
const areEqual = (prevProps: ButtonProps, nextProps: ButtonProps) =>
|
10
|
+
prevProps.selectedFile?.name === nextProps.selectedFile?.name;
|
11
|
+
|
9
12
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
10
13
|
(
|
11
14
|
{
|
@@ -15,28 +18,41 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
15
18
|
onClick,
|
16
19
|
label,
|
17
20
|
disabled = false,
|
18
|
-
children = null,
|
19
21
|
type = 'button',
|
20
22
|
className = '',
|
21
23
|
style = {},
|
22
24
|
iconName,
|
23
25
|
iconPosition = 'left',
|
26
|
+
isChooseFile = false,
|
27
|
+
buttonWidth = 'auto',
|
28
|
+
handleCloseIcon,
|
29
|
+
selectedFile,
|
24
30
|
...props
|
25
31
|
}: ButtonProps,
|
26
32
|
ref
|
27
33
|
) => {
|
28
34
|
const renderIcon = () =>
|
29
35
|
iconName && (
|
30
|
-
<div
|
36
|
+
<div
|
37
|
+
onClick={(e) => {
|
38
|
+
if (iconName === 'close') {
|
39
|
+
e.stopPropagation();
|
40
|
+
handleCloseIcon?.();
|
41
|
+
}
|
42
|
+
}}
|
43
|
+
>
|
31
44
|
<Icon
|
32
|
-
height={8}
|
33
|
-
width={8}
|
45
|
+
height={isChooseFile ? 14 : 8}
|
46
|
+
width={isChooseFile ? 14 : 8}
|
34
47
|
color={
|
35
|
-
|
48
|
+
iconName === 'close'
|
49
|
+
? 'var(--ff-delete-button-attachment)'
|
50
|
+
: variant === 'primary'
|
36
51
|
? `var(--primary-icon-color)`
|
37
52
|
: `var(--secondary-icon-color)`
|
38
53
|
}
|
39
54
|
name={iconName}
|
55
|
+
className="ff-button-icon"
|
40
56
|
/>
|
41
57
|
</div>
|
42
58
|
);
|
@@ -49,9 +65,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
49
65
|
`ff-button--${size}`,
|
50
66
|
`ff-button--${variant}`,
|
51
67
|
`${className}`,
|
52
|
-
'button'
|
68
|
+
{ 'ff-button-choose-file': isChooseFile },
|
69
|
+
{ 'ff-button-choose-file-text': selectedFile }
|
53
70
|
)}
|
54
|
-
style={{ backgroundColor, ...style }}
|
71
|
+
style={{ backgroundColor, ...style, width: buttonWidth }}
|
55
72
|
onClick={onClick}
|
56
73
|
disabled={disabled}
|
57
74
|
{...props}
|
@@ -60,14 +77,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
60
77
|
<Typography
|
61
78
|
fontSize={10}
|
62
79
|
fontWeight="semi-bold"
|
63
|
-
className={classNames(`ff-button-${variant}--text
|
80
|
+
className={classNames(`ff-button-${variant}--text`, {
|
81
|
+
'ff-button-choose-file-text': selectedFile,
|
82
|
+
})}
|
64
83
|
>
|
65
84
|
{label}
|
66
85
|
</Typography>
|
67
86
|
{iconPosition === 'right' && renderIcon()}
|
68
|
-
{children}
|
69
87
|
</button>
|
70
88
|
);
|
71
89
|
}
|
72
90
|
);
|
73
|
-
export default Button;
|
91
|
+
export default memo(Button, areEqual);
|
@@ -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;
|