sag_components 1.0.757 → 1.0.759

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};

package/dist/stories/components/FilterButton.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(!activeState);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: activeState ? activeColor : color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: activeState ? activeColor : color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/TotalHorizontalCharts.js

@@ -9,7 +9,6 @@ exports.default = exports.TotalHorizontalCharts = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
 var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
-var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _CommonFunctions = require("./CommonFunctions");
 var _TotalHorizontalCharts = require("./TotalHorizontalCharts.style");
@@ -29,9 +28,10 @@ const TotalHorizontalCharts = props => {
     height,
     textColor,
     chartsData,
-    showOutgoingBanner,
     noDataText,
-    onBannerClick
+    isDollar,
+    isPercentage,
+    showDollarSign
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
   const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
@@ -49,6 +49,31 @@ const TotalHorizontalCharts = props => {
       setHeightChartContainer(chartContainerRef.current.clientHeight);
     }
   }, [width, height]);
+  const displayFormattedValue = value => {
+    if (!value) return '';
+    let formattedValue = '';
+    formattedValue = !isDollar ? ''.concat(isPercentage ? '%' : '', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
+    return formattedValue;
+  };
+  const CustomizedLabel = props => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      stroke,
+      value
+    } = props;
+    return /*#__PURE__*/_react.default.createElement("text", {
+      x: x + width + 40,
+      y: y + 4,
+      dy: height / 2,
+      dx: -8,
+      fill: stroke,
+      fontSize: 12,
+      textAnchor: "middle"
+    }, displayFormattedValue(value));
+  };
   const CustomizedTickBarChart = props => {
     const {
       x,
@@ -109,11 +134,7 @@ const TotalHorizontalCharts = props => {
     id: "FormattedValue"
   }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
     id: "CurrencySign"
-  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '')), showOutgoingBanner && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.OutBanner, {
-    onClick: onBannerClick
-  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
-    color: textColor
-  }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''))), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
     ref: chartContainerRef
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     height: heightChartContainer - 10,
@@ -124,13 +145,13 @@ const TotalHorizontalCharts = props => {
     data: chartsData,
     margin: {
       top: 10,
-      right: 10,
+      right: 20,
       bottom: 50,
       left: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
     type: "number",
-    domain: [0, 'dataMax + 1000'],
+    domain: [0, dataMax => dataMax * 1.25],
     allowDataOverflow: true,
     hide: true
   }), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
@@ -149,15 +170,11 @@ const TotalHorizontalCharts = props => {
     barSize: 20,
     fill: "#8884d8",
     barCategoryGap: 0,
-    barGap: 5,
-    label: {
-      position: 'right',
-      fontSize: 14,
-      fontWeight: 600,
-      fill: '#212121',
-      formatter: valueBar => "".concat(valueBar)
-    }
-  }, chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+    barGap: 5
+  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "value",
+    content: CustomizedLabel
+  }), chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
     key: "cell-".concat(index),
     fill: barBackgrounds[index % 20]
   }))), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
@@ -182,10 +199,11 @@ TotalHorizontalCharts.defaultProps = {
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],
+  isDollar: true,
+  isPercentage: false,
+  showDollarSign: true,
   width: '100%',
   height: '100%',
   textColor: '#212121',
-  showOutgoingBanner: true,
-  noDataText: 'No Data',
-  onBannerClick: () => {}
+  noDataText: 'No Data'
 };

package/package.json

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

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;