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
@@ -1,11 +1,14 @@
1
- import React, { useState } from 'react';
1
+ import React, { useRef, useState } from 'react';
2
2
  import './BarChart.scss';
3
3
  import Typography from '../../Typography';
4
4
  import Icon from '../../Icon';
5
5
  import { truncateText } from '../../../utils/truncateText/truncateText';
6
6
 
7
7
  type BarChartProps = {
8
- data: { label: string; value: number }[];
8
+ data: {
9
+ label: string;
10
+ value: number;
11
+ }[];
9
12
  barWidth: number;
10
13
  height: number;
11
14
  barGap?: number;
@@ -18,11 +21,13 @@ type BarChartProps = {
18
21
  barBorderRadius?: number;
19
22
  legend?: boolean;
20
23
  showXAxisLabels?: boolean;
21
- icons?: (string | React.ReactNode)[];
24
+ icons?: (string | React.ReactNode)[];
22
25
  iconSize?: number;
23
26
  backgroundColor?: string;
24
27
  legendPosition?: 'top' | 'bottom';
25
28
  legendGap?: number;
29
+ extendBarChartRightWidth?: number;
30
+ isYAxisValuePercentage?: boolean;
26
31
  onSelectedBar?: (_label: string) => void;
27
32
  };
28
33
 
@@ -44,42 +49,44 @@ const BarChart: React.FC<BarChartProps> = ({
44
49
  iconSize,
45
50
  legendPosition = 'bottom',
46
51
  legendGap = 5,
52
+ extendBarChartRightWidth = 0,
53
+ isYAxisValuePercentage = false,
47
54
  onSelectedBar = (_label) => {},
48
55
  }) => {
49
- const [tooltip, setTooltip] = useState<{
50
- visible: boolean;
51
- content: string;
52
- x: number;
53
- y: number;
54
- borderColor: string;
55
- }>({ visible: false, content: '', x: 0, y: 0, borderColor: 'transparent' });
56
-
56
+ const tooltipRef = useRef<HTMLDivElement | null>(null);
57
+ const [selectedBar, setSelectedBar] = useState<string | null>(null);
57
58
  const maxValue = Math.max(...data.map((item) => item.value));
58
59
  const topPadding = 40;
59
60
  const leftPadding = 40;
60
61
  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
61
- const chartWidth = totalBarWidth + leftPadding * 2 + 10;
62
+ const chartWidth =
63
+ totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
62
64
 
63
65
  const renderGradients = (gradients: string[][]) => {
64
- return gradients.map((gradient, index) => (
65
- <defs key={index}>
66
- <linearGradient
67
- id={`gradient-${index}`}
68
- x1="0%"
69
- y1="0%"
70
- x2="0%"
71
- y2="100%"
72
- >
73
- {gradient.map((color, i) => (
74
- <stop
75
- key={i}
76
- offset={`${(i / (gradient.length - 1)) * 100}%`}
77
- stopColor={color}
78
- />
79
- ))}
80
- </linearGradient>
81
- </defs>
82
- ));
66
+ const generateKey = Date.now();
67
+ return gradients.map((gradient, index) => {
68
+ return (
69
+ <defs key={`${generateKey}-${index}`}>
70
+ <linearGradient
71
+ id={`gradient-${index}`}
72
+ x1="0%"
73
+ y1="0%"
74
+ x2="0%"
75
+ y2="100%"
76
+ >
77
+ {gradient.map((color, i) => {
78
+ return (
79
+ <stop
80
+ key={`${generateKey}-${index}-${i}`}
81
+ offset={`${(i / (gradient.length - 1)) * 100}%`}
82
+ stopColor={color}
83
+ />
84
+ );
85
+ })}
86
+ </linearGradient>
87
+ </defs>
88
+ );
89
+ });
83
90
  };
84
91
 
85
92
  const getFillColor = (index: number) =>
@@ -87,49 +94,45 @@ const BarChart: React.FC<BarChartProps> = ({
87
94
  ? `url(#gradient-${index % colors.length})`
88
95
  : 'grey';
89
96
 
90
- const getBorderColor = (index: number) => {
91
- return colors?.[index % colors.length]?.[0] || 'grey';
92
- };
93
-
94
- const handleMouseEnter = (
95
- e: React.MouseEvent,
96
- label: string,
97
- value: number,
98
- color: string
99
- ) => {
100
- setTooltip({
101
- visible: true,
102
- content: `${label}: ${value}`,
103
- x: e.clientX,
104
- y: e.clientY,
105
- borderColor: color,
106
- });
97
+ const handleMouseEnter = (label: string, value: number) => {
98
+ const tooltip = tooltipRef.current;
99
+ if (tooltip) {
100
+ tooltip.style.display = 'block';
101
+ tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${
102
+ isYAxisValuePercentage ? '%' : ''
103
+ }`;
104
+ }
107
105
  };
108
106
 
109
107
  const handleMouseMove = (e: React.MouseEvent) => {
110
- setTooltip((prevTooltip) => ({
111
- ...prevTooltip,
112
- x: e.clientX,
113
- y: e.clientY,
114
- }));
108
+ const tooltip = tooltipRef.current;
109
+ if (tooltip) {
110
+ const rect = tooltip.parentElement?.getBoundingClientRect();
111
+ const xOffset = window.scrollX;
112
+ const yOffset = window.scrollY;
113
+ const tooltipX = e.clientX - (rect?.left || 0) + xOffset + 10;
114
+ const tooltipY = e.clientY - (rect?.top || 0) + yOffset + 10;
115
+ tooltip.style.left = `${tooltipX}px`;
116
+ tooltip.style.top = `${tooltipY}px`;
117
+ }
115
118
  };
116
119
 
117
120
  const handleMouseLeave = () => {
118
- setTooltip({
119
- visible: false,
120
- content: '',
121
- x: 0,
122
- y: 0,
123
- borderColor: 'transparent',
124
- });
121
+ const tooltip = tooltipRef.current;
122
+ if (tooltip) {
123
+ tooltip.style.display = 'none';
124
+ }
125
125
  };
126
126
 
127
127
  const handleSelectLabel = (label: string) => {
128
+ setSelectedBar(label);
128
129
  onSelectedBar(label);
129
130
  };
130
131
 
131
132
  return (
132
133
  <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
134
+ <div ref={tooltipRef} className="ff-bar-chart-tooltip" />
135
+
133
136
  {legend && legendPosition === 'top' && (
134
137
  <div className="ff-legend-container">
135
138
  <div
@@ -194,7 +197,17 @@ const BarChart: React.FC<BarChartProps> = ({
194
197
  textAnchor="middle"
195
198
  className="ff-bar-chart-labels"
196
199
  >
197
- {((i * maxValue) / yAxisDivisions).toFixed(1)}
200
+ {`${
201
+ isYAxisValuePercentage
202
+ ? `${((i * maxValue) / yAxisDivisions)
203
+ .toFixed(0)
204
+ .toString()
205
+ .padStart(2, '0')}%`
206
+ : ((i * maxValue) / yAxisDivisions)
207
+ .toFixed(0)
208
+ .toString()
209
+ .padStart(2, '0')
210
+ }`}
198
211
  </text>
199
212
  );
200
213
  })}
@@ -209,6 +222,8 @@ const BarChart: React.FC<BarChartProps> = ({
209
222
  const iconX = barX + barWidth / 2 - iconWidth / 2;
210
223
  const iconY = barY - iconWidth;
211
224
 
225
+ const isSelected = selectedBar === item.label;
226
+
212
227
  return (
213
228
  <g key={index}>
214
229
  {icons[index] && typeof icons[index] === 'string' && (
@@ -230,14 +245,12 @@ const BarChart: React.FC<BarChartProps> = ({
230
245
  fill={getFillColor(index)}
231
246
  rx={barBorderRadius}
232
247
  ry={barBorderRadius}
233
- onMouseEnter={(e) =>
234
- handleMouseEnter(
235
- e,
236
- item.label,
237
- item.value,
238
- getBorderColor(index)
239
- )
240
- }
248
+ style={{
249
+ fill: isSelected ? 'blue' : getFillColor(index),
250
+ strokeWidth: isSelected ? 3 : 0,
251
+ opacity: isSelected ? 0.9 : 1,
252
+ }}
253
+ onMouseEnter={() => handleMouseEnter(item.label, item.value)}
241
254
  onMouseMove={handleMouseMove}
242
255
  onMouseLeave={handleMouseLeave}
243
256
  onClick={() => handleSelectLabel(item.label)}
@@ -245,15 +258,19 @@ const BarChart: React.FC<BarChartProps> = ({
245
258
 
246
259
  {showXAxisLabels && (
247
260
  <text
248
- x={barX + barWidth / 2}
261
+ x={
262
+ index == 0
263
+ ? barX
264
+ : index === data.length - 1
265
+ ? barX + barWidth
266
+ : barX + barWidth / 2
267
+ }
249
268
  y={height + topPadding + 15}
250
269
  fill="black"
251
- textAnchor="middle"
270
+ textAnchor={index == 0 ? 'start' : 'middle'}
252
271
  className="ff-bar-chart-labels"
253
272
  >
254
- {isTruncateText
255
- ? truncateText(item.label, 10)
256
- : item.label}
273
+ {isTruncateText ? truncateText(item.label, 10) : item.label}
257
274
  </text>
258
275
  )}
259
276
  </g>
@@ -334,18 +351,6 @@ const BarChart: React.FC<BarChartProps> = ({
334
351
  </div>
335
352
  </div>
336
353
  )}
337
-
338
- {tooltip.visible && (
339
- <div
340
- className="ff-bar-chart-tooltip"
341
- style={{
342
- top: tooltip.y - 20,
343
- left: tooltip.x + 10,
344
- }}
345
- >
346
- {tooltip.content}
347
- </div>
348
- )}
349
354
  </div>
350
355
  );
351
356
  };
@@ -381,6 +381,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
381
381
  ? item.percentage
382
382
  : typeof item.value === 'string'
383
383
  ? ((parseFloat(item.value) / total) * 100).toFixed(1)
384
+ : total === 0
385
+ ? 0
384
386
  : ((item.value / total) * 100).toFixed(1)}
385
387
  </td>
386
388
  </td>
@@ -47,5 +47,6 @@ export const WithoutIcon: Story = {
47
47
  percentageValue: 30,
48
48
  label: 'Step',
49
49
  fontSize: 12,
50
+ labelColor:'black',
50
51
  },
51
52
  };
@@ -67,6 +67,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
67
67
  percentageValue,
68
68
  icon,
69
69
  fontSize = 10,
70
+ labelColor = '',
70
71
  arcColor = 'var(--brand-color)',
71
72
  backgroundArcColor = 'var(--ff-select-scroll-thumb-color)',
72
73
  }) => {
@@ -156,7 +157,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
156
157
  <text
157
158
  x="0"
158
159
  y="0"
159
- fill={arcColor}
160
+ fill={labelColor || arcColor}
160
161
  textAnchor="middle"
161
162
  dominantBaseline="central"
162
163
  >
@@ -4,9 +4,10 @@ export interface IconRadialChartProps {
4
4
  label: string;
5
5
  percentageValue: number;
6
6
  icon?: string;
7
- fontSize: number;
8
- arcColor: string;
9
- backgroundArcColor: string;
7
+ fontSize?: number;
8
+ labelColor?:string;
9
+ arcColor?: string;
10
+ backgroundArcColor?: string;
10
11
  }
11
12
 
12
13
  //type for the calculateArc function
@@ -157,7 +157,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
157
157
  { date: '4 oct', value: 20 },
158
158
  { date: '5 oct', value: 10 },
159
159
  { date: '6 oct', value: 30 },
160
- { date: '7 oct', value: 0 },
160
+ { date: '7 oct ', value: 0 },
161
161
  ],
162
162
  },
163
163
  {
@@ -165,7 +165,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
165
165
  name: 'Flaky',
166
166
  show: true,
167
167
  data: [
168
- { date: '1 oct', value: 20 },
168
+ { date: '1 oct', value: 50 },
169
169
  { date: '2 oct', value: 40 },
170
170
  { date: '3 oct', value: 30 },
171
171
  { date: '4 oct', value: 20 },
@@ -189,6 +189,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
189
189
  fontWeight: 'semi-bold',
190
190
  proportionalSpacing: false,
191
191
  chartName: 'defects',
192
+ xAxisLabelGap:20,
192
193
  },
193
194
  render: (args) => (
194
195
  <div className="linechart-container">
@@ -32,6 +32,7 @@ const LineChart: React.FC<LineChartProps> = ({
32
32
  numberSize,
33
33
  proportionalSpacing,
34
34
  chartName,
35
+ xAxisLabelGap = 16,
35
36
  }) => {
36
37
  const margin = 40;
37
38
  const xMax = width - margin * 2;
@@ -212,7 +213,10 @@ const LineChart: React.FC<LineChartProps> = ({
212
213
  const xTickInterval = Math.floor(data[0].data.length / 4);
213
214
 
214
215
  return (
215
- <div className="ff-line-chart-text" style={{ width: width + 20 }}>
216
+ <div
217
+ className="ff-line-chart-text"
218
+ style={{ width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }}
219
+ >
216
220
  <div
217
221
  className="ff-line-chart-yAxisLabel-warpper"
218
222
  style={{ height: height }}
@@ -302,12 +306,12 @@ const LineChart: React.FC<LineChartProps> = ({
302
306
  )}
303
307
  {data[0].data
304
308
  .filter((_: any, index: number) => index % xTickInterval === 0)
305
- .map((point: { [key: string]: any }) => (
309
+ .map((point: { [key: string]: any }, index: number) => (
306
310
  <text
307
311
  key={String(point[xKey])}
308
312
  x={xScale(point[xKey])}
309
313
  y={yMax + 15}
310
- textAnchor="middle"
314
+ textAnchor={index === 0 ? 'start' : 'middle'}
311
315
  fill={yAxisColor}
312
316
  className="ff--line-chart-x-line-data"
313
317
  style={{ fontSize: numberSize }}
@@ -28,4 +28,5 @@ export interface LineChartProps {
28
28
  numberSize?: string | number;
29
29
  proportionalSpacing?: boolean;
30
30
  chartName?: string;
31
+ xAxisLabelGap?:number;
31
32
  }
@@ -1,6 +1,7 @@
1
1
  @use '../../../assets/styles/fonts';
2
2
 
3
3
  .ff-multi-radial-chart-container {
4
+ position: relative;
4
5
  cursor: pointer;
5
6
  display: flex;
6
7
  align-items: center;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { Meta, StoryObj } from '@storybook/react';
2
3
  import MultiRadialChart from './MultiRadialChart';
3
4
 
@@ -42,8 +43,8 @@ export const Default: Story = {
42
43
  lineCap: 'round',
43
44
  legendType: 'numberLegend',
44
45
  isLegendDetails: true,
45
- chartToPillGap: "16px",
46
- pillLegendGap: "15px"
46
+ chartToLegendGap: '16px',
47
+ legendGap: '15px',
47
48
  },
48
49
  };
49
50
 
@@ -76,8 +77,8 @@ export const numberLegend: Story = {
76
77
  lineCap: 'square',
77
78
  legendType: 'numberLegend',
78
79
  isLegendDetails: true,
79
- chartToPillGap: "16px",
80
- pillLegendGap: "15px"
80
+ chartToLegendGap: '16px',
81
+ legendGap: '15px',
81
82
  },
82
83
  };
83
84
 
@@ -117,7 +118,53 @@ export const PillLegend: Story = {
117
118
  isLegendDetails: true,
118
119
  labelFontSize: 12,
119
120
  subLabelFontSize: 8,
120
- chartToPillGap: "16px",
121
- pillLegendGap: "15px"
121
+ chartToLegendGap: '16px',
122
+ legendGap: '15px',
123
+ },
124
+ };
125
+
126
+ export const ExecutionCompare: Story = {
127
+ render: () => {
128
+ return (
129
+ <MultiRadialChart
130
+ barValues={[
131
+ {
132
+ arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
133
+ arcColor: 'var(--ff-card-skipped-status-bg-color)',
134
+ barLabel: 'Skipped',
135
+ value: 0,
136
+ },
137
+ {
138
+ arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
139
+ arcColor: 'var(--ff-card-warning-status-bg-color)',
140
+ barLabel: 'Warning',
141
+ value: 0,
142
+ },
143
+ {
144
+ arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
145
+ arcColor: 'var(--ff-card-failed-status-bg-color)',
146
+ barLabel: 'Failed',
147
+ value: 0,
148
+ },
149
+ {
150
+ arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
151
+ arcColor: 'var(--ff-card-passed-status-bg-color)',
152
+ barLabel: 'Passed',
153
+ value: 0,
154
+ },
155
+ ]}
156
+ fontSize={12}
157
+ isLegendDetails
158
+ labelHeading="00 Module"
159
+ legendType="pillLegend"
160
+ lineCap="round"
161
+ subLabelFontSize={12}
162
+ lineWidth={3}
163
+ radius={35}
164
+ chartToLegendGap="16px"
165
+ legendGap="8px"
166
+ gapBetweenArch={6}
167
+ />
168
+ );
122
169
  },
123
170
  };