pixel-react 1.6.7 → 1.6.8

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 (73) hide show
  1. package/lib/components/AppHeader/types.d.ts +2 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
  4. package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
  5. package/lib/components/FileDropzone/types.d.ts +61 -0
  6. package/lib/components/MenuOption/types.d.ts +3 -2
  7. package/lib/components/Search/Search.d.ts +1 -1
  8. package/lib/components/Search/types.d.ts +4 -0
  9. package/lib/components/Table/Types.d.ts +1 -1
  10. package/lib/components/Tabs/types.d.ts +1 -0
  11. package/lib/index.d.ts +95 -23
  12. package/lib/index.esm.js +513 -294
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +514 -293
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/FormatString/FormatString.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
  20. package/src/assets/Themes/BaseTheme.scss +5 -3
  21. package/src/assets/Themes/DarkTheme.scss +5 -3
  22. package/src/assets/icons/window_maximize.svg +1 -2
  23. package/src/assets/icons/window_restore.svg +4 -0
  24. package/src/components/AppHeader/AppHeader.scss +33 -0
  25. package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
  26. package/src/components/AppHeader/AppHeader.tsx +111 -112
  27. package/src/components/AppHeader/types.ts +2 -0
  28. package/src/components/Charts/BarChart/BarChart.scss +4 -1
  29. package/src/components/Charts/BarChart/BarChart.tsx +23 -9
  30. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
  31. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
  32. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
  33. package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
  34. package/src/components/Charts/LineChart/LineChart.scss +13 -9
  35. package/src/components/Charts/LineChart/LineChart.tsx +6 -2
  36. package/src/components/DatePicker/DatePicker.scss +11 -0
  37. package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
  38. package/src/components/DatePicker/DatePicker.tsx +73 -22
  39. package/src/components/FileDropzone/Dropzone.tsx +76 -28
  40. package/src/components/FileDropzone/FileDropzone.scss +30 -2
  41. package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
  42. package/src/components/FileDropzone/FileDropzone.tsx +46 -13
  43. package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
  44. package/src/components/FileDropzone/types.ts +73 -0
  45. package/src/components/Icon/iconList.ts +2 -0
  46. package/src/components/Input/Input.scss +137 -125
  47. package/src/components/Input/Input.tsx +69 -63
  48. package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
  49. package/src/components/InputWithDropdown/types.ts +3 -3
  50. package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
  51. package/src/components/MenuOption/MenuOption.tsx +1 -1
  52. package/src/components/MenuOption/types.ts +4 -2
  53. package/src/components/ModulesChip/ModuleChip.scss +21 -8
  54. package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
  55. package/src/components/ModulesChip/ModuleChip.tsx +6 -9
  56. package/src/components/MultiSelect/Dropdown.tsx +12 -5
  57. package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
  58. package/src/components/MultiSelect/MultiSelect.tsx +10 -9
  59. package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
  60. package/src/components/Search/Search.stories.tsx +28 -9
  61. package/src/components/Search/Search.tsx +32 -29
  62. package/src/components/Search/types.ts +4 -0
  63. package/src/components/Table/Table.scss +6 -5
  64. package/src/components/Table/Types.ts +1 -1
  65. package/src/components/Tabs/Tabs.scss +58 -4
  66. package/src/components/Tabs/Tabs.stories.tsx +31 -12
  67. package/src/components/Tabs/Tabs.tsx +27 -18
  68. package/src/components/Tabs/types.ts +1 -1
  69. package/src/components/TextArea/Textarea.stories.tsx +1 -1
  70. package/src/hooks/useFileDropzone.tsx +2 -1
  71. package/src/index.ts +4 -0
  72. package/src/utils/FormatString/FormatString.stories.tsx +58 -0
  73. package/src/utils/FormatString/FormatString.tsx +41 -0
@@ -1,8 +1,4 @@
1
- import {
2
- appHeaderHiddenMenuItemProps,
3
- AppHeaderProps,
4
- appHeaderSubMenuItemProps,
5
- } from './types';
1
+ import { AppHeaderProps } from './types';
6
2
  import Icon from '../Icon';
