sag_components 2.0.0-beta27 → 2.0.0-beta28

package/dist/stories/TitleDescription.stories.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LargeSellingEvent = exports.CrossRetailersEvent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TitleDescription = require("./components/TitleDescription");
+const viewCreativeRetailersData1 = [{
+  label: 'Food Lion'
+}, {
+  label: 'Stop&Shop'
+}, {
+  label: 'Giant Food'
+}, {
+  label: 'The Giant Company'
+}, {
+  label: 'Hannaford'
+}];
+const data = {
+  eventName: 'Large Selling Event P2 2023',
+  eventType: 'Large Selling Event',
+  retailer: 'The Giant Company',
+  // Food Lion   Stop&Shop    GiantFood    The Giant Company   Hannaford
+  eventDescription: 'Large Selling Event Description',
+  objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
+  eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
+  externalEventDescription: 'Large Selling Event P2 Description',
+  externalEventID: 'LSE2_23',
+  storeType: 'Total',
+  category: '',
+  supplier: '',
+  brand: ''
+};
+var _default = exports.default = {
+  title: 'SAG BI/TitleDescription',
+  component: _TitleDescription.TitleDescription,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'data',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill title description '
+    },
+    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 / % )'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    showRetailerIcon: {
+      name: 'showRetailerIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Retailer Icon'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    viewCreativeOnClick: {
+      action: 'viewCreativeOnClick',
+      description: 'viewCreativeOnClick event - returns an object of viewCreativeOnClick   '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TitleDescription.TitleDescription, args);
+const LargeSellingEvent = exports.LargeSellingEvent = Template.bind({});
+LargeSellingEvent.args = {
+  showRetailerIcon: true,
+  showPeriodIcon: true,
+  viewCreativeRetailersData: null,
+  data,
+  width: '100%',
+  height: '100%',
+  showDraft: true
+};
+const CrossRetailersEvent = exports.CrossRetailersEvent = Template.bind({});
+CrossRetailersEvent.args = {
+  showRetailerIcon: false,
+  showPeriodIcon: false,
+  viewCreativeRetailersData: viewCreativeRetailersData1,
+  data,
+  width: '100%',
+  height: '100%'
+};

package/dist/stories/TopToggleList.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TopToggleList = _interopRequireDefault(require("./components/TopToggleList"));
+var _default = exports.default = {
+  title: 'SAG BI/TopToggleList',
+  component: _TopToggleList.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'Title',
+      control: {
+        type: 'text'
+      },
+      description: 'Title text',
+      defaultValue: 'Product Name'
+    },
+    list: {
+      name: 'List',
+      description: 'array [] of objects: {value: string, label: string } to fill the product items. '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TopToggleList.default, args);
+const Example = exports.Example = Template.bind({});
+Example.args = {
+  title: 'Products Variety',
+  list: [{
+    value: '1',
+    label: 'Product 1'
+  }, {
+    value: '2',
+    label: 'Product 2'
+  }, {
+    value: '3',
+    label: 'Product 3'
+  }, {
+    value: '4',
+    label: 'Product 4'
+  }, {
+    value: '5',
+    label: 'Product 5'
+  }, {
+    value: '6',
+    label: 'Product 6'
+  }]
+};

