sag_components 2.0.0-beta67 → 2.0.0-beta68
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/dist/index.esm.js +106 -100
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +106 -100
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9490,70 +9490,67 @@ const DropdownMain = styled__default["default"].div`
|
|
|
9490
9490
|
`;
|
|
9491
9491
|
|
|
9492
9492
|
/* eslint-disable react/prop-types */
|
|
9493
|
-
const DropdownNew =
|
|
9494
|
-
|
|
9495
|
-
|
|
9496
|
-
|
|
9497
|
-
|
|
9498
|
-
|
|
9499
|
-
|
|
9500
|
-
|
|
9501
|
-
|
|
9502
|
-
|
|
9503
|
-
|
|
9504
|
-
|
|
9505
|
-
|
|
9506
|
-
|
|
9507
|
-
|
|
9508
|
-
|
|
9509
|
-
|
|
9510
|
-
|
|
9511
|
-
|
|
9512
|
-
|
|
9513
|
-
|
|
9514
|
-
|
|
9515
|
-
|
|
9516
|
-
|
|
9517
|
-
|
|
9518
|
-
|
|
9519
|
-
|
|
9520
|
-
|
|
9521
|
-
|
|
9522
|
-
|
|
9523
|
-
|
|
9524
|
-
|
|
9525
|
-
|
|
9526
|
-
|
|
9527
|
-
|
|
9528
|
-
|
|
9529
|
-
|
|
9530
|
-
|
|
9531
|
-
|
|
9532
|
-
|
|
9533
|
-
|
|
9534
|
-
|
|
9535
|
-
|
|
9536
|
-
|
|
9537
|
-
|
|
9538
|
-
|
|
9539
|
-
|
|
9540
|
-
|
|
9541
|
-
|
|
9542
|
-
|
|
9543
|
-
|
|
9544
|
-
|
|
9545
|
-
|
|
9546
|
-
|
|
9547
|
-
|
|
9548
|
-
|
|
9549
|
-
|
|
9550
|
-
|
|
9551
|
-
|
|
9552
|
-
|
|
9553
|
-
|
|
9554
|
-
elementType: elementType
|
|
9555
|
-
}));
|
|
9556
|
-
};
|
|
9493
|
+
const DropdownNew = ({
|
|
9494
|
+
isMulti,
|
|
9495
|
+
label,
|
|
9496
|
+
labelEmptyValue,
|
|
9497
|
+
options,
|
|
9498
|
+
selectedValue,
|
|
9499
|
+
placeHolder,
|
|
9500
|
+
onChange,
|
|
9501
|
+
required,
|
|
9502
|
+
disabled,
|
|
9503
|
+
width,
|
|
9504
|
+
error,
|
|
9505
|
+
errorMessage,
|
|
9506
|
+
labelColor,
|
|
9507
|
+
checkBoxColor,
|
|
9508
|
+
xIconShow,
|
|
9509
|
+
showLabelOnTop,
|
|
9510
|
+
orderBy,
|
|
9511
|
+
elementType
|
|
9512
|
+
}) => /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
|
|
9513
|
+
className: "DropdownMain",
|
|
9514
|
+
width: width
|
|
9515
|
+
}, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
|
|
9516
|
+
className: "DropdownMultiNew",
|
|
9517
|
+
placeHolder: placeHolder,
|
|
9518
|
+
label: label,
|
|
9519
|
+
labelEmptyValue: labelEmptyValue,
|
|
9520
|
+
labelColor: labelColor,
|
|
9521
|
+
checkBoxColor: checkBoxColor,
|
|
9522
|
+
required: required,
|
|
9523
|
+
options: options,
|
|
9524
|
+
width: width,
|
|
9525
|
+
disabled: disabled,
|
|
9526
|
+
error: error,
|
|
9527
|
+
errorMessage: errorMessage,
|
|
9528
|
+
selectedValue: selectedValue,
|
|
9529
|
+
xIconShow: xIconShow,
|
|
9530
|
+
onChange: onChange,
|
|
9531
|
+
showLabelOnTop: showLabelOnTop,
|
|
9532
|
+
orderBy: orderBy,
|
|
9533
|
+
elementType: elementType
|
|
9534
|
+
}) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
|
|
9535
|
+
className: "DropdownSingleNew",
|
|
9536
|
+
placeHolder: placeHolder,
|
|
9537
|
+
label: label,
|
|
9538
|
+
labelEmptyValue: labelEmptyValue,
|
|
9539
|
+
labelColor: labelColor,
|
|
9540
|
+
checkBoxColor: checkBoxColor,
|
|
9541
|
+
required: required,
|
|
9542
|
+
options: options,
|
|
9543
|
+
width: width,
|
|
9544
|
+
disabled: disabled,
|
|
9545
|
+
error: error,
|
|
9546
|
+
errorMessage: errorMessage,
|
|
9547
|
+
selectedValue: selectedValue,
|
|
9548
|
+
xIconShow: xIconShow,
|
|
9549
|
+
onChange: onChange,
|
|
9550
|
+
showLabelOnTop: showLabelOnTop,
|
|
9551
|
+
orderBy: orderBy,
|
|
9552
|
+
elementType: elementType
|
|
9553
|
+
}));
|
|
9557
9554
|
DropdownNew.propTypes = {
|
|
9558
9555
|
placeHolder: PropTypes.string,
|
|
9559
9556
|
label: PropTypes.string,
|
|
@@ -24140,22 +24137,21 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
24140
24137
|
position: absolute;
|
|
24141
24138
|
`;
|
|
24142
24139
|
|
|
24143
|
-
const QuickFilterDropdownSingle =
|
|
24144
|
-
|
|
24145
|
-
|
|
24146
|
-
|
|
24147
|
-
|
|
24148
|
-
|
|
24149
|
-
|
|
24150
|
-
|
|
24151
|
-
|
|
24152
|
-
|
|
24153
|
-
|
|
24154
|
-
|
|
24155
|
-
|
|
24156
|
-
|
|
24157
|
-
|
|
24158
|
-
} = _ref;
|
|
24140
|
+
const QuickFilterDropdownSingle = ({
|
|
24141
|
+
label,
|
|
24142
|
+
hoverColor,
|
|
24143
|
+
options,
|
|
24144
|
+
selectedValue,
|
|
24145
|
+
placeHolder,
|
|
24146
|
+
onChange,
|
|
24147
|
+
disabled,
|
|
24148
|
+
width,
|
|
24149
|
+
error,
|
|
24150
|
+
errorMessage,
|
|
24151
|
+
xIconShow,
|
|
24152
|
+
labelColor,
|
|
24153
|
+
showLabelOnTop
|
|
24154
|
+
}) => {
|
|
24159
24155
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24160
24156
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24161
24157
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -24553,24 +24549,23 @@ const IconContainer$2 = styled__default["default"].div`
|
|
|
24553
24549
|
cursor: pointer;
|
|
24554
24550
|
`;
|
|
24555
24551
|
|
|
24556
|
-
const QuickFilterDropdownMultiSelection =
|
|
24557
|
-
|
|
24558
|
-
|
|
24559
|
-
|
|
24560
|
-
|
|
24561
|
-
|
|
24562
|
-
|
|
24563
|
-
|
|
24564
|
-
|
|
24565
|
-
|
|
24566
|
-
|
|
24567
|
-
|
|
24568
|
-
|
|
24569
|
-
|
|
24570
|
-
|
|
24571
|
-
|
|
24572
|
-
|
|
24573
|
-
} = _ref;
|
|
24552
|
+
const QuickFilterDropdownMultiSelection = ({
|
|
24553
|
+
label,
|
|
24554
|
+
labelEmptyValue,
|
|
24555
|
+
options,
|
|
24556
|
+
selectedValue,
|
|
24557
|
+
placeHolder,
|
|
24558
|
+
onChange,
|
|
24559
|
+
required,
|
|
24560
|
+
disabled,
|
|
24561
|
+
width,
|
|
24562
|
+
error,
|
|
24563
|
+
errorMessage,
|
|
24564
|
+
labelColor,
|
|
24565
|
+
xIconShow,
|
|
24566
|
+
checkBoxColor,
|
|
24567
|
+
showLabelOnTop
|
|
24568
|
+
}) => {
|
|
24574
24569
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24575
24570
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24576
24571
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
@@ -30440,6 +30435,8 @@ const BubbleChart = _ref => {
|
|
|
30440
30435
|
backgroundColor = 'white',
|
|
30441
30436
|
showAxis = false
|
|
30442
30437
|
} = _ref;
|
|
30438
|
+
const [curosrMouse, setCurosrMouse] = React$1.useState("default");
|
|
30439
|
+
|
|
30443
30440
|
// Calculate the medians and domain for raw X, Y, and Z values
|
|
30444
30441
|
const {
|
|
30445
30442
|
xMedian,
|
|
@@ -30524,6 +30521,7 @@ const BubbleChart = _ref => {
|
|
|
30524
30521
|
// Refs for the chart container
|
|
30525
30522
|
const containerRef = React$1.useRef(null);
|
|
30526
30523
|
const scatterChartRef = React$1.useRef(null);
|
|
30524
|
+
const scatterFullChartRef = React$1.useRef(null);
|
|
30527
30525
|
|
|
30528
30526
|
// Set up initial domain
|
|
30529
30527
|
React$1.useEffect(() => {
|
|
@@ -30696,9 +30694,9 @@ const BubbleChart = _ref => {
|
|
|
30696
30694
|
e.preventDefault();
|
|
30697
30695
|
}
|
|
30698
30696
|
}, [viewDomain]); // Add viewDomain as dependency to capture current value
|
|
30699
|
-
|
|
30700
30697
|
// Handle mouse move for dragging
|
|
30701
30698
|
const handleMouseMove = React$1.useCallback(e => {
|
|
30699
|
+
/* cursor feedback */
|
|
30702
30700
|
if (!isDragging) return;
|
|
30703
30701
|
const dx = e.clientX - dragStart.x;
|
|
30704
30702
|
const dy = e.clientY - dragStart.y;
|
|
@@ -30807,6 +30805,7 @@ const BubbleChart = _ref => {
|
|
|
30807
30805
|
|
|
30808
30806
|
// Handle mouse wheel
|
|
30809
30807
|
const handleWheel = React$1.useCallback(e => {
|
|
30808
|
+
if (!e.ctrlKey) return; // Only zoom with Ctrl key
|
|
30810
30809
|
e.preventDefault();
|
|
30811
30810
|
if (e.deltaY < 0) {
|
|
30812
30811
|
handleZoomIn();
|
|
@@ -30895,7 +30894,11 @@ const BubbleChart = _ref => {
|
|
|
30895
30894
|
const formattedY = formatUnits(yMedian);
|
|
30896
30895
|
return `${formattedX}, ${formattedY}`;
|
|
30897
30896
|
}, [xMedian, yMedian]);
|
|
30898
|
-
|
|
30897
|
+
const handleChartMouseMove = e => {
|
|
30898
|
+
if (!scatterFullChartRef.current) return;
|
|
30899
|
+
const temp = isDragging ? 'move' : 'zoom-in';
|
|
30900
|
+
setCurosrMouse(temp);
|
|
30901
|
+
};
|
|
30899
30902
|
// Render the component
|
|
30900
30903
|
return /*#__PURE__*/React__default["default"].createElement(BubbleChartContainer, {
|
|
30901
30904
|
width: width,
|
|
@@ -30920,6 +30923,9 @@ const BubbleChart = _ref => {
|
|
|
30920
30923
|
height: "100%",
|
|
30921
30924
|
"data-testid": "responsive-container"
|
|
30922
30925
|
}, /*#__PURE__*/React__default["default"].createElement(recharts.ScatterChart, {
|
|
30926
|
+
ref: scatterFullChartRef,
|
|
30927
|
+
onMouseMove: handleChartMouseMove,
|
|
30928
|
+
cursor: curosrMouse,
|
|
30923
30929
|
margin: {
|
|
30924
30930
|
top: 60,
|
|
30925
30931
|
right: 190,
|