sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/KpiFilter/KpiFilter.js

@@ -1,294 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.KpiFilter = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CheckBox = require("../CheckBox/CheckBox");
-var _CheckBoxButton = require("../CheckBoxButton/CheckBoxButton");
-var _KpiFilter = require("./KpiFilter.style");
-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; }
-/* KpiFilter */
-const KpiFilter = props => {
-  let {
-    height
-  } = props;
-  const {
-    width,
-    mainTitle,
-    periodTitle,
-    hidePeriod,
-    kpiData,
-    buttonsIconColor,
-    buttonsBorderColor,
-    buttonsTextColorChecked,
-    buttonsTextColorUnchecked,
-    buttonsBackgroundColorChecked,
-    buttonsBackgroundColorUnchecked,
-    onClick,
-    onClickPeriod,
-    selectAllIgnoreList
-  } = props;
-  const DEFAULT_PERIOD = {
-    weeks4: true,
-    weeks8: false,
-    weeks13: false
-  };
-  const [KpiDataState, setKpiDataState] = (0, _react.useState)(kpiData);
-  const [periodState, setPeriodState] = (0, _react.useState)(DEFAULT_PERIOD);
-  (0, _react.useEffect)(() => {
-    setKpiDataState(kpiData);
-  }, [kpiData]);
-
-  // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
-  (0, _react.useEffect)(() => {
-    const kpiSelectedData = KpiDataState?.map(itemColumn => itemColumn.buttonsArray?.filter(itemButton => itemButton.checked === true || itemButton.secondButtonChecked === true));
-    const kpiSelectedButtonsLabels = [];
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < kpiSelectedData?.length; i++) {
-      // eslint-disable-next-line no-plusplus
-      for (let j = 0; j < kpiSelectedData[i]?.length; j++) {
-        if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
-          kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
-        }
-        if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
-          kpiSelectedButtonsLabels.push(''.concat('', kpiSelectedData[i][j].label, ':', kpiSelectedData[i][j].secondButtonLabel));
-        }
-      }
-    }
-    onClick({
-      kpiSelectedButtonsLabels,
-      kpiData: KpiDataState
-    });
-  }, [KpiDataState]);
-  // ------------------------- Buttons OnClick Handler - End ------------------
-
-  // eslint-disable-next-line no-shadow
-  const dispalyColumnButtons = (data, height, paddingBottom = '5px') => {
-    if (!data || data.length === 0) return;
-    if (data && data.length > 0) {
-      // eslint-disable-next-line consistent-return
-      return <_KpiFilter.ButtonsContainer id="ButtonsContainer" height={height} paddingBottom={paddingBottom}>
-          {data?.map(item => <_KpiFilter.ButtonContainer id="ButtonContainer" className={item.marginBottom ? 'marginBottom' : ''} marginBottom={item.marginBottom ?? '0px'}>
-              <_CheckBoxButton.CheckBoxButton backgroundColorChecked={buttonsBackgroundColorChecked} backgroundColorUnchecked={buttonsBackgroundColorUnchecked} borderColor={buttonsBorderColor} borderRadius="12px" checked={item.checked} disabled={item.disabled} fontSize="12px" height="29px" iconColor={buttonsIconColor} iconSize="12px" label={item.label} onClick={buttonClicked => {
-            const newDataKpi = KpiDataState?.map(itemColumn => ({
-              ...itemColumn,
-              buttonsArray: itemColumn.buttonsArray?.map(itemButton => itemButton.label === buttonClicked.label ? {
-                ...itemButton,
-                checked: buttonClicked.checked
-              } : {
-                ...itemButton
-              })
-            }));
-            setKpiDataState(newDataKpi);
-          }} textColorChecked={buttonsTextColorChecked} textColorUnchecked={buttonsTextColorUnchecked} width="100%" />
-              {item.secondButtonLabel ? <_CheckBoxButton.CheckBoxButton backgroundColorChecked={buttonsBackgroundColorChecked} backgroundColorUnchecked={buttonsBackgroundColorUnchecked} borderColor={buttonsBorderColor} borderRadius="12px" checked={item.secondButtonChecked} disabled={item.secondButtonDisabled} fontSize="12px" height="29px" iconColor={buttonsIconColor} iconSize="12px" label={''.concat('', item.label, ':', item.secondButtonLabel)} displayLabel={item.secondButtonLabel} onClick={buttonClicked => {
-            const newDataKpi = KpiDataState?.map(itemColumn => ({
-              ...itemColumn,
-              buttonsArray: itemColumn.buttonsArray?.map(itemButton => ''.concat('', itemButton.label, ':', itemButton.secondButtonLabel) === buttonClicked.label ? {
-                ...itemButton,
-                secondButtonChecked: buttonClicked.checked
-              } : {
-                ...itemButton
-              })
-            }));
-            setKpiDataState(newDataKpi);
-          }} textColorChecked={buttonsTextColorChecked} textColorUnchecked={buttonsTextColorUnchecked} width="100%" /> : ''}
-            </_KpiFilter.ButtonContainer>)}
-        </_KpiFilter.ButtonsContainer>;
-    }
-  };
-  const isIncludedInIgnoreList = label => {
-    if (selectAllIgnoreList && selectAllIgnoreList.length > 0) {
-      return selectAllIgnoreList.includes(label);
-    }
-    return false;
-  };
-  const setPeriodSelectAll = selectAllChecked => {
-    const periodCheckedArray = [];
-    const newPeriod = {
-      weeks4: selectAllChecked,
-      weeks8: selectAllChecked,
-      weeks13: selectAllChecked
-    };
-    setPeriodState(newPeriod);
-    if (selectAllChecked) {
-      periodCheckedArray.push('4 weeks', '8 weeks', '13 weeks');
-    }
-    onClickPeriod({
-      periodChecked: periodCheckedArray
-    });
-  };
-  const displayMainTitle = () => <_KpiFilter.MainTitleContainer id="MainTitleContainer">
-      <_KpiFilter.MainTitle id="MainTitle">{mainTitle}</_KpiFilter.MainTitle>
-      <_KpiFilter.CheckBoxContainer id="CheckBoxContainer">
-        <_CheckBox.CheckBox checked={false} colorChecked={buttonsIconColor} colorUnchecked={buttonsIconColor} fontSize="14px" height="20px" width="100%" iconSize="14px" label="Select All" onClick={propsSelectAll => {
-        const newData = KpiDataState?.map(itemColumn => ({
-          ...itemColumn,
-          buttonsArray: itemColumn.buttonsArray?.map(itemButton => ({
-            ...itemButton,
-            checked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.checked && itemButton.disabled) ? propsSelectAll.checked : itemButton.checked,
-            secondButtonChecked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.secondButtonChecked && itemButton.secondButtonDisabled) ? propsSelectAll.checked : itemButton.secondButtonChecked.checked
-          }))
-        }));
-        setKpiDataState(newData);
-        setPeriodSelectAll(propsSelectAll.checked);
-      }} />
-        {/* <CheckBox
-          checked={false}
-          colorChecked={buttonsIconColor}
-          colorUnchecked={buttonsIconColor}
-          fontSize="14px"
-          height="20px"
-          width="100%"
-          iconSize="14px"
-          label="Include Benchmarks"
-          onClick={(props) => {
-            onClickIncludeBenchmark({
-              label: props.label,
-              checked: props.checked,
-            });
-          }}
-         /> */}
-      </_KpiFilter.CheckBoxContainer>
-    </_KpiFilter.MainTitleContainer>;
-  const onClickPeriodHandler = checkBox => {
-    const {
-      label,
-      checked
-    } = checkBox;
-    let newPeriod;
-    const periodCheckedArray = [];
-    switch (label) {
-      case '4 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks4: checked
-        };
-        break;
-      case '8 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks8: checked
-        };
-        break;
-      case '13 weeks':
-        newPeriod = {
-          ...periodState,
-          weeks13: checked
-        };
-        break;
-      default:
-        newPeriod = {
-          ...periodState
-        };
-    }
-    setPeriodState(newPeriod);
-    if (newPeriod.weeks4) periodCheckedArray.push('4 weeks');
-    if (newPeriod.weeks8) periodCheckedArray.push('8 weeks');
-    if (newPeriod.weeks13) periodCheckedArray.push('13 weeks');
-    onClickPeriod({
-      periodChecked: periodCheckedArray
-    });
-  };
-  const displayPeriod = () => <_KpiFilter.CheckBoxPeriodContainer id="CheckBoxPeriodContainer">
-      <_CheckBox.CheckBox id="CheckBox" label="4 weeks" checked={periodState.weeks4} colorChecked={buttonsIconColor} colorUnchecked={buttonsIconColor} fontSize="14px" height="20px" width="100%" iconSize="14px" disabled={false} onClick={checkBox4Weeks => {
-      onClickPeriodHandler(checkBox4Weeks);
-    }} />
-      <_CheckBox.CheckBox id="CheckBox" label="8 weeks" checked={periodState.weeks8} colorChecked={buttonsIconColor} colorUnchecked={buttonsIconColor} fontSize="12px" height="20px" width="100%" iconSize="14px" disabled={false} onClick={checkBox8Weeks => {
-      onClickPeriodHandler(checkBox8Weeks);
-    }} />
-      <_CheckBox.CheckBox id="CheckBox" label="13 weeks" checked={periodState.weeks13} colorChecked={buttonsIconColor} colorUnchecked={buttonsIconColor} fontSize="12px" height="20px" width="100%" iconSize="14px" disabled={false} onClick={checkBox13Weeks => {
-      onClickPeriodHandler(checkBox13Weeks);
-    }} />
-    </_KpiFilter.CheckBoxPeriodContainer>;
-
-  // eslint-disable-next-line no-return-assign
-  const displayOneColumn = (item, i) => {
-    const kpiDataStateLastElement = KpiDataState && KpiDataState.length > 0 ? KpiDataState.length - 1 : 0;
-    const content = <>
-        <_KpiFilter.ColumnTitleAndButtonsContainer id="ColumnTitleAndButtonsContainer">
-          <_KpiFilter.ColumnContainer id="ColumnContainer">
-            <_KpiFilter.ColumnTitleContainer id="ColumnTitleContainer">
-              <_KpiFilter.ColumnTitle id="ColumnTitle">
-                {item.columnTitle}
-              </_KpiFilter.ColumnTitle>
-            </_KpiFilter.ColumnTitleContainer>
-            {dispalyColumnButtons(item.buttonsArray, height = '160px', '0px')}
-
-            {!hidePeriod && i === kpiDataStateLastElement ? <_KpiFilter.PeriodColumnTitle>{periodTitle}</_KpiFilter.PeriodColumnTitle> : ''}
-            {!hidePeriod && i === kpiDataStateLastElement ? displayPeriod() : ''}
-          </_KpiFilter.ColumnContainer>
-
-        </_KpiFilter.ColumnTitleAndButtonsContainer>
-
-        {item.rightBorder ? <_KpiFilter.ColumnLineSeporatorContainer id="ColumnLineSeporatorContainer">
-            <_KpiFilter.ColumnLineSeporator id="ColumnLineSeporator" />
-          </_KpiFilter.ColumnLineSeporatorContainer> : ''}
-      </>;
-    return content;
-  };
-  const displayColumns = () => {
-    if (KpiDataState && KpiDataState?.length > 0) {
-      return <_KpiFilter.AllColumnsContainer id="AllColumnsContainer">
-          {KpiDataState.map((item, i) => displayOneColumn(item, i))}
-        </_KpiFilter.AllColumnsContainer>;
-    }
-    return '';
-  };
-
-  //= ======================================== MAIN RETURN ====================================
-  return <_KpiFilter.MainContainer id="MainContainer" height={height} width={width}>
-      <_KpiFilter.PanelContainer id="PanelContainer">
-        {displayMainTitle()}
-        {displayColumns()}
-      </_KpiFilter.PanelContainer>
-    </_KpiFilter.MainContainer>;
-  //= ======================================== MAIN RETURN END====================================
-};
-exports.KpiFilter = KpiFilter;
-var _default = exports.default = KpiFilter;
-KpiFilter.propTypes = {
-  mainTitle: _propTypes.default.string,
-  periodTitle: _propTypes.default.string,
-  hidePeriod: _propTypes.default.bool,
-  kpiData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    checked: _propTypes.default.bool,
-    disabled: _propTypes.default.bool
-  })),
-  height: _propTypes.default.string,
-  width: _propTypes.default.string,
-  buttonsIconColor: _propTypes.default.string,
-  buttonsBorderColor: _propTypes.default.string,
-  buttonsTextColorChecked: _propTypes.default.string,
-  buttonsTextColorUnchecked: _propTypes.default.string,
-  buttonsBackgroundColorChecked: _propTypes.default.string,
-  buttonsBackgroundColorUnchecked: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  // onClickIncludeBenchmark: PropTypes.func,
-  onClickPeriod: _propTypes.default.func,
-  selectAllIgnoreList: _propTypes.default.arrayOf(_propTypes.default.string)
-};
-KpiFilter.defaultProps = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  hidePeriod: false,
-  kpiData: [],
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#1B30AA',
-  buttonsBorderColor: '#1B30AA',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F1FF',
-  buttonsBackgroundColorUnchecked: '#F2F2F2',
-  onClick: () => {},
-  // onClickIncludeBenchmark: () => {},
-  onClickPeriod: () => {},
-  selectAllIgnoreList: []
-};

