pixel-react 1.6.0 → 1.6.2

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 (112) hide show
  1. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  2. package/lib/components/AppHeader/types.d.ts +18 -6
  3. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  6. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  7. package/lib/components/MachineInputField/types.d.ts +1 -1
  8. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  9. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  10. package/lib/components/PopUpModal/types.d.ts +14 -0
  11. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  14. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  15. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  16. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  17. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  18. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  19. package/lib/components/TableTree/data.d.ts +36 -2
  20. package/lib/components/TableTree/types.d.ts +3 -4
  21. package/lib/index.d.ts +56 -17
  22. package/lib/index.esm.js +917 -552
  23. package/lib/index.esm.js.map +1 -1
  24. package/lib/index.js +917 -551
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/Themes/BaseTheme.scss +5 -14
  29. package/src/assets/Themes/DarkTheme.scss +5 -2
  30. package/src/assets/icons/approval_pending.svg +8 -8
  31. package/src/assets/icons/arrow_up.svg +1 -1
  32. package/src/assets/icons/configuration.svg +3 -3
  33. package/src/assets/icons/defects.svg +8 -8
  34. package/src/assets/icons/element.svg +4 -4
  35. package/src/assets/icons/project_element.svg +4 -4
  36. package/src/assets/icons/step_group.svg +10 -10
  37. package/src/assets/icons/variable.svg +3 -3
  38. package/src/assets/icons/web_service_icon.svg +3 -3
  39. package/src/assets/styles/_fonts.scss +4 -2
  40. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  41. package/src/components/AppHeader/AppHeader.tsx +158 -139
  42. package/src/components/AppHeader/types.ts +19 -6
  43. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  44. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  45. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  46. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  47. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  48. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  49. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  50. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  51. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  52. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  53. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  54. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  55. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  56. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  57. package/src/components/DatePicker/DatePicker.scss +15 -1
  58. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  59. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  62. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  63. package/src/components/Icon/Icons.scss +1 -1
  64. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  65. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  66. package/src/components/MachineInputField/types.ts +1 -1
  67. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  68. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  69. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  70. package/src/components/PopUpModal/types.ts +14 -0
  71. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  72. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  73. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  74. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  75. package/src/components/Select/Select.tsx +2 -3
  76. package/src/components/Select/components/Dropdown.tsx +34 -34
  77. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  78. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  79. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  80. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  81. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  82. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  83. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  84. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  85. package/src/components/TableTree/TableTree.stories.tsx +145 -98
  86. package/src/components/TableTree/TableTree.tsx +49 -14
  87. package/src/components/TableTree/data.ts +32 -391
  88. package/src/components/TableTree/types.ts +3 -4
  89. package/src/index.ts +3 -0
  90. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  91. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  94. package/lib/components/AddButton/AddButton.d.ts +0 -5
  95. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  96. package/lib/components/AddButton/index.d.ts +0 -1
  97. package/lib/components/AddButton/types.d.ts +0 -4
  98. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  99. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  100. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  101. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  102. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  103. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  104. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  105. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  106. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  107. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  108. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  109. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  110. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  111. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  112. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -6,12 +6,7 @@ export interface AppHeaderProps {
6
6
  rightContent?: ReactNode;
7
7
  projectsList?: optionsType[];
8
8
  appHeaderMenuItems: appHeaderMenuItemProps[];
9
- appHeaderHiddenMenuItems?: {
10
- label: string;
11
- value: string | string[];
12
- icon: string;
13
- disable?: boolean;
14
- }[];
9
+
15
10
  selectedMenu: string;
16
11
  selectedSubMenu?: string;
17
12
  selectedQuickMenu?: string;
@@ -26,15 +21,33 @@ export interface AppHeaderProps {
26
21
  export interface appHeaderMenuItemProps {
27
22
  label: string;
28
23
  path?: string;
24
+ disable?: boolean;
25
+ disableText?:string;
26
+ hide?:boolean;
29
27
  subMenuItems?: appHeaderSubMenuItemProps[];
30
28
  }
31
29
  export interface appHeaderSubMenuItemProps {
32
30
  label: string;
33
31
  path?: string;
32
+ disable?: boolean;
33
+ disableText?:string;
34
+ hide?:boolean;
34
35
  quickMenuItems?: appHeaderQuickMenuItemProps[];
36
+ hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
35
37
  }
36
38
  export interface appHeaderQuickMenuItemProps {
37
39
  label?: string;
38
40
  path?: string;
39
41
  iconName: string;
42
+ disable?: boolean;
43
+ disableText?:string;
44
+ hide?:boolean;
45
+ }
46
+ export interface appHeaderHiddenMenuItemProps {
47
+ label: string;
48
+ value: string | string[];
49
+ icon: string;
50
+ disable?: boolean;
51
+ disableText?:string;
52
+ hide?:boolean;
40
53
  }
@@ -1,16 +1,39 @@
1
1
  @use '../../../assets/styles/fonts';
2
2
  .ff-bar-chart-container {
3
- margin-top: 40px;
3
+ position: relative;
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  align-items: center;
7
- position: relative;
8
7
 
9
- .ff-bar-chart-border {
10
- position: relative;
8
+ .ff-legend-container {
9
+ width: 100%;
11
10
  display: flex;
12
- justify-content: center;
13
- align-items: center;
11
+ justify-content: flex-end;
12
+ padding-right: 10px;
13
+ .ff-bar-chart-legend {
14
+ width: 290px;
15
+ margin-top: 10px;
16
+ display: flex;
17
+ justify-content: flex-end;
18
+ gap: 10px;
19
+
20
+ .ff-bar-chart-legend-item {
21
+ display: flex;
22
+ align-items: center;
23
+
24
+ .ff-bar-chart-legend-item-circle {
25
+ display: inline-block;
26
+ width: 12px;
27
+ height: 12px;
28
+ margin-right: 5px;
29
+ border-radius: 50%;
30
+ }
31
+ }
32
+
33
+ .ff-legend-label {
34
+ margin-left: 5px;
35
+ }
36
+ }
14
37
  }
15
38
  .ff-bar-chart-icon {
16
39
  position: absolute;
@@ -26,41 +49,18 @@
26
49
  align-items: center;
27
50
  }
28
51
  .ff-bar-chart-labels {
29
- @extend .fontXs;
52
+ @extend .fontSm;
30
53
  font-weight: 400;
31
- color: var(--drawer-title-color);
54
+ color: var(--text-color);
32
55
  }
33
56
  .ff-bar-chart-tooltip {
34
57
  position: absolute;
35
58
  padding: 5px 10px;
36
- background-color: var(--file-details-bg);
37
- color: var(--status-skipped-text-color);
59
+ background-color: var(--tooltip-bg-color);
60
+ color: var(--primary-icon-color);
38
61
  border-radius: 4px;
39
62
  pointer-events: none;
40
- @extend .fontXs;
63
+ @extend .fontSm;
41
64
  font-weight: 600;
42
65
  }
43
- .ff-bar-chart-legend {
44
- margin-top: 10px;
45
- display: grid;
46
- gap: 0.5rem;
47
- grid-row-gap: 2;
48
- grid-template-columns: repeat(3, 1fr);
49
- grid-template-rows: auto;
50
- .ff-bar-chart-legend-item {
51
- display: flex;
52
- align-items: center;
53
-
54
- .ff-bar-chart-legend-item-circle {
55
- display: inline-block;
56
- width: 12px;
57
- height: 12px;
58
- margin-right: 5px;
59
- border-radius: 50%;
60
- }
61
- }
62
- .ff-legend-label {
63
- margin-left: 5px;
64
- }
65
- }
66
66
  }
@@ -33,7 +33,7 @@ export const BarChartDashboard: Story = {
33
33
  { label: 'Chrome', value: 25 },
34
34
  { label: 'Safari', value: 10 },
35
35
  { label: 'IE', value: 1 },
36
- { label: 'Opera', value: 0 },
36
+ { label: 'Opera', value: 15 },
37
37
  ],
38
38
  barWidth: 20,
39
39
  height: 250,
@@ -53,6 +53,7 @@ export const BarChartDashboard: Story = {
53
53
  barBorderRadius: 0,
54
54
  legend: false,
55
55
  showXAxisLabels: true,
56
+ legendPosition: 'top',
56
57
  icons: [
57
58
  'fire_fox',
58
59
  'edge',
@@ -61,6 +62,6 @@ export const BarChartDashboard: Story = {
61
62
  'internet_explorer',
62
63
  'opera',
63
64
  ],
64
- iconSize: 40,
65
+ iconSize: 20,
65
66
  },
66
67
  };
@@ -20,6 +20,7 @@ type BarChartProps = {
20
20
  icons?: (string | React.ReactNode)[];
21
21
  iconSize?: number;
22
22
  backgroundColor?: string;
23
+ legendPosition?: 'top' | 'bottom';
23
24
  };
24
25
 
25
26
  const BarChart: React.FC<BarChartProps> = ({
@@ -37,7 +38,7 @@ const BarChart: React.FC<BarChartProps> = ({
37
38
  showXAxisLabels = true,
38
39
  icons = [],
39
40
  iconSize,
40
- backgroundColor = 'transparent',
41
+ legendPosition = 'bottom',
41
42
  }) => {
42
43
  const [tooltip, setTooltip] = useState<{
43
44
  visible: boolean;
@@ -50,8 +51,8 @@ const BarChart: React.FC<BarChartProps> = ({
50
51
  const maxValue = Math.max(...data.map((item) => item.value));
51
52
  const topPadding = 40;
52
53
  const leftPadding = 40;
53
- const chartWidth =
54
- data.length * (barWidth + barGap) + padding * 2 + leftPadding;
54
+ const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
55
+ const chartWidth = totalBarWidth + leftPadding * 2;
55
56
 
56
57
  const renderGradients = (gradients: string[][]) => {
57
58
  return gradients.map((gradient, index) => (
@@ -120,17 +121,43 @@ const BarChart: React.FC<BarChartProps> = ({
120
121
  return (
121
122
  <div
122
123
  className="ff-bar-chart-container"
123
- style={{
124
- display: 'flex',
125
- justifyContent: 'center',
126
- position: 'relative',
127
- backgroundColor,
128
- }}
124
+ style={{ width: chartWidth, height }}
129
125
  >
130
- <div
131
- className="ff-bar-chart-border"
132
- style={{ width: chartWidth, height }}
133
- >
126
+ {legend && legendPosition === 'top' && (
127
+ <div className="ff-legend-container">
128
+ <div className="ff-bar-chart-legend">
129
+ {data.map((item, index) => (
130
+ <div key={item.label} className="ff-bar-chart-legend-item">
131
+ {icons[index] && typeof icons[index] === 'string' ? (
132
+ <Icon
133
+ name={String(icons[index])}
134
+ width={iconSize}
135
+ height={iconSize}
136
+ />
137
+ ) : (
138
+ <span
139
+ className="ff-bar-chart-legend-item-circle"
140
+ style={{
141
+ backgroundColor:
142
+ colors[index % colors.length]?.[0] || 'grey',
143
+ }}
144
+ ></span>
145
+ )}
146
+ <Typography
147
+ as="div"
148
+ fontSize={10}
149
+ fontWeight="regular"
150
+ className="ff-legend-label"
151
+ >
152
+ {item.label}
153
+ </Typography>
154
+ </div>
155
+ ))}
156
+ </div>
157
+ </div>
158
+ )}
159
+
160
+ <div>
134
161
  <svg width={chartWidth} height={height + topPadding + 40}>
135
162
  {Array.isArray(colors) &&
136
163
  colors.length > 0 &&
@@ -172,11 +199,7 @@ const BarChart: React.FC<BarChartProps> = ({
172
199
  y={String(iconY)}
173
200
  width={iconWidth}
174
201
  height={iconWidth}
175
- chartIcon={
176
- typeof icons[index] === 'string' && icons[index].length
177
- ? true
178
- : false
179
- }
202
+ chartIcon={true}
180
203
  />
181
204
  )}
182
205
 
@@ -216,9 +239,9 @@ const BarChart: React.FC<BarChartProps> = ({
216
239
  })}
217
240
 
218
241
  <line
219
- x1={55}
242
+ x1={60}
220
243
  y1={height + topPadding}
221
- x2={chartWidth - 50}
244
+ x2={chartWidth}
222
245
  y2={height + topPadding}
223
246
  stroke="#D9D9D9"
224
247
  strokeWidth="1"
@@ -253,50 +276,51 @@ const BarChart: React.FC<BarChartProps> = ({
253
276
  </svg>
254
277
  </div>
255
278
 
279
+ {legend && legendPosition === 'bottom' && (
280
+ <div className="ff-legend-container">
281
+ <div className="ff-bar-chart-legend">
282
+ {data.map((item, index) => (
283
+ <div key={item.label} className="ff-bar-chart-legend-item">
284
+ {icons[index] && typeof icons[index] === 'string' ? (
285
+ <Icon
286
+ name={String(icons[index])}
287
+ width={iconSize}
288
+ height={iconSize}
289
+ />
290
+ ) : (
291
+ <span
292
+ className="ff-bar-chart-legend-item-circle"
293
+ style={{
294
+ backgroundColor:
295
+ colors[index % colors.length]?.[0] || 'grey',
296
+ }}
297
+ ></span>
298
+ )}
299
+ <Typography
300
+ as="div"
301
+ fontSize={10}
302
+ fontWeight="regular"
303
+ className="ff-legend-label"
304
+ >
305
+ {item.label}
306
+ </Typography>
307
+ </div>
308
+ ))}
309
+ </div>
310
+ </div>
311
+ )}
312
+
256
313
  {tooltip.visible && (
257
314
  <div
258
315
  className="ff-bar-chart-tooltip"
259
316
  style={{
260
- top: tooltip.y - 45,
261
- left: tooltip.x,
262
- border: `1px solid ${tooltip.borderColor}`,
317
+ top: tooltip.y - 20,
318
+ left: tooltip.x + 10,
263
319
  }}
264
320
  >
265
321
  {tooltip.content}
266
322
  </div>
267
323
  )}
268
-
269
- {legend && (
270
- <div className="ff-bar-chart-legend">
271
- {data.map((item, index) => (
272
- <div key={item.label} className="ff-bar-chart-legend-item">
273
- {icons[index] && typeof icons[index] === 'string' ? (
274
- <Icon
275
- name={String(icons[index])}
276
- width={iconSize}
277
- height={iconSize}
278
- />
279
- ) : (
280
- <span
281
- className="ff-bar-chart-legend-item-circle"
282
- style={{
283
- backgroundColor:
284
- colors[index % colors.length]?.[0] || 'grey',
285
- }}
286
- ></span>
287
- )}
288
- <Typography
289
- as="div"
290
- fontSize={10}
291
- fontWeight="regular"
292
- className="ff-legend-label"
293
- >
294
- {item.label}
295
- </Typography>
296
- </div>
297
- ))}
298
- </div>
299
- )}
300
324
  </div>
301
325
  );
302
326
  };
@@ -2,9 +2,16 @@
2
2
 
3
3
  .ff-dashboard-donut-chart-section {
4
4
  display: flex;
5
- flex-direction: column;
6
5
  align-items: center;
7
6
 
7
+ &.legend-position-bottom {
8
+ flex-direction: column;
9
+ }
10
+
11
+ &.legend-position-left {
12
+ flex-direction: row-reverse;
13
+ }
14
+
8
15
  &-table-legend {
9
16
  flex-direction: row;
10
17
  }
@@ -23,7 +30,7 @@
23
30
  }
24
31
 
25
32
  .ff-donut-chart-tooltip {
26
- position: fixed;
33
+ position: absolute;
27
34
  padding: 5px;
28
35
  border-radius: 4px;
29
36
  pointer-events: none;
@@ -35,25 +42,27 @@
35
42
  .ff-legend-container {
36
43
  display: grid;
37
44
  gap: 10px;
45
+ grid-auto-rows: 1fr;
46
+
47
+ &.ff-number-legend {
48
+ grid-template-columns: repeat(3, 100px);
38
49
 
39
- &.numberLegend {
40
- grid-template-columns: repeat(3, 1fr);
50
+ &.ff-side-legend{
51
+ grid-template-columns: repeat(2, 100px);
52
+ }
41
53
  .ff-legend-item {
42
54
  display: flex;
43
55
  flex-direction: column;
44
56
  align-items: center;
45
- white-space: nowrap;
46
- text-overflow: ellipsis;
47
57
  }
48
58
  }
49
59
 
50
- &.pillLegend {
51
- grid-template-columns: repeat(2, 1fr);
60
+ &.ff-pill-legend {
61
+ grid-template-columns: repeat(2, 130px);
62
+
52
63
  .ff-legend-item {
53
64
  display: flex;
54
65
  align-items: center;
55
- white-space: nowrap;
56
- text-overflow: ellipsis;
57
66
 
58
67
  .ff-legend-capsule {
59
68
  background-color: var(--status-success-text-color);
@@ -72,21 +81,19 @@
72
81
  }
73
82
  }
74
83
 
75
- &.memoryLegend {
76
- display: flex;
77
- flex-wrap: wrap;
78
- justify-content: space-around;
84
+ &.ff-memory-legend {
85
+ grid-template-columns: repeat(3, 100px);
86
+
87
+ &.ff-side-legend{
88
+ grid-template-columns: repeat(2, 100px);
89
+ }
79
90
 
80
91
  .ff-legend-item {
81
92
  box-sizing: border-box;
82
- flex: 1 1 calc(33.33% - 10px);
83
93
  display: flex;
84
94
  flex-direction: column;
85
95
  align-items: center;
86
96
  width: 100%;
87
- padding-right: 10px;
88
- white-space: nowrap;
89
- text-overflow: ellipsis;
90
97
  }
91
98
  }
92
99
  }
@@ -50,6 +50,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
50
50
  showUnit = true,
51
51
  labelFontSize = 24,
52
52
  subLabelFontSize = 14,
53
+ legendPosition = 'bottom',
54
+ legendGap = 0,
53
55
  }) => {
54
56
  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
55
57
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -194,16 +196,22 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
194
196
 
195
197
  const renderLegend = (
196
198
  legendData: NormalizedChartItem[],
197
- legendType: LegendType
199
+ legendType: LegendType,
200
+ legendPosition: string
198
201
  ) => {
199
202
  switch (legendType) {
200
203
  case 'numberLegend':
201
204
  return (
202
- <div className="ff-legend-container numberLegend">
205
+ <div
206
+ className={classNames('ff-legend-container ff-number-legend', {
207
+ 'ff-side-legend':
208
+ legendPosition === 'left' || legendPosition === 'right',
209
+ })}
210
+ >
203
211
  {legendData.map((item, index) => (
204
212
  <div className="ff-legend-item" key={index}>
205
213
  <Typography
206
- fontSize={20}
214
+ fontSize={22}
207
215
  fontWeight="semi-bold"
208
216
  className="ff-legend-value"
209
217
  color={
@@ -214,7 +222,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
214
222
  >
215
223
  {item.value} {showUnit && unit?.toUpperCase()}
216
224
  </Typography>
217
- <Typography fontSize={10} className="ff-legend-key">
225
+ <Typography
226
+ fontSize={12}
227
+ className="ff-legend-key"
228
+ textAlign="center"
229
+ >
218
230
  {item.key}
219
231
  </Typography>
220
232
  </div>
@@ -224,7 +236,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
224
236
 
225
237
  case 'pillLegend':
226
238
  return (
227
- <div className="ff-legend-container pillLegend">
239
+ <div className="ff-legend-container ff-pill-legend ">
228
240
  {legendData.map((item, index) => (
229
241
  <div className="ff-legend-item" key={index}>
230
242
  <span
@@ -245,7 +257,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
245
257
 
246
258
  case 'memoryLegend':
247
259
  return (
248
- <div className="ff-legend-container memoryLegend">
260
+ <div
261
+ className={classNames('ff-legend-container ff-memory-legend', {
262
+ 'ff-side-legend':
263
+ legendPosition === 'left' || legendPosition === 'right',
264
+ })}
265
+ >
249
266
  {legendData.map((item, index) => (
250
267
  <React.Fragment key={index}>
251
268
  <div className="ff-legend-item">
@@ -261,7 +278,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
261
278
  >
262
279
  {item.labelValue} {item.unit}
263
280
  </Typography>
264
- <Typography className="ff-legend-key">{item.key}</Typography>
281
+ <Typography className="ff-legend-key" textAlign="center">
282
+ {item.key}
283
+ </Typography>
265
284
  </div>
266
285
  </React.Fragment>
267
286
  ))}
@@ -271,7 +290,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
271
290
  case 'tableLegend':
272
291
  return (
273
292
  <div className="ff-legend-table-wrapper">
274
- <table className="ff-legend-table tableLegend">
293
+ <table className="ff-legend-table">
275
294
  <thead>
276
295
  <tr>
277
296
  <th className="ff-table-header">Name</th>
@@ -362,7 +381,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
362
381
  className={classNames('ff-dashboard-donut-chart-section', {
363
382
  'ff-dashboard-donut-chart-section-table-legend':
364
383
  legendType === 'tableLegend',
384
+ 'legend-position-bottom': legendPosition === 'bottom',
385
+ 'legend-position-left': legendPosition === 'left',
365
386
  })}
387
+ style={{ gap: `${legendGap}px` }}
366
388
  >
367
389
  <div className="ff-dashboard-donut-chart-svg-container">
368
390
  <svg
@@ -383,7 +405,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
383
405
 
384
406
  return renderArc(status, endAngle, i);
385
407
  })}
386
-
387
408
  {showOnlyLabel ? (
388
409
  <text
389
410
  x="0"
@@ -465,7 +486,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
465
486
  )}
466
487
  </g>
467
488
  </svg>
468
-
469
489
  {legendType === 'tableLegend' && (
470
490
  <div>
471
491
  <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
@@ -474,7 +494,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
474
494
  )}
475
495
  {showTooltip && renderTooltip()}
476
496
  </div>
477
- {isLegendDetails && renderLegend(nonZeroValues, legendType)}
497
+ {isLegendDetails && renderLegend(chartValues, legendType, legendPosition)}
478
498
  </div>
479
499
  );
480
500
  };
@@ -47,4 +47,6 @@ export type DashboardDonutChartProps = {
47
47
  showUnit?: boolean;
48
48
  labelFontSize?: number;
49
49
  subLabelFontSize?: number;
50
+ legendPosition? : 'bottom' | 'right' | 'left';
51
+ legendGap?: number;
50
52
  };
@@ -129,6 +129,9 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
129
129
  fill="none"
130
130
  stroke={backgroundArcColor}
131
131
  strokeWidth={lineWidth}
132
+ onMouseEnter={handleMouseEnter}
133
+ onMouseLeave={handleMouseLeave}
134
+ onMouseMove={handleMouseMove}
132
135
  />
133
136
  {/* Status Arc */}
134
137
  <path
@@ -8,14 +8,23 @@
8
8
  align-items: center;
9
9
  }
10
10
  .ff-line-chart-text {
11
- width: 890px;
12
11
  display: flex;
12
+ justify-content: flex-start;
13
+ align-items: center;
13
14
  .smooth-dot {
14
- transition:
15
- cx 0.2s ease,
16
- cy 0.2s ease;
15
+ transition: cx 0.2s ease, cy 0.2s ease;
17
16
  }
18
17
  }
18
+ .ff-line-chart-yAxisLabel {
19
+ display: flex;
20
+ white-space: nowrap;
21
+ transform: rotate(270deg) translateX(60px);
22
+ transform-origin: right center;
23
+ }
24
+
25
+ .ff-line-chart-svg {
26
+ width: inherit;
27
+ }
19
28
 
20
29
  .ff-line-chart-text1 {
21
30
  transform-origin: center;