sag_components 2.0.0-beta339 → 2.0.0-beta340

package/dist/index.esm.js

@@ -24388,24 +24388,23 @@ const DeleteIcon = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24863,27 +24862,26 @@ const IconContainer$2 = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -27028,12 +27026,13 @@ const TotalHorizontalCharts = props => {
     showDollarSign,
     className,
     hideTotalValue,
-    hideTitle
+    hideTitle,
+    labelBelow
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
   const topHeader = useRef();
   const wrapper = 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
@@ -27058,14 +27057,14 @@ const TotalHorizontalCharts = props => {
     clientY: 0
   });
   const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React$1.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$1.createElement("tspan", {
     fontWeight: 400
   }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React$1.createElement("text", {
@@ -27222,7 +27221,8 @@ TotalHorizontalCharts.propTypes = {
   isPercentage: PropTypes.bool,
   showDollarSign: PropTypes.bool,
   hideTotalValue: PropTypes.bool,
-  hideTitle: PropTypes.bool
+  hideTitle: PropTypes.bool,
+  labelBelow: PropTypes.bool
 };
 TotalHorizontalCharts.defaultProps = {
   className: '',
@@ -27245,7 +27245,8 @@ TotalHorizontalCharts.defaultProps = {
   isPercentage: false,
   showDollarSign: true,
   hideTotalValue: false,
-  hideTitle: false
+  hideTitle: false,
+  labelBelow: false
 };
 
 const LampIcon = _ref => {
@@ -28984,7 +28985,8 @@ const BarChart = props => {
     referenceLineDashed,
     showCurrentCampaignStyle,
     isPercent,
-    noDataText
+    noDataText,
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = useRef();
   const areAllDatesEmpty = () => {
@@ -29021,22 +29023,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$1.createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React$1.createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React$1.createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React$1.createElement("g", {
           transform: `translate(${x},${y})`
         }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/React$1.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$1.createElement("text", {
@@ -32847,7 +32884,8 @@ const SingleBarLineCharts = _ref => {
     showPeriod = true,
     currencySign = '€',
     currencySignLine = '€',
-    noDataText = 'No data'
+    noDataText = 'No data',
+    wrapTickLabels = false
   } = _ref;
   // const {
   //   className,
@@ -32956,7 +32994,9 @@ const SingleBarLineCharts = _ref => {
     const {
       x,
       y,
-      payload
+      payload,
+      width: axisWidth,
+      visibleTicksCount
     } = props;
     const handleMouseLeave = () => {
       setShowLegendTooltip(false);
@@ -32964,6 +33004,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$1.createElement("g", {
+            transform: `translate(${x},${y})`,
+            onMouseLeave: handleMouseLeave
+          }, /*#__PURE__*/React$1.createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React$1.createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, name), showPeriod && /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, period))));
+        }
         return /*#__PURE__*/React$1.createElement("g", {
           transform: `translate(${x},${y})`
           // onMouseEnter={() => handleMouseEnter(offerType)}
@@ -32979,7 +33059,7 @@ const SingleBarLineCharts = _ref => {
           x: "0",
           dy: "30",
           fontWeight: 600
-        }, retailerData[0].retailer)), showPeriod && /*#__PURE__*/React$1.createElement("text", {
+        }, name)), showPeriod && /*#__PURE__*/React$1.createElement("text", {
           x: 0,
           y: 0,
           dy: 16,
@@ -32990,7 +33070,7 @@ const SingleBarLineCharts = _ref => {
           dy: "50",
           fontSize: 14,
           fontWeight: 400
-        }, retailerData[0].period)));
+        }, period)));
       }
       return null;
     }
@@ -33069,7 +33149,7 @@ const SingleBarLineCharts = _ref => {
     dataKey: "retailer",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 80,
+    height: wrapTickLabels ? 120 : 80,
     interval: 0,
     axisLine: {
       height: '1px',
@@ -33627,7 +33707,8 @@ const BarChartTwoRows = props => {
     lowerValueLabel,
     highValueLabel,
     showLegend,
-    legendData
+    legendData,
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = useRef();
   const displayFormattedValue = value => {
@@ -33655,15 +33736,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$1.createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React$1.createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React$1.createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React$1.createElement("g", {
           transform: `translate(${x},${y})`
-          // onMouseEnter={() => handleMouseEnter(offerType)}
-          // onMouseLeave={handleMouseLeave}
         }, /*#__PURE__*/React$1.createElement("text", {
           x: 0,
           y: 0,
@@ -33736,7 +33854,7 @@ const BarChartTwoRows = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 80,
+    height: wrapTickLabels ? 120 : 80,
     interval: 0,
     stroke: "#D0D0D0"
   }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
@@ -33841,7 +33959,8 @@ const TwoBarCharts = props => {
     referenceLineColor,
     referenceLineDashed,
     showTooltip,
-    tooltipText = ""
+    tooltipText = "",
+    wrapTickLabels = false
   } = props;
   const controlsContainerRef = useRef();
   const displayFormattedValue = value => {
@@ -33868,11 +33987,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$1.createElement("g", {
+            transform: `translate(${x},${y})`
+          }, /*#__PURE__*/React$1.createElement("foreignObject", {
+            x: -tickWidth / 2,
+            y: 8,
+            width: tickWidth,
+            height: 110
+          }, /*#__PURE__*/React$1.createElement("div", {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              fontFamily: '"Poppins", sans-serif',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontWeight: 600,
+              fontSize: '0.7em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3
+            }
+          }, payload.value), /*#__PURE__*/React$1.createElement("span", {
+            style: {
+              fontSize: '0.6em',
+              color: '#212121',
+              overflowWrap: 'anywhere',
+              lineHeight: 1.3,
+              marginTop: '4px'
+            }
+          }, retailerData[0].date))));
+        }
         return /*#__PURE__*/React$1.createElement("g", {
           transform: `translate(${x},${y})`
         }, /*#__PURE__*/React$1.createElement("text", {