sag_components 2.0.0-beta339 → 2.0.0-beta340

package/dist/index.js

@@ -24398,24 +24398,23 @@ const DeleteIcon = styled__default["default"].div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    optionHoverColor = '#edf6ff',
-    selectedOptionColor = "#C7E4FF",
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  optionHoverColor = '#edf6ff',
+  selectedOptionColor = "#C7E4FF",
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24873,27 +24872,26 @@ const IconContainer$2 = styled__default["default"].div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    optionHoverColor = '#edf6ff',
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  optionHoverColor = '#edf6ff',
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -27038,12 +27036,13 @@ const TotalHorizontalCharts = props => {
     showDollarSign,
     className,
     hideTotalValue,
-    hideTitle
+    hideTitle,
+    labelBelow
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
   const topHeader = React$1.useRef();
   const wrapper = React$1.useRef();
-  const BAR_HEIGHT = 40; // Height of each bar including padding
+  const BAR_HEIGHT = labelBelow ? 58 : 40; // Height of each bar including padding
   const CHART_PADDING = 40; // Total padding for chart (top + bottom)
 
   // Inside the TotalHorizontalCharts component
@@ -27068,14 +27067,14 @@ const TotalHorizontalCharts = props => {
     clientY: 0
   });
   const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React__default["default"].createElement("text", {
-    x: props.x + (props.width <= 0 ? -12 : props.width) + 56,
-    y: props.y + 4,
-    dy: props.height / 2,
-    dx: -8,
+    x: labelBelow ? props.x : props.x + (props.width <= 0 ? -12 : props.width) + 56,
+    y: labelBelow ? props.y + props.height + 14 : props.y + 4,
+    dy: labelBelow ? 0 : props.height / 2,
+    dx: labelBelow ? 0 : -8,
     fill: props.stroke,
     fontSize: 12,
     fontWeight: 500,
-    textAnchor: "middle"
+    textAnchor: labelBelow ? 'start' : 'middle'
   }, ''.concat(getFormattedValue(props.value), getFormattedUnits(props.value)), /*#__PURE__*/React__default["default"].createElement("tspan", {
     fontWeight: 400
   }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React__default["default"].createElement("text", {
@@ -27232,7 +27231,8 @@ TotalHorizontalCharts.propTypes = {
   isPercentage: PropTypes.bool,
   showDollarSign: PropTypes.bool,
   hideTotalValue: PropTypes.bool,
-  hideTitle: PropTypes.bool
+  hideTitle: PropTypes.bool,
+  labelBelow: PropTypes.bool
 };
 TotalHorizontalCharts.defaultProps = {
   className: '',
@@ -27255,7 +27255,8 @@ TotalHorizontalCharts.defaultProps = {
   isPercentage: false,
   showDollarSign: true,
   hideTotalValue: false,
-  hideTitle: false
+  hideTitle: false,
+  labelBelow: false
 };
 
 const LampIcon = _ref => {
@@ -28994,7 +28995,8 @@ const BarChart = props => {
     referenceLineDashed,
     showCurrentCampaignStyle,
     isPercent,
-    noDataText
+    noDataText,
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = React$1.useRef();
   const areAllDatesEmpty = () => {
@@ -29031,22 +29033,57 @@ const BarChart = props => {
     const {
       x,
       y,
-      payload
+      payload,
+      width: axisWidth,
+      visibleTicksCount
     } = props;
     if (barChartData && barChartData.length > 0 && payload) {
       const retailerData = barChartData.filter(item => item.title === payload.value);
       if (retailerData && retailerData.length > 0) {
+        if (wrapTickLabels && !showCurrentCampaignStyle) {
+          const tickCount = visibleTicksCount || barChartData.length || 1;
+          const tickWidth = Math.min(90, Math.max(60, Math.floor((axisWidth || 500) / tickCount) - 10));
+          return /*#__PURE__*/React__default["default"].createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React__default["default"].createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React__default["default"].createElement("g", {
           transform: `translate(${x},${y})`
         }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/React__default["default"].createElement("rect", {
-          x: -56 // Adjust this to position the background properly
-          ,
-          y: 5 // Adjust this for vertical alignment with your text
-          ,
-          width: 112 // Adjust width based on the text length
-          ,
-          height: 22 // Adjust height based on font size
-          ,
+          x: -56,
+          y: 5,
+          width: 112,
+          height: 22,
           fill: currentBarColor || '#90CE9C',
           rx: 12
         }), /*#__PURE__*/React__default["default"].createElement("text", {
@@ -32857,7 +32894,8 @@ const SingleBarLineCharts = _ref => {
     showPeriod = true,
     currencySign = '€',
     currencySignLine = '€',
-    noDataText = 'No data'
+    noDataText = 'No data',
+    wrapTickLabels = false
   } = _ref;
   // const {
   //   className,
@@ -32966,7 +33004,9 @@ const SingleBarLineCharts = _ref => {
     const {
       x,
       y,
-      payload
+      payload,
+      width: axisWidth,
+      visibleTicksCount
     } = props;
     const handleMouseLeave = () => {
       setShowLegendTooltip(false);
@@ -32974,6 +33014,46 @@ const SingleBarLineCharts = _ref => {
     if (data && data.length > 0 && payload) {
       const retailerData = data.filter(item => item.retailer === payload.value);
       if (retailerData && retailerData.length > 0) {
+        const name = retailerData[0].retailer;
+        const period = retailerData[0].period;
+        if (wrapTickLabels) {
+          const tickCount = visibleTicksCount || data.length || 1;
+          const tickWidth = Math.min(90, Math.max(60, Math.floor((axisWidth || 500) / tickCount) - 10));
+          return /*#__PURE__*/React__default["default"].createElement("g", {
+            transform: `translate(${x},${y})`,
+            onMouseLeave: handleMouseLeave
+          }, /*#__PURE__*/React__default["default"].createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, name), showPeriod && /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, period))));
+        }
         return /*#__PURE__*/React__default["default"].createElement("g", {
           transform: `translate(${x},${y})`
           // onMouseEnter={() => handleMouseEnter(offerType)}
@@ -32989,7 +33069,7 @@ const SingleBarLineCharts = _ref => {
           x: "0",
           dy: "30",
           fontWeight: 600
-        }, retailerData[0].retailer)), showPeriod && /*#__PURE__*/React__default["default"].createElement("text", {
+        }, name)), showPeriod && /*#__PURE__*/React__default["default"].createElement("text", {
           x: 0,
           y: 0,
           dy: 16,
@@ -33000,7 +33080,7 @@ const SingleBarLineCharts = _ref => {
           dy: "50",
           fontSize: 14,
           fontWeight: 400
-        }, retailerData[0].period)));
+        }, period)));
       }
       return null;
     }
@@ -33079,7 +33159,7 @@ const SingleBarLineCharts = _ref => {
     dataKey: "retailer",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 80,
+    height: wrapTickLabels ? 120 : 80,
     interval: 0,
     axisLine: {
       height: '1px',
@@ -33637,7 +33717,8 @@ const BarChartTwoRows = props => {
     lowerValueLabel,
     highValueLabel,
     showLegend,
-    legendData
+    legendData,
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = React$1.useRef();
   const displayFormattedValue = value => {
@@ -33665,15 +33746,52 @@ const BarChartTwoRows = props => {
     const {
       x,
       y,
-      payload
+      payload,
+      width: axisWidth,
+      visibleTicksCount
     } = props;
     if (barChartData && barChartData.length > 0 && payload) {
       const retailerData = barChartData.filter(item => item.title === payload.value);
       if (retailerData && retailerData.length > 0) {
+        if (wrapTickLabels) {
+          const tickCount = visibleTicksCount || barChartData.length || 1;
+          const tickWidth = Math.min(90, Math.max(60, Math.floor((axisWidth || 500) / tickCount) - 10));
+          return /*#__PURE__*/React__default["default"].createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React__default["default"].createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React__default["default"].createElement("g", {
           transform: `translate(${x},${y})`
-          // onMouseEnter={() => handleMouseEnter(offerType)}
-          // onMouseLeave={handleMouseLeave}
         }, /*#__PURE__*/React__default["default"].createElement("text", {
           x: 0,
           y: 0,
@@ -33746,7 +33864,7 @@ const BarChartTwoRows = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 80,
+    height: wrapTickLabels ? 120 : 80,
     interval: 0,
     stroke: "#D0D0D0"
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
@@ -33851,7 +33969,8 @@ const TwoBarCharts = props => {
     referenceLineColor,
     referenceLineDashed,
     showTooltip,
-    tooltipText = ""
+    tooltipText = "",
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = React$1.useRef();
   const displayFormattedValue = value => {
@@ -33878,11 +33997,50 @@ const TwoBarCharts = props => {
     const {
       x,
       y,
-      payload
+      payload,
+      width: axisWidth,
+      visibleTicksCount
     } = props;
     if (barChartData && barChartData.length > 0 && payload) {
       const retailerData = barChartData.filter(item => item.title === payload.value);
       if (retailerData && retailerData.length > 0) {
+        if (wrapTickLabels) {
+          const tickCount = visibleTicksCount || barChartData.length || 1;
+          const tickWidth = Math.min(90, Math.max(60, Math.floor((axisWidth || 500) / tickCount) - 10));
+          return /*#__PURE__*/React__default["default"].createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React__default["default"].createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React__default["default"].createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React__default["default"].createElement("g", {
           transform: `translate(${x},${y})`
         }, /*#__PURE__*/React__default["default"].createElement("text", {