sag_components 1.0.417 → 1.0.419

package/dist/stories/components/TotalBenchmarkAreachart.js

@@ -93,32 +93,19 @@ const TotalBenchmarkAreachart = props => {
     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);
     return /*#__PURE__*/_react.default.createElement("g", {
       transform: "translate(".concat(x, ",").concat(y, ")")
-    }, currentWeek === startWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
+    }, currentWeekNumeric >= startWeekRangeNumeric && currentWeekNumeric <= endWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
       x: -15,
       y: 0,
-      width: "70",
+      width: "40",
       height: "18",
       rx: 9,
-      fill: xselectedColor
-      //fillOpacity="0.30"
-    }) : currentWeek > startWeekRange && currentWeek < endWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
-      x: -30,
-      y: 0,
-      width: "80",
-      height: "18",
-      rx: 9,
-      fill: xselectedColor
-      //fillOpacity="0.30"
-    }) : currentWeek === endWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
-      x: -30,
-      y: 0,
-      width: "55",
-      height: "18",
-      rx: 9,
-      fill: xselectedColor
-      //fillOpacity="0.30"
+      fill: xselectedColor,
+      fillOpacity: "0.50"
     }) : "", /*#__PURE__*/_react.default.createElement("text", {
       x: 0,
       y: 14,
@@ -139,6 +126,17 @@ const TotalBenchmarkAreachart = props => {
     }
     return null;
   };
+  const getEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataContainer, {
+    id: "EventWeeksLegendDataContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksTitleAndIconContainer, {
+    id: "EventWeeksTitleAndIconContainer"
+  }, /*#__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,
@@ -241,7 +239,7 @@ 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
   }));
 };
@@ -320,5 +318,7 @@ TotalBenchmarkAreachart.defaultProps = {
   opacity: "191",
   value1Title: "Actual Sales",
   value2Title: "Baseline Sales",
-  noDataText: ""
+  noDataText: "",
+  startWeekRange: 0,
+  endWeekRange: 0
 };

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

@@ -4,10 +4,10 @@ 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.EventWeeksTitleAndIconContainer = 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, _templateObject18;
 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"])));
@@ -21,4 +21,8 @@ const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledCompo
 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 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  gap: 40px;\n  margin-top: 10px;\n  @media (max-width: 1536px) {\n    gap: 38px;\n  }\n  @media (max-width: 1366px) {\n    gap: 30px;\n  }\n"])));
+const EventWeeksTitleAndIconContainer = exports.EventWeeksTitleAndIconContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+const EventWeeksLegendTitle = exports.EventWeeksLegendTitle = _styledComponents.default.h4(_templateObject17 || (_templateObject17 = (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(_templateObject18 || (_templateObject18 = (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.417",
+  "version": "1.0.419",
   "description": "",
   "main": "dist/index.js",
   "scripts": {