pixel-react 1.9.8 → 1.10.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.
Files changed (211) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  3. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  4. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  5. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  6. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  7. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  8. package/lib/components/Accordion/Accordion.d.ts +1 -1
  9. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  10. package/lib/components/Accordion/types.d.ts +10 -2
  11. package/lib/components/AddButton/AddButton.d.ts +5 -0
  12. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  13. package/lib/components/AddButton/index.d.ts +1 -0
  14. package/lib/components/AddButton/types.d.ts +4 -0
  15. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  16. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  17. package/lib/components/AddVariables/index.d.ts +1 -0
  18. package/lib/components/AddVariables/types.d.ts +35 -0
  19. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  20. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  21. package/lib/components/AppHeader/types.d.ts +1 -1
  22. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  23. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  24. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  25. package/lib/components/Button/Button.stories.d.ts +13 -0
  26. package/lib/components/Charts/BarChart/BarChart.d.ts +2 -0
  27. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  28. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  29. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  30. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  31. package/lib/components/Charts/IconRadialChart/types.d.ts +4 -3
  32. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  33. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  34. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  35. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -2
  36. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  37. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  38. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  39. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  40. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  41. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  42. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  43. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  44. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  45. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  46. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  47. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  48. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  49. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  50. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  66. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  67. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  68. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  69. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  70. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  71. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  72. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  73. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  74. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  75. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  76. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  77. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  78. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  79. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  80. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  81. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  82. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  83. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  84. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  85. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  86. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  87. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  88. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  89. package/lib/components/ExcelFile/Types.d.ts +129 -0
  90. package/lib/components/ExcelFile/index.d.ts +1 -0
  91. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  92. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  93. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  94. package/lib/components/Form/Form.stories.d.ts +7 -0
  95. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  96. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  97. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  98. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  99. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  100. package/lib/components/Input/Input.stories.d.ts +9 -0
  101. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  102. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
  103. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  104. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  105. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  106. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  107. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  108. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  109. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
  110. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  111. package/lib/components/NLPInput/type.d.ts +70 -0
  112. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  113. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  114. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  115. package/lib/components/Search/Search.stories.d.ts +6 -0
  116. package/lib/components/Select/Select.stories.d.ts +14 -0
  117. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  118. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  119. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  120. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
  121. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
  122. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
  123. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
  124. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  125. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  126. package/lib/components/StatusCard/StatusCard.d.ts +1 -1
  127. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  128. package/lib/components/StatusCard/types.d.ts +1 -1
  129. package/lib/components/Table/Table.stories.d.ts +13 -0
  130. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  131. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  132. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  133. package/lib/components/TableTree/types.d.ts +2 -0
  134. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  135. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  136. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  137. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  138. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  139. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  140. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  141. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  142. package/lib/index.d.ts +23 -10
  143. package/lib/index.esm.js +1287 -1064
  144. package/lib/index.esm.js.map +1 -1
  145. package/lib/index.js +1287 -1064
  146. package/lib/index.js.map +1 -1
  147. package/lib/tsconfig.tsbuildinfo +1 -1
  148. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  149. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  150. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  151. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  152. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  153. package/lib/utils/find/findAndInsert.d.ts +7 -0
  154. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  155. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  156. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  157. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  158. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  159. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  160. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  161. package/package.json +1 -1
  162. package/src/assets/Themes/BaseTheme.scss +32 -11
  163. package/src/assets/Themes/BlueTheme.scss +3 -0
  164. package/src/assets/Themes/DarkTheme.scss +32 -13
  165. package/src/assets/icons/approval_pending.svg +8 -8
  166. package/src/assets/icons/close_defects_icon.svg +12 -0
  167. package/src/assets/icons/configuration.svg +3 -3
  168. package/src/assets/icons/defect_density_icon.svg +12 -0
  169. package/src/assets/icons/defects.svg +8 -8
  170. package/src/assets/icons/element.svg +4 -4
  171. package/src/assets/icons/open_defects_icon.svg +12 -0
  172. package/src/assets/icons/project_element.svg +4 -4
  173. package/src/assets/icons/quality_score_icon.svg +12 -0
  174. package/src/assets/icons/sause_lab_icon.svg +3 -0
  175. package/src/assets/icons/step_group.svg +10 -10
  176. package/src/assets/icons/total_defects_status_icon.svg +13 -0
  177. package/src/assets/icons/variable.svg +3 -3
  178. package/src/assets/icons/web_service_icon.svg +3 -3
  179. package/src/components/Accordion/Accordion.stories.tsx +14 -4
  180. package/src/components/Accordion/Accordion.tsx +22 -11
  181. package/src/components/Accordion/types.ts +14 -6
  182. package/src/components/AppHeader/AppHeader.tsx +1 -1
  183. package/src/components/AppHeader/types.ts +1 -1
  184. package/src/components/Charts/BarChart/BarChart.scss +1 -0
  185. package/src/components/Charts/BarChart/BarChart.stories.tsx +91 -1
  186. package/src/components/Charts/BarChart/BarChart.tsx +91 -86
  187. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +2 -0
  188. package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +1 -0
  189. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +2 -1
  190. package/src/components/Charts/IconRadialChart/types.ts +4 -3
  191. package/src/components/Charts/LineChart/LineChart.stories.tsx +3 -2
  192. package/src/components/Charts/LineChart/LineChart.tsx +7 -3
  193. package/src/components/Charts/LineChart/types.ts +1 -0
  194. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +1 -0
  195. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +53 -6
  196. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +74 -34
  197. package/src/components/Charts/MultiRadialChart/types.ts +5 -4
  198. package/src/components/Checkbox/Checkbox.scss +4 -5
  199. package/src/components/Checkbox/Checkbox.stories.tsx +40 -10
  200. package/src/components/Icon/iconList.ts +14 -0
  201. package/src/components/StatusCard/StatusCard.scss +56 -93
  202. package/src/components/StatusCard/StatusCard.stories.tsx +77 -4
  203. package/src/components/StatusCard/StatusCard.tsx +89 -35
  204. package/src/components/StatusCard/types.ts +1 -1
  205. package/src/components/Table/Table.tsx +2 -2
  206. package/src/components/TableTree/Components/TableBody.tsx +2 -1
  207. package/src/components/TableTree/Components/TableCell.tsx +29 -18
  208. package/src/components/TableTree/Components/TableRow.tsx +2 -0
  209. package/src/components/TableTree/types.ts +2 -0
  210. package/src/components/TextArea/Textarea.scss +6 -7
  211. package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +0 -3
