sag_components 1.0.1068 → 1.0.1069

package/dist/stories/components/SalesSplit.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _framerMotion = require("framer-motion");
+var _SalesSplit = require("./SalesSplit.style");
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+const SalesSplit = props => {
+  const {
+    title,
+    data,
+    lowLimit,
+    barHeight
+  } = props;
+  const [tooltip, setTooltip] = (0, _react.useState)(null);
+  const [barHeightState, setBarHeightState] = (0, _react.useState)(barHeight);
+  const barRefs = (0, _react.useRef)([]); // Array to store refs for each bar
+  const barsContainerRef = (0, _react.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+
+  // Filter data based on lowLimit
+  const filteredData = data.filter(item => item.value >= lowLimit);
+
+  // Calculate the total value of all bars
+  const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
+
+  // Reset tooltip when height changes
+  (0, _react.useEffect)(() => {
+    setBarHeightState(barHeight);
+    setTooltip(null);
+  }, [barHeight]);
+
+  // Function to render Tooltip
+  const renderTooltip = item => {
+    if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
+      const top = `${tooltipPosition.y}px`;
+      const left = `${tooltipPosition.x - 10}px`;
+      return /*#__PURE__*/_react.default.createElement(_SalesSplit.TooltipContainer, {
+        className: "TooltipContainer",
+        top: top,
+        left: left
+      }, item.label, ' ', "-", ' ', /*#__PURE__*/_react.default.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
+    }
+    return null;
+  };
+
+  // Function to render the bars and BarsContainer
+  const renderBars = () => /*#__PURE__*/_react.default.createElement(_SalesSplit.BarsContainer, {
+    ref: barsContainerRef,
+    className: "BarsContainer",
+    height: barHeightState
+  }, filteredData.map((item, index) => {
+    const barWidth = item.value / totalValue * 100;
+    return /*#__PURE__*/_react.default.createElement(_SalesSplit.BarWrapper, {
+      className: "BarWrapper"
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: index,
+      width: `${barWidth}%`,
+      height: barHeightState
+    }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SalesSplit.BarContainer, {
+      ref: el => {
+        barRefs.current[index] = el;
+      } // Attach ref
+      ,
+      className: "BarContainer",
+      height: barHeightState,
+      color: item.color,
+      initial: {
+        width: '0%'
+      },
+      animate: {
+        width: '100%'
+      },
+      exit: {
+        width: '0%'
+      },
+      transition: {
+        duration: 0.4
+      },
+      onMouseEnter: e => {
+        var _barRefs$current$inde;
+        const barRect = (_barRefs$current$inde = barRefs.current[index]) === null || _barRefs$current$inde === void 0 ? void 0 : _barRefs$current$inde.getBoundingClientRect();
+        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
+          setTooltip({
+            label: `${item.label} - ${Math.round(item.value / totalValue * 100)}%`
+          });
+          setTooltipPosition({
+            x: e.clientX,
+            y: e.clientY
+          });
+        }
+      },
+      onMouseLeave: e => {
+        var _barRefs$current$inde2;
+        const barRect = (_barRefs$current$inde2 = barRefs.current[index]) === null || _barRefs$current$inde2 === void 0 ? void 0 : _barRefs$current$inde2.getBoundingClientRect();
+        if (!barRect || e.clientX < barRect.x || e.clientX > barRect.x + barRect.width || e.clientY < barRect.y || e.clientY > barRect.y + barRect.height) {
+          setTooltip(null);
+        }
+      },
+      onMouseMove: e => {
+        var _barRefs$current$inde3;
+        const barRect = (_barRefs$current$inde3 = barRefs.current[index]) === null || _barRefs$current$inde3 === void 0 ? void 0 : _barRefs$current$inde3.getBoundingClientRect();
+        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
+          setTooltipPosition({
+            x: e.clientX,
+            y: e.clientY
+          });
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_SalesSplit.BarLabel, {
+      className: "BarLabel"
+    }, Math.round(item.value / totalValue * 100), "%")), renderTooltip(item)));
+  }));
+
+  // Function to render the Legend Area
+  const renderLegend = () => /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendContainer, {
+    className: "LegendContainer"
+  }, filteredData.map((item, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_SalesSplit.LegendItem, {
+    className: "LegendItem",
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendColorBox, {
+    className: "LegendColorBox",
+    style: {
+      backgroundColor: item.color
+    }
+  }), /*#__PURE__*/_react.default.createElement(_SalesSplit.LegendLabel, {
+    className: "LegendLabel"
+  }, item.label))));
+  return /*#__PURE__*/_react.default.createElement(_SalesSplit.SalesSplitContainer, {
+    className: "SalesSplitContainer"
+  }, !data || data.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+    className: "NoDataFoundMessage",
+    noDataText: ""
+  }) : /*#__PURE__*/_react.default.createElement(_SalesSplit.SalesSplitWrapper, {
+    className: "SalesSplitWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.TitleContainer, {
+    className: "TitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_SalesSplit.Title, {
+    className: "Title"
+  }, title)), renderBars(), renderLegend()));
+};
+var _default = exports.default = SalesSplit;

