sag_components 2.0.0-beta47 → 2.0.0-beta48

package/dist/index.d.ts

@@ -1203,4 +1203,6 @@ declare function LinkButton({ text, type, size, height, width, disabled, textCol
 
 declare function BatteryChart(props: any): react_jsx_runtime.JSX.Element;
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
+declare function PerformanceAnalyticsLegend(props: any): react_jsx_runtime.JSX.Element;
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };

package/dist/index.esm.js

@@ -9837,67 +9837,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,
@@ -10311,20 +10314,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
@@ -10756,22 +10760,23 @@ 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
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    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('');
@@ -11210,21 +11215,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    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('');
@@ -24449,21 +24455,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24861,23 +24868,24 @@ const IconContainer$1 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -25881,39 +25889,45 @@ const LegendWrapper = styled.div`
   padding-top: 15px;
 `;
 
-const LegendUnionIcon = ({
-  width = '18',
-  height = '5',
-  color = '#9CCB3B'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 18 5",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
-  fill: color
-}));
+const LegendUnionIcon = _ref => {
+  let {
+    width = '18',
+    height = '5',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
+    fill: color
+  }));
+};
 
-const LegendLineIcon = ({
-  width = '19',
-  height = '3',
-  color = '#9CCB3B'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 19 3",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
-  fill: color
-}));
+const LegendLineIcon = _ref => {
+  let {
+    width = '19',
+    height = '3',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 19 3",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
+    fill: color
+  }));
+};
 
 const ControlsContainer$5 = styled.div`
   position: relative;
@@ -26488,7 +26502,7 @@ const LegendTitle = styled.h5`
   display: flex;
   justify-content: space-between;
   @media (max-width: 1536px) {
-    font-size: 0.6875em; /* 11px → 0.6875em */
+    font-size: 0.75em; /* 11px → 0.6875em */
   }
   @media (max-width: 1366px) {
     font-size: 0.625em; /* 10px → 0.625em */
@@ -28842,7 +28856,6 @@ const scrollableStyles$2 = `
   }
 `;
 const DoubleBarSingleLineContainer = styled.div`
-  position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
   background-color: white;
@@ -28853,13 +28866,14 @@ const DoubleBarSingleLineContainer = styled.div`
   ${scrollableStyles$2}
 `;
 const LegendContainer = styled.div`
-  position: sticky;
+  position: absolute;
+  left: 0;
   text-align: center;
-  width: ${props => props.width};
-  bottom: calc(100% - ${props => props.height});
+  width: ${props => `${props.width}px`};
+  bottom: 30px;
 `;
 const Controls$1 = styled.div`
-  height: 100%;
+  height: calc(100% - 30px);
   display: flex;
   flex-direction: column;
   background-color: white;
@@ -28911,6 +28925,7 @@ const DoubleBarSingleLine = props => {
     width,
     height,
     title,
+    hasScroll,
     dataState,
     data,
     lineChartValueType,
@@ -28922,6 +28937,31 @@ const DoubleBarSingleLine = props => {
     noDataText
   } = props;
   const [legendData, setLegendData] = useState([]);
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0); // State to store the container's width
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth); // Update the width
+      }
+    };
+
+    // Use ResizeObserver to observe changes in the container's size
+    const resizeObserver = new ResizeObserver(() => {
+      updateWidth();
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current); // Start observing
+    }
+
+    // Cleanup observer on component unmount
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const newLegendData = dataState.map(item => ({
       title: item.name,
@@ -29024,9 +29064,12 @@ const DoubleBarSingleLine = props => {
     } else {
       `${currentTooltipValue.toFixed(1)}`;
     }
-    return /*#__PURE__*/React$1.createElement(TooltipDiv, null, /*#__PURE__*/React$1.createElement(TooltipTitle$1, null, `${label}`), payload.map((item, idx) => /*#__PURE__*/React$1.createElement(TooltipLabel, {
-      key: item.name || idx
-    }, `${item.name}: ${item.value}`)));
+    return /*#__PURE__*/React$1.createElement(TooltipDiv, null, /*#__PURE__*/React$1.createElement(TooltipTitle$1, null, `${label}`), payload.map((item, idx) => {
+      const dataStateItem = dataState.find(state => state.key === item.dataKey);
+      return /*#__PURE__*/React$1.createElement(TooltipLabel, {
+        key: item.dataKey || idx
+      }, `${dataStateItem?.name || item.dataKey}: ${item.value.toFixed(1)}`);
+    }));
   };
   const CustomTickBarChart = props => {
     const {
@@ -29063,26 +29106,55 @@ const DoubleBarSingleLine = props => {
       dy: 22
     }, line))));
   };