package/dist/components/KpiFilter/KpiFilter.stories.js

@@ -1,401 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectAllIgnoreList = exports.SagTheme = exports.HidePeriod = exports.AdusaTheme = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _KpiFilter = require("./KpiFilter");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const kpiDataColumn1 = [{
-  label: 'Event Name',
-  checked: true,
-  disabled: true
-}, {
-  label: 'Event Description',
-  checked: false,
-  disabled: false,
-  secondButtonLabel: '%',
-  secondButtonChecked: false,
-  secondButtonDisabled: false
-}, {
-  label: 'Event Start Date',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Event End Date',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Event ID',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Event Type',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn2 = [{
-  label: 'Retailer',
-  checked: true,
-  disabled: false
-}, {
-  label: 'Category',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Supplier',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Brand',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Item',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn3 = [{
-  label: 'Total Cost',
-  checked: true,
-  disabled: false
-}, {
-  label: 'Package Cost',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Redemption Cost',
-  checked: false,
-  disabled: false,
-  marginBottom: '20px'
-}, {
-  label: 'Actual Sales ROI',
-  checked: false,
-  disabled: false
-}, {
-  label: 'INC Baseline ROI',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Inc. STLY ROI',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn4 = [{
-  label: 'Actual Sales',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Baseline Sales',
-  checked: false,
-  disabled: false
-}, {
-  label: 'STLY Sales',
-  checked: false,
-  disabled: false,
-  marginBottom: '20px'
-}, {
-  label: 'Actual Units',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Baseline Units',
-  checked: false,
-  disabled: false
-}, {
-  label: 'STLY Units',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Participating Units',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn5 = [{
-  label: 'INC Sales Baseline',
-  checked: true,
-  disabled: false
-}, {
-  label: 'INC Sales STLY',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Basket Lift',
-  checked: false,
-  disabled: false,
-  marginBottom: '20px'
-}, {
-  label: 'INC Baseline Units',
-  checked: false,
-  disabled: false
-}, {
-  label: 'INC STLY Units',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn6 = [{
-  label: 'Total Shoppers',
-  checked: true,
-  disabled: false
-}, {
-  label: 'New Shoppers',
-  checked: true,
-  disabled: false,
-  secondButtonLabel: '%',
-  secondButtonChecked: false,
-  secondButtonDisabled: false
-}, {
-  label: 'Existing Shoppers',
-  checked: true,
-  disabled: false,
-  secondButtonLabel: '%',
-  secondButtonChecked: false,
-  secondButtonDisabled: false,
-  marginBottom: '20px'
-}, {
-  label: 'Redeemers',
-  checked: false,
-  disabled: false
-}, {
-  label: 'New Redeemers',
-  checked: false,
-  disabled: false,
-  secondButtonLabel: '%',
-  secondButtonChecked: false,
-  secondButtonDisabled: false
-}, {
-  label: 'Existing Redeemers',
-  checked: false,
-  disabled: false,
-  secondButtonLabel: '%',
-  secondButtonChecked: false,
-  secondButtonDisabled: false
-}, {
-  label: 'Redemptions',
-  checked: false,
-  disabled: false
-}];
-const kpiDataColumn7 = [{
-  label: 'New Repeaters',
-  checked: true,
-  disabled: false
-}, {
-  label: 'Existing Repeaters',
-  checked: true,
-  disabled: false
-}, {
-  label: 'Basket $ Chg - Existing Repeaters',
-  checked: true,
-  disabled: false
-}, {
-  label: 'Basket Units Chg - Existing Repeaters',
-  checked: false,
-  disabled: false
-}, {
-  label: 'Visits Chg - Existing Repeaters',
-  checked: false,
-  disabled: false
-}];
-const kpiData1 = [{
-  columnTitle: 'Event Attributes',
-  buttonsArray: kpiDataColumn1
-}, {
-  columnTitle: 'Data Resolution',
-  buttonsArray: kpiDataColumn2,
-  rightBorder: true
-}, {
-  columnTitle: 'Cost and ROI',
-  buttonsArray: kpiDataColumn3
-}, {
-  columnTitle: 'Sales and Units',
-  buttonsArray: kpiDataColumn4
-}, {
-  columnTitle: 'Incrementality',
-  buttonsArray: kpiDataColumn5,
-  rightBorder: true
-}, {
-  columnTitle: 'Shoppers and Redeemers',
-  buttonsArray: kpiDataColumn6
-}, {
-  columnTitle: 'Post Event',
-  buttonsArray: kpiDataColumn7
-}];
-var _default = exports.default = {
-  title: 'SAG BI/KpiFilter',
-  component: _KpiFilter.KpiFilter,
-  tags: ['autodocs'],
-  argTypes: {
-    mainTitle: {
-      name: 'mainTitle',
-      control: {
-        type: 'text'
-      },
-      description: 'main title'
-    },
-    periodTitle: {
-      name: 'periodTitle',
-      control: {
-        type: 'text'
-      },
-      description: 'period Title '
-    },
-    kpiData: {
-      name: 'kpiData',
-      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} '
-    },
-    // onClickIncludeBenchmark: {
-    //   action: "onClickIncludeBenchmark",
-    //   description:
-    //     "onClick Include Benchmark event - returns an object of check box {true/false} ",
-    // },
-
-    onClickPeriod: {
-      action: 'onClickPeriod',
-      description: ' onClickPeriod event  '
-    },
-    buttonsIconColor: {
-      name: 'buttonsIconColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets icons Color '
-      }
-    },
-    buttonsBorderColor: {
-      name: 'buttonsBorderColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets buttons border Color '
-      }
-    },
-    buttonsTextColorChecked: {
-      name: 'buttonsTextColorChecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Checked Color '
-      }
-    },
-    buttonsTextColorUnchecked: {
-      name: 'buttonsTextColorUnchecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Unchecked Color '
-      }
-    },
-    buttonsBackgroundColorChecked: {
-      name: 'buttonsBackgroundColorChecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text background Checked Color '
-      }
-    },
-    buttonsBackgroundColorUnchecked: {
-      name: 'buttonsBackgroundColorUnchecked',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text background Unchecked Color '
-      }
-    },
-    selectAllIgnoreList: {
-      name: 'selectAllIgnoreList',
-      control: {
-        type: 'object'
-      },
-      description: ' array of strings: selectAll Ignore List '
-    },
-    hidePeriod: {
-      name: 'hidePeriod',
-      control: {
-        type: 'boolean'
-      },
-      description: 'hide Period Buttons'
-    }
-  }
-};
-const Template = args => <_KpiFilter.KpiFilter {...args} />;
-const SagTheme = exports.SagTheme = Template.bind({});
-SagTheme.args = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  kpiData: kpiData1,
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#1B30AA',
-  buttonsBorderColor: '#1B30AA',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F1FF',
-  buttonsBackgroundColorUnchecked: '#F2F2F2'
-};
-const AdusaTheme = exports.AdusaTheme = Template.bind({});
-AdusaTheme.args = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  kpiData: kpiData1,
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#90CE9C',
-  buttonsBorderColor: '#90CE9C',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F5EB',
-  buttonsBackgroundColorUnchecked: '#F2F2F2'
-};
-const SelectAllIgnoreList = exports.SelectAllIgnoreList = Template.bind({});
-SelectAllIgnoreList.args = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  kpiData: kpiData1,
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#90CE9C',
-  buttonsBorderColor: '#90CE9C',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F5EB',
-  buttonsBackgroundColorUnchecked: '#F2F2F2',
-  selectAllIgnoreList: ['Event Name', 'Event Description', 'Event Start Date']
-};
-const HidePeriod = exports.HidePeriod = Template.bind({});
-HidePeriod.args = {
-  mainTitle: 'Select Table Columns',
-  periodTitle: 'Pre and Post Event Period',
-  kpiData: kpiData1,
-  width: '100%',
-  height: '100%',
-  buttonsIconColor: '#90CE9C',
-  buttonsBorderColor: '#90CE9C',
-  buttonsTextColorChecked: '#212121',
-  buttonsTextColorUnchecked: '#212121',
-  buttonsBackgroundColorChecked: '#E9F5EB',
-  buttonsBackgroundColorUnchecked: '#F2F2F2',
-  selectAllIgnoreList: ['Event Name', 'Event Description', 'Event Start Date'],
-  hidePeriod: true
-};