sag_components 1.0.335 → 1.0.337

package/dist/stories/components/PerformanceAnalyticsOneColumn.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PerformanceAnalyticsOneColumn = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
+var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
 var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
@@ -56,6 +59,18 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
     topBarSigning = _ref.topBarSigning,
     noDataText = _ref.noDataText,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLegendTooltip = _useState2[0],
+    setShowLegendTooltip = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      content: '',
+      clientX: 0,
+      clientY: 0
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    tooltipCouponText = _useState4[0],
+    setTooltipCouponText = _useState4[1];
   var CustomTooltipBarChart = function CustomTooltipBarChart(_ref2) {
     var active = _ref2.active,
       payload = _ref2.payload;
@@ -101,14 +116,31 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
     var x = props.x,
       y = props.y,
       payload = props.payload;
+    var handleMouseEnter = function handleMouseEnter(content) {
+      setTooltipCouponText(function (prevState) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prevState), {}, {
+          content: content !== prevState.content ? content : prevState.content,
+          clientX: x,
+          clientY: y
+        });
+      });
+      setShowLegendTooltip(true);
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      setShowLegendTooltip(false);
+    };
     if (data && data.length > 0 && payload) {
       var retailerData = data.filter(function (item) {
         return item.retailer === payload.value;
       });
       if (retailerData && retailerData.length > 0) {
-        var _retailerData$0$offer;
+        var offerType = retailerData[0].offerType;
         return /*#__PURE__*/_react.default.createElement("g", {
-          transform: "translate(".concat(x, ",").concat(y, ")")
+          transform: "translate(".concat(x, ",").concat(y, ")"),
+          onMouseEnter: function onMouseEnter() {
+            return handleMouseEnter(offerType);
+          },
+          onMouseLeave: handleMouseLeave
         }, /*#__PURE__*/_react.default.createElement("text", {
           x: 0,
           y: 0,
@@ -125,12 +157,6 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
           dy: "30",
           fontSize: 14,
           fontWeight: 400
-        }, (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LabelText, {
-          textAnchor: "middle",
-          x: "0",
-          dy: "30",
-          fontSize: 14,
-          fontWeight: 400
         }, retailerData[0].period)));
       }
       return null;
@@ -158,6 +184,12 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
         height: 120,
         stroke: "#D0D0D0",
         fill: "#212121"
+      }), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
+        id: "Tooltip",
+        content: tooltipCouponText.content,
+        top: tooltipCouponText.clientY,
+        left: tooltipCouponText.clientX,
+        direction: "top"
       }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
         cursor: {
           fill: 'transparent'

package/dist/stories/components/TspanTooltip.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Tooltip = require("./Tooltip.style");
+var _TspanTooltip = require("./TspanTooltip.style");
 var Tooltip = function Tooltip(props) {
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
+  return /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipContainer, {
+    top: "".concat(props.top, "px"),
+    left: "".concat(props.left, "px")
+  }, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipTip, {
     className: "controls ".concat(props.direction || 'top')
   }, props.content)));
 };

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = exports.TooltipTip = exports.TooltipContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+/* Custom properties */
+var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --tooltip-text-color: black;\n  --tooltip-background-color: white;\n  --tooltip-margin: 40px;\n  --tooltip-arrow-size: 10px;\n  position: absolute;\n  z-index: 9999;\n  top: ", ";\n  left: ", ";\n"])), function (props) {
+  return props.top;
+}, function (props) {
+  return props.left;
+});
+
+/* Wrapping */
+var TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n"])));
+
+/* Absolute positioning */
+var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 8px 12px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.335",
+  "version": "1.0.337",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/stories/components/CodeEditor.js

@@ -1,40 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-"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/Modal.js

@@ -1,19 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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/TotalCostModal.js

@@ -1,143 +0,0 @@
-"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 = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
-var _TextField = _interopRequireDefault(require("./TextField"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _reactHookForm = require("react-hook-form");
-var _Modal2 = require("./Modal.style");
-var TotalCostModal = function TotalCostModal(_ref) {
-  var title = _ref.title,
-    isModalOpen = _ref.isModalOpen,
-    setModalOpen = _ref.setModalOpen,
-    setResult = _ref.setResult;
-  var _useState = (0, _react.useState)([{
-      id: "title",
-      label: "Title",
-      type: "text"
-    }, {
-      id: "dotCut",
-      label: "Do Cut",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currency",
-      label: "Currency",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currencyType",
-      label: "Currency Type",
-      type: "select",
-      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
-    }, {
-      id: "width",
-      label: "Width",
-      type: "text"
-    }, {
-      id: "height",
-      label: "Height",
-      type: "text"
-    }, {
-      id: "textColor",
-      label: "Text Color",
-      type: "text"
-    }, {
-      id: "noDataText",
-      label: "No Data Text",
-      type: "text"
-    }]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    params = _useState2[0],
-    setParams = _useState2[1];
-  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    code = _useState4[0],
-    setCode = _useState4[1];
-  var _useForm = (0, _reactHookForm.useForm)(),
-    register = _useForm.register,
-    handleSubmit = _useForm.handleSubmit,
-    watch = _useForm.watch,
-    control = _useForm.control,
-    errors = _useForm.formState.errors;
-  var onSubmit = function onSubmit(data) {
-    return setResult(data);
-  };
-  return /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
-    isOpen: isModalOpen,
-    onClose: function onClose() {
-      return setModalOpen(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
-    value: code,
-    onChange: setCode
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid",
-      gridTemplateColumns: "auto auto auto"
-    }
-  }, params.map(function (item) {
-    if (item.type === "text") {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
-            allowedInput: "all",
-            height: "100%",
-            label: item.label,
-            multiline: true,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            width: "300px"
-          }));
-        }
-      });
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
-            allowedInput: "all",
-            labelColor: "#1B30AA",
-            limitTagsOnMultiSelect: 0,
-            onInputChange: function onInputChange(e) {
-              var _e$inputValue;
-              console.log("e", e);
-              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
-            },
-            options: item.options,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            text: item.label,
-            width: "300px"
-          }));
-        }
-      });
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
-    type: "submit"
-  })));
-};
-var _default = exports.default = TotalCostModal;