sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/MonthPicker/MonthPopupPicker.js

@@ -1,215 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/prop-types */
-
-// Styled components for the date picker
-const DatePickerContainer = _styledComponents.default.div`
-  position: relative;
-`;
-const DatePickerPopup = _styledComponents.default.div`
-  position: absolute;
-  width: auto;
-  // margin: 5px;
-  height: 250px;
-  top: 100%;
-  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
-  left: 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 10px;
-  z-index: 1000;
-`;
-const DatePickerHeader = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-`;
-const NavDiv = _styledComponents.default.div`
-  width: 80px;
-  height: 30px;
-  display: flex;
-  padding: 5px;
-  justify-content: space-around;
-`;
-const DatePickerSelect = _styledComponents.default.select`
-  padding: 4px;
-  border: none;
-  font-family: Poppins;
-  font-size: 12px; 
-  font-style: normal;
-  font-weight: 400;
-  cursor: pointer;
-
-  &:focus {
-    border: none;
-  }
-`;
-const DatePickerCalendar = _styledComponents.default.div`
-  display: grid;
-  width: 220px;
-  height: 150px;
-  row-gap: 30px;
-  margin: 20px;
-  column-gap: 30px;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-`;
-const DateCell = _styledComponents.default.div`
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  /* height: 32px; */
-  font-family: Poppins;
-  border-radius: 4px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-
-  &:hover {
-    background: #f4faf5;
-  }
-
-  &.selected {
-    background-color: #229e38;
-    color: #fff;
-  }
-  &.startselected {
-    border: 1px solid #229e38;
-  }
-  &.inrange {
-    border-radius: 0px;
-    background-color: #effef2;
-  }
-  &.disable {
-    pointer-events: none;
-    color: #ccc;
-  }
-`;
-const years = [2022, 2023, 2024];
-const MonthPopupPicker = ({
-  isOpen,
-  onChangeDate,
-  value,
-  setValue,
-  startDateValue,
-  availableMonths
-}) => {
-  const [selectedMonth, setSelectedMonth] = (0, _react.useState)(null);
-  const [currentStartDate, setCurrentStartDate] = (0, _react.useState)(new Date(new Date().getFullYear(), 0, 1));
-  const handleDateSelect = date => {
-    setSelectedMonth(date);
-    onChangeDate(date);
-  };
-  (0, _react.useEffect)(() => {
-    if (value === '' || value === undefined) {
-      setSelectedMonth(null);
-    } else {
-      setSelectedMonth(new Date(startDateValue));
-    }
-  }, [value, isOpen]);
-  const renderDatePicker = () => {
-    const currentDate = currentStartDate || new Date();
-    const startMonth = currentDate.getMonth(); // Get the start month index
-    const selectedYear = currentDate.getFullYear();
-    const endDate = new Date(selectedYear, 11, 1);
-    const dates = [];
-    const tempDate = new Date(selectedYear, startMonth, 1); // Start from the selected month
-    let monthCount = 0; // Counter for rendered months
-
-    while (tempDate <= endDate && monthCount < 12) {
-      dates.push(new Date(tempDate));
-      tempDate.setMonth(tempDate.getMonth() + 1); // Move to the next month
-      monthCount++;
-    }
-    return <DatePickerPopup>
-        <DatePickerHeader>
-          <div>
-            <DatePickerSelect defaultValue={currentDate.getFullYear()} onChange={e => {
-            const newDate = new Date(currentDate);
-            newDate.setFullYear(parseInt(e.target.value, 10));
-            setCurrentStartDate(newDate);
-            setSelectedMonth(null);
-            setValue('');
-          }}>
-              {years.map(year => <option key={`${year}`} value={`${year}`}>
-                  {year}
-                </option>)}
-            </DatePickerSelect>
-
-          </div>
-        </DatePickerHeader>
-
-        <DatePickerCalendar>
-          {dates.map(date => {
-          const monthYear = `${date.toLocaleString('default', {
-            month: 'short'
-          })} ${date.getFullYear()}`;
-          const isAvailableMonth = availableMonths.includes(monthYear);
-          const isDisabled = !isAvailableMonth || date.getMonth() === 0 && date.getFullYear() === 2022;
-          return <DateCell key={date.toISOString()}
-          // eslint-disable-next-line no-nested-ternary
-          className={isDisabled ? 'disable' : selectedMonth && date.getMonth() === selectedMonth.getMonth() && date.getFullYear() === selectedMonth.getFullYear() ? 'selected' : ''} onClick={() => !isDisabled && handleDateSelect(date)}>
-                {date.toLocaleString('default', {
-              month: 'short'
-            })}
-              </DateCell>;
-          // if (
-          //   selectedMonth
-          //    && (date.toLocaleString('default', {month: 'short' }) === selectedMonth.toLocaleString('default', {month: 'short' }))
-          // ) {
-          //   return (
-          //     <DateCell
-          //       key={date.toISOString()}
-          //       className="selected"
-          //       onClick={() => handleDateSelect(date)}
-          //     >
-          //       {date.toLocaleString('default', { month: 'short' })}
-          //     </DateCell>
-          //   );
-          // }
-          // if (!availableMonths.includes(`${date.toLocaleString('default', { month: 'short' })} ${currentDate.getFullYear()}`)) {
-          //   return (
-          //     <DateCell
-          //       key={date.toISOString()}
-          //       className="disable"
-          //     >
-          //       {date.toLocaleString('default', { month: 'short' })}
-          //     </DateCell>
-          //   );
-          // }
-          // if (date.getFullYear() === currentDate.getFullYear()) {
-          //   return (
-          //     <DateCell
-          //       key={date.toISOString()}
-          //       onClick={() => handleDateSelect(date)}
-          //     >
-          //       {date.toLocaleString('default', { month: 'short' })}
-          //     </DateCell>
-          //   );
-          // }
-          // return null;
-        })}
-        </DatePickerCalendar>
-      </DatePickerPopup>;
-  };
-  return <DatePickerContainer>
-      {isOpen && renderDatePicker()}
-    </DatePickerContainer>;
-};
-var _default = exports.default = MonthPopupPicker;

package/dist/components/NoDataFoundMessage/NoDataFoundMessage.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoDataFoundMessage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _NoDataFoundIcon = require("../../icons/NoDataFoundIcon");
-var _NoDataFoundMessage = require("./NoDataFoundMessage.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* NoDataFoundMessage */
-const NoDataFoundMessage = props => {
-  const {
-    noDataText
-  } = props;
-  return <_NoDataFoundMessage.NoDataFoundContainer id="NoDataFoundContainer">
-      <_NoDataFoundIcon.NoDataFoundIcon id="NoDataFoundIcon" />
-      <_NoDataFoundMessage.NoDataFoundTitle id="NoDataFoundTitle">No Data</_NoDataFoundMessage.NoDataFoundTitle>
-      <_NoDataFoundMessage.NoDataFoundText id="NoDataFoundText">{noDataText}</_NoDataFoundMessage.NoDataFoundText>
-    </_NoDataFoundMessage.NoDataFoundContainer>;
-};
-exports.NoDataFoundMessage = NoDataFoundMessage;
-NoDataFoundMessage.propTypes = {
-  noDataText: _propTypes.default.string
-};
-NoDataFoundMessage.defaultProps = {
-  noDataText: ''
-};
-var _default = exports.default = NoDataFoundMessage;

package/dist/components/NoDataFoundMessage/NoDataFoundMessage.stories.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoDataFound = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _NoDataFoundMessage = require("./NoDataFoundMessage");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const arrLegendData = [{
-  name: "Package Cost",
-  value: 30000,
-  color: "#85A1D2"
-}, {
-  name: "Redemption Cost",
-  value: 6500,
-  color: "#9AE6FF"
-}];
-const arrLegendDat3rows = [{
-  name: "Package Cost",
-  value: 30000,
-  color: "#85A1D2"
-}, {
-  name: "Existing Redeemers",
-  value: 6500,
-  color: "#9AE6FF"
-}, {
-  name: "Others",
-  value: 20000,
-  color: "#FD5959"
-}
-// { name: "My test 2", value: 35000, color: "#79DB95"},
-];
-var _default = exports.default = {
-  title: "SAG BI/NoDataFoundMessage",
-  component: _NoDataFoundMessage.NoDataFoundMessage,
-  tags: ["autodocs"],
-  argTypes: {
-    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 / %)"
-    },
-    noDataText: {
-      name: "noDataText",
-      control: {
-        type: "text"
-      },
-      description: "text to display when no data found"
-    }
-  }
-};
-const Template = args => <_NoDataFoundMessage.NoDataFoundMessage {...args} />;
-const NoDataFound = exports.NoDataFound = Template.bind({});
-NoDataFound.args = {
-  noDataText: "The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display."
-};

package/dist/components/NoDataFoundMessage/NoDataFoundMessage.style.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NoDataFoundTitle = exports.NoDataFoundText = exports.NoDataFoundContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-const NoDataFoundTitle = exports.NoDataFoundTitle = _styledComponents.default.h4`
-  font-weight: 600;
-  font-size: 18px;
-  margin: 0;
-  margin-top: 20px;
-  padding-right: 14px;
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const NoDataFoundText = exports.NoDataFoundText = _styledComponents.default.p`
-  font-weight: 400;
-  font-size: 16px;
-  margin: 0;
-  margin-top: 0.4rem;
-  text-align: center;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;

package/dist/components/OneColumnContainer/OneColumnContainer.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OneColumnContainer = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
-var _InfoIcon = require("../../icons/InfoIcon");
-var _ExportIcon = require("../../icons/ExportIcon");
-var _OneColumnContainer = require("./OneColumnContainer.style");
-require("react-loading-skeleton/dist/skeleton.css");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const OneColumnContainer = props => {
-  const {
-    children,
-    display,
-    isLoading,
-    gridTemplateColumns,
-    itemClass,
-    divStyle,
-    overStyle,
-    draggingStyle,
-    droppedStyle,
-    width,
-    height,
-    overflow,
-    infoTitle,
-    infoText,
-    disableInfo,
-    showViewByBannerButton,
-    onBannerClick,
-    columnTitle
-  } = props;
-  const [hover, setHover] = (0, _react.useState)(false);
-  const [offsetWidth, setOffsetWidth] = (0, _react.useState)(200);
-  const nodeRef = (0, _react.useRef)(null);
-  const anotherRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    setOffsetWidth(anotherRef?.current?.offsetWidth);
-  }, [anotherRef]);
-  return <_OneColumnContainer.StyledContainer className={(0, _classnames.default)('OneColumnContainer', itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle)} width={width} height={height} overflow={overflow}>
-      <_OneColumnContainer.OneColumnContainerMainDiv className="OneColumnContainerMainDiv" width={width} height={height} display={display} gridTemplateColumns={gridTemplateColumns} ref={nodeRef}>
-        {!isLoading && columnTitle && !hover && <_OneColumnContainer.ColumnTitle className="ColumnTitle">
-              {columnTitle}
-            </_OneColumnContainer.ColumnTitle>}
-        {!isLoading && showViewByBannerButton && !hover && <_OneColumnContainer.BannerContainer className="BannerContainer" right={disableInfo ? '20px' : '45px'}>
-            <_OneColumnContainer.OutBanner className="OutBanner" onClick={() => onBannerClick({
-          eventName: 'onBannerClick'
-        })}>
-              <_ExportIcon.ExportIcon />
-              By Banner
-            </_OneColumnContainer.OutBanner>
-          </_OneColumnContainer.BannerContainer>}
-
-        {!isLoading && !hover && children}
-
-        {!disableInfo && !isLoading && <>
-            <_OneColumnContainer.IconContainer className="IconContainer" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
-              <_InfoIcon.InfoIcon />
-            </_OneColumnContainer.IconContainer>
-            {hover && <_OneColumnContainer.InfoTextContainer className="InfoTextContainer">
-                {infoTitle && <_OneColumnContainer.InfoTitleLabel className="InfoTitleLabel" dangerouslySetInnerHTML={{
-            __html: infoTitle
-          }} />}
-                <_OneColumnContainer.InfoTextLabel className="InfoTextLabel" dangerouslySetInnerHTML={{
-            __html: infoText
-          }} />
-              </_OneColumnContainer.InfoTextContainer>}
-          </>}
-
-        {isLoading && <_OneColumnContainer.LoadingDiv className="loadingDiv">
-            <_reactLoadingSkeleton.SkeletonTheme baseColor="#EAEAEA">
-              <_reactLoadingSkeleton.default enableAnimation width={(offsetWidth ?? 200) * 0.76} height={45} containerClassName="avatar-skeleton" />
-              <_reactLoadingSkeleton.default enableAnimation count={4} width={(offsetWidth ?? 200) * 0.76} height={10} containerClassName="avatar-skeleton" />
-            </_reactLoadingSkeleton.SkeletonTheme>
-          </_OneColumnContainer.LoadingDiv>}
-
-      </_OneColumnContainer.OneColumnContainerMainDiv>
-    </_OneColumnContainer.StyledContainer>;
-};
-exports.OneColumnContainer = OneColumnContainer;
-OneColumnContainer.propTypes = {
-  children: _propTypes.default.string,
-  display: _propTypes.default.string,
-  isLoading: _propTypes.default.bool,
-  gridTemplateColumns: _propTypes.default.string,
-  itemClass: _propTypes.default.string,
-  divStyle: _propTypes.default.string,
-  overStyle: _propTypes.default.string,
-  draggingStyle: _propTypes.default.string,
-  droppedStyle: _propTypes.default.string,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  overflow: _propTypes.default.string,
-  infoTitle: _propTypes.default.string,
-  infoText: _propTypes.default.string,
-  disableInfo: _propTypes.default.bool,
-  showViewByBannerButton: _propTypes.default.bool,
-  onBannerClick: _propTypes.default.func,
-  columnTitle: _propTypes.default.string
-};
-OneColumnContainer.defaultProps = {
-  children: '',
-  display: 'block',
-  isLoading: '',
-  gridTemplateColumns: '',
-  itemClass: '',
-  divStyle: '',
-  overStyle: '',
-  draggingStyle: '',
-  droppedStyle: '',
-  width: '300px',
-  height: '300px',
-  overflow: 'hidden',
-  infoTitle: '',
-  infoText: '',
-  disableInfo: false,
-  showViewByBannerButton: false,
-  onBannerClick: () => {},
-  columnTitle: ''
-};
-var _default = exports.default = OneColumnContainer;

package/dist/components/OneColumnContainer/OneColumnContainer.stories.js

@@ -1,117 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithBarComponent = exports.Skeleton = exports.ShowViewByBannerAndInfo = exports.ShowViewByBanner = exports.ShowOnlyInfo = exports.ShowColumnTitleAndInfo = exports.DisableInfo = void 0;
-var _OneColumnContainer = require("./OneColumnContainer");
-var _TotalHorizontalCharts = require("../TotalHorizontalCharts/TotalHorizontalCharts");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'Sag BI/OneColumnContainer',
-  component: _OneColumnContainer.OneColumnContainer,
-  tags: ['autodocs']
-}; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-const Skeleton = exports.Skeleton = {
-  args: {
-    isLoading: true,
-    infoTitle: '<i>Total Cost</i>',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
-    width: '300px',
-    height: '300px',
-    disableInfo: true,
-    showViewByBannerButton: false,
-    overflow: 'hidden'
-  }
-};
-const DisableInfo = exports.DisableInfo = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
-    width: '300px',
-    height: '300px',
-    disableInfo: true,
-    showViewByBannerButton: false,
-    overflow: 'hidden'
-  }
-};
-const ShowViewByBanner = exports.ShowViewByBanner = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
-    width: '300px',
-    height: '300px',
-    disableInfo: true,
-    showViewByBannerButton: true,
-    overflow: 'hidden'
-  }
-};
-const ShowViewByBannerAndInfo = exports.ShowViewByBannerAndInfo = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
-    width: '300px',
-    height: '300px',
-    disableInfo: false,
-    showViewByBannerButton: true,
-    overflow: 'hidden'
-  }
-};
-const ShowOnlyInfo = exports.ShowOnlyInfo = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
-    width: '300px',
-    height: '300px',
-    disableInfo: false,
-    showViewByBannerButton: false,
-    overflow: 'hidden'
-  }
-};
-const ShowColumnTitleAndInfo = exports.ShowColumnTitleAndInfo = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.  </p1></i> ',
-    width: '500px',
-    height: '300px',
-    disableInfo: false,
-    showViewByBannerButton: false,
-    overflow: 'hidden',
-    columnTitle: 'Avg. Products Category Penetration'
-  }
-};
-const WithBarComponent = exports.WithBarComponent = {
-  args: {
-    isLoading: false,
-    infoTitle: 'Total Cost',
-    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.  </p1></i> ',
-    width: '500px',
-    height: '300px',
-    disableInfo: false,
-    showViewByBannerButton: false,
-    overflow: 'hidden',
-    children: <_TotalHorizontalCharts.TotalHorizontalCharts chartsData={[{
-      name: 'MTN DEW GE-SODA',
-      value: 166898.22,
-      color: 'rgba(31, 118, 119, 0.6)'
-    }, {
-      name: 'CHEETOS GE-CHIPS, SNACKS',
-      value: 33380.98,
-      color: 'rgba(31, 118, 119, 0.9)'
-    }, {
-      name: 'CHEETOS SNACKING',
-      value: 12940.18,
-      color: 'rgba(31, 118, 119, 0.8)'
-    }, {
-      name: 'LAMB WESTON FF-POTATOES ONIONS',
-      value: -666828.24,
-      color: 'rgba(31, 118, 119, 0.7)'
-    }]} />,
-    columnTitle: 'Avg. Products Category Penetration'
-  }
-};