sag_components 2.0.0-beta49 → 2.0.0-beta50

package/dist/index.esm.js

@@ -10073,34 +10073,26 @@ const OptionsContainer$4 = styled.div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = ({
-  width = "8",
-  height = "13",
-  fill = "#777575"
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
+const ChervronRightIcon = () => /*#__PURE__*/React$1.createElement("svg", {
+  width: "8",
+  height: "13",
   viewBox: "0 0 8 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React$1.createElement("path", {
   d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
-  fill: fill
+  fill: "#777575"
 }));
 
-const ChervronLeftIcon = ({
-  width = 7,
-  height = 13,
-  fill = "#777575"
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
+const ChervronLeftIcon = () => /*#__PURE__*/React$1.createElement("svg", {
+  width: "7",
+  height: "13",
   viewBox: "0 0 7 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React$1.createElement("path", {
   d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
-  fill: fill
+  fill: "#777575"
 }));
 
 /* eslint-disable react/prop-types */
@@ -10366,8 +10358,8 @@ const RangePicker = _ref => {
       const dateArray = selectedValue.split('-');
       const startDate = new Date(dateArray[0]);
       const endDate = new Date(dateArray[1]);
-      setStartDateValue(moment(startDate).format('DD/MM/YYYY'));
-      setEndDateValue(moment(endDate).format('DD/MM/YYYY'));
+      setStartDateValue(moment(startDate).format('MM/DD/YYYY'));
+      setEndDateValue(moment(endDate).format('MM/DD/YYYY'));
       setValue(selectedValue);
     }
   }, [selectedValue]);
@@ -10383,8 +10375,8 @@ const RangePicker = _ref => {
       setIsFocused(false);
       setStartDateValue(startDate);
       setEndDateValue(endDate);
-      onChange(`${moment(startDate).format('DD/MM/YYYY')} - ${moment(endDate).format('DD/MM/YYYY')}`);
-      setValue(`${moment(startDate).format('DD/MM/YYYY')} - ${moment(endDate).format('DD/MM/YYYY')}`);
+      onChange(`${moment(startDate).format('MM/DD/YYYY')} - ${moment(endDate).format('MM/DD/YYYY')}`);
+      setValue(`${moment(startDate).format('MM/DD/YYYY')} - ${moment(endDate).format('MM/DD/YYYY')}`);
     }
   };
   const onChangeEvent = e => {
@@ -10392,8 +10384,8 @@ const RangePicker = _ref => {
     const arr = dateArray.split(' - ');
     const startDate = new Date(arr[0]);
     const endDate = new Date(arr[1]);
-    setStartDateValue(moment(startDate).format('DD/MM/YYYY'));
-    setEndDateValue(moment(endDate).format('DD/MM/YYYY'));
+    setStartDateValue(moment(startDate).format('MM/DD/YYYY'));
+    setEndDateValue(moment(endDate).format('MM/DD/YYYY'));
     onChange(e);
     setValue(e.target.value);
   };
@@ -28878,7 +28870,7 @@ const LegendContainer = styled.div`
   left: 0;
   text-align: center;
   width: ${props => `${props.width}px`};
-  bottom: 20px;
+  bottom: 30px;
 `;
 const Controls$1 = styled.div`
   height: calc(100% - 30px);
@@ -28945,14 +28937,31 @@ const DoubleBarSingleLine = props => {
     noDataText
   } = props;
   const [legendData, setLegendData] = useState([]);
-  const containerRef = useRef(null); // Create a ref for the container
+  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) {
-      setContainerWidth(containerRef.current.offsetWidth); // Set the width of the container
+      resizeObserver.observe(containerRef.current); // Start observing
     }
-  }, [containerRef]);
+
+    // Cleanup observer on component unmount
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const newLegendData = dataState.map(item => ({
       title: item.name,
@@ -29055,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.payload[dataStateItem.tooltipKey]}`);
+    }));
   };
   const CustomTickBarChart = props => {
     const {
@@ -29094,6 +29106,27 @@ 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,
@@ -29106,15 +29139,22 @@ const DoubleBarSingleLine = props => {
     className: "Controls"
   }, 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, {
-    data: data,
-    margin: {
-      top: 10,
-      right: 35,
-      left: 35,
-      bottom: 32
+  }, /*#__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, {
@@ -29122,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,
@@ -29152,15 +29198,14 @@ 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