sag_components 1.0.257 → 1.0.259

package/dist/stories/components/CodeEditor.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+require("ace-builds/src-noconflict/mode-mysql");
+require("ace-builds/src-noconflict/theme-monokai");
+require("ace-builds/src-noconflict/ext-language_tools");
+require("ace-builds/src-noconflict/snippets/mysql");
+// CodeEditor.js
+
+var CodeEditor = function CodeEditor(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
+    style: {
+      height: "200px"
+    },
+    mode: "mysql",
+    theme: "monokai",
+    value: value,
+    onChange: onChange,
+    name: "code-editor",
+    editorProps: {
+      $blockScrolling: true
+    },
+    setOptions: {
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true,
+      showLineNumbers: true,
+      tabSize: 1
+    }
+  });
+};
+var _default = exports.default = CodeEditor;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AceEditorContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+var _templateObject;
+var AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));

package/dist/stories/components/CollapseData.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CollapseData = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _CollapseData = require("./CollapseData.style");
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+var _ShoppingCartIcon = require("./icons/ShoppingCartIcon");
+var _ClockIcon = require("./icons/ClockIcon");
+var _ArrowUpIcon = require("./icons/ArrowUpIcon");
+var _ArrowDownIcon = require("./icons/ArrowDownIcon");
+var CollapseData = exports.CollapseData = function CollapseData(props) {
+  var title = props.title,
+    tableData = props.tableData,
+    noDataText = props.noDataText,
+    width = props.width,
+    height = props.height;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var handleClick = function handleClick(index) {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CollapseData.AccordionWrapper, {
+    width: width,
+    height: height
+  }, tableData.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+    noDataText: noDataText
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(function (section) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: section.key,
+      className: "accordion-section",
+      id: section.key
+    }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
+      isOpen: activeIndex === section.key,
+      onClick: function onClick() {
+        return handleClick(section.key);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
+      width: "11px",
+      height: "12px"
+    }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
+      width: "11px",
+      height: "12px"
+    })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (headline) {
+      return /*#__PURE__*/_react.default.createElement(_CollapseData.Th, null, headline.title);
+    }))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (data) {
+      if (data.value !== null) {
+        return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, null, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
+      }
+      return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, null, "No Data");
+    }))))));
+  })));
+};
+var _default = exports.default = CollapseData;
+CollapseData.defaultProps = {
+  title: '',
+  noDataText: '',
+  width: '455px',
+  height: '379px',
+  tableData: []
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleDiv = exports.TitleAccordion = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.IconDiv = exports.IconAndTitle = exports.ComponentHeader = exports.ArrowAndNumber = exports.AccordionWrapper = 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;
+var AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  min-width: 455px;\n  height: ", ";\n  min-height: 379px;\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
+  return props.isOpen ? '#D0D0D0' : 'white';
+});
+var IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
+var ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));
+var IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  width: 25%;\n"])));
+var TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 70%;\n  text-align: left;\n  padding-left: 3px;\n"])));
+var TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  margin-bottom: 22px;\n"])));
+var Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  border-collapse: collapse;\n  width: 100%;\n  table-layout: fixed;\n"])));
+var Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: white;\n  font-family: \"poppins\";\n  font-weight: 600;\n  font-size: 12px;\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 18px;\n  border-top: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+var Td = exports.Td = _styledComponents.default.td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  font-family: \"poppins\";\n  font-weight: 400;\n  border-bottom: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+var ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"poppins\";\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n"])));

package/dist/stories/components/Modal.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Modal = require("./Modal.style");
+var Modal = function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalContent, null, children, /*#__PURE__*/_react.default.createElement(_Modal.CloseButton, {
+    onClick: onClose
+  }, "Close")));
+};
+var _default = exports.default = Modal;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index:999999;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: ", " 0.3s ease-in-out;\n"])), fadeIn);
+var ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #fff;\n  overflow: scroll;\n  padding: 20px;\n  border-radius: 8px;\n  width: 50%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
+var CloseButton = exports.CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
+var SubmitButton = exports.SubmitButton = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  margin-right: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));

