sag_components 2.0.0-beta75 → 2.0.0-beta77

package/dist/index.js

@@ -3482,154 +3482,6 @@ const LinnerDataBox = props => {
   }))));
 };
 
-const SagIconButtonWrapper = styled__default["default"].button`
-  height: ${props => props.height};
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 18px;
-  white-space: nowrap;
-  color: ${props => props.color};
-  border-radius: 8px;
-  border: 1px solid ${props => props.color};
-  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
-  transition: box-shadow 0.3s ease;
-  &:hover, &:focus {
-    cursor: pointer;
-    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-`;
-const SpanText$1 = styled__default["default"].span`
-`;
-
-const SagIconButton = props => {
-  const {
-    iconName,
-    color,
-    backgroundColor,
-    activeColor,
-    height,
-    buttonText,
-    iconWidth,
-    iconHeight,
-    disabled,
-    openState,
-    onButtonClick,
-    className
-  } = props;
-  const [activeState, setActiveState] = React$1.useState(openState);
-  const onClickHandler = event => {
-    onButtonClick(event);
-    setActiveState(prevState => !prevState);
-  };
-  const getIcon = icon => {
-    switch (icon.toLowerCase()) {
-      case 'filter':
-        return /*#__PURE__*/React__default["default"].createElement(FilterIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'options':
-        return /*#__PURE__*/React__default["default"].createElement(OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'download':
-        return /*#__PURE__*/React__default["default"].createElement(DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'document':
-        return /*#__PURE__*/React__default["default"].createElement(DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'fly':
-        return /*#__PURE__*/React__default["default"].createElement(FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'bell':
-        return /*#__PURE__*/React__default["default"].createElement(BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'maintenance':
-        return /*#__PURE__*/React__default["default"].createElement(MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'exit':
-        return /*#__PURE__*/React__default["default"].createElement(ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'eye':
-        return /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      default:
-        return /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-    }
-  };
-  return /*#__PURE__*/React__default["default"].createElement(SagIconButtonWrapper, {
-    className: className,
-    height: height,
-    color: activeState ? activeColor : color,
-    backgroundColor: backgroundColor,
-    disabled: disabled,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React__default["default"].createElement(SpanText$1, null, buttonText));
-};
-SagIconButton.propTypes = {
-  className: PropTypes.string,
-  iconName: PropTypes.string,
-  buttonText: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  activeColor: PropTypes.string,
-  iconHeight: PropTypes.number,
-  iconWidth: PropTypes.number,
-  openState: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onButtonClick: PropTypes.func
-};
-SagIconButton.defaultProps = {
-  className: '',
-  iconName: 'filter',
-  buttonText: 'Filter',
-  height: '40px',
-  color: '#212121',
-  activeColor: '#229E38',
-  backgroundColor: 'transparent',
-  // '#E8F5EB',
-  iconHeight: 12,
-  iconWidth: 12,
-  openState: false,
-  disabled: false,
-  onButtonClick: () => {}
-};
-
 const TextFieldContainer = styled__default["default"].div`
     position: relative;
     width: ${props => props.width};
@@ -3738,16 +3590,6 @@ const TopRow = styled__default["default"].div`
   display: flex;
   align-items: center;
   gap: 20px;
-`;
-const Headline$1 = styled__default["default"].span`
-  font-size: 18px;
-  font-weight: 500;
-  margin-right: auto;
-`;
-const Nav = styled__default["default"].nav`
-display: flex;
-flex-direction: row;
-
 `;
 const TabActionLine = styled__default["default"].div`
   margin-left: auto;
@@ -3755,20 +3597,28 @@ const TabActionLine = styled__default["default"].div`
   align-items: center;
   height: 100%;
 `;
+const Headline$1 = styled__default["default"].span`
+  font-size: 18px;
+  font-weight: 500;
+  margin-right: auto;
+`;
 const Tabs = styled__default["default"].div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 `;
-const Tab = styled__default["default"].div`
+const Tab = styled__default["default"].button`
   cursor: pointer;
   position: relative;
   text-align: center;
   padding: 8px 12px;
   font-size: 16px;
   color: #000000;
+  border: none;
   border-bottom: 2px solid #D0D0D0;
+  background: transparent;
+  z-index: 2;
   &.active {
     font-weight: 600;
     color: ${props => props.color};
@@ -3826,12 +3676,158 @@ const ActionsWrapper = styled__default["default"].div`
   gap: 10px;
   width: 100%;
 `;
-const SagIconButtonWrap = styled__default["default"](SagIconButton)`
-`;
 const SearchInputWrap = styled__default["default"](SearchInput)`
   margin-left: auto;
 `;
 
+const SagIconButtonWrapper = styled__default["default"].button`
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  white-space: nowrap;
+  color: ${props => props.color};
+  border-radius: 8px;
+  border: 1px solid ${props => props.color};
+  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
+  transition: box-shadow 0.3s ease;
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText$1 = styled__default["default"].span`
+`;
+
+const SagIconButton = props => {
+  const {
+    iconName,
+    color,
+    backgroundColor,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick,
+    className
+  } = props;
+  const [activeState, setActiveState] = React$1.useState(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(prevState => !prevState);
+  };
+  const getIcon = icon => {
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/React__default["default"].createElement(FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'options':
+        return /*#__PURE__*/React__default["default"].createElement(OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'download':
+        return /*#__PURE__*/React__default["default"].createElement(DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'document':
+        return /*#__PURE__*/React__default["default"].createElement(DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'fly':
+        return /*#__PURE__*/React__default["default"].createElement(FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'bell':
+        return /*#__PURE__*/React__default["default"].createElement(BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'maintenance':
+        return /*#__PURE__*/React__default["default"].createElement(MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'exit':
+        return /*#__PURE__*/React__default["default"].createElement(ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'eye':
+        return /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      default:
+        return /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+    }
+  };
+  return /*#__PURE__*/React__default["default"].createElement(SagIconButtonWrapper, {
+    className: className,
+    height: height,
+    color: activeState ? activeColor : color,
+    backgroundColor: backgroundColor,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React__default["default"].createElement(SpanText$1, null, buttonText));
+};
+SagIconButton.propTypes = {
+  className: PropTypes.string,
+  iconName: PropTypes.string,
+  buttonText: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  activeColor: PropTypes.string,
+  iconHeight: PropTypes.number,
+  iconWidth: PropTypes.number,
+  openState: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onButtonClick: PropTypes.func
+};
+SagIconButton.defaultProps = {
+  className: '',
+  iconName: 'filter',
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  backgroundColor: 'transparent',
+  // '#E8F5EB',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};
+
 const TabMenu = props => {
   const {
     activeColor,
@@ -3839,7 +3835,6 @@ const TabMenu = props => {
     className,
     color,
     currentTab,
-    headlineInsteadTabs,
     headlineText,
     inputWidth,
     onFilterButtonClick,
@@ -3871,14 +3866,14 @@ const TabMenu = props => {
   }, [currentTab]);
   return /*#__PURE__*/React__default["default"].createElement(TabMenuContainer, {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(TopRow, null, showFilterButton && /*#__PURE__*/React__default["default"].createElement(SagIconButtonWrap, {
+  }, /*#__PURE__*/React__default["default"].createElement(TopRow, null, showFilterButton && /*#__PURE__*/React__default["default"].createElement(SagIconButton, {
     id: "filterButton",
     iconName: "Filter",
     buttonText: "",
     openState: panelIsOpen,
     activeColor: activeColor,
     onButtonClick: onFilterButtonClick
-  }), headlineInsteadTabs ? /*#__PURE__*/React__default["default"].createElement(Headline$1, null, headlineText) : /*#__PURE__*/React__default["default"].createElement(Nav, {
+  }), headlineText && headlineText !== '' ? /*#__PURE__*/React__default["default"].createElement(Headline$1, null, headlineText) : /*#__PURE__*/React__default["default"].createElement("nav", {
     className: "Nav"
   }, /*#__PURE__*/React__default["default"].createElement(Tabs, {
     className: "Tabs"
@@ -30364,6 +30359,13 @@ const BubbleChart = _ref => {
       const distance = Math.max(Math.abs(max - median), Math.abs(min - median));
       return [median - distance, median + distance];
     };
+
+    // const calculateDomainBasedOnMedian = (min, max, median) => {
+    //     // Always include all data points, and add a small padding
+    //     const padding = (max - min) * 0.1 || 1; // fallback to 1 if min==max
+    //     return [min - padding, max + padding];
+    // };
+
     const xDom = calculateDomainBasedOnMedian(minX, maxX, medianX);
     const yDom = calculateDomainBasedOnMedian(minY, maxY, medianY);
 
@@ -30805,10 +30807,10 @@ const BubbleChart = _ref => {
     onMouseMove: handleChartMouseMove,
     cursor: curosrMouse,
     margin: {
-      top: 60,
+      top: 80,
       right: 190,
-      bottom: 50,
-      left: 180
+      bottom: 80,
+      left: 190
     },
     "data-testid": "scatter-chart"
   }, renderGradients(), /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
@@ -30864,7 +30866,7 @@ const BubbleChart = _ref => {
     label: xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] ? {
       value: topHeader,
       position: "top",
-      offset: 40,
+      offset: 60,
       fill: '#484A4C',
       fontSize: 16,
       fontWeight: 500
@@ -30890,7 +30892,7 @@ const BubbleChart = _ref => {
     label: xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] ? {
       value: bottomHeader,
       position: "bottom",
-      offset: 30,
+      offset: 60,
       fill: '#484A4C',
       fontSize: 16,
       fontWeight: 500
@@ -31003,6 +31005,25 @@ const BubbleChart = _ref => {
       // Calculate the exact position of the median point in the SVG
       const xPos = viewBox.x + (xMedian - viewDomain.x[0]) / (viewDomain.x[1] - viewDomain.x[0]) * viewBox.width;
       const yPos = viewBox.y + (1 - (yMedian - viewDomain.y[0]) / (viewDomain.y[1] - viewDomain.y[0])) * viewBox.height;
+
+      // Calculate normalized position of median in domain
+      // const xNorm = (xMedian - viewDomain.x[0]) / (viewDomain.x[1] - viewDomain.x[0]);
+      // const yNorm = (yMedian - viewDomain.y[0]) / (viewDomain.y[1] - viewDomain.y[0]);
+
+      // // If median is within 2% of the edge, center the label
+      // const isXEdge = xNorm < 0.02 || xNorm > 0.98;
+      // const isYEdge = yNorm < 0.02 || yNorm > 0.98;
+
+      // let xPos, yPos;
+      // if (isXEdge || isYEdge) {
+      //     // Center of SVG
+      //     xPos = viewBox.x + viewBox.width / 2;
+      //     yPos = viewBox.y + viewBox.height / 2;
+      // } else {
+      //     // Median's data position
+      //     xPos = viewBox.x + xNorm * viewBox.width;
+      //     yPos = viewBox.y + (1 - yNorm) * viewBox.height;
+      // }
       return /*#__PURE__*/React__default["default"].createElement("text", {
         x: xPos,
         y: yPos,