sag_components 2.0.0-beta75 → 2.0.0-beta77

package/dist/index.esm.js

@@ -3472,154 +3472,6 @@ const LinnerDataBox = props => {
   }))));
 };
 
-const SagIconButtonWrapper = styled.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.span`
-`;
-
-const SagIconButton = props => {
-  const {
-    iconName,
-    color,
-    backgroundColor,
-    activeColor,
-    height,
-    buttonText,
-    iconWidth,
-    iconHeight,
-    disabled,
-    openState,
-    onButtonClick,
-    className
-  } = props;
-  const [activeState, setActiveState] = useState(openState);
-  const onClickHandler = event => {
-    onButtonClick(event);
-    setActiveState(prevState => !prevState);
-  };
-  const getIcon = icon => {
-    switch (icon.toLowerCase()) {
-      case 'filter':
-        return /*#__PURE__*/React$1.createElement(FilterIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'options':
-        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'download':
-        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'document':
-        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'fly':
-        return /*#__PURE__*/React$1.createElement(FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'bell':
-        return /*#__PURE__*/React$1.createElement(BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'exit':
-        return /*#__PURE__*/React$1.createElement(ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'eye':
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      default:
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-    }
-  };
-  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
-    className: className,
-    height: height,
-    color: activeState ? activeColor : color,
-    backgroundColor: backgroundColor,
-    disabled: disabled,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.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.div`
     position: relative;
     width: ${props => props.width};
@@ -3728,16 +3580,6 @@ const TopRow = styled.div`
   display: flex;
   align-items: center;
   gap: 20px;
-`;
-const Headline$1 = styled.span`
-  font-size: 18px;
-  font-weight: 500;
-  margin-right: auto;
-`;
-const Nav = styled.nav`
-display: flex;
-flex-direction: row;
-
 `;
 const TabActionLine = styled.div`
   margin-left: auto;
@@ -3745,20 +3587,28 @@ const TabActionLine = styled.div`
   align-items: center;
   height: 100%;
 `;
+const Headline$1 = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+  margin-right: auto;
+`;
 const Tabs = styled.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 `;
-const Tab = styled.div`
+const Tab = styled.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};
@@ -3816,12 +3666,158 @@ const ActionsWrapper = styled.div`
   gap: 10px;
   width: 100%;
 `;
-const SagIconButtonWrap = styled(SagIconButton)`
-`;
 const SearchInputWrap = styled(SearchInput)`
   margin-left: auto;
 `;
 
+const SagIconButtonWrapper = styled.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.span`
+`;
+
+const SagIconButton = props => {
+  const {
+    iconName,
+    color,
+    backgroundColor,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick,
+    className
+  } = props;
+  const [activeState, setActiveState] = useState(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(prevState => !prevState);
+  };
+  const getIcon = icon => {
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/React$1.createElement(FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'options':
+        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'download':
+        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'document':
+        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'fly':
+        return /*#__PURE__*/React$1.createElement(FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'bell':
+        return /*#__PURE__*/React$1.createElement(BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'maintenance':
+        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'exit':
+        return /*#__PURE__*/React$1.createElement(ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'eye':
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      default:
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+    }
+  };
+  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
+    className: className,
+    height: height,
+    color: activeState ? activeColor : color,
+    backgroundColor: backgroundColor,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.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,
@@ -3829,7 +3825,6 @@ const TabMenu = props => {
     className,
     color,
     currentTab,
-    headlineInsteadTabs,
     headlineText,
     inputWidth,
     onFilterButtonClick,
@@ -3861,14 +3856,14 @@ const TabMenu = props => {
   }, [currentTab]);
   return /*#__PURE__*/React$1.createElement(TabMenuContainer, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React$1.createElement(SagIconButtonWrap, {
+  }, /*#__PURE__*/React$1.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React$1.createElement(SagIconButton, {
     id: "filterButton",
     iconName: "Filter",
     buttonText: "",
     openState: panelIsOpen,
     activeColor: activeColor,
     onButtonClick: onFilterButtonClick
-  }), headlineInsteadTabs ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement(Nav, {
+  }), headlineText && headlineText !== '' ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement("nav", {
     className: "Nav"
   }, /*#__PURE__*/React$1.createElement(Tabs, {
     className: "Tabs"
@@ -30354,6 +30349,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);
 
@@ -30795,10 +30797,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$1.createElement(XAxis, {
@@ -30854,7 +30856,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
@@ -30880,7 +30882,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
@@ -30993,6 +30995,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$1.createElement("text", {
         x: xPos,
         y: yPos,