package/dist/stories/components/PerformanceAnalytics.js

@@ -0,0 +1,254 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PerformanceAnalytics = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _recharts = require("recharts");
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+var _SegmentedButton = require("./SegmentedButton");
+var _CommonFunctions = require("./CommonFunctions");
+var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
+var _Benchmark = require("./Benchmark");
+var _excluded = ["totalsData", "data", "displayType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textColor", "width", "height", "noDataText"];
+/* PerformanceAnalytics */
+var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAnalytics(_ref) {
+  var _ref$totalsData = _ref.totalsData,
+    totalsData = _ref$totalsData === void 0 ? [{
+      title: string | null,
+      value: _propTypes.number | null,
+      dotCut: _propTypes.bool,
+      currency: _propTypes.bool,
+      currencyType: string | null,
+      growthPercent: _propTypes.number | null
+    }] : _ref$totalsData,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [{
+      retailer: string | null,
+      offerType: string | null,
+      period: string | null,
+      roiValue: _propTypes.number | null,
+      // individual performance
+      packageCostValue: _propTypes.number | null,
+      redemptionCostValue: _propTypes.number | null,
+      incrementalSalesValue: _propTypes.number | null,
+      // % Incremental Growth
+      IncrementalGrowthValue: _propTypes.number | null,
+      // % Contribution of Total
+      packageCostPercentValue: _propTypes.number | null,
+      redemptionCostPercentValue: _propTypes.number | null,
+      incrementalSalesPercentValue: _propTypes.number | null,
+      // New / existing Shoppers
+      newShoppersValue: _propTypes.number | null,
+      newShoppersPercentValue: _propTypes.number | null,
+      existingShoppersValue: _propTypes.number | null,
+      existingShoppersPercentValue: _propTypes.number | null
+    }] : _ref$data,
+    _ref$displayType = _ref.displayType,
+    displayType = _ref$displayType === void 0 ? "TotalCost" : _ref$displayType,
+    _ref$colorGraphROI = _ref.colorGraphROI,
+    colorGraphROI = _ref$colorGraphROI === void 0 ? "#9CCB3B" : _ref$colorGraphROI,
+    _ref$colorBarchart = _ref.colorBarchart1,
+    colorBarchart1 = _ref$colorBarchart === void 0 ? "#1F7677" : _ref$colorBarchart,
+    _ref$colorBarchart2 = _ref.colorBarchart2,
+    colorBarchart2 = _ref$colorBarchart2 === void 0 ? "#90CE9C" : _ref$colorBarchart2,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
+    width = _ref.width,
+    height = _ref.height,
+    noDataText = _ref.noDataText,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var DEFAULT_ROOT_FONT = 18;
+  var DEFAULT_COMPONENT_WIDTH = 250;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    segmentedButtonsFilter = _useState2[0],
+    setSegmentedButtonsFilter = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeLabelROI = _useState4[0],
+    setActiveLabelROI = _useState4[1];
+  var _useState5 = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    rootFont = _useState6[0],
+    setRootFont = _useState6[1];
+  var controlsContainerRef = (0, _react.useRef)();
+  var getRootFont = function getRootFont(scopeWidth) {
+    var relation = scopeWidth.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
+    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
+    return fontRoot;
+  };
+  var dotCutTrenty = function dotCutTrenty(row) {
+    return dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value);
+  };
+  (0, _react.useEffect)(function () {
+    var offsetWidth = controlsContainerRef.current.offsetWidth;
+    setRootFont(getRootFont(offsetWidth));
+  }, [width]);
+  var getTotalsData = function getTotalsData() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TotalsDataContainer, {
+      id: "TotalsDataContainer"
+    }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TitleAndValueContainer, {
+        id: "TitleAndValueContainer"
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.Title, {
+        id: "Title",
+        width: width
+      }, item.title), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.CurrencySignAndFormattedValueContainer, {
+        id: "CurrencySignAndFormattedValueContainer"
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.FormattedValue, {
+        id: "FormattedValue",
+        width: width
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.CurrencySign, {
+        id: "CurrencySign"
+      }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ""), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "")));
+    }));
+  };
+  var getSegmentedButtons = function getSegmentedButtons() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.SegmentedButtonContainer, {
+      id: "SegmentedButtonContainer"
+    }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
+      id: "SegmentedButton BaselineSTLY",
+      options: [{
+        value: "Individual Performance"
+      }, {
+        value: "% Incremental Growth"
+      }, {
+        value: "% Contribution of Total"
+      }],
+      backgroundColor: "#F2F2F2",
+      controlRadius: 8,
+      defaultIndex: 0,
+      fontSize: 12,
+      name: "segmentedDollarsOrUnits",
+      onClick: function onClick(event) {
+        setSegmentedButtonsFilter(event.value);
+      },
+      segmentRadius: 8,
+      selectedSegmentColor: "#ffffff",
+      selectedTextColor: "#212121",
+      unselectedTextColor: "#212121",
+      width: 490,
+      heigth: 14
+    }));
+  };
+  var CustomizedLabelROI = function CustomizedLabelROI(props) {
+    var x = props.x,
+      y = props.y,
+      stroke = props.stroke,
+      value = props.value;
+    return /*#__PURE__*/_react.default.createElement("text", {
+      x: x,
+      y: y,
+      dy: -4,
+      fill: stroke,
+      fontSize: 10,
+      textAnchor: "middle"
+    }, value);
+  };
+  var CustomTooltipROI = function CustomTooltipROI(_ref2) {
+    var active = _ref2.active,
+      payload = _ref2.payload,
+      label = _ref2.label,
+      name = _ref2.name;
+    if (active && payload && payload.length) {
+      console.log("CustomTooltipROI", active, payload, label, name);
+      setActiveLabelROI(label);
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipDivROI, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipTitleROI, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabelROI, null, "ROI: ".concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value))));
+    }
+    return null;
+  };
+  var getLineChartROI = function getLineChartROI() {
+    return /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
+      width: 700,
+      height: 150,
+      data: data,
+      margin: {
+        top: 20,
+        right: 30,
+        left: 20,
+        bottom: 10
+      }
+    }, /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+      content: /*#__PURE__*/_react.default.createElement(CustomTooltipROI, null)
+    }), /*#__PURE__*/_react.default.createElement(_recharts.Line, {
+      type: "monotone",
+      dataKey: "roiValue",
+      name: "retailer",
+      stroke: colorGraphROI
+    }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+      content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ControlsContainer, {
+    id: "ControlsContainer",
+    height: height,
+    width: width,
+    textColor: textColor,
+    ref: controlsContainerRef,
+    rootFont: rootFont
+  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.Controls, {
+    id: "Controls",
+    height: height,
+    width: width
+  }, getTotalsData(), getSegmentedButtons(), getLineChartROI()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+    noDataText: noDataText
+  }));
+};
+var _default = exports.default = PerformanceAnalytics; // PerformanceAnalytics.propTypes = {
+//   title: PropTypes.string,
+//   value: PropTypes.number,
+//   addingBenchmark: PropTypes.bool,
+//   dotCut: PropTypes.bool,
+//   currencySign: PropTypes.bool,
+//   currencyType: PropTypes.string,
+//   legendData: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       name: PropTypes.string,
+//       description: PropTypes.string,
+//     })
+//   ),
+//   itemsPercentagesValueAside: PropTypes.bool,
+//   itemsBoldedValues: PropTypes.bool,
+//   itemsValuesSeparateLine: PropTypes.bool,
+//   width: PropTypes.string,
+//   height: PropTypes.string,
+//   textColor: PropTypes.string,
+//   noDataText: PropTypes.string,
+// };
+// PerformanceAnalytics.defaultProps = {
+//   title: "Total Cost",
+//   value: 0,
+//   addingBenchmark: false,
+//   dotCut: false,
+//   currencySign: false,
+//   currencyType: "USD",
+//   legendData: [],
+//   itemsPercentagesValueAside: false,
+//   itemsBoldedValues: true,
+//   itemsValuesSeparateLine: true,
+//   width: "300px",
+//   height: "280px",
+//   textColor: "#212121",
+//   noDataText: "",
+// };
+function CustomTooltip(_ref3) {
+  var active = _ref3.active,
+    payload = _ref3.payload,
+    value = _ref3.value;
+  if (active && payload && payload.length) {
+    var percent = value && value !== 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipDivROI, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabelROI, null, "".concat(payload[0].name, " ").concat(percent, "%")));
+  }
+}
+CustomTooltip.defaultProps = {
+  active: "",
+  payload: "",
+  value: ""
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TotalsDataContainer = exports.TooltipTitleROI = exports.TooltipLabelROI = exports.TooltipDivROI = exports.TitleAndValueContainer = exports.Title = exports.SegmentedButtonContainer = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.rootFont;
+}, function (props) {
+  return props.textColor;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 10px 0 0 10px;\n"])));
+var TooltipDivROI = exports.TooltipDivROI = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
+var TooltipLabelROI = exports.TooltipLabelROI = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
+var TooltipTitleROI = exports.TooltipTitleROI = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
+var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
+var Title = exports.Title = _styledComponents.default.h4(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
+var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-top: auto;\n  padding: 0 20px;\n"])));
+var DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 40%;\n  flex-basis: 40%;\n  min-height: 6rem;\n"])));
+var LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
+var LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
+var LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
+var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));
+var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+  return props.color;
+});
+var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  gap: 5px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+var LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));

