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.
- package/lib/components/AppHeader/types.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
- package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
- package/lib/components/FileDropzone/types.d.ts +61 -0
- package/lib/components/MenuOption/types.d.ts +3 -2
- package/lib/components/Search/Search.d.ts +1 -1
- package/lib/components/Search/types.d.ts +4 -0
- package/lib/components/Table/Types.d.ts +1 -1
- package/lib/components/Tabs/types.d.ts +1 -0
- package/lib/index.d.ts +95 -23
- package/lib/index.esm.js +513 -294
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +514 -293
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/FormatString/FormatString.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
- package/src/assets/Themes/BaseTheme.scss +5 -3
- package/src/assets/Themes/DarkTheme.scss +5 -3
- package/src/assets/icons/window_maximize.svg +1 -2
- package/src/assets/icons/window_restore.svg +4 -0
- package/src/components/AppHeader/AppHeader.scss +33 -0
- package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
- package/src/components/AppHeader/AppHeader.tsx +111 -112
- package/src/components/AppHeader/types.ts +2 -0
- package/src/components/Charts/BarChart/BarChart.scss +4 -1
- package/src/components/Charts/BarChart/BarChart.tsx +23 -9
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
- package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
- package/src/components/Charts/LineChart/LineChart.scss +13 -9
- package/src/components/Charts/LineChart/LineChart.tsx +6 -2
- package/src/components/DatePicker/DatePicker.scss +11 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
- package/src/components/DatePicker/DatePicker.tsx +73 -22
- package/src/components/FileDropzone/Dropzone.tsx +76 -28
- package/src/components/FileDropzone/FileDropzone.scss +30 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
- package/src/components/FileDropzone/FileDropzone.tsx +46 -13
- package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
- package/src/components/FileDropzone/types.ts +73 -0
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/Input/Input.scss +137 -125
- package/src/components/Input/Input.tsx +69 -63
- package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
- package/src/components/InputWithDropdown/types.ts +3 -3
- package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
- package/src/components/MenuOption/MenuOption.tsx +1 -1
- package/src/components/MenuOption/types.ts +4 -2
- package/src/components/ModulesChip/ModuleChip.scss +21 -8
- package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
- package/src/components/ModulesChip/ModuleChip.tsx +6 -9
- package/src/components/MultiSelect/Dropdown.tsx +12 -5
- package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
- package/src/components/MultiSelect/MultiSelect.tsx +10 -9
- package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
- package/src/components/Search/Search.stories.tsx +28 -9
- package/src/components/Search/Search.tsx +32 -29
- package/src/components/Search/types.ts +4 -0
- package/src/components/Table/Table.scss +6 -5
- package/src/components/Table/Types.ts +1 -1
- package/src/components/Tabs/Tabs.scss +58 -4
- package/src/components/Tabs/Tabs.stories.tsx +31 -12
- package/src/components/Tabs/Tabs.tsx +27 -18
- package/src/components/Tabs/types.ts +1 -1
- package/src/components/TextArea/Textarea.stories.tsx +1 -1
- package/src/hooks/useFileDropzone.tsx +2 -1
- package/src/index.ts +4 -0
- package/src/utils/FormatString/FormatString.stories.tsx +58 -0
- 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
|
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
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
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
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
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
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
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
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
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
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
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
|
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
|
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
|
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
|
-
|
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={
|
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={
|
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
|
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
|
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={
|
271
|
-
fontWeight="
|
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
|
295
|
+
{Number.isInteger(item.labelValue)
|
296
|
+
? item.labelValue
|
297
|
+
: item.labelValue?.toFixed(2)}{' '}
|
298
|
+
{item.unit}
|
280
299
|
</Typography>
|
281
|
-
<Typography
|
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">
|
297
|
-
|
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: `${
|
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' ||
|
457
|
+
(legendType !== 'tableLegend' ||
|
458
|
+
hoveredItemIndex !== null ||
|
459
|
+
hoveredItemIndex == null) && (
|
433
460
|
<>
|
434
461
|
<text
|
435
462
|
x="0"
|
436
|
-
y=
|
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
|
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=
|
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
|
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
|
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
|
};
|