sag_components 2.0.0-beta94 → 2.0.0-beta96

package/dist/index.d.ts

@@ -1079,7 +1079,7 @@ declare function LinkButton({ text, type, size, height, width, disabled, textCol
     rightIcon?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function BubbleChart({ data, title, subtitle, leftHeader, rightHeader, topHeader, bottomHeader, colorPalette, height, width, backgroundColor, showAxis, }: {
+declare function BubbleChart({ data, title, subtitle, leftHeader, rightHeader, topHeader, bottomHeader, colorPalette, height, width, backgroundColor, showAxis, noDataText, }: {
     data?: any[];
     title?: string;
     subtitle?: string;
@@ -1092,6 +1092,7 @@ declare function BubbleChart({ data, title, subtitle, leftHeader, rightHeader, t
     width?: string;
     backgroundColor?: string;
     showAxis?: boolean;
+    noDataText?: string;
 }): react_jsx_runtime.JSX.Element;
 
 declare function BatteryChart(props: any): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -9463,67 +9463,70 @@ const DropdownMain = styled.div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = ({
-  isMulti,
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  checkBoxColor,
-  xIconShow,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => /*#__PURE__*/React$1.createElement(DropdownMain, {
-  className: "DropdownMain",
-  width: width
-}, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
-  className: "DropdownMultiNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
-  className: "DropdownSingleNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}));
+const DropdownNew = _ref => {
+  let {
+    isMulti,
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    checkBoxColor,
+    xIconShow,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement(DropdownMain, {
+    className: "DropdownMain",
+    width: width
+  }, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
+    className: "DropdownMultiNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
+    className: "DropdownSingleNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }));
+};
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -9951,20 +9954,21 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -10388,23 +10392,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10846,22 +10851,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -28796,7 +28802,7 @@ const DoubleBarSingleLine = props => {
     width,
     height,
     title,
-    hasScroll,
+    //hasScroll,
     dataState,
     data,
     lineType,
@@ -28999,21 +29005,32 @@ const DoubleBarSingleLine = props => {
     }));
   };
   const transformedData = transformDataForLineChart(data);
+
+  // Calculate responsive width based on container size and zoom
+  const itemWidth = 178; // Base item width at 100% zoom
+  const itemsCanFit = Math.floor(containerWidth / itemWidth);
+  const needsScroll = data.length > itemsCanFit;
+  const dynamicWidth = needsScroll ? `${data.length * itemWidth}px` : '100%';
   return /*#__PURE__*/React$1.createElement(DoubleBarSingleLineContainer, {
     ref: containerRef,
     className: className,
     height: height,
     width: width,
-    hasScroll: hasScroll
+    hasScroll: needsScroll
   }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     noDataText: noDataText
   }) : /*#__PURE__*/React$1.createElement(Controls$6, {
     className: "Controls"
   }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
-    width: hasScroll ? `${data.length * 178}px` : 'auto'
+    width: dynamicWidth //{hasScroll ? `${data.length * 178}px` : 'auto'}
   }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends({
     data: transformedData
-  }, syncCharts), /*#__PURE__*/React$1.createElement(XAxis, {
+  }, syncCharts, {
+    margin: {
+      ...syncCharts.margin,
+      top: 20
+    }
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
     dataKey: "label",
     tick: false,
     axisLine: false,
@@ -30269,7 +30286,8 @@ const BubbleChart = _ref => {
     height = '600px',
     width = '100%',
     backgroundColor = 'white',
-    showAxis = false
+    showAxis = false,
+    noDataText = ''
   } = _ref;
   const [curosrMouse, setCurosrMouse] = useState("default");
 
@@ -30758,7 +30776,11 @@ const BubbleChart = _ref => {
     },
     backgroundColor: backgroundColor,
     "data-testid": "bubble-chart-container"
-  }, /*#__PURE__*/React$1.createElement(HeaderContainer, {
+  }, !data || data.length === 0 ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+    noDataText: noDataText,
+    width: width,
+    height: height
+  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer, {
     "data-testid": "header-container"
   }, /*#__PURE__*/React$1.createElement(ChartTitle, {
     "data-testid": "chart-title"
@@ -31003,7 +31025,7 @@ const BubbleChart = _ref => {
   }, "+"), /*#__PURE__*/React$1.createElement(ZoomResetButton, {
     onClick: handleReset,
     "data-testid": "zoom-reset-button"
-  }, "Reset")));
+  }, "Reset"))));
 };
 
 const BatteryChartContainer = styled.div`