sag_components 2.0.0-beta48 → 2.0.0-beta49

package/dist/index.esm.js

@@ -10073,26 +10073,34 @@ const OptionsContainer$4 = styled.div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = () => /*#__PURE__*/React$1.createElement("svg", {
-  width: "8",
-  height: "13",
+const ChervronRightIcon = ({
+  width = "8",
+  height = "13",
+  fill = "#777575"
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
   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: "#777575"
+  fill: fill
 }));
 
-const ChervronLeftIcon = () => /*#__PURE__*/React$1.createElement("svg", {
-  width: "7",
-  height: "13",
+const ChervronLeftIcon = ({
+  width = 7,
+  height = 13,
+  fill = "#777575"
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
   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: "#777575"
+  fill: fill
 }));
 
 /* eslint-disable react/prop-types */
@@ -28870,7 +28878,7 @@ const LegendContainer = styled.div`
   left: 0;
   text-align: center;
   width: ${props => `${props.width}px`};
-  bottom: 30px;
+  bottom: 20px;
 `;
 const Controls$1 = styled.div`
   height: calc(100% - 30px);
@@ -28937,31 +28945,14 @@ const DoubleBarSingleLine = props => {
     noDataText
   } = props;
   const [legendData, setLegendData] = useState([]);
-  const containerRef = useRef(null);
+  const containerRef = useRef(null); // Create a ref for the container
   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
+      setContainerWidth(containerRef.current.offsetWidth); // Set the width of the container
     }
-
-    // Cleanup observer on component unmount
-    return () => {
-      if (containerRef.current) {
-        resizeObserver.unobserve(containerRef.current);
-      }
-    };
-  }, []);
+  }, [containerRef]);
   useEffect(() => {
     const newLegendData = dataState.map(item => ({
       title: item.name,
@@ -29064,12 +29055,9 @@ 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) => {
-      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)}`);
-    }));
+    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}`)));
   };
   const CustomTickBarChart = props => {
     const {
@@ -29106,27 +29094,6 @@ 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,
@@ -29139,22 +29106,15 @@ 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, _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(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(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, {
@@ -29162,28 +29122,22 @@ const DoubleBarSingleLine = props => {
     key: obj.key,
     dataKey: obj.key,
     stroke: obj.color,
-    fill: obj.color
-    // dot={{ r: 6, stroke: obj.color, fill: obj.color }}
-    ,
-    activeDot: {
-      r: 8
-    },
-    isAnimationActive: false,
-    xAxisId: "line"
+    fill: obj.color,
+    legendType: "plainline"
   }, /*#__PURE__*/React$1.createElement(LabelList, {
-    content: CustomLabelLine,
-    position: "top"
-  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends({
+    content: CustomLabelLine
+  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, {
     data: data,
     barGap: 13,
     barCategoryGap: data.length >= limitViewableItems ? 178 : 50,
-    barSize: barsWidth
-  }, syncCharts, {
+    barSize: barsWidth,
     margin: {
-      ...syncCharts.margin,
+      top: 0,
+      right: 10,
+      left: 10,
       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,
@@ -29198,14 +29152,15 @@ const DoubleBarSingleLine = props => {
     tickLine: false,
     interval: 0
   }), /*#__PURE__*/React$1.createElement(YAxis, {
-    domain: [dataMin => Math.min(dataMin, 0), dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) * 1.5],
+    domain: [dataMin => Math.min(dataMin, 0),
+    // Handle negative values
+    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],
-    isAnimationActive: false
+    radius: [4, 4, 0, 0]
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: obj.key,
     content: CustomLabel