sag_components 2.0.0-beta45 → 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

@@ -25889,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;
@@ -26496,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 */
@@ -28850,7 +28856,6 @@ const scrollableStyles$2 = `
   }
 `;
 const DoubleBarSingleLineContainer = styled.div`
-  position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
   background-color: white;
@@ -28861,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;
@@ -28919,6 +28925,7 @@ const DoubleBarSingleLine = props => {
     width,
     height,
     title,
+    hasScroll,
     dataState,
     data,
     lineChartValueType,
@@ -28930,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,
@@ -29032,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 {
@@ -29071,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, {
@@ -29098,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,
@@ -29128,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
@@ -29325,11 +29394,17 @@ const AreaChart = props => {
   const [areaChartsToDisplay, setAreaChartsToDisplay] = useState([]);
 
   // Compute max domain values
-  const leftKeys = areaChartsState.filter(chart => chart.yAxisId === "left").map(chart => chart.key);
-  const rightKeys = areaChartsState.filter(chart => chart.yAxisId === "right").map(chart => chart.key);
-  const getMaxDomain = keys => data ? Math.max(...data.flatMap(d => keys.map(key => d[key] ?? 0))) * 1.1 : 0;
-  const maxLeftDomain = getMaxDomain(leftKeys);
-  const maxRightDomain = getMaxDomain(rightKeys);
+  // const leftKeys = areaChartsState
+  //   .filter((chart) => chart.yAxisId === "left")
+  //   .map((chart) => chart.key);
+  // const rightKeys = areaChartsState
+  //   .filter((chart) => chart.yAxisId === "right")
+  //   .map((chart) => chart.key);
+  // const getMaxDomain = (keys) =>
+  //   data ? Math.max(...data.flatMap((d) => keys.map((key) => d[key] ?? 0))) * 1.1 : 0;
+  // const maxLeftDomain = getMaxDomain(leftKeys);
+  // const maxRightDomain = getMaxDomain(rightKeys);
+
   useEffect(() => {
     if (containerRef.current) {
       setContainerWidth(containerRef.current.offsetWidth);
@@ -29547,19 +29622,13 @@ const AreaChart = props => {
     tickLine: false
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     yAxisId: "left",
-    domain: [0, maxLeftDomain],
-    hide: true,
-    ticks: Array.from({
-      length: maxLeftDomain
-    }, (_, index) => index)
+    domain: [0, 'dataMax'],
+    hide: true
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     yAxisId: "right",
     orientation: "right",
-    domain: [0, maxRightDomain],
-    hide: true,
-    ticks: Array.from({
-      length: maxRightDomain
-    }, (_, index) => index)
+    domain: [0, 'dataMax'],
+    hide: true
   }), /*#__PURE__*/React$1.createElement(CartesianGrid, {
     stroke: "#D0D0D0",
     strokeDasharray: "4 3",
@@ -30328,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