pixel-react 1.9.9 → 1.10.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/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -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/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/types.d.ts +10 -2
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AppHeader/types.d.ts +1 -1
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/IconRadialChart/types.d.ts +4 -3
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -2
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.d.ts +1 -1
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/StatusCard/types.d.ts +1 -1
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +23 -10
- package/lib/index.esm.js +795 -577
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +795 -577
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +32 -11
- package/src/assets/Themes/BlueTheme.scss +3 -0
- package/src/assets/Themes/DarkTheme.scss +32 -13
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/close_defects_icon.svg +12 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defect_density_icon.svg +12 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/open_defects_icon.svg +12 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/quality_score_icon.svg +12 -0
- package/src/assets/icons/sause_lab_icon.svg +3 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/total_defects_status_icon.svg +13 -0
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Accordion/Accordion.stories.tsx +14 -4
- package/src/components/Accordion/Accordion.tsx +22 -11
- package/src/components/Accordion/types.ts +14 -6
- package/src/components/AppHeader/AppHeader.tsx +1 -1
- package/src/components/AppHeader/types.ts +1 -1
- package/src/components/Charts/BarChart/BarChart.scss +1 -0
- package/src/components/Charts/BarChart/BarChart.stories.tsx +91 -1
- package/src/components/Charts/BarChart/BarChart.tsx +91 -86
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +1 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +2 -1
- package/src/components/Charts/IconRadialChart/types.ts +4 -3
- package/src/components/Charts/LineChart/LineChart.stories.tsx +3 -2
- package/src/components/Charts/LineChart/LineChart.tsx +7 -3
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +1 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +53 -6
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +74 -34
- package/src/components/Charts/MultiRadialChart/types.ts +5 -4
- package/src/components/Checkbox/Checkbox.scss +4 -5
- package/src/components/Checkbox/Checkbox.stories.tsx +40 -10
- package/src/components/Icon/iconList.ts +14 -0
- package/src/components/StatusCard/StatusCard.scss +56 -93
- package/src/components/StatusCard/StatusCard.stories.tsx +77 -4
- package/src/components/StatusCard/StatusCard.tsx +89 -35
- package/src/components/StatusCard/types.ts +1 -1
- package/src/components/Table/Table.tsx +2 -2
- package/src/components/TextArea/Textarea.scss +6 -7
@@ -1,11 +1,14 @@
|
|
1
|
-
import React, { useState } from 'react';
|
1
|
+
import React, { useRef, useState } from 'react';
|
2
2
|
import './BarChart.scss';
|
3
3
|
import Typography from '../../Typography';
|
4
4
|
import Icon from '../../Icon';
|
5
5
|
import { truncateText } from '../../../utils/truncateText/truncateText';
|
6
6
|
|
7
7
|
type BarChartProps = {
|
8
|
-
data: {
|
8
|
+
data: {
|
9
|
+
label: string;
|
10
|
+
value: number;
|
11
|
+
}[];
|
9
12
|
barWidth: number;
|
10
13
|
height: number;
|
11
14
|
barGap?: number;
|
@@ -18,11 +21,13 @@ type BarChartProps = {
|
|
18
21
|
barBorderRadius?: number;
|
19
22
|
legend?: boolean;
|
20
23
|
showXAxisLabels?: boolean;
|
21
|
-
icons?: (string | React.ReactNode)[];
|
24
|
+
icons?: (string | React.ReactNode)[];
|
22
25
|
iconSize?: number;
|
23
26
|
backgroundColor?: string;
|
24
27
|
legendPosition?: 'top' | 'bottom';
|
25
28
|
legendGap?: number;
|
29
|
+
extendBarChartRightWidth?: number;
|
30
|
+
isYAxisValuePercentage?: boolean;
|
26
31
|
onSelectedBar?: (_label: string) => void;
|
27
32
|
};
|
28
33
|
|
@@ -44,42 +49,44 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
44
49
|
iconSize,
|
45
50
|
legendPosition = 'bottom',
|
46
51
|
legendGap = 5,
|
52
|
+
extendBarChartRightWidth = 0,
|
53
|
+
isYAxisValuePercentage = false,
|
47
54
|
onSelectedBar = (_label) => {},
|
48
55
|
}) => {
|
49
|
-
const
|
50
|
-
|
51
|
-
content: string;
|
52
|
-
x: number;
|
53
|
-
y: number;
|
54
|
-
borderColor: string;
|
55
|
-
}>({ visible: false, content: '', x: 0, y: 0, borderColor: 'transparent' });
|
56
|
-
|
56
|
+
const tooltipRef = useRef<HTMLDivElement | null>(null);
|
57
|
+
const [selectedBar, setSelectedBar] = useState<string | null>(null);
|
57
58
|
const maxValue = Math.max(...data.map((item) => item.value));
|
58
59
|
const topPadding = 40;
|
59
60
|
const leftPadding = 40;
|
60
61
|
const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
|
61
|
-
const chartWidth =
|
62
|
+
const chartWidth =
|
63
|
+
totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
|
62
64
|
|
63
65
|
const renderGradients = (gradients: string[][]) => {
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
66
|
+
const generateKey = Date.now();
|
67
|
+
return gradients.map((gradient, index) => {
|
68
|
+
return (
|
69
|
+
<defs key={`${generateKey}-${index}`}>
|
70
|
+
<linearGradient
|
71
|
+
id={`gradient-${index}`}
|
72
|
+
x1="0%"
|
73
|
+
y1="0%"
|
74
|
+
x2="0%"
|
75
|
+
y2="100%"
|
76
|
+
>
|
77
|
+
{gradient.map((color, i) => {
|
78
|
+
return (
|
79
|
+
<stop
|
80
|
+
key={`${generateKey}-${index}-${i}`}
|
81
|
+
offset={`${(i / (gradient.length - 1)) * 100}%`}
|
82
|
+
stopColor={color}
|
83
|
+
/>
|
84
|
+
);
|
85
|
+
})}
|
86
|
+
</linearGradient>
|
87
|
+
</defs>
|
88
|
+
);
|
89
|
+
});
|
83
90
|
};
|
84
91
|
|
85
92
|
const getFillColor = (index: number) =>
|
@@ -87,49 +94,45 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
87
94
|
? `url(#gradient-${index % colors.length})`
|
88
95
|
: 'grey';
|
89
96
|
|
90
|
-
const
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
color: string
|
99
|
-
) => {
|
100
|
-
setTooltip({
|
101
|
-
visible: true,
|
102
|
-
content: `${label}: ${value}`,
|
103
|
-
x: e.clientX,
|
104
|
-
y: e.clientY,
|
105
|
-
borderColor: color,
|
106
|
-
});
|
97
|
+
const handleMouseEnter = (label: string, value: number) => {
|
98
|
+
const tooltip = tooltipRef.current;
|
99
|
+
if (tooltip) {
|
100
|
+
tooltip.style.display = 'block';
|
101
|
+
tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${
|
102
|
+
isYAxisValuePercentage ? '%' : ''
|
103
|
+
}`;
|
104
|
+
}
|
107
105
|
};
|
108
106
|
|
109
107
|
const handleMouseMove = (e: React.MouseEvent) => {
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
108
|
+
const tooltip = tooltipRef.current;
|
109
|
+
if (tooltip) {
|
110
|
+
const rect = tooltip.parentElement?.getBoundingClientRect();
|
111
|
+
const xOffset = window.scrollX;
|
112
|
+
const yOffset = window.scrollY;
|
113
|
+
const tooltipX = e.clientX - (rect?.left || 0) + xOffset + 10;
|
114
|
+
const tooltipY = e.clientY - (rect?.top || 0) + yOffset + 10;
|
115
|
+
tooltip.style.left = `${tooltipX}px`;
|
116
|
+
tooltip.style.top = `${tooltipY}px`;
|
117
|
+
}
|
115
118
|
};
|
116
119
|
|
117
120
|
const handleMouseLeave = () => {
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
y: 0,
|
123
|
-
borderColor: 'transparent',
|
124
|
-
});
|
121
|
+
const tooltip = tooltipRef.current;
|
122
|
+
if (tooltip) {
|
123
|
+
tooltip.style.display = 'none';
|
124
|
+
}
|
125
125
|
};
|
126
126
|
|
127
127
|
const handleSelectLabel = (label: string) => {
|
128
|
+
setSelectedBar(label);
|
128
129
|
onSelectedBar(label);
|
129
130
|
};
|
130
131
|
|
131
132
|
return (
|
132
133
|
<div className="ff-bar-chart-container" style={{ width: chartWidth }}>
|
134
|
+
<div ref={tooltipRef} className="ff-bar-chart-tooltip" />
|
135
|
+
|
133
136
|
{legend && legendPosition === 'top' && (
|
134
137
|
<div className="ff-legend-container">
|
135
138
|
<div
|
@@ -194,7 +197,17 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
194
197
|
textAnchor="middle"
|
195
198
|
className="ff-bar-chart-labels"
|
196
199
|
>
|
197
|
-
{
|
200
|
+
{`${
|
201
|
+
isYAxisValuePercentage
|
202
|
+
? `${((i * maxValue) / yAxisDivisions)
|
203
|
+
.toFixed(0)
|
204
|
+
.toString()
|
205
|
+
.padStart(2, '0')}%`
|
206
|
+
: ((i * maxValue) / yAxisDivisions)
|
207
|
+
.toFixed(0)
|
208
|
+
.toString()
|
209
|
+
.padStart(2, '0')
|
210
|
+
}`}
|
198
211
|
</text>
|
199
212
|
);
|
200
213
|
})}
|
@@ -209,6 +222,8 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
209
222
|
const iconX = barX + barWidth / 2 - iconWidth / 2;
|
210
223
|
const iconY = barY - iconWidth;
|
211
224
|
|
225
|
+
const isSelected = selectedBar === item.label;
|
226
|
+
|
212
227
|
return (
|
213
228
|
<g key={index}>
|
214
229
|
{icons[index] && typeof icons[index] === 'string' && (
|
@@ -230,14 +245,12 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
230
245
|
fill={getFillColor(index)}
|
231
246
|
rx={barBorderRadius}
|
232
247
|
ry={barBorderRadius}
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
)
|
240
|
-
}
|
248
|
+
style={{
|
249
|
+
fill: isSelected ? 'blue' : getFillColor(index),
|
250
|
+
strokeWidth: isSelected ? 3 : 0,
|
251
|
+
opacity: isSelected ? 0.9 : 1,
|
252
|
+
}}
|
253
|
+
onMouseEnter={() => handleMouseEnter(item.label, item.value)}
|
241
254
|
onMouseMove={handleMouseMove}
|
242
255
|
onMouseLeave={handleMouseLeave}
|
243
256
|
onClick={() => handleSelectLabel(item.label)}
|
@@ -245,15 +258,19 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
245
258
|
|
246
259
|
{showXAxisLabels && (
|
247
260
|
<text
|
248
|
-
x={
|
261
|
+
x={
|
262
|
+
index == 0
|
263
|
+
? barX
|
264
|
+
: index === data.length - 1
|
265
|
+
? barX + barWidth
|
266
|
+
: barX + barWidth / 2
|
267
|
+
}
|
249
268
|
y={height + topPadding + 15}
|
250
269
|
fill="black"
|
251
|
-
textAnchor=
|
270
|
+
textAnchor={index == 0 ? 'start' : 'middle'}
|
252
271
|
className="ff-bar-chart-labels"
|
253
272
|
>
|
254
|
-
{isTruncateText
|
255
|
-
? truncateText(item.label, 10)
|
256
|
-
: item.label}
|
273
|
+
{isTruncateText ? truncateText(item.label, 10) : item.label}
|
257
274
|
</text>
|
258
275
|
)}
|
259
276
|
</g>
|
@@ -334,18 +351,6 @@ const BarChart: React.FC<BarChartProps> = ({
|
|
334
351
|
</div>
|
335
352
|
</div>
|
336
353
|
)}
|
337
|
-
|
338
|
-
{tooltip.visible && (
|
339
|
-
<div
|
340
|
-
className="ff-bar-chart-tooltip"
|
341
|
-
style={{
|
342
|
-
top: tooltip.y - 20,
|
343
|
-
left: tooltip.x + 10,
|
344
|
-
}}
|
345
|
-
>
|
346
|
-
{tooltip.content}
|
347
|
-
</div>
|
348
|
-
)}
|
349
354
|
</div>
|
350
355
|
);
|
351
356
|
};
|
@@ -381,6 +381,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
381
381
|
? item.percentage
|
382
382
|
: typeof item.value === 'string'
|
383
383
|
? ((parseFloat(item.value) / total) * 100).toFixed(1)
|
384
|
+
: total === 0
|
385
|
+
? 0
|
384
386
|
: ((item.value / total) * 100).toFixed(1)}
|
385
387
|
</td>
|
386
388
|
</td>
|
@@ -67,6 +67,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
|
|
67
67
|
percentageValue,
|
68
68
|
icon,
|
69
69
|
fontSize = 10,
|
70
|
+
labelColor = '',
|
70
71
|
arcColor = 'var(--brand-color)',
|
71
72
|
backgroundArcColor = 'var(--ff-select-scroll-thumb-color)',
|
72
73
|
}) => {
|
@@ -156,7 +157,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
|
|
156
157
|
<text
|
157
158
|
x="0"
|
158
159
|
y="0"
|
159
|
-
fill={arcColor}
|
160
|
+
fill={labelColor || arcColor}
|
160
161
|
textAnchor="middle"
|
161
162
|
dominantBaseline="central"
|
162
163
|
>
|
@@ -4,9 +4,10 @@ export interface IconRadialChartProps {
|
|
4
4
|
label: string;
|
5
5
|
percentageValue: number;
|
6
6
|
icon?: string;
|
7
|
-
fontSize
|
8
|
-
|
9
|
-
|
7
|
+
fontSize?: number;
|
8
|
+
labelColor?:string;
|
9
|
+
arcColor?: string;
|
10
|
+
backgroundArcColor?: string;
|
10
11
|
}
|
11
12
|
|
12
13
|
//type for the calculateArc function
|
@@ -157,7 +157,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
|
|
157
157
|
{ date: '4 oct', value: 20 },
|
158
158
|
{ date: '5 oct', value: 10 },
|
159
159
|
{ date: '6 oct', value: 30 },
|
160
|
-
{ date: '7 oct', value: 0 },
|
160
|
+
{ date: '7 oct ', value: 0 },
|
161
161
|
],
|
162
162
|
},
|
163
163
|
{
|
@@ -165,7 +165,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
|
|
165
165
|
name: 'Flaky',
|
166
166
|
show: true,
|
167
167
|
data: [
|
168
|
-
{ date: '1 oct', value:
|
168
|
+
{ date: '1 oct', value: 50 },
|
169
169
|
{ date: '2 oct', value: 40 },
|
170
170
|
{ date: '3 oct', value: 30 },
|
171
171
|
{ date: '4 oct', value: 20 },
|
@@ -189,6 +189,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
|
|
189
189
|
fontWeight: 'semi-bold',
|
190
190
|
proportionalSpacing: false,
|
191
191
|
chartName: 'defects',
|
192
|
+
xAxisLabelGap:20,
|
192
193
|
},
|
193
194
|
render: (args) => (
|
194
195
|
<div className="linechart-container">
|
@@ -32,6 +32,7 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
32
32
|
numberSize,
|
33
33
|
proportionalSpacing,
|
34
34
|
chartName,
|
35
|
+
xAxisLabelGap = 16,
|
35
36
|
}) => {
|
36
37
|
const margin = 40;
|
37
38
|
const xMax = width - margin * 2;
|
@@ -212,7 +213,10 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
212
213
|
const xTickInterval = Math.floor(data[0].data.length / 4);
|
213
214
|
|
214
215
|
return (
|
215
|
-
<div
|
216
|
+
<div
|
217
|
+
className="ff-line-chart-text"
|
218
|
+
style={{ width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }}
|
219
|
+
>
|
216
220
|
<div
|
217
221
|
className="ff-line-chart-yAxisLabel-warpper"
|
218
222
|
style={{ height: height }}
|
@@ -302,12 +306,12 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
302
306
|
)}
|
303
307
|
{data[0].data
|
304
308
|
.filter((_: any, index: number) => index % xTickInterval === 0)
|
305
|
-
.map((point: { [key: string]: any }) => (
|
309
|
+
.map((point: { [key: string]: any }, index: number) => (
|
306
310
|
<text
|
307
311
|
key={String(point[xKey])}
|
308
312
|
x={xScale(point[xKey])}
|
309
313
|
y={yMax + 15}
|
310
|
-
textAnchor=
|
314
|
+
textAnchor={index === 0 ? 'start' : 'middle'}
|
311
315
|
fill={yAxisColor}
|
312
316
|
className="ff--line-chart-x-line-data"
|
313
317
|
style={{ fontSize: numberSize }}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import MultiRadialChart from './MultiRadialChart';
|
3
4
|
|
@@ -42,8 +43,8 @@ export const Default: Story = {
|
|
42
43
|
lineCap: 'round',
|
43
44
|
legendType: 'numberLegend',
|
44
45
|
isLegendDetails: true,
|
45
|
-
|
46
|
-
|
46
|
+
chartToLegendGap: '16px',
|
47
|
+
legendGap: '15px',
|
47
48
|
},
|
48
49
|
};
|
49
50
|
|
@@ -76,8 +77,8 @@ export const numberLegend: Story = {
|
|
76
77
|
lineCap: 'square',
|
77
78
|
legendType: 'numberLegend',
|
78
79
|
isLegendDetails: true,
|
79
|
-
|
80
|
-
|
80
|
+
chartToLegendGap: '16px',
|
81
|
+
legendGap: '15px',
|
81
82
|
},
|
82
83
|
};
|
83
84
|
|
@@ -117,7 +118,53 @@ export const PillLegend: Story = {
|
|
117
118
|
isLegendDetails: true,
|
118
119
|
labelFontSize: 12,
|
119
120
|
subLabelFontSize: 8,
|
120
|
-
|
121
|
-
|
121
|
+
chartToLegendGap: '16px',
|
122
|
+
legendGap: '15px',
|
123
|
+
},
|
124
|
+
};
|
125
|
+
|
126
|
+
export const ExecutionCompare: Story = {
|
127
|
+
render: () => {
|
128
|
+
return (
|
129
|
+
<MultiRadialChart
|
130
|
+
barValues={[
|
131
|
+
{
|
132
|
+
arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
|
133
|
+
arcColor: 'var(--ff-card-skipped-status-bg-color)',
|
134
|
+
barLabel: 'Skipped',
|
135
|
+
value: 0,
|
136
|
+
},
|
137
|
+
{
|
138
|
+
arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
|
139
|
+
arcColor: 'var(--ff-card-warning-status-bg-color)',
|
140
|
+
barLabel: 'Warning',
|
141
|
+
value: 0,
|
142
|
+
},
|
143
|
+
{
|
144
|
+
arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
|
145
|
+
arcColor: 'var(--ff-card-failed-status-bg-color)',
|
146
|
+
barLabel: 'Failed',
|
147
|
+
value: 0,
|
148
|
+
},
|
149
|
+
{
|
150
|
+
arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
|
151
|
+
arcColor: 'var(--ff-card-passed-status-bg-color)',
|
152
|
+
barLabel: 'Passed',
|
153
|
+
value: 0,
|
154
|
+
},
|
155
|
+
]}
|
156
|
+
fontSize={12}
|
157
|
+
isLegendDetails
|
158
|
+
labelHeading="00 Module"
|
159
|
+
legendType="pillLegend"
|
160
|
+
lineCap="round"
|
161
|
+
subLabelFontSize={12}
|
162
|
+
lineWidth={3}
|
163
|
+
radius={35}
|
164
|
+
chartToLegendGap="16px"
|
165
|
+
legendGap="8px"
|
166
|
+
gapBetweenArch={6}
|
167
|
+
/>
|
168
|
+
);
|
122
169
|
},
|
123
170
|
};
|