pixel-react 1.6.0 → 1.6.1
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/AppHeader.d.ts +1 -0
- package/lib/components/AppHeader/types.d.ts +18 -6
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MachineInputField/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
- package/lib/components/PopUpModal/types.d.ts +14 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
- package/lib/components/TableTree/data.d.ts +36 -2
- package/lib/components/TableTree/types.d.ts +2 -3
- package/lib/index.d.ts +55 -16
- package/lib/index.esm.js +918 -553
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +918 -552
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +5 -14
- package/src/assets/Themes/DarkTheme.scss +5 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/arrow_up.svg +1 -1
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/assets/styles/_fonts.scss +4 -2
- package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
- package/src/components/AppHeader/AppHeader.tsx +158 -139
- package/src/components/AppHeader/types.ts +19 -6
- package/src/components/Charts/BarChart/BarChart.scss +34 -34
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
- package/src/components/Charts/BarChart/BarChart.tsx +79 -55
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
- package/src/components/Charts/LineChart/LineChart.scss +13 -4
- package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
- package/src/components/Charts/LineChart/LineChart.tsx +143 -131
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
- package/src/components/Charts/PieChart/PieChart.scss +5 -3
- package/src/components/Charts/PieChart/PieChart.tsx +1 -2
- package/src/components/DatePicker/DatePicker.scss +15 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
- package/src/components/Icon/Icons.scss +1 -1
- package/src/components/MachineInputField/MachineInputField.scss +15 -2
- package/src/components/MachineInputField/MachineInputField.tsx +17 -3
- package/src/components/MachineInputField/types.ts +1 -1
- package/src/components/PopUpModal/PopUpModal.scss +36 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
- package/src/components/PopUpModal/PopUpModal.tsx +85 -0
- package/src/components/PopUpModal/types.ts +14 -0
- package/src/components/RadioGroup/RadioGroup.scss +7 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
- package/src/components/RadioGroup/RadioGroup.tsx +16 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
- package/src/components/Select/Select.tsx +3 -4
- package/src/components/Select/components/Dropdown.tsx +34 -34
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/types.ts +18 -3
- package/src/components/TableTree/TableTree.stories.tsx +145 -98
- package/src/components/TableTree/TableTree.tsx +49 -14
- package/src/components/TableTree/data.ts +32 -391
- package/src/components/TableTree/types.ts +2 -3
- package/src/index.ts +3 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /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
|
-
|
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
|
-
|
3
|
+
position: relative;
|
4
4
|
display: flex;
|
5
5
|
flex-direction: column;
|
6
6
|
align-items: center;
|
7
|
-
position: relative;
|
8
7
|
|
9
|
-
.ff-
|
10
|
-
|
8
|
+
.ff-legend-container {
|
9
|
+
width: 100%;
|
11
10
|
display: flex;
|
12
|
-
justify-content:
|
13
|
-
|
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 .
|
52
|
+
@extend .fontSm;
|
30
53
|
font-weight: 400;
|
31
|
-
color: var(--
|
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(--
|
37
|
-
color: var(--
|
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 .
|
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:
|
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:
|
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
|
-
|
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
|
54
|
-
|
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
|
-
|
131
|
-
className="ff-
|
132
|
-
|
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={
|
242
|
+
x1={60}
|
220
243
|
y1={height + topPadding}
|
221
|
-
x2={chartWidth
|
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 -
|
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:
|
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
|
-
|
40
|
-
|
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
|
-
&.
|
51
|
-
grid-template-columns: repeat(2,
|
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
|
-
&.
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
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={
|
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
|
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
|
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
|
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">
|
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
|
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(
|
497
|
+
{isLegendDetails && renderLegend(chartValues, legendType, legendPosition)}
|
478
498
|
</div>
|
479
499
|
);
|
480
500
|
};
|
@@ -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;
|