@@ -25,10 +25,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
25
25
  labelHeading,
26
26
  legendType = 'numberLegend',
27
27
  isLegendDetails = true,
28
- chartToPillGap,
29
- pillLegendGap,
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 + 10;
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 className="ff-legend-container ff-number-legend" style={{gap:pillLegendGap}}>
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 className="ff-legend-container ff-pill-legend" style={{gap:pillLegendGap}}>
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)">{item.value}</Typography>
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(':')[1]?.trim();
140
- const value = valueString ? Number(valueString) : undefined;
141
- if (value === undefined) return '';
142
- const matchingBar = barValues.find((val) => val.value === value);
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: chartToPillGap}}
161
+ style={{ gap: chartToLegendGap }}
154
162
  >
155
163
  <div className="relative" style={{ width: svgSize, height: svgSize }}>
156
- <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
157
- <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
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 = baseRadius + radiusIncrement * originalIndex;
181
+ const currentRadius =
182
+ baseRadius + radiusIncrement * originalIndex;
169
183
 
170
- const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
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={5}
208
+ r={lineWidth + 1}
189
209
  fill={values.arcColor}
190
210
  onMouseEnter={(e) =>
191
- handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
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(0, 0, currentRadius, startAngle, endAngle);
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(e, `${values.barLabel || 'Data'}: ${values.value}`)
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="-20"
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 x="0" dy={10} className="ff-center-text-tooltip">
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 x="0" dy={18} className="ff-center-text-tooltip">
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 + 10,
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
- chartToPillGap?: number | string;
23
- pillLegendGap?: number | string;
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(-- ff-card-flaky-status-bg-color);
79
- border-color: var(-- ff-card-flaky-status-bg-color);
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(-- ff-card-flaky-status-bg-color);
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(-- ff-card-flaky-status-bg-color);
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); // Default starts as checked
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); // Default starts as checked
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
- <Checkbox
49
- label="Partial Checkbox"
50
- id="partial-checkbox"
51
- name="partial"
52
- partial={true}
53
- checked={checked}
54
- onChange={handleChange}
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
- &.passed {
12
- border-color: var(--ff-card-passed-status-bg-color);
13
- }
14
-
15
- &.failed {
16
- border-color: var(--ff-card-failed-status-bg-color);
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: start;
39
+ justify-content: space-between;
38
40
  align-items: center;
39
41
  border-right: 1px solid var(--border-color);
40
- gap: 17px;
42
+ border-radius: 3px;
41
43
 
42
44
  .ff-status-text {
43
45
  transform: rotate(-90deg);
44
46
  transform-origin: center;
45
- display: inline-block;
47
+ display: flex;
48
+ align-items: start;
49
+ height: 16px;
50
+ width: 6px;
46
51
  }
47
52
  }
48
53
 
49
- &.passed .ff-status-bar {
50
- background-color: var(--ff-card-passed-status-bg-color);
51
- color: var(--base-bg-color);
52
- }
53
- &.failed .ff-status-bar {
54
- background-color: var(--ff-card-failed-status-bg-color);
55
- color: var(--base-bg-color);
56
- }
57
- &.warning .ff-status-bar {
58
- background-color: var(--ff-card-warning-status-bg-color);
59
- color: var(--base-bg-color);
60
- }
61
- &.skipped .ff-status-bar {
62
- background-color: var(--ff-card-skipped-status-bg-color);
63
- color: var(--base-bg-color);
64
- }
65
- &.flaky .ff-status-bar {
66
- background-color: var(--ff-card-flaky-status-bg-color);
67
- color: var(--base-bg-color);
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
- &.passed .ff-number {
85
- color: var(--ff-card-passed-status-bg-color);
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.toLowerCase()}_status_icon`}
107
- status={row?.name as any}
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}