package/dist/stories/components/PerformanceAnalyticsTotals.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PerformanceAnalyticsTotals = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _CommonFunctions = require("./CommonFunctions");
+var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals.style");
+/* PerformanceAnalyticsTotals */
+var PerformanceAnalyticsTotals = exports.PerformanceAnalyticsTotals = function PerformanceAnalyticsTotals(_ref) {
+  var _ref$totalsData = _ref.totalsData,
+    totalsData = _ref$totalsData === void 0 ? [{
+      title: string | null,
+      value: _propTypes.number | null,
+      dotCut: _propTypes.bool,
+      currency: _propTypes.bool,
+      currencyType: string | null,
+      growthPercent: _propTypes.number | null
+    }] : _ref$totalsData,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
+    width = _ref.width,
+    height = _ref.height;
+  // const getGrowthPercent = (growthPercent) => {
+
+  //     if (!growthPercent) return "";
+
+  //     return 
+  //            <GrowthPercent id="GrowthPercent">
+
+  //        getGrowthPercent(item.growthPercent)
+
+  //   </GrowthPercent> ;
+  // };
+
+  var getTotalsData = function getTotalsData() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TotalsDataContainer, {
+      id: "TotalsDataContainer"
+    }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
+        id: "TitleAndValueContainer"
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
+        id: "Title",
+        width: width
+      }, item.title), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySignAndFormattedValueContainer, {
+        id: "CurrencySignAndFormattedValueContainer"
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.FormattedValue, {
+        id: "FormattedValue",
+        width: width
+      }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySign, {
+        id: "CurrencySign"
+      }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ""), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "")));
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.ControlsContainer, {
+    id: "ControlsContainer",
+    height: height,
+    width: width,
+    textColor: textColor
+  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Controls, {
+    id: "Controls",
+    height: height,
+    width: width
+  }, getTotalsData()) : "");
+};
+var _default = exports.default = PerformanceAnalyticsTotals;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TotalsDataContainer = exports.TitleAndValueContainer = exports.Title = exports.LegendFormatedValueContainer = exports.GrowthPercent = exports.FormattedValue = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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;
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.rootFont;
+}, function (props) {
+  return props.textColor;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
+var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
+var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));