sag_components 1.0.422 → 1.0.424

package/dist/stories/components/CommonFunctions.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
+exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
 const getCurrencySign = (currencyTypeToConvert, value) => {
   if (value === undefined || value === null) {
-    return '';
+    return "";
   }
   if (isNaN(parseFloat(value))) {
-    return '';
+    return "";
   }
-  if (!currencyTypeToConvert) return '';
-  let currencySign = '';
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
+  if (!currencyTypeToConvert) return "";
+  let currencySign = "";
+  const currencyFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
     currency: currencyTypeToConvert
   });
   currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
@@ -23,21 +23,21 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
 exports.getCurrencySign = getCurrencySign;
 const getFormattedUnits = num => {
   if (num === undefined || num === null) {
-    return '';
+    return "";
   }
   if (isNaN(parseFloat(num))) {
-    return '';
+    return "";
   }
   if (Math.abs(num) >= 1000000000) {
-    return 'B';
+    return "B";
   }
   if (Math.abs(num) >= 1000000) {
-    return 'M';
+    return "M";
   }
   if (Math.abs(num) >= 1000) {
-    return 'K';
+    return "K";
   }
-  return '';
+  return "";
 };
 exports.getFormattedUnits = getFormattedUnits;
 const getFormattedValue = num => {
@@ -50,13 +50,13 @@ const getFormattedValue = num => {
 
   // if (typeof num === 'number') {
   if (Math.abs(num) >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
   }
   if (Math.abs(num) >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "");
   }
   if (Math.abs(num) >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000).toFixed(1).replace(/\.0$/, "");
   }
   return num;
   // }
@@ -65,7 +65,17 @@ exports.getFormattedValue = getFormattedValue;
 const getNumberWithCommas = x => {
   let param = x.toString();
   const pattern = /(-?\d+)(\d{3})/;
-  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
+  while (pattern.test(param)) param = param.replace(pattern, "$1,$2");
   return param;
 };
-exports.getNumberWithCommas = getNumberWithCommas;
+exports.getNumberWithCommas = getNumberWithCommas;
+const isNumericValue = num => {
+  if (num === undefined || num === null) {
+    return false;
+  }
+  if (isNaN(parseFloat(num))) {
+    return false;
+  }
+  return true;
+};
+exports.isNumericValue = isNumericValue;

package/dist/stories/components/IconButton.js

@@ -17,10 +17,7 @@ var _IconButton = require("./IconButton.style");
 /* IconButton */
 const IconButton = props => {
   const {
-    // downloadStatus,
-    fileName,
-    fileLink,
-    showProcess,
+    downloadStatus,
     contentColor,
     buttonText,
     backgroundColor,
@@ -30,28 +27,30 @@ const IconButton = props => {
     iconWidth,
     iconHeight,
     disabled,
+    inProgress,
     onClick,
     onCancelClick
   } = props;
+  const [mouseDownPressed, setMouseDownPressed] = (0, _react.useState)(false);
   const [progress, setProgress] = (0, _react.useState)(0);
   const incrementProgress = () => {
-    if (showProcess && progress <= 90) {
+    if (downloadStatus === 'in progress' && progress <= 90) {
       const interval = setInterval(() => {
         setProgress(prevProgress => {
-          const newProgress = prevProgress + 3;
+          const newProgress = prevProgress + 1;
           if (newProgress >= 90) {
             clearInterval(interval);
           }
           return newProgress;
         });
       }, 500);
-    } else {
+    } else if (downloadStatus === 'success') {
       setProgress(0);
     }
   };
   (0, _react.useEffect)(() => {
     incrementProgress();
-  }, [showProcess]);
+  }, [downloadStatus]);
   const getIcon = icon => {
     switch (icon) {
       case 'download':
@@ -100,35 +99,54 @@ const IconButton = props => {
         return '';
     }
   };
+  const onMouseDownHandler = () => {
+    if (disabled) return;
+    setMouseDownPressed(true);
+  };
+  const onMouseUpHandler = () => {
+    if (disabled) return;
+    setMouseDownPressed(false);
+  };
+  const onPointerOutHandler = () => {
+    if (disabled) return;
+    if (!mouseDownPressed) return;
+    setMouseDownPressed(false);
+  };
+  const getClassNameExtention = () => {
+    if (disabled) return 'disabled';
+    if (mouseDownPressed) return 'mouseDownPressed';
+    return '';
+  };
   const onClickHandler = event => {
+    if (disabled) return;
     onClick(event);
   };
   const onCancelClickHandler = event => {
     onCancelClick(event);
   };
   return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
-    download: fileName,
-    href: fileLink,
+    className: getClassNameExtention(),
     backgroundColor: backgroundColor,
     borderColor: borderColor,
     borderRadius: borderRadius,
     color: contentColor,
-    inProgress: showProcess,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler,
+    onPointerOut: onPointerOutHandler,
+    inProgress: inProgress,
     progress: progress,
     onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), showProcess && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
+  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), inProgress && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
     onClick: event => onCancelClickHandler(event)
   }, "Click here to cancel"));
 };
 exports.IconButton = IconButton;
 var _default = exports.default = IconButton;
 IconButton.defaultProps = {
-  // downloadStatus: '',
-  fileName: '',
-  fileLink: '',
-  showProcess: false,
+  // downloadStatus: 'fail',
+  downloadStatus: 'in progress',
   buttonText: '',
   iconName: 'eye',
   contentColor: '#212121',
@@ -138,6 +156,7 @@ IconButton.defaultProps = {
   iconHeight: 18,
   iconWidth: 18,
   disabled: false,
+  inProgress: false,
   onClick: () => {},
   onCancelClick: () => {}
 };

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

@@ -10,6 +10,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  text-align: center;\n"])));
-const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  text-decoration: none;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.buttonText, props.progress, props.progress + 1, props.borderRadius));
+const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  margin-bottom: 5px;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: 'In Progress';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.progress, props.progress + 1, props => props.borderRadius));
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n  cursor: pointer;\n  margin-top: 5px;\n"])));
+const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n"])));