+
+  // Shared chart syncing configuration
+  const syncCharts = {
+    syncId: "anyId",
+    // This synchronizes the charts
+    margin: {
+      top: 20,
+      right: 35,
+      left: 35,
+      bottom: 5
+    }
+  };
+  // Transform data to align line points with bar chart centers
+  const transformDataForLineChart = originalData => {
+    return originalData.map(item => ({
+      ...item,
+      // Keep the original label for proper X-axis alignment
+      originalLabel: item.label
+    }));
+  };
+  const transformedData = transformDataForLineChart(data);
   return /*#__PURE__*/React$1.createElement(DoubleBarSingleLineContainer, {
+    ref: containerRef,
     className: className,
     height: height,
     width: width,
-    hasScroll: data.length >= limitViewableItems
+    hasScroll: hasScroll
   }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     noDataText: noDataText
   }) : /*#__PURE__*/React$1.createElement(Controls$1, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
-    width: data.length >= limitViewableItems ? `${data.length * 178}px` : 'auto'
-  }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, {
-    data: data,
-    margin: {
-      top: 10,
-      right: 35,
-      left: 35,
-      bottom: 32
+  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
+    width: 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, {
+    dataKey: "label",
+    tick: false,
+    axisLine: false,
+    tickLine: false,
+    interval: 0,
+    xAxisId: "line"
+    // This is important for alignment
+    ,
+    padding: {
+      left: barsWidth,
+      right: barsWidth
     }
-  }, /*#__PURE__*/React$1.createElement(YAxis, {
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
     domain: [dataMin => Math.min(dataMin, calculateMinValue(data, dataState)) - 10, dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) + 10],
     hide: true
   }), dataState.filter(item => item.type === "line").map(obj => /*#__PURE__*/React$1.createElement(Line, {
@@ -29090,22 +29162,28 @@ const DoubleBarSingleLine = props => {
     key: obj.key,
     dataKey: obj.key,
     stroke: obj.color,
-    fill: obj.color,
-    legendType: "plainline"
+    fill: obj.color
+    // dot={{ r: 6, stroke: obj.color, fill: obj.color }}
+    ,
+    activeDot: {
+      r: 8
+    },
+    isAnimationActive: false,
+    xAxisId: "line"
   }, /*#__PURE__*/React$1.createElement(LabelList, {
-    content: CustomLabelLine
-  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    content: CustomLabelLine,
+    position: "top"
+  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends({
     data: data,
     barGap: 13,
     barCategoryGap: data.length >= limitViewableItems ? 178 : 50,
-    barSize: barsWidth,
+    barSize: barsWidth
+  }, syncCharts, {
     margin: {
-      top: 0,
-      right: 10,
-      left: 10,
+      ...syncCharts.margin,
       bottom: 120
     }
-  }, /*#__PURE__*/React$1.createElement(Tooltip$2, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), showBackgroundGrid && /*#__PURE__*/React$1.createElement(CartesianGrid, {
     vertical: false,
@@ -29120,20 +29198,19 @@ const DoubleBarSingleLine = props => {
     tickLine: false,
     interval: 0
   }), /*#__PURE__*/React$1.createElement(YAxis, {
-    domain: [dataMin => Math.min(dataMin, 0),
-    // Handle negative values
-    dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) * 1.5],
+    domain: [dataMin => Math.min(dataMin, 0), dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) * 1.5],
     hide: true
   }), dataState.filter(item => item.type === "bar").map(obj => /*#__PURE__*/React$1.createElement(Bar, {
     key: obj.key,
     dataKey: obj.key,
     fill: obj.color,
-    radius: [4, 4, 0, 0]
+    radius: [4, 4, 0, 0],
+    isAnimationActive: false
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: obj.key,
     content: CustomLabel
   }))))))), showLegend && /*#__PURE__*/React$1.createElement(LegendContainer, {
-    width: width,
+    width: containerWidth,
     height: height
   }, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     legendData: legendData
@@ -30320,5 +30397,5 @@ const BatteryChart = props => {
   }))))))), starText !== "" && /*#__PURE__*/React$1.createElement(StarText, null, starText));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
+export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
 //# sourceMappingURL=index.esm.js.map