package/dist/stories/TotalBenchmark.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TwoBenchmarks = exports.OneBenchmark = exports.DataWithNulls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TotalBenchmark = require("./components/TotalBenchmark");
+const arrDataOneBenchmark = [{
+  title: 'Redemptions',
+  value: 21500,
+  totalValue: 60000,
+  benchmarkValue: 30000
+}, {
+  title: 'Redemptions Units',
+  value: 12400
+}];
+const arrDataTwoBenchmarks = [{
+  title: 'Redemptions',
+  value: 41500,
+  totalValue: 60000,
+  benchmarkValue: 20000
+}, {
+  title: 'Redemptions Units',
+  value: 15400,
+  totalValue: 60000,
+  benchmarkValue: 40000
+}];
+const arrDataWithNulls = [{
+  title: 'Redemptions',
+  value: null,
+  totalValue: 60000,
+  benchmarkValue: 20000
+}, {
+  title: 'Redemptions Units',
+  value: 15400,
+  totalValue: 60000,
+  benchmarkValue: 40000
+}];
+var _default = exports.default = {
+  title: 'SAG BI/TotalBenchmark',
+  component: _TotalBenchmark.TotalBenchmark,
+  tags: ['autodocs'],
+  argTypes: {
+    topTitle: {
+      name: 'Top Title',
+      control: {
+        type: 'text'
+      },
+      description: ''
+    },
+    bottomTitle: {
+      name: 'Bottom Title',
+      control: {
+        type: 'text'
+      },
+      description: ''
+    },
+    dotCut: {
+      name: 'dotCut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px or %)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px or %)'
+    },
+    addingBenchmark: {
+      name: 'Add Benchmark',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Adding Benchmark'
+    },
+    textColor: {
+      name: 'textColor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    data: {
+      description: 'array [] of objects: {title: string, value:number, totalValue: number | udefined} to fill the benchmark. To hide the benchmark: do not set totalValue '
+    },
+    noDataText: {
+      name: 'noDataText',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TotalBenchmark.TotalBenchmark, args);
+const OneBenchmark = exports.OneBenchmark = Template.bind({});
+OneBenchmark.args = {
+  data: arrDataOneBenchmark,
+  dotCut: true,
+  width: '250px',
+  height: '280px',
+  textColor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.'
+};
+const TwoBenchmarks = exports.TwoBenchmarks = Template.bind({});
+TwoBenchmarks.args = {
+  data: arrDataTwoBenchmarks,
+  dotCut: true,
+  width: '250px',
+  height: '280px',
+  textColor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.'
+};
+const DataWithNulls = exports.DataWithNulls = Template.bind({});
+DataWithNulls.args = {
+  data: arrDataWithNulls,
+  dotCut: true,
+  width: '250px',
+  height: '280px',
+  textColor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.'
+};

package/dist/stories/TotalBenchmarkAreachart.stories.js

@@ -0,0 +1,341 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SalesGrowthNegative = exports.SalesGrowth = exports.BetweenTwoYears = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TotalBenchmarkAreachart = require("./components/TotalBenchmarkAreachart");
+const arrData = [{
+  title: '202320',
+  value1: 542366,
+  value2: 247715
+}, {
+  title: '202321',
+  value1: 699511,
+  value2: 252313
+}, {
+  title: '202322',
+  value1: 403092,
+  value2: 260822
+}, {
+  title: '202323',
+  value1: 396184,
+  value2: 264325
+}, {
+  title: '202324',
+  value1: 415317,
+  value2: 269243
+}, {
+  title: '202325',
+  value1: 568376,
+  value2: 269592
+}, {
+  title: '202326',
+  value1: 1078121,
+  value2: 269949
+}, {
+  title: '202327',
+  value1: 347930,
+  value2: 270735
+}, {
+  title: '202328',
+  value1: 346258,
+  value2: 271200
+}, {
+  title: '202329',
+  value1: 350184,
+  value2: 270324
+}, {
+  title: '202330',
+  value1: 312790,
+  value2: 266821
+}, {
+  title: '202331',
+  value1: 335076,
+  value2: 267064
+}, {
+  title: '202332',
+  value1: 311037,
+  value2: 266821
+}];
+const arrDataBetweenTwoYears = [{
+  title: '202355',
+  value1: 542366,
+  value2: 247715
+}, {
+  title: '202356',
+  value1: 699511,
+  value2: 252313
+}, {
+  title: '202357',
+  value1: 403092,
+  value2: 260822
+}, {
+  title: '202358',
+  value1: 396184,
+  value2: 264325
+}, {
+  title: '202401',
+  value1: 415317,
+  value2: 269243
+}, {
+  title: '202402',
+  value1: 568376,
+  value2: 269592
+}, {
+  title: '202403',
+  value1: 1078121,
+  value2: 269949
+}, {
+  title: '202404',
+  value1: 347930,
+  value2: 270735
+}, {
+  title: '202405',
+  value1: 346258,
+  value2: 271200
+}, {
+  title: '202406',
+  value1: 350184,
+  value2: 270324
+}, {
+  title: '202407',
+  value1: 312790,
+  value2: 266821
+}, {
+  title: '202408',
+  value1: 335076,
+  value2: 267064
+}, {
+  title: '202409',
+  value1: 311037,
+  value2: 266821
+}];
+var _default = exports.default = {
+  title: 'SAG BI/TotalBenchmarkAreachart',
+  component: _TotalBenchmarkAreachart.TotalBenchmarkAreachart,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title on top of the component'
+    },
+    value: {
+      name: 'value',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100000000000000
+      },
+      description: 'value (title) '
+    },
+    arrowSign: {
+      name: 'arrowSign',
+      options: ['up', 'down'],
+      control: {
+        type: 'radio'
+      }
+    },
+    addingBenchmark: {
+      name: 'Add Benchmark',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Adding Benchmark'
+    },
+    benchmarkTotalValue: {
+      name: 'benchmarkTotalValue',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100000000000000
+      },
+      description: 'benchmarkTotalValue - set total value of the benchmark'
+    },
+    benchmarkValue: {
+      name: 'benchmarkValue',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100000000000000
+      },
+      description: 'benchmarkValue - set total value of the benchmark delimeter line'
+    },
+    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)'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    areaChart1Color: {
+      name: 'areaChart1Color',
+      description: 'Sets the area chart 1 color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    areaChart2Color: {
+      name: 'areaChart2Color',
+      description: 'Sets the area chart 2 color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    fillChartColor: {
+      name: 'fillChartColor',
+      description: 'Sets the area chart fill color',
+      control: {
+        type: 'color',
+        presetColors: ['rgba(34, 158, 56, 0.20)']
+      }
+    },
+    startOffset: {
+      name: 'startOffset',
+      control: {
+        type: 'text'
+      },
+      description: 'start offset of the control (in %)'
+    },
+    endOffset: {
+      name: 'endOffset',
+      control: {
+        type: 'text'
+      },
+      description: 'end offset of the control (in %)'
+    },
+    areaChartData: {
+      description: 'array [] of objects: {title: string, value:number } to fill the area data. '
+    },
+    opacity: {
+      name: 'opacity',
+      control: {
+        type: 'text'
+      },
+      description: 'opacity of the control'
+    },
+    noDataText: {
+      name: 'noDataText',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    },
+    xselectedColor: {
+      name: 'xselectedColor',
+      description: 'Sets the xselectedColor fill color',
+      control: {
+        type: 'color',
+        presetColors: ['rgba(144, 206, 156, 0.50)']
+      }
+    },
+    startWeekRange: {
+      name: 'startWeekRange',
+      control: {
+        type: 'text'
+      },
+      description: 'startWeekRange, for example "W24" '
+    },
+    endWeekRange: {
+      name: 'endWeekRange',
+      control: {
+        type: 'text'
+      },
+      description: 'endWeekRange, for example "W31" '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TotalBenchmarkAreachart, args);
+const SalesGrowth = exports.SalesGrowth = Template.bind({});
+SalesGrowth.args = {
+  title: 'Sales Growth',
+  value: 15,
+  arrowSign: 'up',
+  benchmarkTotalValue: 20,
+  benchmarkValue: 10,
+  areaChartData: arrData,
+  width: '250px',
+  height: '280px',
+  textcolor: '#000',
+  areaChart1Color: '#BD9EFF',
+  areaChart2Color: '#96B4FF',
+  // fillChartColor: "rgba(34, 158, 56, 0.20)",
+  startOffset: '17.04%',
+  endOffset: '17.04%',
+  opacity: '191',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.',
+  xselectedColor: '#90CE9C',
+  //   '#42977A',
+  fillChart1Color: 'rgba(34, 158, 56, 0.20)',
+  fillChart2Color: 'rgba(34, 158, 56, 0.20)',
+  startWeekRange: '202323',
+  endWeekRange: '202329'
+};
+const SalesGrowthNegative = exports.SalesGrowthNegative = Template.bind({});
+SalesGrowthNegative.args = {
+  title: 'Sales Growth',
+  value: 30,
+  arrowSign: 'down',
+  benchmarkTotalValue: 40,
+  benchmarkValue: 20,
+  areaChartData: arrData,
+  width: '250px',
+  height: '280px',
+  textcolor: '#000',
+  areaChart1Color: '#BD9EFF',
+  areaChart2Color: '#96B4FF',
+  startOffset: '17.04%',
+  opacity: '191',
+  endOffset: '17.04%',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  xselectedColor: '#96B4FF',
+  fillChart1Color: 'rgba(56, 172, 255, 0.20)',
+  fillChart2Color: 'rgba(212, 192, 255, 0.20)',
+  startWeekRange: '202323',
+  endWeekRange: '202329'
+};
+const BetweenTwoYears = exports.BetweenTwoYears = Template.bind({});
+BetweenTwoYears.args = {
+  title: 'Sales Growth',
+  value: 30,
+  arrowSign: 'down',
+  benchmarkTotalValue: 40,
+  benchmarkValue: 20,
+  areaChartData: arrDataBetweenTwoYears,
+  width: '250px',
+  height: '280px',
+  textcolor: '#000',
+  areaChart1Color: '#BD9EFF',
+  areaChart2Color: '#96B4FF',
+  startOffset: '17.04%',
+  opacity: '191',
+  endOffset: '17.04%',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  xselectedColor: '#96B4FF',
+  fillChart1Color: 'rgba(56, 172, 255, 0.20)',
+  fillChart2Color: 'rgba(212, 192, 255, 0.20)',
+  startWeekRange: '202356',
+  endWeekRange: '202405'
+};