package/dist/stories/components/TotalBenchmarkAreachart.js

@@ -10,9 +10,9 @@ var _recharts = require("recharts");
 var _ArrowUpIcon = require("./icons/ArrowUpIcon");
 var _ArrowDownIcon = require("./icons/ArrowDownIcon");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
+var _CommonFunctions = require("./CommonFunctions");
 var _Benchmark = require("./Benchmark");
 var _TotalBenchmarkAreachart = require("./TotalBenchmarkAreachart.style");
-var _CommonFunctions = require("./CommonFunctions");
 /* TotalBenchmarkAreachart */
 const TotalBenchmarkAreachart = props => {
   const {
@@ -36,14 +36,16 @@ const TotalBenchmarkAreachart = props => {
     opacity,
     value1Title,
     value2Title,
-    noDataText
+    noDataText,
+    startWeekRange = 0,
+    endWeekRange = 0
   } = props;
   const DEFAULT_ROOT_FONT = 16;
   const DEFAULT_COMPONENT_WIDTH = 250;
   const DEFAULT_COMPONENT_HEIGHT = 280;
-  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
+  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px"));
   const anotherRef = (0, _react.useRef)(null);
-  const [activeLabel, setActiveLabel] = (0, _react.useState)('');
+  const [activeLabel, setActiveLabel] = (0, _react.useState)("");
   const controlsContainerRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const {
@@ -52,16 +54,16 @@ const TotalBenchmarkAreachart = props => {
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
   const getRootFont = width => {
-    const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
-    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
+    const relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
+    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
     return fontRoot;
   };
-  const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
+  const getSizeFactor = () => rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
   const getArrowSign = arrowSign => {
     if (!arrowSign) {
-      return '';
+      return "";
     }
-    if (arrowSign === 'up') {
+    if (arrowSign === "up") {
       return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
         id: "DetailsRowArrowContainer",
         value: value
@@ -78,24 +80,43 @@ const TotalBenchmarkAreachart = props => {
       height: 25 * getSizeFactor()
     }));
   };
-  const CustomTick = _ref => {
-    let {
+
+  // ----------------------------- Custom tick function -----------------------
+  const CustomTick = item => {
+    var _payload$value, _payload$value2, _payload$value3;
+    const {
       x,
       y,
       stroke,
       payload
-    } = _ref;
+    } = item;
+    const NORMAL_WIDTH = 350;
+    const currentWeek = (payload === null || payload === void 0 ? void 0 : (_payload$value = payload.value) === null || _payload$value === void 0 ? void 0 : _payload$value.length) > 1 ? payload === null || payload === void 0 ? void 0 : (_payload$value2 = payload.value) === null || _payload$value2 === void 0 ? void 0 : _payload$value2.substring(1, payload === null || payload === void 0 ? void 0 : (_payload$value3 = payload.value) === null || _payload$value3 === void 0 ? void 0 : _payload$value3.length) : 0;
+    if (!(0, _CommonFunctions.isNumericValue)(currentWeek) || !(0, _CommonFunctions.isNumericValue)(startWeekRange) || !(0, _CommonFunctions.isNumericValue)(endWeekRange)) {
+      return;
+    }
+    const currentWeekNumeric = Number(currentWeek);
+    const startWeekRangeNumeric = Number(startWeekRange);
+    const endWeekRangeNumeric = Number(endWeekRange);
+    const {
+      offsetWidth
+    } = controlsContainerRef.current;
+    const elementWidthFactor = offsetWidth / NORMAL_WIDTH * 0.5;
+    const lastElementWidthFactor = offsetWidth / NORMAL_WIDTH * 0.9;
+    const elementLeftFactor = offsetWidth / NORMAL_WIDTH * 0.3;
+    const elementWidth = currentWeekNumeric === endWeekRangeNumeric ? 45 * lastElementWidthFactor : 140 * elementWidthFactor;
+    console.log("offsetWidth", offsetWidth, elementWidthFactor);
     return /*#__PURE__*/_react.default.createElement("g", {
       transform: "translate(".concat(x, ",").concat(y, ")")
-    }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
-      x: -15,
+    }, currentWeekNumeric >= startWeekRangeNumeric && currentWeekNumeric <= endWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
+      x: -50 * elementLeftFactor,
       y: 0,
-      width: "40",
-      height: "18",
+      width: elementWidth,
+      height: 18,
       rx: 9,
-      fill: xselectedColor,
-      fillOpacity: "0.30"
-    }), /*#__PURE__*/_react.default.createElement("text", {
+      fill: xselectedColor
+      //fillOpacity="0.50"
+    }) : "", /*#__PURE__*/_react.default.createElement("text", {
       x: 0,
       y: 14,
       dx: -10,
@@ -103,18 +124,27 @@ const TotalBenchmarkAreachart = props => {
       fontSize: "14px"
     }, payload.value));
   };
-  const CustomTooltip = _ref2 => {
+  const CustomTooltip = _ref => {
     let {
       active,
       payload,
       label
-    } = _ref2;
+    } = _ref;
     if (active && payload && payload.length) {
       setActiveLabel(label);
       return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value1Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value))), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value2Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[1].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[1].value))));
     }
     return null;
   };