package/dist/stories/components/SalesSplit.style.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.SalesSplitWrapper = exports.SalesSplitContainer = exports.LegendLabel = exports.LegendItem = exports.LegendContainer = exports.LegendColorBox = exports.BarsContainer = exports.BarWrapper = exports.BarLabel = exports.BarContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _framerMotion = require("framer-motion");
+const SalesSplitContainer = exports.SalesSplitContainer = _styledComponents.default.div`
+
+  display: flex;  
+  flex-direction: column;  
+  justify-content: flex-start;  
+  position: relative;
+  height: ${props => props.height};
+  width: 100%;  
+  font-family: "Poppins", sans-serif;
+  
+`;
+
+// Wrapper with padding
+const SalesSplitWrapper = exports.SalesSplitWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;  
+  height: ${props => props.height};  
+`;
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; 
+  margin: 0 0 10px 0; 
+`;
+const Title = exports.Title = _styledComponents.default.h3`
+  user-select: none;
+  text-align: left;
+  margin: 0;
+  font-family: "Poppins", sans-serif;   
+  font-weight: 400;
+  font-size: 18px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height:  ${props => props.height};
+`;
+const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  justify-content: flex-start;
+  align-items: stretch; /* Ensures full vertical stretch */
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
+  background-color: ${props => props.color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${props => props.height};
+  width: 0%; /* Starts at 0% for animation */  
+`;
+const BarLabel = exports.BarLabel = _styledComponents.default.span`
+  color: white;
+  font-size: 14px;
+  font-weight: 400; 
+  user-select: none;
+`;
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  position: absolute;
+
+  top: ${props => props.top};
+  left: ${props => props.left};  
+  transition: left 0.8s ease, top 0.8s ease;
+
+  background-color: white;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 21px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: "Poppins", sans-serif;
+  user-select: none;
+
+  // Make the percentage bold 
+  span {
+     font-weight: bold;
+  }
+
+  // treeangle on the bottom
+  /* &:before {
+    content: "";
+    position: absolute;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 12px solid white;
+  } */
+`;
+const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 24px; 
+  margin-top: 10px;  
+  width: 100%;  
+  flex-shrink: 0;  
+`;
+const LegendItem = exports.LegendItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+`;
+const LegendColorBox = exports.LegendColorBox = _styledComponents.default.div`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  background-color: ${props => props.color};
+  border-radius: 2px;
+`;
+const LegendLabel = exports.LegendLabel = _styledComponents.default.span`  
+  user-select: none;
+  font-family: "Poppins", sans-serif;
+  color: #212121;
+  font-weight: 400; 
+  font-size: 14px; 
+  @media (max-width: 1536px) {
+    font-size: 12px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;

package/dist/stories/components/SingleBarLineCharts.js

@@ -16,35 +16,63 @@ var _CommonFunctions = require("./CommonFunctions");
 /* eslint-disable no-shadow */
 /* eslint-disable react/prop-types */
 
-const SingleBarLineCharts = props => {
+const SingleBarLineCharts = _ref => {
   var _legendData$find, _legendData$find2, _legendData$filter$, _legendData$filter$2;
-  const {
-    className,
-    width,
-    height,
-    title,
-    data,
-    totalsData,
-    showLegend,
-    legendData,
-    maxBarRange,
-    showLineChart,
-    lineRange,
-    lineFontSizeValue,
-    barFontSizeValue,
-    barSize,
-    barChartHeight,
-    lineChartHeight,
-    isLineChartCurrency,
-    isLineChartBolded,
-    setLineChartTooltip,
-    isTopBarPercent,
-    showSecondBar,
-    showPeriod,
-    currencySignLine,
-    currencySign,
-    noDataText
-  } = props;
+  let {
+    className = '',
+    width = '100%',
+    height = '100%',
+    title = '',
+    data = [],
+    totalsData = [],
+    showLegend = true,
+    legendData = [],
+    maxBarRange = 1,
+    showLineChart = true,
+    lineRange = 1,
+    lineFontSizeValue = '0.6em',
+    barFontSizeValue = '0.6em',
+    barSize = 60,
+    barChartHeight = 250,
+    lineChartHeight = 50,
+    isLineChartCurrency = false,
+    isLineChartBolded = false,
+    setLineChartTooltip = false,
+    isTopBarPercent = true,
+    showSecondBar = true,
+    showPeriod = true,
+    currencySign = '€',
+    currencySignLine = '€',
+    noDataText = 'No data'
+  } = _ref;
+  // const {
+  //   className,
+  //   width,
+  //   height,
+  //   title,
+  //   data,
+  //   totalsData,
+  //   showLegend,
+  //   legendData,
+  //   maxBarRange,
+  //   showLineChart,
+  //   lineRange,
+  //   lineFontSizeValue,
+  //   barFontSizeValue,
+  //   barSize,
+  //   barChartHeight,
+  //   lineChartHeight,
+  //   isLineChartCurrency,
+  //   isLineChartBolded,
+  //   setLineChartTooltip,
+  //   isTopBarPercent,
+  //   showSecondBar,
+  //   showPeriod,
+  //   currencySignLine,
+  //   currencySign,
+  //   noDataText,
+  // } = props;
+
   const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
   const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
     content: '',
@@ -304,31 +332,84 @@ const SingleBarLineCharts = props => {
   }));
 };
 exports.SingleBarLineCharts = SingleBarLineCharts;
-var _default = exports.default = SingleBarLineCharts;
-SingleBarLineCharts.defaultProps = {
-  className: '',
-  width: '100%',
-  height: '100%',
-  title: '',
-  data: [],
-  totalsData: [],
-  showLegend: true,
-  legendData: [],
-  maxBarRange: 1,
-  showLineChart: true,
-  lineRange: 1,
-  lineFontSizeValue: '0.6em',
-  barFontSizeValue: '0.6em',
-  barSize: 60,
-  barChartHeight: 250,
-  lineChartHeight: 50,
-  isLineChartCurrency: false,
-  isLineChartBolded: false,
-  setLineChartTooltip: false,
-  isTopBarPercent: true,
-  showSecondBar: true,
-  showPeriod: true,
-  currencySign: '€',
-  currencySignLine: '€',
-  noDataText: 'No data'
-};
+var _default = exports.default = SingleBarLineCharts; // SingleBarLineCharts.propTypes = {
+//   className: PropTypes.string,
+//   width: PropTypes.string,
+//   height: PropTypes.string,
+//   title: PropTypes.string,
+//   data: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       retailer: PropTypes.string,
+//       offerType: PropTypes.string,
+//       period: PropTypes.string,
+//       lineValue: PropTypes.number,
+//       barValue: PropTypes.number,
+//       secondBarValue: PropTypes.number,
+//     }),
+//   ),
+//   totalsData: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       title: PropTypes.string,
+//       value: PropTypes.number,
+//       sign: PropTypes.string,
+//       extraInfo: PropTypes.arrayOf(
+//         PropTypes.shape({
+//           title: PropTypes.string,
+//           value: PropTypes.number,
+//         }),
+//       ),
+//     }),
+//   ),
+//   showLegend: PropTypes.bool,
+//   legendData: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       iconColor: PropTypes.string,
+//       iconType: PropTypes.string,
+//       title: PropTypes.string,
+//     }),
+//   ),
+//   maxBarRange: PropTypes.number,
+//   showLineChart: PropTypes.bool,
+//   lineRange: PropTypes.number,
+//   lineFontSizeValue: PropTypes.string,
+//   barFontSizeValue: PropTypes.string,
+//   barSize: PropTypes.number,
+//   barChartHeight: PropTypes.number,
+//   lineChartHeight: PropTypes.number,
+//   isLineChartCurrency: PropTypes.bool,
+//   isLineChartBolded: PropTypes.bool,
+//   setLineChartTooltip: PropTypes.bool,
+//   isTopBarPercent: PropTypes.bool,
+//   showSecondBar: PropTypes.bool,
+//   showPeriod: PropTypes.bool,
+//   currencySign: PropTypes.string,
+//   currencySignLine: PropTypes.string,
+//   noDataText: PropTypes.string,
+// };
+// SingleBarLineCharts.defaultProps = {
+//   className: '',
+//   width: '100%',
+//   height: '100%',
+//   title: '',
+//   data: [],
+//   totalsData: [],
+//   showLegend: true,
+//   legendData: [],
+//   maxBarRange: 1,
+//   showLineChart: true,
+//   lineRange: 1,
+//   lineFontSizeValue: '0.6em',
+//   barFontSizeValue: '0.6em',
+//   barSize: 60,
+//   barChartHeight: 250,
+//   lineChartHeight: 50,
+//   isLineChartCurrency: false,
+//   isLineChartBolded: false,
+//   setLineChartTooltip: false,
+//   isTopBarPercent: true,
+//   showSecondBar: true,
+//   showPeriod: true,
+//   currencySign: '€',
+//   currencySignLine: '€',
+//   noDataText: 'No data',
+// };

package/dist/stories/components/TabMenu.style.js

@@ -59,8 +59,7 @@ const Tab = exports.Tab = _styledComponents.default.div`
   &.active {
     font-weight: 600;
     color: ${props => props.color};
-    border-bottom: 1mm solid #229E38;
-    //2px solid ${props => props.color};
+    border-bottom: 1mm solid ${props => props.color};
   }
 `;
 const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div`

package/dist/stories/components/TotalBenchmark.style.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleAndValueContainer = exports.Title = exports.NoDataFoundContainer = exports.FormattedValueNoData = exports.FormattedValue = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainerParent = exports.BenchmarkContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const MIN_HEIGHT = 300;
-const MIN_WIDTH = 260;
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
   display: flex;
   position: relative;