pixel-react 1.9.9 → 1.10.1
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/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -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/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/types.d.ts +10 -2
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AppHeader/types.d.ts +1 -1
- package/lib/components/AttachImage/AttachImage.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/BarChart/BarChart.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/IconRadialChart/types.d.ts +4 -3
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -2
- 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/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -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/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- 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/ImportExcelStyles.d.ts +24 -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 +13 -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 +11 -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/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 +14 -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/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.d.ts +1 -1
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/StatusCard/types.d.ts +1 -1
- 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 +23 -10
- package/lib/index.esm.js +795 -577
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +795 -577
- 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/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +32 -11
- package/src/assets/Themes/BlueTheme.scss +3 -0
- package/src/assets/Themes/DarkTheme.scss +32 -13
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/close_defects_icon.svg +12 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defect_density_icon.svg +12 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/open_defects_icon.svg +12 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/quality_score_icon.svg +12 -0
- package/src/assets/icons/sause_lab_icon.svg +3 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/total_defects_status_icon.svg +13 -0
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +14 -4
- package/src/components/Accordion/Accordion.tsx +22 -11
- package/src/components/Accordion/types.ts +14 -6
- package/src/components/AppHeader/AppHeader.tsx +1 -1
- package/src/components/AppHeader/types.ts +1 -1
- package/src/components/Charts/BarChart/BarChart.scss +1 -0
- package/src/components/Charts/BarChart/BarChart.stories.tsx +91 -1
- package/src/components/Charts/BarChart/BarChart.tsx +91 -86
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +1 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +2 -1
- package/src/components/Charts/IconRadialChart/types.ts +4 -3
- package/src/components/Charts/LineChart/LineChart.stories.tsx +3 -2
- package/src/components/Charts/LineChart/LineChart.tsx +7 -3
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +53 -6
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +74 -34
- package/src/components/Charts/MultiRadialChart/types.ts +5 -4
- package/src/components/Checkbox/Checkbox.scss +4 -5
- package/src/components/Checkbox/Checkbox.stories.tsx +40 -10
- package/src/components/Icon/iconList.ts +14 -0
- package/src/components/StatusCard/StatusCard.scss +56 -93
- package/src/components/StatusCard/StatusCard.stories.tsx +77 -4
- package/src/components/StatusCard/StatusCard.tsx +89 -35
- package/src/components/StatusCard/types.ts +1 -1
- package/src/components/Table/Table.tsx +2 -2
- package/src/components/TextArea/Textarea.scss +6 -7
@@ -25,10 +25,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
25
25
|
labelHeading,
|
26
26
|
legendType = 'numberLegend',
|
27
27
|
isLegendDetails = true,
|
28
|
-
|
29
|
-
|
28
|
+
chartToLegendGap = '16px',
|
29
|
+
legendGap = '8px',
|
30
30
|
labelFontSize = 12,
|
31
31
|
subLabelFontSize = 8,
|
32
|
+
gapBetweenArch = 10,
|
32
33
|
}) => {
|
33
34
|
const [tooltip, setTooltip] = useState<{
|
34
35
|
visible: boolean;
|
@@ -47,7 +48,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
47
48
|
0
|
48
49
|
);
|
49
50
|
const baseRadius = radius;
|
50
|
-
const radiusIncrement = lineWidth +
|
51
|
+
const radiusIncrement = lineWidth + gapBetweenArch;
|
51
52
|
const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
|
52
53
|
const svgSize = 2 * (maxRadius + lineWidth);
|
53
54
|
const reversedBarValues = [...barValues].reverse();
|
@@ -58,7 +59,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
58
59
|
switch (legendType) {
|
59
60
|
case 'numberLegend':
|
60
61
|
return (
|
61
|
-
<div
|
62
|
+
<div
|
63
|
+
className="ff-legend-container ff-number-legend"
|
64
|
+
style={{ gap: legendGap }}
|
65
|
+
>
|
62
66
|
{legendData.map((item, index) => (
|
63
67
|
<div className="ff-legend-item" key={index}>
|
64
68
|
<Typography
|
@@ -83,7 +87,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
83
87
|
|
84
88
|
case 'pillLegend':
|
85
89
|
return (
|
86
|
-
<div
|
90
|
+
<div
|
91
|
+
className="ff-legend-container ff-pill-legend"
|
92
|
+
style={{ gap: legendGap }}
|
93
|
+
>
|
87
94
|
{legendData.reverse().map((item, index) => (
|
88
95
|
<div className="ff-legend-item" key={index}>
|
89
96
|
<span
|
@@ -92,11 +99,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
92
99
|
backgroundColor: item.arcColor,
|
93
100
|
}}
|
94
101
|
>
|
95
|
-
<Typography fontSize={10} color="var(--tooltip-text-color)">
|
102
|
+
<Typography fontSize={10} color="var(--tooltip-text-color)">
|
103
|
+
{item.value}
|
104
|
+
</Typography>
|
96
105
|
</span>
|
97
|
-
<Typography className="ff-legend-key">
|
98
|
-
{item.label}
|
99
|
-
</Typography>
|
106
|
+
<Typography className="ff-legend-key">{item.label}</Typography>
|
100
107
|
</div>
|
101
108
|
))}
|
102
109
|
</div>
|
@@ -109,20 +116,22 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
109
116
|
|
110
117
|
const handleMouseEnter = (e: React.MouseEvent, content: string) => {
|
111
118
|
const { clientX, clientY } = e;
|
119
|
+
const container = e.currentTarget.getBoundingClientRect();
|
112
120
|
setTooltip({
|
113
121
|
visible: true,
|
114
|
-
x: clientX,
|
115
|
-
y: clientY,
|
122
|
+
x: clientX - container.left,
|
123
|
+
y: clientY - container.top,
|
116
124
|
content: content,
|
117
125
|
});
|
118
126
|
};
|
119
127
|
|
120
128
|
const handleMouseMove = (e: React.MouseEvent) => {
|
121
129
|
const { clientX, clientY } = e;
|
130
|
+
const container = e.currentTarget.getBoundingClientRect();
|
122
131
|
setTooltip((prev) => ({
|
123
132
|
...prev,
|
124
|
-
x: clientX,
|
125
|
-
y: clientY,
|
133
|
+
x: clientX - container.left,
|
134
|
+
y: clientY - container.top,
|
126
135
|
}));
|
127
136
|
};
|
128
137
|
|
@@ -136,11 +145,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
136
145
|
|
137
146
|
const getArcColorFromTooltip = () => {
|
138
147
|
if (!tooltip.visible) return '';
|
139
|
-
const valueString = tooltip.content.split(':')[
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
return matchingBar?.arcColor || '';
|
148
|
+
const valueString = tooltip.content.split(':')[0]?.trim();
|
149
|
+
if (valueString === undefined) return '';
|
150
|
+
const matchingBar = barValues.find((val) => val.barLabel === valueString);
|
151
|
+
return matchingBar?.arcColor || '';
|
144
152
|
};
|
145
153
|
|
146
154
|
return (
|
@@ -150,29 +158,41 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
150
158
|
? 'ff-multi-radial-chart-number'
|
151
159
|
: 'ff-multi-radial-chart-pill'
|
152
160
|
}`}
|
153
|
-
style={{gap:
|
161
|
+
style={{ gap: chartToLegendGap }}
|
154
162
|
>
|
155
163
|
<div className="relative" style={{ width: svgSize, height: svgSize }}>
|
156
|
-
<svg
|
157
|
-
|
164
|
+
<svg
|
165
|
+
width={svgSize}
|
166
|
+
height={svgSize}
|
167
|
+
viewBox={`0 0 ${svgSize} ${svgSize}`}
|
168
|
+
className="absolute top-0 left-0"
|
169
|
+
>
|
170
|
+
<g transform={`translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`}>
|
158
171
|
{reversedBarValues.map((values, i) => {
|
159
172
|
const originalIndex = barValues.length - 1 - i;
|
160
173
|
const percentage = values.value / totalBarValue;
|
161
174
|
const angleIncrement = percentage * 2 * Math.PI;
|
162
|
-
let startAngle = -Math.PI / 2;
|
175
|
+
let startAngle = -Math.PI / 2;
|
163
176
|
let endAngle = startAngle + angleIncrement;
|
164
177
|
if (values.value === totalBarValue) {
|
165
178
|
startAngle = 0;
|
166
179
|
endAngle = 2 * Math.PI;
|
167
180
|
}
|
168
|
-
const currentRadius =
|
181
|
+
const currentRadius =
|
182
|
+
baseRadius + radiusIncrement * originalIndex;
|
169
183
|
|
170
|
-
const backGroundArcPath = calculateArc(
|
184
|
+
const backGroundArcPath = calculateArc(
|
185
|
+
0,
|
186
|
+
0,
|
187
|
+
currentRadius,
|
188
|
+
0,
|
189
|
+
2 * Math.PI
|
190
|
+
);
|
171
191
|
|
172
192
|
// If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
|
173
193
|
if (values.value === 0) {
|
174
194
|
const dotX = currentRadius * Math.cos(-Math.PI / 2);
|
175
|
-
const dotY = currentRadius * Math.sin(-Math.PI / 2);
|
195
|
+
const dotY = currentRadius * Math.sin(-Math.PI / 2);
|
176
196
|
return (
|
177
197
|
<g key={originalIndex}>
|
178
198
|
<path
|
@@ -185,10 +205,13 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
185
205
|
<circle
|
186
206
|
cx={dotX}
|
187
207
|
cy={dotY}
|
188
|
-
r={
|
208
|
+
r={lineWidth + 1}
|
189
209
|
fill={values.arcColor}
|
190
210
|
onMouseEnter={(e) =>
|
191
|
-
handleMouseEnter(
|
211
|
+
handleMouseEnter(
|
212
|
+
e,
|
213
|
+
`${values.barLabel || 'Data'}: ${values.value}`
|
214
|
+
)
|
192
215
|
}
|
193
216
|
onMouseMove={handleMouseMove}
|
194
217
|
onMouseLeave={handleMouseLeave}
|
@@ -197,7 +220,13 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
197
220
|
);
|
198
221
|
}
|
199
222
|
|
200
|
-
const foregroundArcPath = calculateArc(
|
223
|
+
const foregroundArcPath = calculateArc(
|
224
|
+
0,
|
225
|
+
0,
|
226
|
+
currentRadius,
|
227
|
+
startAngle,
|
228
|
+
endAngle
|
229
|
+
);
|
201
230
|
return (
|
202
231
|
<g key={originalIndex}>
|
203
232
|
<path
|
@@ -214,7 +243,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
214
243
|
strokeWidth={lineWidth}
|
215
244
|
strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
|
216
245
|
onMouseEnter={(e) =>
|
217
|
-
handleMouseEnter(
|
246
|
+
handleMouseEnter(
|
247
|
+
e,
|
248
|
+
`${values.barLabel || 'Data'}: ${values.value}`
|
249
|
+
)
|
218
250
|
}
|
219
251
|
onMouseMove={handleMouseMove}
|
220
252
|
onMouseLeave={handleMouseLeave}
|
@@ -227,17 +259,25 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
227
259
|
})}
|
228
260
|
<text
|
229
261
|
x="0"
|
230
|
-
y=
|
262
|
+
y={`-${lineWidth + gapBetweenArch + 2}`}
|
231
263
|
fill={getArcColorFromTooltip()}
|
232
264
|
textAnchor="middle"
|
233
265
|
dominantBaseline="central"
|
234
266
|
>
|
235
267
|
{tooltip.visible ? (
|
236
268
|
<>
|
237
|
-
<tspan
|
269
|
+
<tspan
|
270
|
+
x="0"
|
271
|
+
dy={`${lineWidth + gapBetweenArch - 5}`}
|
272
|
+
className="ff-center-text-tooltip"
|
273
|
+
>
|
238
274
|
{textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
|
239
275
|
</tspan>
|
240
|
-
<tspan
|
276
|
+
<tspan
|
277
|
+
x="0"
|
278
|
+
dy={`${lineWidth + gapBetweenArch + 5}`}
|
279
|
+
className="ff-center-text-tooltip"
|
280
|
+
>
|
241
281
|
{textData(tooltip.content.split(':')[0] ?? '', 8)}
|
242
282
|
</tspan>
|
243
283
|
</>
|
@@ -289,7 +329,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
289
329
|
className="ff-multi-radial-tooltip"
|
290
330
|
style={{
|
291
331
|
top: tooltip.y + 10,
|
292
|
-
left: tooltip.x +
|
332
|
+
left: tooltip.x + 100,
|
293
333
|
zIndex: 1000,
|
294
334
|
}}
|
295
335
|
>
|
@@ -301,7 +341,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
301
341
|
renderLegend(
|
302
342
|
barValues.map((value) => ({
|
303
343
|
...value,
|
304
|
-
label:value?.barLabel,
|
344
|
+
label: value?.barLabel,
|
305
345
|
key: value.value.toString(),
|
306
346
|
})),
|
307
347
|
legendType
|
@@ -16,11 +16,12 @@ export interface MultiRadialChartProps {
|
|
16
16
|
barValues: BarValue[];
|
17
17
|
legendType?: LegendType;
|
18
18
|
isLegendDetails?: boolean;
|
19
|
-
labelFontSize?: number
|
20
|
-
subLabelFontSize?: number
|
19
|
+
labelFontSize?: number,
|
20
|
+
subLabelFontSize?: number
|
21
21
|
gapAngle?: number;
|
22
|
-
|
23
|
-
|
22
|
+
chartToLegendGap?: string;
|
23
|
+
legendGap?: string;
|
24
|
+
gapBetweenArch?:number;
|
24
25
|
}
|
25
26
|
export interface ChartItem extends BarValue {
|
26
27
|
label: string;
|
@@ -47,7 +47,6 @@
|
|
47
47
|
@include mixins.transition(border-color, background-color);
|
48
48
|
}
|
49
49
|
&:hover {
|
50
|
-
border-color: var(--brand-color);
|
51
50
|
&::after {
|
52
51
|
opacity: 1;
|
53
52
|
}
|
@@ -75,8 +74,8 @@
|
|
75
74
|
border-color: var(--ff-card-skipped-status-bg-color);
|
76
75
|
}
|
77
76
|
&--flaky {
|
78
|
-
background-color: var(--
|
79
|
-
border-color: var(--
|
77
|
+
background-color: var(--ff-card-flaky-status-bg-color);
|
78
|
+
border-color: var(--ff-card-flaky-status-bg-color);
|
80
79
|
}
|
81
80
|
}
|
82
81
|
}
|
@@ -97,7 +96,7 @@
|
|
97
96
|
background: var(--ff-card-skipped-status-bg-color);
|
98
97
|
}
|
99
98
|
&--flaky {
|
100
|
-
background: var(--
|
99
|
+
background: var(--ff-card-flaky-status-bg-color);
|
101
100
|
}
|
102
101
|
}
|
103
102
|
&::after {
|
@@ -142,7 +141,7 @@
|
|
142
141
|
border-color: var(--ff-card-skipped-status-bg-color);
|
143
142
|
}
|
144
143
|
&--flaky {
|
145
|
-
border-color: var(--
|
144
|
+
border-color: var(--ff-card-flaky-status-bg-color);
|
146
145
|
}
|
147
146
|
}
|
148
147
|
}
|
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;
|
|
18
18
|
|
19
19
|
export const Default: Story = {
|
20
20
|
render: () => {
|
21
|
-
const [checked, setChecked] = useState(true);
|
21
|
+
const [checked, setChecked] = useState(true);
|
22
22
|
|
23
23
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
24
24
|
setChecked(event.target.checked);
|
@@ -38,21 +38,23 @@ export const Default: Story = {
|
|
38
38
|
|
39
39
|
export const Partial: Story = {
|
40
40
|
render: () => {
|
41
|
-
const [checked, setChecked] = useState(true);
|
41
|
+
const [checked, setChecked] = useState(true);
|
42
42
|
|
43
43
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
44
44
|
setChecked(event.target.checked);
|
45
45
|
};
|
46
46
|
|
47
47
|
return (
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
48
|
+
<>
|
49
|
+
<Checkbox
|
50
|
+
label="Partial Checkbox"
|
51
|
+
id="partial-checkbox"
|
52
|
+
name="partial"
|
53
|
+
partial={true}
|
54
|
+
checked={checked}
|
55
|
+
onChange={handleChange}
|
56
|
+
/>
|
57
|
+
</>
|
56
58
|
);
|
57
59
|
},
|
58
60
|
};
|
@@ -76,3 +78,31 @@ export const Controlled: Story = {
|
|
76
78
|
);
|
77
79
|
},
|
78
80
|
};
|
81
|
+
|
82
|
+
export const Varient: Story = {
|
83
|
+
render: () => {
|
84
|
+
const [checked, setChecked] = useState(false);
|
85
|
+
|
86
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
87
|
+
setChecked(event.target.checked);
|
88
|
+
};
|
89
|
+
|
90
|
+
return (
|
91
|
+
<>
|
92
|
+
{['passed', 'failed', 'warning', 'skipped', 'flaky'].map((varient) => (
|
93
|
+
<Checkbox
|
94
|
+
key={varient}
|
95
|
+
label={
|
96
|
+
checked ? 'Checked! Click to uncheck.' : 'Click here to check.'
|
97
|
+
}
|
98
|
+
id="controlled-checkbox"
|
99
|
+
name="controlled"
|
100
|
+
checked={checked}
|
101
|
+
onChange={handleChange}
|
102
|
+
variant={varient as any}
|
103
|
+
/>
|
104
|
+
))}
|
105
|
+
</>
|
106
|
+
);
|
107
|
+
},
|
108
|
+
};
|
@@ -288,6 +288,13 @@ import JiraColored from '../../assets/icons/jira_colored.svg?react';
|
|
288
288
|
import Screenshot from '../../assets/icons/screenshot.svg?react';
|
289
289
|
import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
|
290
290
|
import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
|
291
|
+
import SauseLabPrimaryIcon from "../../assets/icons/sause_lab_icon.svg?react"
|
292
|
+
|
293
|
+
import totalDefectsStatusIcon from '../../assets/icons/total_defects_status_icon.svg?react';
|
294
|
+
import openDefectsStatusIcon from '../../assets/icons/open_defects_icon.svg?react';
|
295
|
+
import closedDefectsStatusIcon from '../../assets/icons/close_defects_icon.svg?react';
|
296
|
+
import qualityScoreStatusIcon from '../../assets/icons/quality_score_icon.svg?react';
|
297
|
+
import defectDensityStatusIcon from '../../assets/icons/defect_density_icon.svg?react';
|
291
298
|
|
292
299
|
Components['success'] = ToastSuccessIcon;
|
293
300
|
Components['alert'] = Alert;
|
@@ -570,5 +577,12 @@ Components['jira_colored'] = JiraColored;
|
|
570
577
|
Components['screenshot'] = Screenshot;
|
571
578
|
Components['delete_filled'] = DeleteFilled;
|
572
579
|
Components['primary_calendar_icon'] = PrimaryCalendarIcon
|
580
|
+
Components['sause_lab_icon'] = SauseLabPrimaryIcon
|
581
|
+
|
582
|
+
Components['total_defects_status_icon'] = totalDefectsStatusIcon;
|
583
|
+
Components['open_defects_status_icon'] = openDefectsStatusIcon;
|
584
|
+
Components['closed_defects_status_icon'] = closedDefectsStatusIcon;
|
585
|
+
Components['quality_score_status_icon'] = qualityScoreStatusIcon;
|
586
|
+
Components['defect_density_status_icon'] = defectDensityStatusIcon;
|
573
587
|
|
574
588
|
export default Components;
|
@@ -1,3 +1,16 @@
|
|
1
|
+
$ff-status-colors: (
|
2
|
+
passed: var(--ff-card-passed-status-bg-color),
|
3
|
+
failed: var(--ff-card-failed-status-bg-color),
|
4
|
+
warning: var(--ff-card-warning-status-bg-color),
|
5
|
+
skipped: var(--ff-card-skipped-status-bg-color),
|
6
|
+
flaky: var(--ff-card-flaky-status-bg-color),
|
7
|
+
total: var(--card-total-defect-color),
|
8
|
+
defect: var(--card-defect-density),
|
9
|
+
open: var(--ff-card-failed-status-bg-color),
|
10
|
+
closed: var(--ff-card-passed-status-bg-color),
|
11
|
+
quality: var(--ff-card-warning-status-bg-color),
|
12
|
+
);
|
13
|
+
|
1
14
|
.ff-card-container {
|
2
15
|
height: 78px;
|
3
16
|
display: flex;
|
@@ -8,24 +21,13 @@
|
|
8
21
|
cursor: pointer;
|
9
22
|
|
10
23
|
&:hover {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
&.warning {
|
20
|
-
border-color: var(--ff-card-warning-status-bg-color);
|
21
|
-
}
|
22
|
-
|
23
|
-
&.skipped {
|
24
|
-
border-color: var(--ff-card-skipped-status-bg-color);
|
25
|
-
}
|
26
|
-
|
27
|
-
&.flaky {
|
28
|
-
border-color: var(--ff-card-flaky-status-bg-color);
|
24
|
+
@each $state, $color in $ff-status-colors {
|
25
|
+
&.#{$state} {
|
26
|
+
border-color: $color;
|
27
|
+
.ff-status-bar {
|
28
|
+
border-right: 1px solid $color;
|
29
|
+
}
|
30
|
+
}
|
29
31
|
}
|
30
32
|
}
|
31
33
|
|
@@ -34,37 +36,49 @@
|
|
34
36
|
height: 100%;
|
35
37
|
display: flex;
|
36
38
|
flex-direction: column;
|
37
|
-
justify-content:
|
39
|
+
justify-content: space-between;
|
38
40
|
align-items: center;
|
39
41
|
border-right: 1px solid var(--border-color);
|
40
|
-
|
42
|
+
border-radius: 3px;
|
41
43
|
|
42
44
|
.ff-status-text {
|
43
45
|
transform: rotate(-90deg);
|
44
46
|
transform-origin: center;
|
45
|
-
display:
|
47
|
+
display: flex;
|
48
|
+
align-items: start;
|
49
|
+
height: 16px;
|
50
|
+
width: 6px;
|
46
51
|
}
|
47
52
|
}
|
48
53
|
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
54
|
+
@each $state, $color in $ff-status-colors {
|
55
|
+
&.#{$state} {
|
56
|
+
.ff-status-bar {
|
57
|
+
background-color: $color;
|
58
|
+
color: var(--base-bg-color);
|
59
|
+
}
|
60
|
+
|
61
|
+
.ff-content {
|
62
|
+
.ff-number {
|
63
|
+
color: $color;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
&.toggled {
|
68
|
+
background-color: $color;
|
69
|
+
border: 1px solid $color;
|
70
|
+
|
71
|
+
.ff-status-bar {
|
72
|
+
border-right: 1px solid $color;
|
73
|
+
background-color: var(--base-bg-color);
|
74
|
+
color: $color;
|
75
|
+
}
|
76
|
+
|
77
|
+
.ff-content {
|
78
|
+
background-color: $color;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
}
|
68
82
|
}
|
69
83
|
|
70
84
|
.ff-content {
|
@@ -81,58 +95,7 @@
|
|
81
95
|
}
|
82
96
|
}
|
83
97
|
|
84
|
-
|
85
|
-
|
86
|
-
}
|
87
|
-
&.failed .ff-number {
|
88
|
-
color: var(--ff-card-failed-status-bg-color);
|
89
|
-
}
|
90
|
-
&.warning .ff-number {
|
91
|
-
color: var(--ff-card-warning-status-bg-color);
|
92
|
-
}
|
93
|
-
&.skipped .ff-number {
|
94
|
-
color: var(--ff-card-skipped-status-bg-color);
|
95
|
-
}
|
96
|
-
&.flaky .ff-number {
|
97
|
-
color: var(--ff-card-flaky-status-bg-color);
|
98
|
-
}
|
99
|
-
|
100
|
-
&.toggled {
|
101
|
-
&.passed .ff-status-bar {
|
102
|
-
background-color: var(--base-bg-color);
|
103
|
-
color: var(--ff-card-passed-status-bg-color);
|
104
|
-
}
|
105
|
-
&.failed .ff-status-bar {
|
106
|
-
background-color: var(--base-bg-color);
|
107
|
-
color: var(--ff-card-failed-status-bg-color);
|
108
|
-
}
|
109
|
-
&.warning .ff-status-bar {
|
110
|
-
background-color: var(--base-bg-color);
|
111
|
-
color: var(--ff-card-warning-status-bg-color);
|
112
|
-
}
|
113
|
-
&.skipped .ff-status-bar {
|
114
|
-
background-color: var(--base-bg-color);
|
115
|
-
color: var(--ff-card-skipped-status-bg-color);
|
116
|
-
}
|
117
|
-
&.flaky .ff-status-bar {
|
118
|
-
background-color: var(--base-bg-color);
|
119
|
-
color: var(--ff-card-flaky-status-bg-color);
|
120
|
-
}
|
121
|
-
|
122
|
-
&.passed .ff-content {
|
123
|
-
background-color: var(--ff-card-passed-status-bg-color);
|
124
|
-
}
|
125
|
-
&.failed .ff-content {
|
126
|
-
background-color: var(--ff-card-failed-status-bg-color);
|
127
|
-
}
|
128
|
-
&.warning .ff-content {
|
129
|
-
background-color: var(--ff-card-warning-status-bg-color);
|
130
|
-
}
|
131
|
-
&.skipped .ff-content {
|
132
|
-
background-color: var(--ff-card-skipped-status-bg-color);
|
133
|
-
}
|
134
|
-
&.flaky .ff-content {
|
135
|
-
background-color: var(--ff-card-flaky-status-bg-color);
|
136
|
-
}
|
98
|
+
.ff-content.red-background {
|
99
|
+
gap: 8px;
|
137
100
|
}
|
138
101
|
}
|
@@ -60,11 +60,56 @@ export const Flaky: Story = {
|
|
60
60
|
},
|
61
61
|
};
|
62
62
|
|
63
|
+
export const TotalDefect: Story = {
|
64
|
+
args: {
|
65
|
+
icon: 'total_defects_status_icon',
|
66
|
+
status: 'Total Defects',
|
67
|
+
count: 66,
|
68
|
+
text: 'Total Defects',
|
69
|
+
},
|
70
|
+
};
|
71
|
+
|
72
|
+
export const DefectDensity: Story = {
|
73
|
+
args: {
|
74
|
+
icon: 'defect_density_icon',
|
75
|
+
status: 'Defect Density',
|
76
|
+
count: 33,
|
77
|
+
text: 'Defect Density',
|
78
|
+
},
|
79
|
+
};
|
80
|
+
|
81
|
+
export const OpenDefects: Story = {
|
82
|
+
args: {
|
83
|
+
icon: 'open_defects_icon',
|
84
|
+
status: 'Open Defects',
|
85
|
+
count: 22,
|
86
|
+
text: 'Open Defects',
|
87
|
+
},
|
88
|
+
};
|
89
|
+
|
90
|
+
export const ClosedDefects: Story = {
|
91
|
+
args: {
|
92
|
+
icon: 'close_defects_icon',
|
93
|
+
status: 'Closed Defects',
|
94
|
+
count: 11,
|
95
|
+
text: 'Closed Defects',
|
96
|
+
},
|
97
|
+
};
|
98
|
+
|
99
|
+
export const QualityScore: Story = {
|
100
|
+
args: {
|
101
|
+
icon: 'quality_score_icon',
|
102
|
+
status: 'Quality Score',
|
103
|
+
count: 44,
|
104
|
+
text: 'Quality Score',
|
105
|
+
},
|
106
|
+
};
|
107
|
+
|
63
108
|
export const AllCards: Story = {
|
64
109
|
render: () => {
|
65
110
|
const [toggledCard, setToggledCard] = useState<number | null>(null);
|
66
111
|
|
67
|
-
const data = [
|
112
|
+
const data: { name: CardProps['status']; count: number; text: string }[] = [
|
68
113
|
{
|
69
114
|
name: 'Passed',
|
70
115
|
count: 6,
|
@@ -90,6 +135,31 @@ export const AllCards: Story = {
|
|
90
135
|
count: 6,
|
91
136
|
text: 'Scripts were Flaky all the time',
|
92
137
|
},
|
138
|
+
{
|
139
|
+
name: 'Total Defects',
|
140
|
+
count: 66,
|
141
|
+
text: 'Total Defects',
|
142
|
+
},
|
143
|
+
{
|
144
|
+
name: 'Defect Density',
|
145
|
+
count: 33,
|
146
|
+
text: 'Defect Density',
|
147
|
+
},
|
148
|
+
{
|
149
|
+
name: 'Open Defects',
|
150
|
+
count: 22,
|
151
|
+
text: 'Open Defects',
|
152
|
+
},
|
153
|
+
{
|
154
|
+
name: 'Closed Defects',
|
155
|
+
count: 11,
|
156
|
+
text: 'Close Defects',
|
157
|
+
},
|
158
|
+
{
|
159
|
+
name: 'Quality Score',
|
160
|
+
count: 4,
|
161
|
+
text: 'Quality Score',
|
162
|
+
},
|
93
163
|
];
|
94
164
|
|
95
165
|
const onHandleStatus = (status: string, index: number) => {
|
@@ -98,13 +168,16 @@ export const AllCards: Story = {
|
|
98
168
|
};
|
99
169
|
|
100
170
|
return (
|
101
|
-
<div style={{ display: 'flex', gap: '8px' }}>
|
171
|
+
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
102
172
|
{data.map((row, index) => (
|
103
173
|
<div key={index}>
|
104
174
|
<StatusCard
|
105
175
|
count={row?.count}
|
106
|
-
icon={`${row.name
|
107
|
-
|
176
|
+
icon={`${row.name
|
177
|
+
.toLowerCase()
|
178
|
+
.split(' ')
|
179
|
+
.join('_')}_status_icon`}
|
180
|
+
status={row?.name}
|
108
181
|
text={row.text}
|
109
182
|
onSelectedStatus={(status) => onHandleStatus(status, index)}
|
110
183
|
resetToggle={toggledCard !== index}
|