+  const getEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataContainer, {
+    id: "EventWeeksLegendDataContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendColorRectangle, {
+    id: "EventWeeksLegendColorRectangle",
+    color: xselectedColor
+  }), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendTitle, {
+    id: "EventWeeksLegendTitle",
+    width: width
+  }, "Event weeks"));
   return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
@@ -129,9 +159,9 @@ const TotalBenchmarkAreachart = props => {
     id: "Title"
   }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
     id: "ValueAndBenchmarkContainer"
-  }, value !== undefined && value != null ? getArrowSign(arrowSign) : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
+  }, value !== undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
     id: "FormattedValue"
-  }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
+  }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
     id: "Benchmark",
@@ -145,7 +175,7 @@ const TotalBenchmarkAreachart = props => {
     linearGradientUnderAvarageColor: "#FDB1B1",
     underAvarageColor: "#FD5959",
     backgroundColor: "#F2F2F2"
-  })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
+  })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
     ref: anotherRef,
     id: "AreaChartContainer"
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
@@ -197,9 +227,9 @@ const TotalBenchmarkAreachart = props => {
     tick: item => /*#__PURE__*/_react.default.createElement(CustomTick, item),
     tickLine: false,
     style: {
-      fontWeight: '700',
-      stroke: '#D0D0D0',
-      strokeWidth: '1px'
+      fontWeight: "700",
+      stroke: "#D0D0D0",
+      strokeWidth: "1px"
     }
   }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