7
3
  import './AppHeader.scss';
8
4
  import classNames from 'classnames';
@@ -11,14 +7,16 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
11
7
  import AllProjectsDropdown from '../AllProjectsDropdown';
12
8
  import MenuOption from '../MenuOption';
13
9
  import Tooltip from '../Tooltip';
14
- import React, { useState } from 'react';
10
+ import React from 'react';
15
11
 
16
12
  const AppHeader: React.FC<AppHeaderProps> = ({
17
13
  logoIconName = 'fireflink_icon',
14
+ width,
18
15
  leftContent,
19
16
  rightContent,
20
17
  projectsList,
21
18
  appHeaderMenuItems,
19
+ appHeaderHiddenMenuItems,
22
20
  selectedMenu,
23
21
  selectedSubMenu,
24
22
  selectedQuickMenu,
@@ -30,15 +28,6 @@ const AppHeader: React.FC<AppHeaderProps> = ({
30
28
  onProjectDropdownLabelClick = () => {},
31
29
  onMoreMenuOptionClick = () => {},
32
30
  }) => {
33
- const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState<
34
- appHeaderHiddenMenuItemProps[]
35
- >([]);
36
- const onSubMenuClickHandler = (subMenu: appHeaderSubMenuItemProps) => {
37
- setAppHeaderHiddenMenuItems(
38
- subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []
39
- );
40
- onSubMenuClick(subMenu);
41
- };
42
31
  return (
43
32
  <div className="ff-app-header-main">
44
33
  <div className="ff-app-header">
@@ -51,7 +40,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
51
40
  )}
52
41
  </div>
53
42
  {!checkEmpty(appHeaderMenuItems) && (
54
- <div className="ff-app-header-nav-bar">
43
+ <div className="ff-app-header-nav-bar" style={{ width: width }}>
55
44
  {projectsList && !checkEmpty(projectsList) && (
56
45
  <div>
57
46
  {
@@ -68,106 +57,116 @@ const AppHeader: React.FC<AppHeaderProps> = ({
68
57
  <div className="ff-app-header-nav-bar-items fontSm">
69
58
  {appHeaderMenuItems.map((menuItem) => {
70
59
  return (
71
- <div
72
- className={classNames('ff-app-header-nav-bar-item', {
73
- ['ff-app-header-nav-bar-item--selected']:
74
- menuItem.label === selectedMenu,
75
- })}
76
- key={menuItem.label}
77
- >
78
- <Typography
79
- as="div"
80
- className="ff-app-header-nav-bar-item-label"
81
- lineHeight="18px"
82
- onClick={() => onMenuClick(menuItem)}
60
+ !appHeaderHiddenMenuItems?.find(
61
+ (menu) => menu.label === menuItem.label
62
+ ) && (
63
+ <div
64
+ className={classNames('ff-app-header-nav-bar-item', {
65
+ ['ff-app-header-nav-bar-item--selected']:
66
+ menuItem.label === selectedMenu,
67
+ })}
68
+ key={menuItem.label}
83
69
  >
84
- {menuItem.label}
85
- </Typography>
86
- {menuItem.label === selectedMenu &&
87
- menuItem?.subMenuItems && (
88
- <>
89
- {menuItem.subMenuItems.map((subMenuItem) => {
90
- return (
91
- <div
92
- key={subMenuItem.label}
93
- className="ff-app-header-submenu-container"
94
- >
95
- <Typography
96
- as="div"
97
- className={classNames(
98
- 'ff-app-header-nav-bar-submenu-item',
99
- {
100
- ['ff-app-header-nav-bar-submenu-item--selected']:
101
- subMenuItem.label === selectedSubMenu,
102
- }
103
- )}
104
- lineHeight="18px"
105
- onClick={() =>
106
- onSubMenuClickHandler(subMenuItem)
107
- }
70
+ <Typography
71
+ as="div"
72
+ className="ff-app-header-nav-bar-item-label"
73
+ lineHeight="18px"
74
+ onClick={() => onMenuClick(menuItem)}
75
+ >
76
+ {menuItem.label}
77
+ </Typography>
78
+ {menuItem.label === selectedMenu &&
79
+ menuItem?.subMenuItems && (
80
+ <>
81
+ {menuItem.subMenuItems.map((subMenuItem) => {
82
+ return (
83
+ <div
84
+ key={subMenuItem.label}
85
+ className="ff-app-header-submenu-container"
108
86
  >
109
- {subMenuItem.label}
110
- </Typography>
111
- </div>
112
- );
113
- })}
114
- {menuItem.subMenuItems.map((subMenuItem) => {
115
- return (
116
- <div
117
- key={subMenuItem.label}
118
- className="ff-app-header-submenu-container"
119
- >
120
- {subMenuItem.label === selectedSubMenu &&
121
- subMenuItem?.quickMenuItems && (
122
- <div className="ff-app-header-quickmenu-container">
123
- <div>
124
- <Icon name="vertical_separator" />
125
- </div>
126
- {subMenuItem.quickMenuItems.map(
127
- (quickMenuItem) => {
128
- return (
129
- <>
130
- <div
131
- key={quickMenuItem.iconName}
132
- onClick={() =>
133
- onQuickMenuClick(
134
- quickMenuItem
135
- )
136
- }
137
- className={classNames(
138
- 'ff-app-header-nav-bar-quickmenu-item',
139
- {
140
- ['ff-app-header-nav-bar-quickmenu-item--selected']:
141
- quickMenuItem.iconName ===
142
- selectedQuickMenu,
87
+ <Typography
88
+ as="div"
89
+ className={classNames(
90
+ 'ff-app-header-nav-bar-submenu-item',
91
+ {
92
+ ['ff-app-header-nav-bar-submenu-item--selected']:
93
+ subMenuItem.label === selectedSubMenu,
94
+ }
95
+ )}
96
+ lineHeight="18px"
97
+ onClick={() => onSubMenuClick(subMenuItem)}
98
+ >
99
+ {subMenuItem.label}
100
+ </Typography>
101
+ </div>
102
+ );
103
+ })}
104
+ {menuItem.subMenuItems.map((subMenuItem) => {
105
+ return (
106
+ <div
107
+ key={subMenuItem.label}
108
+ className="ff-app-header-submenu-container"
109
+ >
110
+ {subMenuItem.label === selectedSubMenu &&
111
+ subMenuItem?.quickMenuItems && (
112
+ <div
113
+ // className="ff-app-header-quickmenu-container"
114
+ className={classNames(
115
+ 'ff-app-header-quickmenu-container',
116
+ subMenuItem.quickMenuItems?.length
117
+ ? 'visible'
118
+ : ''
119
+ )}
120
+ >
121
+ <div>
122
+ <Icon name="vertical_separator" />
123
+ </div>
124
+ {subMenuItem.quickMenuItems.map(
125
+ (quickMenuItem) => {
126
+ return (
127
+ <>
128
+ <div
129
+ key={quickMenuItem.iconName}
130
+ onClick={() =>
131
+ onQuickMenuClick(
132
+ quickMenuItem
133
+ )
143
134
  }
144
- )}
145
- >
146
- <Tooltip
147
- title={quickMenuItem?.label}
148
- >
149
- <Icon
150
- name={
151
- quickMenuItem.iconName
135
+ className={classNames(
136
+ 'ff-app-header-nav-bar-quickmenu-item',
137
+ {
138
+ ['ff-app-header-nav-bar-quickmenu-item--selected']:
139
+ quickMenuItem.iconName ===
140
+ selectedQuickMenu,
152
141
  }
153
- height={16}
154
- width={16}
155
- hoverEffect={true}
156
- />
157
- </Tooltip>
158
- </div>
159
- </>
160
- );
161
- }
162
- )}
163
- </div>
164
- )}
165
- </div>
166
- );
167
- })}
168
- </>
169
- )}
170
- </div>
142
+ )}
143
+ >
144
+ <Tooltip
145
+ title={quickMenuItem?.label}
146
+ >
147
+ <Icon
148
+ name={
149
+ quickMenuItem.iconName
150
+ }
151
+ height={16}
152
+ width={16}
153
+ hoverEffect={true}
154
+ />
155
+ </Tooltip>
156
+ </div>
157
+ </>
158
+ );
159
+ }
160
+ )}
161
+ </div>
162
+ )}
163
+ </div>
164
+ );
165
+ })}
166
+ </>
167
+ )}
168
+ </div>
169
+ )
171
170
  );
172
171
  })}
173
172
  </div>
@@ -1,11 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { optionsType } from '../AllProjectsDropdown/types';
3
3
  export interface AppHeaderProps {
4
+ width?: string;
4
5
  logoIconName: string;
5
6
  leftContent?: ReactNode;
6
7
  rightContent?: ReactNode;
7
8
  projectsList?: optionsType[];
8
9
  appHeaderMenuItems: appHeaderMenuItemProps[];
10
+ appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
9
11
  selectedMenu: string;
10
12
  selectedSubMenu?: string;
11
13
  selectedQuickMenu?: string;
@@ -5,6 +5,10 @@
5
5
  flex-direction: column;
6
6
  align-items: center;
7
7
 
8
+ svg {
9
+ display: block;
10
+ }
11
+
8
12
  .ff-legend-container {
9
13
  width: 100%;
10
14
  display: flex;
@@ -15,7 +19,6 @@
15
19
  margin-top: 10px;
16
20
  display: flex;
17
21
  justify-content: flex-end;
18
- gap: 10px;
19
22
 
20
23
  .ff-bar-chart-legend-item {
21
24
  display: flex;
@@ -21,6 +21,7 @@ type BarChartProps = {
21
21
  iconSize?: number;
22
22
  backgroundColor?: string;
23
23
  legendPosition?: 'top' | 'bottom';
24
+ legendGap?: number;
24
25
  };
25
26
 
26
27
  const BarChart: React.FC<BarChartProps> = ({
@@ -39,6 +40,7 @@ const BarChart: React.FC<BarChartProps> = ({
39
40
  icons = [],
40
41
  iconSize,
41
42
  legendPosition = 'bottom',
43
+ legendGap = 5,
42
44
  }) => {
43
45
  const [tooltip, setTooltip] = useState<{
44
46
  visible: boolean;
@@ -52,7 +54,7 @@ const BarChart: React.FC<BarChartProps> = ({
52
54
  const topPadding = 40;
53
55
  const leftPadding = 40;
54
56
  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
55
- const chartWidth = totalBarWidth + leftPadding * 2;
57
+ const chartWidth = totalBarWidth + leftPadding * 2 + 10;
56
58
 
57
59
  const renderGradients = (gradients: string[][]) => {
58
60
  return gradients.map((gradient, index) => (
@@ -119,13 +121,13 @@ const BarChart: React.FC<BarChartProps> = ({
119
121
  };
120
122
 
121
123
  return (
122
- <div
123
- className="ff-bar-chart-container"
124
- style={{ width: chartWidth, height }}
125
- >
124
+ <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
126
125
  {legend && legendPosition === 'top' && (
127
126
  <div className="ff-legend-container">
128
- <div className="ff-bar-chart-legend">
127
+ <div
128
+ className="ff-bar-chart-legend"
129
+ style={{ gap: `${legendGap}px` }}
130
+ >
129
131
  {data.map((item, index) => (
130
132
  <div key={item.label} className="ff-bar-chart-legend-item">
131
133
  {icons[index] && typeof icons[index] === 'string' ? (
@@ -158,7 +160,16 @@ const BarChart: React.FC<BarChartProps> = ({
158
160
  )}
159
161
 
160
162
  <div>
161
- <svg width={chartWidth} height={height + topPadding + 40}>
163
+ <svg
164
+ width={chartWidth}
165
+ height={
166
+ height +
167
+ topPadding +
168
+ 5 +
169
+ (showXAxisLabels ? 20 : 0) +
170
+ (xAxisLabel ? 20 : 0)
171
+ }
172
+ >
162
173
  {Array.isArray(colors) &&
163
174
  colors.length > 0 &&
164
175
  renderGradients(colors)}
@@ -250,7 +261,7 @@ const BarChart: React.FC<BarChartProps> = ({
250
261
  {xAxisLabel && (
251
262
  <text
252
263
  x={chartWidth / 2}
253
- y={height + topPadding + 40}
264
+ y={height + topPadding + (showXAxisLabels ? 40 : 20)}
254
265
  fontSize="12"
255
266
  fill="black"
256
267
  textAnchor="middle"
@@ -278,7 +289,10 @@ const BarChart: React.FC<BarChartProps> = ({
278
289
 
279
290
  {legend && legendPosition === 'bottom' && (
280
291
  <div className="ff-legend-container">
281
- <div className="ff-bar-chart-legend">
292
+ <div
293
+ className="ff-bar-chart-legend"
294
+ style={{ gap: `${legendGap}px` }}
295
+ >
282
296
  {data.map((item, index) => (
283
297
  <div key={item.label} className="ff-bar-chart-legend-item">
284
298
  {icons[index] && typeof icons[index] === 'string' ? (
@@ -19,6 +19,7 @@
19
19
  .ff-dashboard-donut-chart-svg-container {
20
20
  text-align: center;
21
21
  svg {
22
+ display: block;
22
23
  text:nth-of-type(1) {
23
24
  @extend .font2Xl;
24
25
  font-weight: 600;
@@ -41,13 +42,12 @@
41
42
 
42
43
  .ff-legend-container {
43
44
  display: grid;
44
- gap: 10px;
45
45
  grid-auto-rows: 1fr;
46
46
 
47
47
  &.ff-number-legend {
48
48
  grid-template-columns: repeat(3, 100px);
49
49
 
50
- &.ff-side-legend{
50
+ &.ff-side-legend {
51
51
  grid-template-columns: repeat(2, 100px);
52
52
  }
53
53
  .ff-legend-item {
@@ -84,7 +84,7 @@
84
84
  &.ff-memory-legend {
85
85
  grid-template-columns: repeat(3, 100px);
86
86
 
87
- &.ff-side-legend{
87
+ &.ff-side-legend {
88
88
  grid-template-columns: repeat(2, 100px);
89
89
  }
90
90
 
@@ -120,6 +120,10 @@
120
120
 
121
121
  &:last-child {
122
122
  text-align: right;
123
+ padding-right: 10px;
124
+ }
125
+ &:nth-last-child(2) {
126
+ width: 58px;
123
127
  }
124
128
  }
125
129
 
@@ -141,6 +145,9 @@
141
145
  padding: 0.5rem;
142
146
  @extend .fontXs;
143
147
  color: var(--input-hover-border-color);
148
+ &:last-child {
149
+ padding-right: 22px;
150
+ }
144
151
  }
145
152
 
146
153
  .ff-legend-name {
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from '@storybook/react/*';
1
+ import { Meta, StoryObj } from '@storybook/react';
2
2
  import DashboardDonutChart from './DashboardDonutChart';
3
3
 
4
4
  const meta: Meta<typeof DashboardDonutChart> = {
@@ -17,6 +17,7 @@ export const Default: Story = {
17
17
  args: {
18
18
  radius: 70,
19
19
  lineWidth: 15,
20
+ tableWidth: 500,
20
21
  legendDetailsType: 'Scripts',
21
22
  isLegendDetails: true,
22
23
  statusValues: [
@@ -39,6 +39,7 @@ const colorMapping = [
39
39
 
40
40
  const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
41
41
  radius = 60,
42
+ tableWidth,
42
43
  lineWidth = 15,
43
44
  statusValues = [],
44
45
  gapAngle = 0,
@@ -51,7 +52,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
51
52
  labelFontSize = 24,
52
53
  subLabelFontSize = 14,
53
54
  legendPosition = 'bottom',
54
- legendGap = 0,
55
+ chartGap = 0,
56
+ legendGap = 5,
57
+ legendValueFontSize = 22,
58
+ legendKeyFontSize = 12,
59
+ labelYoffSet = -5,
60
+ subLabelYoffSet = 20,
55
61
  }) => {
56
62
  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
57
63
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -138,7 +144,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
138
144
 
139
145
  const SVG_PADDING = 3;
140
146
  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
141
- const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
147
+ const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
142
148
 
143
149
  const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
144
150
  const isFullCircle = nonZeroValues.length === 1;
@@ -182,7 +188,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
182
188
  >
183
189
  <Typography fontSize={12}>
184
190
  {hoveredItemIndex !== null &&
185
- `${nonZeroValues[hoveredItemIndex]?.key} : `}
191
+ `${nonZeroValues[hoveredItemIndex]?.key}:`}
186
192
  </Typography>
187
193
  <Typography fontSize={12}>
188
194
  {hoveredItemIndex !== null &&
@@ -207,11 +213,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
207
213
  'ff-side-legend':
208
214
  legendPosition === 'left' || legendPosition === 'right',
209
215
  })}
216
+ style={{ gap: `${legendGap}px` }}
210
217
  >
211
218
  {legendData.map((item, index) => (
212
219
  <div className="ff-legend-item" key={index}>
213
220
  <Typography
214
- fontSize={22}
221
+ fontSize={legendValueFontSize}
215
222
  fontWeight="semi-bold"
216
223
  className="ff-legend-value"
217
224
  color={
@@ -223,7 +230,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
223
230
  {item.value} {showUnit && unit?.toUpperCase()}
224
231
  </Typography>
225
232
  <Typography
226
- fontSize={12}
233
+ fontSize={legendKeyFontSize}
227
234
  className="ff-legend-key"
228
235
  textAlign="center"
229
236
  >
@@ -236,7 +243,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
236
243
 
237
244
  case 'pillLegend':
238
245
  return (
239
- <div className="ff-legend-container ff-pill-legend ">
246
+ <div
247
+ className="ff-legend-container ff-pill-legend"
248
+ style={{ gap: `${legendGap}px` }}
249
+ >
240
250
  {legendData.map((item, index) => (
241
251
  <div className="ff-legend-item" key={index}>
242
252
  <span
@@ -249,7 +259,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
249
259
  >
250
260
  <Typography fontSize={10}>{item.value}</Typography>
251
261
  </span>
252
- <Typography className="ff-legend-key">{item.key}</Typography>
262
+ <Typography
263
+ fontSize={legendKeyFontSize}
264
+ className="ff-legend-key"
265
+ >
266
+ {item.key}
267
+ </Typography>
253
268
  </div>
254
269
  ))}
255
270
  </div>
@@ -262,13 +277,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
262
277
  'ff-side-legend':
263
278
  legendPosition === 'left' || legendPosition === 'right',
264
279
  })}
280
+ style={{ gap: `${legendGap}px` }}
265
281
  >
266
282
  {legendData.map((item, index) => (
267
283
  <React.Fragment key={index}>
268
284
  <div className="ff-legend-item">
269
285
  <Typography
270
- fontSize={22}
271
- fontWeight="medium"
286
+ fontSize={legendValueFontSize}
287
+ fontWeight="semi-bold"
272
288
  className="ff-legend-value"
273
289
  color={
274
290
  item.color
@@ -276,9 +292,16 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
276
292
  : colorMapping[index % colorMapping.length]
277
293
  }
278
294
  >
279
- {item.labelValue} {item.unit}
295
+ {Number.isInteger(item.labelValue)
296
+ ? item.labelValue
297
+ : item.labelValue?.toFixed(2)}{' '}
298
+ {item.unit}
280
299
  </Typography>
281
- <Typography className="ff-legend-key" textAlign="center">
300
+ <Typography
301
+ fontSize={legendKeyFontSize}
302
+ className="ff-legend-key"
303
+ textAlign="center"
304
+ >
282
305
  {item.key}
283
306
  </Typography>
284
307
  </div>
@@ -293,8 +316,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
293
316
  <table className="ff-legend-table">
294
317
  <thead>
295
318
  <tr>
296
- <th className="ff-table-header">Name</th>
297
- <th className="ff-table-header">%</th>
319
+ <th className="ff-table-header" style={{ width: tableWidth }}>
320
+ Name
321
+ </th>
322
+ <th className="ff-table-header ">%</th>
298
323
  <th className="ff-table-header">Count</th>
299
324
  </tr>
300
325
  </thead>
@@ -384,7 +409,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
384
409
  'legend-position-bottom': legendPosition === 'bottom',
385
410
  'legend-position-left': legendPosition === 'left',
386
411
  })}
387
- style={{ gap: `${legendGap}px` }}
412
+ style={{ gap: `${chartGap}px` }}
388
413
  >
389
414
  <div className="ff-dashboard-donut-chart-svg-container">
390
415
  <svg
@@ -429,11 +454,13 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
429
454
  ))}
430
455
  </text>
431
456
  ) : (
432
- (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
457
+ (legendType !== 'tableLegend' ||
458
+ hoveredItemIndex !== null ||
459
+ hoveredItemIndex == null) && (
433
460
  <>
434
461
  <text
435
462
  x="0"
436
- y="5"
463
+ y={labelYoffSet}
437
464
  textAnchor="middle"
438
465
  fill={colorMapping[3]}
439
466
  style={{ fontSize: `${labelFontSize}px` }}
@@ -454,7 +481,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
454
481
  LABEL_MAX_WIDTH,
455
482
  labelFontSize
456
483
  ).map((line, index) => (
457
- <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
484
+ <tspan
485
+ x="0"
486
+ dy={index === 0 ? 0 : labelFontSize}
487
+ key={index}
488
+ >
458
489
  {line}
459
490
  </tspan>
460
491
  ))}
@@ -462,7 +493,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
462
493
 
463
494
  <text
464
495
  x="0"
465
- y="26"
496
+ y={subLabelYoffSet}
466
497
  textAnchor="middle"
467
498
  fill="var(--text-color)"
468
499
  style={{ fontSize: `${subLabelFontSize}px` }}
@@ -476,7 +507,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
476
507
  LABEL_MAX_WIDTH,
477
508
  subLabelFontSize
478
509
  ).map((line, index) => (
479
- <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
510
+ <tspan
511
+ x="0"
512
+ dy={index === 0 ? 0 : subLabelFontSize}
513
+ key={index}
514
+ >
480
515
  {line}
481
516
  </tspan>
482
517
  ))}
@@ -486,12 +521,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
486
521
  )}
487
522
  </g>
488
523
  </svg>
489
- {legendType === 'tableLegend' && (
490
- <div>
491
- <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
492
- <Typography> {`Total ${legendDetailsType} - ${total}`} </Typography>
493
- </div>
494
- )}
495
524
  {showTooltip && renderTooltip()}
496
525
  </div>
497
526
  {isLegendDetails && renderLegend(chartValues, legendType, legendPosition)}
@@ -47,6 +47,12 @@ export type DashboardDonutChartProps = {
47
47
  showUnit?: boolean;
48
48
  labelFontSize?: number;
49
49
  subLabelFontSize?: number;
50
- legendPosition? : 'bottom' | 'right' | 'left';
50
+ legendPosition?: 'bottom' | 'right' | 'left';
51
+ chartGap?: number;
51
52
  legendGap?: number;
53
+ tableWidth?: number;
54
+ legendValueFontSize?: number;
55
+ legendKeyFontSize?: number;
56
+ labelYoffSet?: number;
57
+ subLabelYoffSet?: number;
52
58
  };