@@ -217,84 +247,86 @@ const TotalBenchmarkAreachart = props => {
     fill: "url(#colorValue2)"
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), getEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
 exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
 var _default = exports.default = TotalBenchmarkAreachart;
 TotalBenchmarkAreachart.defaultProps = {
-  title: 'String',
+  title: "String",
   value: 300,
-  arrowSign: '$',
+  arrowSign: "$",
   addingBenchmark: true,
-  benchmarkTotalValue: '',
+  benchmarkTotalValue: "",
   benchmarkValue: null,
   areaChartData: [{
-    title: 'W20',
+    title: "W20",
     value1: 542366,
     value2: 247715
   }, {
-    title: 'W21',
+    title: "W21",
     value1: 699511,
     value2: 252313
   }, {
-    title: 'W22',
+    title: "W22",
     value1: 403092,
     value2: 260822
   }, {
-    title: 'W23',
+    title: "W23",
     value1: 396184,
     value2: 264325
   }, {
-    title: 'W24',
+    title: "W24",
     value1: 415317,
     value2: 269243
   }, {
-    title: 'W25',
+    title: "W25",
     value1: 568376,
     value2: 269592
   }, {
-    title: 'W26',
+    title: "W26",
     value1: 1078121,
     value2: 269949
   }, {
-    title: 'W27',
+    title: "W27",
     value1: 347930,
     value2: 270735
   }, {
-    title: 'W28',
+    title: "W28",
     value1: 346258,
     value2: 271200
   }, {
-    title: 'W29',
+    title: "W29",
     value1: 350184,
     value2: 270324
   }, {
-    title: 'W30',
+    title: "W30",
     value1: 312790,
     value2: 266821
   }, {
-    title: 'W31',
+    title: "W31",
     value1: 335076,
     value2: 267064
   }, {
-    title: 'W32',
+    title: "W32",
     value1: 311037,
     value2: 266821
   }],
-  width: '100%',
-  height: '100%',
-  textcolor: '#212121',
-  areaChart1Color: '#BD9EFF',
-  areaChart2Color: '#96B4FF',
-  xselectedColor: '#42977A',
-  fillChart1Color: 'rgba(34, 158, 56, 0.20)',
-  fillChart2Color: 'rgba(255, 84, 84, 0.2)',
-  startOffset: '17.04%',
-  endOffset: '17.04%',
-  opacity: '191',
-  value1Title: 'Actual Sales',
-  value2Title: 'Baseline Sales',
-  noDataText: ''
+  width: "100%",
+  height: "100%",
+  textcolor: "#212121",
+  areaChart1Color: "#BD9EFF",
+  areaChart2Color: "#96B4FF",
+  xselectedColor: "#42977A",
+  fillChart1Color: "rgba(34, 158, 56, 0.20)",
+  fillChart2Color: "rgba(255, 84, 84, 0.2)",
+  startOffset: "17.04%",
+  endOffset: "17.04%",
+  opacity: "191",
+  value1Title: "Actual Sales",
+  value2Title: "Baseline Sales",
+  noDataText: "",
+  startWeekRange: 0,
+  endWeekRange: 0
 };

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
+exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.EventWeeksLegendTitle = exports.EventWeeksLegendDataContainer = exports.EventWeeksLegendColorRectangle = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height);
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background: #ffffff;\n  border-radius: 12px;\n  flex-basis: 100%;\n"])));
-const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 50%;\n"])));
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  /* justify-content: space-between; */\n  background: #ffffff;\n  border-radius: 12px;\n  flex-basis: 100%;\n"])));
+const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n  width: 100%;\n  height: 50%;\n"])));
 const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #ffffff;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
 const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
 const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: normal;\n"])));
@@ -20,5 +20,8 @@ const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledC
 const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-end;\n  width: 22px;\n  @media (max-width: 1366px) {\n    width: 12px;\n  }\n  @media (max-width: 1536px) {\n    width: 14px;\n  }\n"])));
 const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n"])));
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n"])));
-const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
-const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
+const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;\n"])));
+const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
+const EventWeeksLegendDataContainer = exports.EventWeeksLegendDataContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  margin-top: 10px;\n  align-items: center;\n"])));
+const EventWeeksLegendTitle = exports.EventWeeksLegendTitle = _styledComponents.default.h4(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  margin: 0 0 0 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const EventWeeksLegendColorRectangle = exports.EventWeeksLegendColorRectangle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.5rem;\n  min-width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 2px;\n  background: ", ";\n"])), props => props.color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.422",
+  "version": "1.0.424",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-designs": "^7.0.7",
+    "@storybook/addon-designs": "^7.0.5",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
@@ -35,24 +35,24 @@
     "babel-preset-react-app": "^10.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.3",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
-    "@mui/x-date-pickers": "^6.18.6",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
     "prop-types": "^15.8.1",

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};